처음에 프로젝트 구현 사항을 보고 디자인이 따로 되어 있지 않아 조금은 당황했다.
오랜만에 Figma와 Zepline의 소중함을 느끼게 된 계기가 되었다.
역시 프론트엔드 엔지니어는 기획, 디자인, 서버팀과 함께해야 더 멋진 결과물이 나온다:)
폴더 구조는 다음과 같다.
gitignore파일에는 node_modules가 설정되어 있다.
build폴더는 github-pages에서 배포를 할 때 필요한 리소스들을 저장해둔 디렉토리이다.
gh-pages로 react 프로젝트를 배포하는 것은 처음이라 시간이 조금 걸렸다.
어려웠던 점이 있었는데 라우터 설정에서 막혔었다.
BrowserRouter가 익숙한 나에게 갑자기 경로를 찾지 못한다는 에러가 뜨기 생겨났다.
대안으로 HashRouter를 사용하니 경로를 수월하게 찾아줘서 라우팅에 성공했다.
하지만 현업에서 HashRouter를 본 적도 없고 #라는 문자가 url에 붙는 것이 보기 불편했다.
BrowserRouter는 HTML5내 history API(pushState, replaceState, popstate event)를 사용하여 UI를 URL과 동기화 상태로 유지하는 Router이다. SEO에 유리하다.
history API를 사용하면 브라우저 사용 기록을 저장하고 있기 때문에 뒤로가기 앞으로가기를 클릭 시에 저장된 데이터를 가져와서 reload없이 변경할 수 있다.
제공하는 url이 현재페이지와 origin이 같아야 한다는 점에서 에러가 났다.(이 부분에 대해서 라우터에 대한 공부가 필요하다고 느꼈다.)
HashRouter는 정적인 페이지에서 주로 사용하는 라우터이다. 서버의 요청이 브라우저에 와 닿지 않기 때문에 서버는 브라우저에 대한 정보가 없다. 이번 프로젝트에서는 localStorage에 저장했기 때문에 HashRouter를 사용했지만 주로 BrowserRouter가 사용되는 데에는 다 이유가 있다.
조금 더 재미있게 프로젝트를 하고 싶어서 얼마 전 다녀온 아이유 콘서트 관련 사진을 넣어봤다🥰
단순한 프로그램이라고 생각할 수 있지만 신경써야 되는 부분들이 상당히 많은 프로젝트였다.
검색하면서 React v6과도 친해지는 계기가 되었다.
회고
이번 프로젝트에서 가장 공이 많이 들어간 부분은 CSS!
프론트엔드 엔지니어들이 마법사가 될 수 있는 기술인데 늘상 헤메는 것 같다.
더 많이 만들어보고 익숙해져야지!
리팩토링 공부를 더 열심히 하고 싶다. 빠른 시간 안에 가독성 좋은 구조를 가진 프로젝트를 만들고 싶다. commit을 100번 했다는 것도 놀랍고 기능 구현을 다 해도 아쉬운 부분은 항상 남는 것 같다. 입사해서 실무 경험을 많이 쌓고 싶다. 개인 프로젝트는 한계가 있다.
page들을 더 쪼개서 컴포넌트화하는 작업을 추가적으로 구현하면 좋을 것 같다. className BEM을 지키면서 구현해보자.
