본문 바로가기

전체 글

(24)
this 책을 사둔지는 오래인데.. 아직 반도 못읽어서.. 처음부터 다시 정리하면서 읽어야 겠다..ㅎㅎ You don't know JS - this와 객체 프로토타입, 비동기와 성능 1장 자기 자신?? function foo(num) { console.log(`foo: ${num}`); this.count++; } foo.count = 0; var i; for(i=0; i 5) { foo(i); } } console.log(foo.count) // 0 this는 함수 그 자체를 가리킨다?? 이건 많이 하는 오해이다. 위 예시 코드를 보면 foo 함수가 실행 될 때 마다 함수 안에 this.count를 증가시킨다. 그리고 나서 몇 번 호출하고 난 결과는 0이다. foo.count 와 foo 함수 안에 this.co..
typescript에러 발생 시 터미널의 오류 Cannot find name 'unique'. Cannot find name 'symbol'. 아이오닉 빌드 후 화면에 나타난 오류 회사 아이오닉 프로젝트를 새로운 pc에서 빌드를 하려고 하는데 오류가 발생해서 빌드를 계속 실패 했다. 당시에 angular-cli 버전도 9버전대 여서 6버전대로 낮추고 최대한 빌드가 잘됐던 상태로 버전을 다 낮췄다. 위와 같은 typescript에러가 발생해서 typescript 쪽만 보고 구글링을 했는데 아무리 찾아도 답을 찾을 수 가 없었다. 그래서 node_modules쪽에 소스를 직접 봐야겠다 하고 보다보니깐 이런 @types라는 모듈을 찾을 수 있었는데 여기 안에 node디렉터리에 ts 3버전대 만 있는 걸 확인 했다. 근데 프로젝트 typesc..
g++: command not found 에러 cent os7에서 react 프로젝트를 빌드하려고 npm i 명령어를 실행하면 위와 같이 g++ 명령을 찾지 못했다는 에러가 발생했다. 이 경우에 sudo yum install gcc-c++ 명령어로 해결했다. 추가로 react version이 낮은 프로젝트여서 그런건지는 모르겠는데 npm i 명령 실행 시 node-gyp 에러가 계속 발생했었다. 이 때는 node 버전을 좀 낮춰서 npm i 명령을 다시 실행 하니깐 해결 됐다. 다 테스트를 해 본 건 아니지만 node버전을 v6 대로 낮췄을 때 해결됐었다. 참고: https://unix.stackexchange.com/questions/140350/linux-g-command-not-found linux + g++: command not found ..
node.js version 관리 n 버전 변경 안되는 현상 https://www.npmjs.com/package/n n Interactively Manage All Your Node Versions www.npmjs.com ( cent os 7에서 사용 ) node.js 버전을 쉽게 변경 가능하는데 유용해서 사용하게 되었는데 아무리 버전을 설치해서 바꿔도 node.js 버전이 바뀌지 않는 문제가 있었다. 버전을 바꾸면 이런식으로 나타났는데 installed된 노드 위치와 active된 노드의 위치가 달라서 노드 버전을 계속 새로 설치하고 버전을 변경해도 active된 노드는 바뀌지 않았다. 이런 경우에 symbolic link를 변경해주어야한다는 걸 구글링하면서 찾았다. sudo ln -s /usr/local/bin/node node installed된 위치에 ..
create-react-app을 github page로 배포하기 레퍼지토리에 올려놓은 create-react-app으로 만든 앱을 github page로 호스팅 할 수 있습니다. 방법은 https://facebook.github.io/create-react-app/docs/deployment Create React App · Set up a modern web app by running one command. Set up a modern web app by running one command. facebook.github.io 이 페이지에 자세히 나와있고 생각보다 금방 세팅할 수 있다. 추가로 클라이언트에서 라우팅 하는 부분은 github page에서 제공해주지 않아서 추가로 설정해줘야 할 게 있다. 해쉬 라우팅을 사용해서 해결했다. react-router-dom 모..
will-change UI나 UX가 괜찮아보이는 페이지를 보고 따라 만들어보는 중에 transform을 사용해서 hover로 변경될 때 애니메이션을 적용했다.근데 애니메이션이 약간 버벅인다고 해야되나 부드럽지 못하게 보였다. 퀄리티가 정말 떨어져보이고 별로 안 예뻐서 찾아보던 중에will-change라는 css속성을 찾았다. will-change: transform; 이 한 줄 추가되니깐 애니메이션이 부드러워지는 걸 봤다.브라우저에게 엘리먼트가 어떤 변경을 할 것인지 미리 알려주는 속성이라고 한다.참고글을 보니깐 transform으로 처리되는 부분과 엘리먼트를 따로 관리하고 다시 합쳐서 출력하는 중에 지연이 생겨서 처음에 버벅이는 현상처럼 보였던 것 같다.transform은 GPU가속이 자동으로 활성화 되지 않아서 렌더링이 ..
innerHTML 사용 시 css 깨질 때 string으로 넘어온 html태그들이나 통째로 html 태그들을 받아서 화면에 출력해야 할 때 innerHTML 을 사용하여 그대로 출력하는 방법이 있다.그런데 innerHTML로 출력할 html에 컴포넌트에 적용된 css들에 영향을 받아 innerHTML에 출력할 부분의 css가 깨지는 경우가 있었다. 이 때 string html을 DomSanitizer.bypassSecurityTrustHtml 이라는 함수를 사용해서 SafeHTML 형태의 데이터로 변환후에 뷰에 출력했을 때 string형 html에 적용된 css 그대로 출력되었다. DomSanitizer를 의존성 주입을 받고 1this.DomSanitizer.bypassSecurityTrustHtml(stringHTML)cs 이렇게 사용한다.by..
NgZone으로 실행되지 않거나 멈춤현상이 일어나는 현상 해결 angular에서 Router로 다른 경로의 페이지로 이동할 때 이동하고 나서 컴포넌트가 생성이되다가 멈추는 현상이 발생하는 경우가 발생했다.특히 찾다보니 외부 라이브러리를 가져다 쓰는 경우에 앵귤러에서 제대로 감지하지 못하는 경우가 발생하기 때문인 것 같아 보인다. 이런 현상은 꼭 Router로 인한 것 만은 아니고 여러 경우가 있는 것 같다. 당시 현상은 컴포넌트가 생성이 되다가 멈춰서 ui가 그려지다 말아서 그런지 깨져서 보이고 또한 컴포넌트를 조금씩 클릭하거나 변화를 주려고 하면 다시 생성을 멈춘게 작동을 해서 다시 컴포넌트가 생성이 되긴했다. 이 때 NgZone을 의존성 주입받아서 Router.navigate 함수를 NgZone.run 함수로 감싸 실행해서 해결 했다. NgZone은 앵귤러 안에..