코드숨 리액트 7주차 회고

 코드숨 리액트 과정에서 이번 7주차는 로그인에 대해 공부했다.

 

 실제로 로그인 기능을 구현해보는 시간이였는데, 로그인 페이지에서 email과 password를 입력하면 입력값을 redux에 저장하고, 로그인 버튼을 누르면 redux에 저장한 값을 바탕으로 postLogin 액션을 dispatch 시켜서 실제 서버의 응답을 받아 데이터베이스에 존재하는 회원이라면 accessToken을 발급받아 redux에 저장한다. 이 accessToken을 localStorage와 redux에 저장함으로써 리뷰 작성과 같이 로그인이 필요한 기능을 사용할 때, accessToken으로 실제 회원인지 아닌지 인증할 때 활용하며 페이지를 새로고침 할 때마다 로그인 정보를 날아가지 않도록 하는 법을 배웠다. 과거에 로그인 정보를 localStorage에만 저장했어서 만약 게시글 작성과 같은 로그인을 필요로 하는 작업을 할 때 사용자의 로그인 상태를 redux로 알 수 있는 방법도 있지 않을까라는 고민을 한 적이 실제로 있었는데, redux의 state에 accessToken값을 저장하고 로그인이 필요한 행동을 진행할 때, state에 존재하는 accessToken 값을 받아와 action을 실행하면서 accessToken값이 존재하지 않으면 action을 수행하지 않는 방식을 배울 수 있어서 좋았다. 이런 과정이 백엔드와 같이 협업하는 느낌이 들어 실제 프로젝트와 유사한 개발 과정을 배우는 거 같아 몹시 설레고 재밌었다. 

 

 given이라는 라이브러리를 배웠다. 기존 리덕스를 이용하는 테스트 코드를 작성하는 경우, 필요한 조건을 걸어줄 때마다 useSelector로 일일이 state에 대한 조건을 작성해줬어야 했는데, given을 사용하게 되면 state에 대한 조건도 간단하게 작성할 수 있고 lazy한 평가를 할 수 있기 때문에 테스트 코드 작성이 수월해지게 됐다. 앞으로 리덕스를 사용하는 테스트 코드를 작성할 때 given을 활용하도록 해야겠다.

 

  아샬님의 강의를 들으며, 리뷰에서도 느낀 부분이지만 같은 파일 내에서 반복되는 코드가 두 번 이상 존재하면 함수나 반복문을 이용하여, 다른 파일 내에서라면 utils라는 자바스크립트 파일을 만들어 import 해오는 식으로 코드를 더욱 간결하게 만든다. 코드가 짧다고 무조건 좋은 코드라는 건 당연히 아니고 utils에 존재하는 함수를 확인해야 한다는 번거로움도 있겠지만, 하나의 함수를 한 번 이해하면 계속해서 반복되는 코드를 읽는 것보다 더 집중하며 코드를 읽을 수 있어서 문제를 해결할 때나 리팩토링 할 때 훨씬 더 수월해지고 무엇보다 보기 좋은 코드라는 장점을 배우게 됐다. 앞으로 코드를 작성하면서 반복되는 부분이 존재한다면 먼저, 이 반복을 함수로 만들어 줄이는 것이 줄이지 않을 때보다 더 큰 메리트를 갖는지 생각해보고 메리트를 갖는다라!라는 결론을 내리게 되면 반복을 간결하게 줄일 수 있도록 바꿔야겠다.

 

 환경 변수 라이브러리인 dotenv-wepback을 이용하여 개발 환경과 배포 환경에서의 환경 변수를 다르게 둘 수 있는 기능을 배웠다. 코드숨 과정이 아니었다면 이런 부분을 생각하지 못했을 텐데 이런 것도 배워갈 수 있어서 좋았다.

 

 이제 오지 않을 것 같았던 마지막 주가 다가왔다. 마지막 주는 하던 대로 열심히 하면서 아쉽다고 느낀 부분도 최대한 보완하며 유종의 미를 거둘 수 있도록 해야겠다.