본문 바로가기

전체 글

(26)
Angular SSR 시 hammer.js 오류 회사에서 사용하는 컴포넌트 라이브러리인 Kendo UI for Angular 사용할 때 SSR 시 hammer.js 오류가 나는 현상이 있었다. https://www.telerik.com/kendo-angular-ui/components/charts/get-started/ Charts Library Getting Started | Kendo UI for Angular Chart A highly customizable chart of categorical, circular, freeform, and scatter series types. www.telerik.com 서버 측에서 window is now defined. 라는 오류가 나고 있었다. 구글링해보니 바로 hammer.js 에서 발생하는 오류인 걸 ..
postgrespl 설치 homebrew 설치가 안되어 있으면 설치한다. 홈페이지에 있는 명령어를 터미널에 복사해서 설치한다. https://brew.sh/index_ko Homebrew The Missing Package Manager for macOS (or Linux). brew.sh homebrew 설치가 끝나면 아래 명령어 실행하여 postgresql설치. > brew install postgrespl postgresql run 명령어 > pg_ctl -D /usr/local/var/postgres start postgresql 연결 명령어 > psql postgres posgresql 연결에서 나가고 > \q postgresql stop 명령어 > pg_ctl -D /usr/local/var/postgres stop ..
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가속이 자동으로 활성화 되지 않아서 렌더링이 ..