VanillaJS SPA 제작 프로젝트
내가 진행한 프로젝트 링크를 먼저 첨부한다.
깃헙 리포지토리 링크
간단한 게시판 형태의 서비스를 프레임워크 없이 SPA로 만들어내는 프로젝트였다.
해본 적 없는 일이라 재밌을 것 같아서 참여하게 되었다.
프로젝트가 끝나기 하루 전이라 간단하게 회고를 남겨보려 한다.
팀 배정 및 프로젝트 시작
간단한 OT와 팀 미팅 후 프로젝트가 시작됐는데,
우리 팀 인원이 6명인데 이걸 개인마다 하는지 팀별로 하나의 프로젝트를 만드는지 궁금했으나
결론은 개인별로 하는 것 같았다...
이럴거면 팀의 의미가 옅어지는 것 같아서 아쉬웠다..🥲
간단하게 vite의 vanilla-ts 템플릿을 통해 프로젝트를 생성하고 eslint와 prettier 세팅 후 프로젝트 구현을 시작했다.
라우팅
이 프로젝트의 핵심은 하나의 html 문서만 두고 js로 이동을 구현하는 라우팅 기능인데,
구글링 후 history API를 이용해 라우팅을 구현하기로 했다.
라우팅의 핵심 로직은 routes 배열에서 location.pathname에 일치하는 route.path를 찾아서 그 route에 해당하는 view(Page 컴포넌트)를 렌더링하는 것으로 했었는데,
구현하다 보니 동적 라우팅이 필요할 것 같아서 정규식으로 매칭하는 방식으로 작업하게 되었다. (상세한 정규식 구현은 구글의 힘을.. 빌렸다..)
결론적으로
routes 배열을 map으로 순회하면서
정규식이 match되면 resolved 속성이 생기고,
해당 속성이 존재하면 (없으면 404페이지가 나옴)
해당 route의 view를 렌더링하는 로직으로 구현하게 되었다.
동적 라우팅을 하며 나오는 변수는 pageParams로 담아서 페이지 컴포넌트에 전달해준다.
컴포넌트
여기저기 자료를 참고하여 리액트와 뷰를 흉내내어 만들어봤다.
모든 컴포넌트는 이 Component 클래스를 상속해서 만들어진다.
예를들면 이런 모양인데,
template 메소드에서 해당 컴포넌트가 그릴 element들을 선언해주고,
그것이 mount되거나 update되면서 target element 하위에 렌더링되는 형식이다.
많은 서칭과 리서칭의 결과물인데, 잘 동작해서 뿌듯하다..
배포
Netlify의 힘을 빌어 정적 페이지 배포를 해봤다. 배포 자체는 간단했는데..
백엔드 서버가 http로 서빙되어 있는데 netlify는 기본적으로 https 서빙이라 https to http 요청 문제가 있었다.
여러모로 찾아보니 netlify 자체 redirect 기능으로 프록시 서버를 두는듯한 효과를 줘서
/api/* 로 요청하게 되면 백엔드 url로 요청하게 해서 해당 이슈를 해결했다.
ps. 컴포넌트 테스트코드도 열심히 작성해봤는데... (내 인생 첫 테스트코드였다...) 생각보다 어려워서 다 쓰진 못했다..
챌린지를 진행하며...
좋았던 점
- 오랜만에 즐겁게 재미있게 코딩한 경험이 되었음. (코딩으로 새벽까지 달렸...)
- 코딩 불감증을 리프레시 한 기분.
- 기본을 다시 살펴본 느낌.
아쉬웠던 점
- 테스트코드를 제대로 모두 작성하지 못한 점..
- 타입스크립트를 잘 몰라서.. 타이핑을 제대로 했는지 모르겠어서 답답함.
- 예상대로 팀의 의미가 굉장히 옅은 과정이었다. ㅠㅠ.. 아쉽다.
다음에도 챌린지에 참여할 수 있으면 좋을 것 같다..는 소감을 남기며 글을 마칩니다.
