본문 바로가기

Front-end56

AngularJS Controller view의 비지니스 로직을 구현함 DOM Control 부분은 구현하지 않음 Service Singleton으로 구성 Controller 와는 다르게 재사용 가능 Directive 특정한 행위의 기능을 가진 사용자 정의 DOM 엘리먼트 angular.module.('...') .directive('myExample', function() { // TODO }) * ng-app : 아래 body 부분에 angular 코드가 포함되어 있다 * angular.module() : 모듈을 정의하는 함수 angular.module({{모듈명}}, {{압축할 라이브러리들}}) * angular.contoller() : 컨드롤러를 만드는 함수 angular.contoller({{컨트롤러명}}, {{.. 2021. 10. 6.
깃헙 웹페이지 올리기 github.io 1. gh-pages 설치 npm i gh-pages 2. pakage.json 홈페이지 설정 "homepage": "{username}.github.io/{project name}" 3. pakage.json deploy script 생성 1) npm run build 실행 2) build 폴더 생성 3) pakage.json에 deploy script 생성 "deploy" : "gh-pages -d build" 4) pakage.json에 predeploy script 생성 "predeploy" : "npm run build" npm 이 deploy 하기 전에 자동으로 predeploy 실행시켜줌 4. npm run deploy 실행 build 후에 gh-pages 까지 디플로이 된 것을 볼 수 있다.. 2021. 9. 8.
[React] useEffect, useRef useEffect 페이지가 렌더링 될 때마다 불리는 함수 useRef와 일반 변수의 차이 1 2 const countRef = useRef(0) let countVar = 0; cs countRef+1 할 경우 페이지가 unmount 되기 전까지 증가된 값이 남아있다. countVar+1 할 경우 페이지가 재 렌더링 될 경우 값이 초기화된다. useRef 잘못된 사용법 1 2 3 4 5 6 7 const App = () => { const [renderCnt, setRenderCnt] = useState(0); useEffect(() => { setRenderCnt(renderCnt+1); }); } Colored by Color Scripter cs 이렇게 사용할 경우 페이지가 렌더링 되면 render.. 2021. 7. 13.
Fabric, Javascript Canvas Drawing Library Web 드로잉 기능을 구현하기 위해 Javascript Canvas Library를 찾아보았다. 10 Best JavaScript Canvas Libraries in 2021 | Openbase 10 Best JavaScript Canvas Libraries in 2021 | Openbase A comparison of the 10 Best JavaScript Canvas Libraries in 2021: @ngx-canvas/core, paintablejs, react-canvas-wrapper, angular5-canvas-drawer, chart and more openbase.com 위 사이트를 참고해보면 현재 많이 사용되고 있는 canvas library 순서를 볼 수 있다. 1위 차트부터 시작.. 2021. 1. 26.