Front-End
-
React vs Angular vs VueFront-End 2019. 1. 16. 16:24
원문: https://medium.com/@TechMagic/reactjs-vs-angular5-vs-vue-js-what-to-choose-in-2018-b91e028fa91d 얼마 전 저희는 Angular 2와 React를 비교하는 글을 게재하였습니다. 해당 글에서, 두 프레임워크의 장점과 단점을 설명하며 2017년에 목적에 따라 무엇을 선택해야 하는지를 제시하였습니다. 그렇다면 2018년 프론트엔드 시장에서는 무슨 일이 일어나고 있을까요?JavaScript 프레임워크는 매우 빠르게 발전하고 있는데, 업데이트가 빈번한 Angular와 ReactJS, 또 다른 플레이어 Vue.js가 오늘날 시장을 점유하고 있습니다.저희는 특정 프레임워크에 대한 사전지식이 필요한 일자리의 수를 분석하였습니다. indee..
-
Rappid / JointJS 프로젝트 완료Front-End 2018. 12. 21. 15:58
AngularJS 기반 JOINTJS 관련 설정 프로젝트 구조. Rappid / JointJS 관련 관계도설정 프로젝트에 사용하면 유용할 것 같다. 강력한 라이브러리 들이 많이 나와서 개발하기 한결 편해졌지만, 프론트앤드의 프레임웍의 급변으로 클라이언트의 요구가 다양해 지고 있다. 백엔드야 스프링 + Mybatis + 오라클 / MySQL 형태의 구조로 한결같이 버전업 되어 가면서 점점 단단한 개발자 층을 확보하게 되었지만 (물론 인력을 구하자 하면 구하긴 쉽지 않다하지만...) 프론트같은경우는 개발자 자체도 희소한데다가 시장의 변화도 너무 빨라서 살아 남으려면 정말 끊임없는 공부가 필요한 시기다. 덕분에 Angular / Vue / React 를 왠만큼 다를줄 안다면 경쟁력이 높다 생각한다. 내가 입문..
-
Intellij 코드 자동정렬 Ctrl + Shift + FFront-End 2018. 11. 6. 16:06
코드에 줄맞춤 제대로 안되어 있으면 가독성이 너무 떨어진다. 일단 신입때 줄맞춤 때문에 많이 쪼임을 당한 기억이 있어서... 신경쓰는 편이라 제대로 안되어 있으면 미칠거 같다;;; 개발자들 대부분이 갖고 있는 신종 정신병일 수도 Before $scope.sapInfo = { sapId : "", sapName : "", layerProtocol : "", cpRole : "", addressType : "", l2 : "", l3 : "", dhdp : "", floationIp : "", ipType : "", numOfIpAddr : "", associatedCpd : "", nsVurtualLink : "", } After$scope.sapInfo = { sapId : "", sapName : ""..
-
JointJS 필요부분 정리Front-End 2018. 11. 2. 13:31
링크 Arrow 모양 변경 https://jsfiddle.net/vtalas/4copge0m/ 링크 양방향 화살표 없애기defaultLink: new joint.shapes.app.Link({ markup: [ '', '', '', '', '', //'' ].join(''), }), Object 간 Link연결시 이벤트 모니터링 graph.on('change:source change:target', function(link) { if (link.get('source').id && link.get('target').id) { // both ends of the link are connected. } }) 스텐실 Custom Object 생성{ type: 'devs.Model', attrs: { body :..
-
-
CSS 공부 추천Front-End 2018. 4. 24. 17:15
반응형 웹 스크린 대응반응형 웹 스크린을 대응하는 것만 보면 책을 사는것보단 구글에 '반응형 웹' 또는 'responsible width in css'로 검색해서 나오는 블로그나 bootstrap guide를 통해서 익히는게 더 좋을 수 있어요. (책은 너무 세세하고 방대하게 나와있어서 쓰지도 않는 지식까지 봐야하는 부담감이 있다고 생각해요.) 몇가지 추려서 권해보면 다음과 같아요.첫째직접 세팅하려면 다음의 블로그를 읽어보세요. 하나하나 반응형 웹을 이해하려면 사실 기술적인 부분보다는 디바이스 넓이와 해상도를 이해하는 부분도 필요하기때문에 조금 복잡할 수는 있습니다. / 출처:CSS3 @media query를 이용하여 반응형 웹 스크린 크기 대응하기둘째CSS-Tricks 라는 외국 블로그에 있는 내용들이..
-
CSS position 속성Front-End 2018. 3. 28. 13:36
CSS 에서 특정 요소의 위치를 지정하는 속성으로 position 속성이 있습니다. 이 position 속성을 이용해 요소의 위치를 지정하는 다양한 방법을 알아 봅시다.position 속성에는 아래의 값들을 사용할 수 있습니다.initialinheritstaticfixedrelativeabsolutesticky이 값 들중 initial 이나 inherit 은 다른 요소에서도 동일하게 적용되는 것들이니 따로 기록으로 남기지 않겠습니다. 또한 sticky 의 경우 아직 정식적으로 모든 브라우저가 지원하는 케이스가 아니니 이 또한 기록으로 남기지 않고, 나머지 4개( static | fixed | relative | absolute )에 대해서만 알아보겠습니다.staticposition 을 아무것도 지정하지 ..
-
HTML 태그 정리Front-End 2018. 3. 28. 10:28
HTML 태그 정리 명칭구성내용html... head머리말meta정보에 대한 정보를 알려줌. 빈태그, self closetitle...문서 제목body...본문p...Paragraph의 P : 단락, 문단, 절h1 ~ h6...제목, 글자 크기, 요즘은 중요도 우선순. h1은 화사 로고에 많이 표시hr단락 구분. 문서의 구분선주석태그주석br break, 줄바꿈을 해줄때div...division의 약자. HTML 문서 영역이나 섹션의 분할을 정의한다.span...inline요소, 줄바꿈이 안되고, 폭 , 높이 적용도 안됨. 인라인요소들을 그룹화 하는데 사용되며, 브라우저에 레이아웃 변경은 되지 않는다.table...표, border, cellpadding, cellspacing, width, summary..
-
@Input 데코레이터Front-End/Angular 2018. 2. 8. 11:33
@Output EventEmitter 로 데이터 통신하는 방법과 이번에는 @Input 에 대해 사용법을 알아 보면 바인딩할 프로퍼티명을 지정. @Component({ selector : 'order-processor', template : ` Buying {{ quantity }} shares of {{ stockSymbol }} `, styles : [`:host { background : cyan; }`] }) export default class OrderComponent { @Input() stockSymbol : string; @Input() quantity : number; } @Input으로 stockSymbol, quantity 값 지정 @Component({ selector : 'inpu..
-
Componentt 간 통신 EmmitFront-End/Angular 2018. 2. 7. 10:53
컴포넌트간 데이터 전달 캡슐화가 확실히 잘되어있다라고 느낌. 예를 들어 위와 같이 Child에서 발생한 Event 를 Parent 컴포넌트에 전달시켜 주려면 @Output() 이란 어노테이션을 사용해야 한다. EX). user-info 라는 컴퍼너는를 포함한 Component Parent 가 있다고 하면 user-info 가 Child 포함한 Component Parent 가 Parent 가 된다 말이 이상하네.. a user-info 에 EventEmitter 를 등록 클릭시 emit 해준다고 가정 user-info Component@Output() gnbOpenEvent = new EventEmitter(); gnbOpen(){ console.log(">>> gnbOpen called Child > ..