yehey's 공부 노트 \n ο(=•ω<=)ρ⌒☆

[CEOS - 4~5주차 미션] react-vote 본문

개발/프로젝트

[CEOS - 4~5주차 미션] react-vote

yehey 2021. 8. 29. 15:27

이번 미션은 백엔드와의 협업에서 필수적인 axios 라이브러리를 사용해서 서버와 통신을 하는 것!

지난 미션보다 페이지 수는 적었고 axios 라이브러리를 사용하는 것을 중요하게 생각하고 배웠던 것 같다.

axios 자체는 그렇게 어렵지 않았고 async, await이나 then, catch 과 같이 비동기 개념이 좀 어려웠다.

사실 비동기는 여전히 프론트 개발을 하면서 헷갈리는 경우가 많은데, 그래도  하면 할수록 개념이 잡히고 체화되는게 느껴진다.

 

그리고 쿠키에 로그인 시에 쓰이는 JWT 토큰을 저장했는데, 받은 코드리뷰 중 하나는 여러 페이지에서 쿠키를 사용하는데,

지금은 App.js 에서 cookie를 생성하고 이를 props를 이용해서 넘겨주지만 context 를 이용하면 굳이 props로 단계단계 넘겨주지 않아도 하위 컴포넌트들은 모두 props를 받아서 쓸 수 있다.

 

아쉬웠던 점

  • 일단 css를 적용을 안했다. (못했다.....? 안했다.....? 도저히 투표를 어떻게 꾸며야할지 모르겠어서.....)
  • 코드리뷰에서도 많이 지적받았지만 코드 재사용성이 떨어졌다. (정답은 커스텀 훅..)
  • state 관리가 이제서야 감이 잡혀서 시간을 좀 잡아먹었다. (투표 한번 눌렀는데 2표 투표되고..막...) 

 

그동안 5주 동안 세오스 프론트 스터디를 하면서 배운점이 많았고, 짧은 시간동안 많은 과제를 하다 보니 실력도 나름 빨리 늘었던 것 같다. 역시 뭐든 질질 끌면 좋지 않은 것 같다. 기간은 최대한 짧게, 집중하는게 효율은 잘 나온다.

좋은 사람들을 만나서 힘들지만 즐겁게 코딩할 수 있었고, 다양한 관점으로 생각해보고, 다른 사람의 코드를 읽어보면서 코드리뷰를 남기고, 코드리뷰를 남기면서 공부하고, 다른 사람이 나에게 남긴 코드리뷰를 바탕으로 한번 더 공부하는 뜻 깊은 시간이었다고 생각한다.

코딩공부에 이렇게 집중하고 몰입한 경험은 처음이었는데, 힘들다기보다는 하나하나 배워가는 과정이 의외로 즐거웠다.

 

사실 프론트에 발을 깊게 담궈볼 생각은 전혀 없었는데, 계속 공부하고 코드를 고쳐나가는 과정을 반복하다보니 어느새 너무 멀리 와버렸나 싶기도 하다. 백엔드도 시작해보고 싶은데 아직 스택을 정하지 못했다. 아마 같은 js로 하는 node를 시작하지 않을까 싶다.

세오스 활동이 힘들기는 힘들었지만 배운게 더 많고 얻은게 더 많은 좋은 경험이었다.

 

더보기

axios 요청은 지난 미션 이후로 더 쉽게 느껴졌습니다. 오히려 토큰을 어떻게 처리해야하나 고민 많이 했는데 안내 노션에 쿠키에 대한 링크가 있어서 쿠키에 저장하는 방식을 사용했습니다. 쿠키, 요청 보내기보다 props 전달이 개인적으로 헷갈렸던 것 같습니다. CSS는 아직 완벽하지 않습니다. 아마 더 수정하고 다시 push 하겠습니다 ㅎㅎ..

 

https://github.com/yehey-1030/react-vote-13th.git

 

GitHub - yehey-1030/react-vote-13th: 13기 프론트엔드 4,5주차 미션 react-vote를 진행하기 위한 레포지토리입

13기 프론트엔드 4,5주차 미션 react-vote를 진행하기 위한 레포지토리입니다. 투표 기능을 구현하면서 API Fetching을 활용해 봅니다. - GitHub - yehey-1030/react-vote-13th: 13기 프론트엔드 4,5주차 미션 react-vot

github.com

 

Comments