원티드 프리온보딩 사전과제 회고
GitHub 주소
배포 주소
시연영상 유튜브
세 달간의 부트캠프를 수료하고 매일 취업 준비 공부와 간간히 이력서를 넣어보던 중
원티드에서 진행하는 프리온보딩 인터십을 접할 수 있었다.
모집 기간은 12월 14일이지만 가산점 1점을 받기 위해서는 개발할 수 있는 시간이 3일정도 밖에 남지 않은 시점이었고 부랴부랴 그 날 할 공부와 알고리즘 테스트들을 빠르게 정리하고 레포지토리를 만들고 npx create-react-app을 입력했다.
사전과제는 회원가입 / 로그인과 Todo List 구현이었고 한창 Redux를 이용해서 어떻게 기존 프로젝트를 잘 리팩토링할 수 있을까하며 Redux를 만지작 거리던 차에 이번에 한번 써볼까 싶었지만 시간도 얼마 남지 않았고 내가 익숙한 것들만으로 제작해보고자 하였다.
- 사용
react-router-dom / styled-components
1. 로그인 & 회원가입
- 로그인 페이지
로그인 페이지는 하나의 form 컴포넌트에 email & pw 입력창 컴포넌트와 회원가입&로그인 버튼 컴포넌트로 구성하였다.
또한 토큰이 로컬스토리지에 남아있을 경우 /todo 로 리다이렉트 되도록 useEffect에 조건을 걸어놨다.
2. TodoList
- 구성
투두의 경우 크게 두 컴포넌트로 구성하였다. (AddTodo & TodoLists)
3. Blocker
CORS
CORS를 해결하기 위해서 package.json에 proxy 설정을 했다.
하지만 netlify에 배포하고 보니 proxy가 무용지물이었고
검색을 통해 netlify.toml을 루트경로에 추가하고
[[redirects]]
from = "/proxy/*"
to = "https://pre-onboarding-selection-task.shop/:splat"
status = 200
force = true이런 식으로 리다이렉트하도록 설정해주었다.
결과는 잘 작동하는 것처럼 보였지만 /todo 링크로 바로 가게 되면 page not found 경고가 떴다.
구글링 결과 public 폴더에 _redirects 파일을 생성하고 /* /index.html 200 이 리다이렉트 경로를 넣어주면 된다고 해서 업데이트 했지만 이제는 서버와 통신 자체가 404가 떠버리게 되었다.
(계속 구글링...)
일단 문제처럼 보이는 _redirect를 지우고 netlify에
[[redirects]]
from = "/*"
to = "/index.html"
status = 200위 코드를 추가했고 결국 리다이렉트가 잘 작동하게 되었다.
이 문제로 최소 반나절을 소비했음(내일 이 문제에 대해서 공부해서 이 글에 추가 정리해볼 예정)
참고)
