2019-05-19(sat)

리액트를 다루는 기술

API 연동

• 프론트엔드 서버(port:3000) 와 백엔드서버(port:4000) 나누어져 개발 중에 있는데 프론트에서 API요청시 호스트를 바꾸어 요청하고 백엔드에서 CORS처리를 해주어야하는 번거로움이 있었는데 webpack의 proxy라는 간단하고 좋은 해결방법이 있었다. 굳!
• Editor에서 포스트 작성하여 서버로 전송 후 해당 포스트 GET 해서 사용자에게 보여주기 까지
• redux-pender 라이브러리 이용 하여 비동기 요청 처리
• async/await 활용하여 post onSuccess시 history 이용 해당 포스트 상세보기 페이지로 이동

회고

• API 연동 과정에서 Action 작성하는 쪽에 postId)라는 괄호가 추가되어있는 오타가 있어 포스트 성공하여 페이지 이동 후 post/undefined로 라우팅 되는 문제가 있었다. (딱히 에러메시지도 않나옴…)
• 이 문제 때문에 3시간은 고생한 것 같지만 덕분에 코드를 더 꼼꼼히 집중해서 본 것 같다. 실수한 나 자신에게 감사합니다!
• 아무래도 책을 보고 따라치는 공부를 하다보니 이해도가 부족한 상태에서 실수를 하게 되면 어느 부분이 문제인지에 대한 명확한 생각이 잘 떠오르게 되지 않는 것 같다.