TIL 210608

 

Facts

- 화요일

- Recoil 미니 프로젝트 리팩토링

- NestJs - React 연동

 

Feelings

- 이제서야 recoil 라이브러리를 어떻게 사용할지 느낌을 잡아가고 있다.

- text를 입력하여 검색하는 component에서는 딱 검색어만 사용할 recoilstate 만 있으면 된다. 리팩토링 전의 코드를 보니, 해당 컴포넌트에서 너무 많은 일을 하려고 했기에 코드 가독성도, recoil 을 제대로 사용한다는 느낌도 없었다. 역시 역할을 완벽히 분리하는 것이 좋은 프로그래밍의 기초인 것 같다.

 

Finds

- NestJs - react 연동에서 CORS 문제가 발생했다. 예전 같았으면 블로그를 전전하며 해답을 찾았을 것 같은데, 이번에는 nest 공식문서를 먼저 찾았다. 깔끔하고 명확하게 원하는 답을 찾을 수 있었다. 이렇게 공식문서를 찾아가는 법도 익숙해지면 좋겠다. 

 

- NestJs - React CORS 해결법

1 . npm i cors

2. main.ts 내부에, app.enableCORS() 코드 작성

3. 추가) react 와 nest 모두 port 3000을 이용하기 때문에 충돌이 일어난다. nest의 main.ts 에서 app.listen() 의 인자를 3000이 아닌 다른 번호로 입력해주자(=> Port 우회)