pre-project 사전 작업, UI 만들기

사전 작업

저번주에 만든 기획안(사용자 요구 정의서, 화면 정의서, 테이블 명세서, API 명세서)를 바탕으로 코드를 작성하는 단계로 넘어가기전에 사전 준비 작업을 진행하였다.

 

기술 스택 및 코드 컨벤션

가장 먼저한 작업은 기술 스택을 무엇을 사용할지 정하는 것이었다. 사실상 다른것은 거의 고정이었고 전역 상태관리 라이브러리를 무엇을 쓸지가 주요 쟁점(?)이었다.

Redux, Redux-toolkit, Recoil 세 후보가 있었는데, 현업에 가면 거의 무조건 사용하게 될 거 같은 Redux를 사용하는 것으로 의견이 모아졌고, Redux를 쓸꺼면 굳이 기존 Redux가 아니라 공식문서에서도 추천을 하고 있는 Redux- toolkit을 사용하기로 했다.

그리고 협업에서 각자 코드 스타일이 달라서(띄어쓰기나 tab width 등) commit 할 때 미묘하게 달라지는 부분같은 것도 commit이 될 수 있기 때문에 하나의 컨벤션을 고정시켜놓고 사용하는것이 좋다고 한다.

이 부분에서 도움을 주는 eslint, prettier도 사용하기로 했다. 설정같은 경우 찾아보니 airbnb 설정을 추천한다고 되어있어서 이것으로 사용하기로 했다. prettier 설정도 주로 사용하는 설정들을 적용시켜 놓고 필요에 따라서 추가하거나 제거하면 될 것 같다.

 

기타 여러가지

파일 구조, 라우터 path이름, 태그의 classname, 변수명 등등 여러가지 잡다한 것들을 정하고, git commit할 때 컨벤션도 정했다. 일반적으로 사용하는 Feat, Fix ~ 형식의 git commit 컨벤션을 사용할 것이다.

 뭔가 자잘하게 정할게 많아서 생각보다 시간이 오래걸렸다. 

 

 

UI 구현

HTML 요청을 해서 데이터를 받아와 화면에 렌더링 하는것이 주요 기능이기 때문에 백엔드 쪽에서 CRUD 구현을 할 때 까지 프론트에서는 먼저 UI 구현부터 하고 기능 구현은 나중에 하기로 했다.

내가 맡은 파트는 질문 리스트 페이지와 질문 작성 페이지였다. 

 

기능부분이 없어서 그런지 UI를 구현하면서 크게 어려운점은 없었던 것 같다.

* 하나 문제점이 GlobalStyle에 root의 height가 100%로 되어있는데 이렇게 하니 질문 리스트 item을 map함수로 렌더링할 때 item개수가 많아지면 고정된 item의 크기가(height : 150px) 작아지는 현상이 발생했다. 일단은 임시로 min-height를 줘서 해결해놓았는데 좀 더 깔끔한 방법이 있을지 찾아봐야겠다.

 

분명 기획안을 작성할 때는 기능이 너무 많은거 같아서 어지러웠는데 막상 화면을 구성하고 보니 뭔가 휑한 느낌을 지울 수 없는거 같다.

이 많은 기능이 다 어디갔지..

 

UI 구현을 다하고 내일 프론트엔드조가 만나서 merge 하기로 했는데 얼마나 많은 conflict를 만날지 벌써부터 무섭다...