Today 요약
- 멘토님 코드리뷰 답변하기
- 면접 대비
- private vs private readonly
- JWT 토큰
1. What I did?
1. 1 멘토님 코드리뷰 답변하기
이번에 다시 한 번 코드리뷰가 왜 중요한지, 그냥 무턱대고 프로젝트만 하는 건 실력 향상에 도움이 안되는지 절실히 느꼈다. 원티드 사전과제로 진행한 TodoApp(회원가입, 로그인)으로 멘토님한테 코드리뷰를 받고 있는데, 정말 내가 신경쓰지 못한 것들이 엄청나다. 변수 네이밍부터 코드의 맥락도 신경써야 하고, 적절하게 에러처리하는 것부터 조금 더 가독성이 좋은 코드를 작성하기 위한 방법까지 정말 많은 코드리뷰를 받고 있고 그 덕분에 정말 많이 배워가는 것 같다. 이번 프로젝트는 깃허브에 저장되어 있는 나만의 맞춤형 자산이 될 것 같다. 앞으로 프로젝트 하면서 이번 코드리뷰를 참고해서 좀 더 클린한 코드를 작성하도록 노력해보자.
2. What I Learned?
2.1 면접 대비
React를 사용하는 이유에 대해..
웹페이지가 점점 동적으로 변화함에 따라 기존의 자바스크립트 환경에서는 DOM의 변경을 효율적으로 처리하지 못했기 때문에 새로운 대안을 찾았고, 그 중의 하나가 React다. React는 가상 DOM을 이용해 효율적으로 변경사항을 업데이트 할 수 있다. 그럼으로써 기존 리렌더링과 관련한 성능 문제를 많이 개선했다. 그리고 컴포넌트 단위로 개발해서 UI를 작은 조각들로 나누어서 개발할 수 있기 때문에 재사용성이 높고 유지보수하기가 좋아졌다.
또한 Facebook의 지속적인 투자와 리액트 기반의 프레임워크가 발전하는 것도 리액트를 사용하는 이유 중에 하나라고 생각한다. 그리고 많은 개발자들이 사용하고 있어 커뮤니티가 활발한 것 또한 이유가 될 수 있다고 생각한다.
Angular vs Vue vs React
Angular와 Vue는 React에 비해 인기가 떨어진다. 왜 그런걸까? 일단 비교해보자면 Angular, Vue는 양방향 데이터 바인딩을 지원한다. 저번에 양뱡향 패턴의 문제에 대해 배웠지만, Vue는 VueX, Angular는 RxJS를 사용하면 이 양방향 패턴의 문제를 어느 정도 해결할 수 있다고 한다. 그럼 이건 리액트만 강점을 가지고 있다고 보기도 어려울 것 같다. 그렇다면 프레임워크와 라이브러리의 차이일까? Vue, Angular는 프레임워크다. 반면 리액트는 라이브러리다. 자기가 원하는 방식으로 웹페이지를 구성하는데는 아무래도 라이브러리가 좀 더 유연하지 않을까? 그리고 현재 시점에서는 Next.js와 같은 리액트 기반 프레임워크나 리액트에서 사용할 수 있는 라이브러리(리액트 라우터, 리액트 쿼리.. 등)가 Vue, Angular에 비해 많은 것도 React가 Vue나 Angular보다 인기가 있는 이유 중에 하나 일 수 있다고 생각한다.
사실 다른 프레임워크는 사용해보지 않았지만, Next.js의 경우 너무나 편리하다. Vue의 경우는 Nuxt.js가 있는 걸로 알고 있다. 하지만 Next.js만큼 인기가 있는 것 같지는 않은데.. 이 부분은 내가 경험해보지 못한 영역이니 나중에 직접 사용해보고 비교해보는 시간을 가져보면 좋을 것 같다.
2.2 private vs private readonly
- private은 클래스 내부에서만 사용가능하다.
- private에 readonly를 추가하게 되면 더 엄격하게 불변성을 유지할 수 있다. readonly를 추가함으로써 클래스 내부에서도 변경이 불가능하고 읽기만 가능하게 하도록 할 수 있다.
2.3 JWT토큰의 발급시점과 불러오는 시점
- 일단 멘토님이 불러오는 시점이 언제인지를 물어봤는데, 발급 시점과 불러오는 시점의 차이도 제대로 인식하지 못하고 있었다. 그랬다가 구글링하면서 알아보면서 회원가입을 하면서 인증이 완료되면서 토큰이 발급되고 로그인을 하면서 저장된 토큰을 불러오는 게 일반적이라는 걸로 이해했다.
