[React][React-practice] Emoji Search

계산기에 이어 다른 실습 예제인 Emoji Search도 실행시켜 보았다.

 

ko.reactjs.org/community/examples.html

Example Projects – React

github.com/ahfarmer/emoji-search

ahfarmer/emoji-search

 

 

 

 

npm 같은 경우 디렉토리명을 camelCase로 쓰면 오류가 난다.

 

그래서 camelCase가 아닌 dash('-')로 연결해주었다.

 

 

 

 

나는 github에 있는 소스를 다운받거나 clone 하지 않고 직접 파일을 만들어 하는 중이었는데

 

중간에 compile 에러가 났다.

 

chrome developer 창에는 안 뜨고 window terminal pomshell 에서 에러의 원인을 찾을 수 있었다.

 

Clipboard 모듈이 없다는 것!

 

 

 

 

해결 방법은 clipboard 모듈 설치하는 것으로 간단했다.

 

npm install clipboard --save

 

 

성공 시 브라우저에서 다음과 같은 화면을 볼 수 있다.

 

 

 

 

* 소스에 PureComponent가 나와서 리액트 홈페이지에서 찾아왔다. 지금 읽고 있는 react-quickly 에서 forceUpdate()는 가급적 사용하지 말라고 했는데 아마 같은 이유로 사용이 제한적이지 않을까 싶다

ko.reactjs.org/docs/react-api.html#reactpurecomponent

React 최상위 API – React

* 나중을 위해 다음 사이트도 첨부해 둔다.

 

wonism.github.io/react-pure-component/

WONISM | 리액트 성능 향상 시키기 - React.PureComponent