1월 4주차 주간 목표
프로젝트 관련
- 원티드 프리온보딩 프론트엔드 챌린지 코드 리팩토링 & 배포 & 기술소개서 작성 ➡️(진행중, 80% 완료)
개인공부
- React 공부 ✔️(완료)
- 인프런
모든 개발자를 위한 HTTP 웹 기본 지식수강 ❌(미완료)
1월 4주차에 한 일
원티드 프리온보딩 프론트엔드 챌린지
원티드 프리온보딩 프론트엔드 챌린지에서 만든 TS+React 기반의 Todo 앱을 리팩토링하고, AWS EC2에 배포하였다.
리팩토링
같은 방식이어도 좀 더 좋은 구조를 생각하면서 구현하려고 하다 보니 리팩토링 과정에서 많은 시간이 들었던 것 같다.
예를 들어 기존에는 특정 페이지에 대해 유저의 로그인 여부에 따라 접근을 제한하는 기능을, 특정 페이지가 렌더된 후 동작하는 useEffect에서 유저 권한을 체크하고 Redirect 처리를 했었다. 이는 유저가 접속할 수 없는 페이지일지라도 일단 화면을 렌더하는 것에서 좋지 않은 구조임을 알게되었고, PrivateRoute, PublicRoute 처럼 유저 권한에 따라 접속할 수 있는 페이지에 대한 판단을 Route 단에서 체크할 수 있도록 CustomRoute를 구현하고, 각 페이지마다 알맞은 CustomRoute를 설정해서 화면을 렌더하기 이전에 접속 가능 여부를 판단하는 식으로 구현하였다.
이 밖에도 리팩토링 하는 과정에서 욕심나는 부분이 많아 생각보다 시간을 많이 쏟게 되었다.
목요일까지 1차로 리팩토링을 마친 이후에, 원티드 프리온보딩 프론트엔드 챌린지에 참가하신 다른 분들의 코드를 보면서 더 개선할 점이 있는지, 내가 모르고 있는 개념이 있는지 등을 확인하고 2차 리팩토링을 진행하였다.
이 과정에서 axios를 custom해서 사용하는 것과, 보기 좋은 폴더 구조, 좀 더 좋은 UI/UX를 제공하기 위한 여러가지 방식들에 대해 배울 수 있었다.
배포
AWS EC2에 Todo 앱을 배포하였다.
EC2 인스턴스에 nginx를 설치해서, 80포트로 경로로 들어오는 HTTP 요청을 모두 처리하게 하였고, root 경로("/")로 들어오는 요청은 React App을 build한 결과물인 index.html을 제공하고, api 경로 ("/api")로 들어오는 요청은 pm2가 실행시키고 있는 Express Server로 전달하는 Reverse Proxy 구조를 구현하였다.
최근 팀프로젝트를 진행하면서 팀원들과 같이 VM에 배포를 진행해보았지만, 처음부터 끝까지 내가 직접 배포한 경험은 처음인데, 배포 방법을 공부하면서 다양한 방식으로 배포할 수 있다는 것을 알게되었다.
또한 TS 기반의 FE/BE 코드를 JS로 트랜스파일링할 때 어떤 점을 고려해야하는지와, 배포 과정에서 Proxy 설정을 위해서 프로젝트와 nginx 등에는 어떻게 설정해야 되는지 등에 대해 배울 수 있었다.
이번 주는
개인 프로젝트 PFL의 리팩토링 & 배포를 진행할 예정이다.
프로젝트 관련
- 원티드 프리온보딩 프론트엔드 챌린지 Todo 앱 README 작성
- 개인 프로젝트 PFL 리팩토링 & 배포
