동아리 코드잇 부스트에서 토이 프로젝트를 진행했다.
프론트 1명, 백엔드 1명으로 구성되었고 총 3주동안 이루어졌다.
시간이 촉박할 것 같다 라는 생각이 들어서 제공된 기능들 중 중요한 부분들과 무리가 되지 않는 선에서 볼륨을 설정하였다.
기술 스택 선정
혼자서 단기간에 개발해야했기 때문에 그냥 내가 사용하기 편한 기술들을 선정했다.
기본 세팅
리액트를 기반으로 하였고 번들러로는 vite, 언어는 타입스크립트를 사용하였다.
타입 안정성 + 명시적 프로그래밍으로 널리 사용되는 타입스크립트
이번 기회에 간단히 써보았다.
스타일
styled-components
첫 프로젝트에서 용이하게 사용하였고 마음에 들어서 채택.
일단 스타일 코드를 분리할 수 있으며 컴포넌트 단위로 스타일을 관리할 수 있어서 tsx 코드가 깔끔하고 관리하기 편했다.
단 렌더링 될 때마다 스타일을 불러오기 때문에, 규모가 커질 경우 속도 측면에서 불리할 수 있다.
tailwind도 인기가 많고 대중적이다. 정적 스타일을 제공하기 때문에 캐싱에 유리하고 보다 빠른 속도를 제공한다.
하지만 러닝커브가 존재하기 때문에 다음에 사용해보기로 했다.
해당 프로젝트는 규모가 크지 않았기 때문에 큰 속도 이슈가 없을 것이라 판단하여 그냥 사용하였다.
전역 상태 관리
zustand 를 설치하긴 했지만 결론적으로 전역 상태 관리는 하지 않았다.
전역 상태 관리 라이브러리로 recoil을 사용했었는데, 번들 사이즈가 크고 개발이 중단 되었기 때문에 다른 라이브러리를 찾아볼 필요가 있었다.
그 중 zustand를 발견하였다. 적용법이 쉬워 러닝커브가 없을 것이라 생각하였고, 무엇보다 번들 사이즈가 작으며 provider가 없기 때문에 렌더링 측면에서 유리하다.
일단 라이브러리를 설치하기는 했지만, 굳이 전역적으로 상태를 관리할 필요성을 느끼지 못하여서 사용하지 않았다.
대부분 데이터는 api 요청을 통해 처리 가능하였으며 컴포넌트가 깊어지지 않아서 props를 통해서도 복잡하지 않게 상태를 관리할 수 있었다.
서버 통신
axios
fetch 를 써볼까 하였지만 개인적으로 axios 가 더 손에 익었기 때문에 !
axios 가 확실히 처리해야할 요소가 줄어들기 때문에 간편하다 (JSON 변환이나 오류 처리)
axios 도 번들 크기가 무거워질 수 있지만, 마찬가지로 작은 프로젝트이기 때문에 무리가 없을 것이라 판단하였다.
배포
vercel을 통해서 빠르게 배포했다.
사실 사용할 수 있는 기술이 한정적이기 때문에 기술 스택은 미리 결정해둔 것과 다름 없지만, 그래도 해당 기술들이 가지는 장점과 단점들에 대해 찾아보면서 앞으로 협업을 진행하며 기술 스택을 선정할 때 어떠한 근거를 내세워야할 지 생각해볼 수 있었다.
컨벤션 및 스프린트
컨벤션
main 브랜치 <- devleop 브랜치 <- 개발 브랜치
기능별 개별 브랜치를 생성하여 개발하였다.
이슈의 경우 혼자 개발하였기 때문에 필요성을 느끼지 못하였고 생략하였다.
머지는 PR을 통해서 진행하였다.
사실 혼자하는 것이었기 때문에 main 브랜치에 구분없이 작성할까 했었지만 그냥 연습도 할 겸 평소처럼 진행했다.
커밋 메세지는 형식을 맞추어서 작성하였다.
습관화 시키면 좋기 때문에..
husky는 따로 설정하지 않았다.
스프린트
2주동안 각자 개발 + 1주동안 API 연결을 하는 스프린트 설정
API 연결이 연결 코드 작성 + 렌더링 처리까지 진행해야하기 때문에 기간이 참 애매했지만,, 최대한 스스로와 타협했던 것 같다.
회고 및 세부 스프린트 설정은 이틀마다 진행하였다. 기간이 짧았기 때문에 스프린트랑 회고도 짧고 빠르게 !
개발
https://github.com/P1su/zogakzip_client
GitHub - P1su/zogakzip_client
Contribute to P1su/zogakzip_client development by creating an account on GitHub.
github.com
피그마를 제공해주어서 조금 더 짜임새?있게 진행했던 것 같다.
gap이 이렇게 주어졌으니 이렇게 컴포넌트를 묶으면 되겠구나, 전체 padding 값은 이렇게 주면 되겠구나, 이렇게 분리하면 되겠구나, 이렇게 재사용하면 되겠구나 등등.... !
컴포넌트를 더 쪼개고 재사용하고 싶어서 화면만 쳐다본 시간도 많았던 것 같다.
결국 중간에 시간의 부족함을 느끼고 마구마구 작성하였다.
API 연결은 깔끔하게 진행했다.
사실 뷰 구현 스프린트를 지키지 못해서 instance도 생성하지 않았고 그냥 컴포넌트 파일 중간에 axios 코드를 박아버렸다. 데이터 받아오는 부분에서는 큰 어려움 없이 잘 해결했다.
기술적인 부분에 대해서는 개별 포스팅으로 작성해볼 예정이다.
결과 및 후기
2등 ㅋㅎㅋ 사실 너무 급하게 했어서 뭐 3등도 못할 줄 알았다.
백엔드 팀원분도 프로젝트가 처음이라 하셨는데, 너무 고생많으셨다.
특별상도 받았다.
커밋 열심히 달길 잘했다는 생각이 들었다.
타입스크립트 사용
사실 타입스크립트를 그렇게 잘 사용하지는 못했던 것 같다. props 타입 설정해준 것 밖에 없는 것 같고, 반복되는 타입도 파일로 관리한다던가 상속을 사용한다는 등 다양하게 다루어보지 못해서 아쉬웠다.
초기 세팅
깃허브에 레포 올리고 폴더 구조 정리, 기본 코드 작성 등은 이제 익숙해진 것 같다.
대신 tsconfig 파일에 대해서 조금 공부를 했었다. 다양한 컴파일 옵션들이 존재한다는 것을 알았고, 아직 전부 접해보지는 못했지만 차차 알아갈 수 있을 것이라 생각한다.
