[코드스테이츠 FE 부트캠프 40기] 메인 프로젝트 회고와 꿀팁 2탄

✨[코드스테이츠 FE 부트캠프 40기] 메인 프로젝트 회고와 꿀팁 1탄

⬆️아이디어 미믹, 기획, 디자인, api 문서 작성, 화면정의서 작성한 이야기가 궁금하다면

---

🏃🏻‍♀️개발에 본격적으로 들어가기 앞서 탄탄한 밑작업!

 

👍🏻잘했던 점: 
-개발에 들어가기 앞서서 css global style 미리 다 선언한 것
-아이콘등의 이미지 에셋을 svg로 다 첨부해놓았던 것
-타입스크립트를 도입한 점

👎🏻아쉬웠던 점:
-이건 그냥 개인적인 아쉬움인데 리액트 쿼리를 못썼다는 점. 좀 무리해서라도 리액트 쿼리까지 도입했음 어땠을까 싶다. 

 

이제 각종 문서와 디자인 작업을 마치고 드디어 본격적인 개발에 들어갔다.

 

개발에 본격적으로 들어가기 앞서 

styled component의 global style로 

자주 쓰이는 컬러, 헤더 높이, 폰트 사이즈를 변수로 지정했고,

 

디자인에 사용했던 아이콘 svg 파일을 제작해서 첨부했다!

팀원들이 개발 이외의 일들로 작업이 막히는 일이 없길 바라며 미리 해뒀는데

나중에 조금씩 추가된것도 있지만,

대부분 개발에만 집중할 수 있어서 해두길 잘했다 싶었다.

팀원들이 편하게 이용하는 모습을 보며 아주 뿌듯했다.

 

게다가 CRA를 이용하는 특성상 svg로 저장한 일도 잘했던 일이다.

 

그리고 프론트 팀원들끼리, 백엔드 팀원들끼리 기술 스택을 정했다. 

정해진 기술 스택은 아래와 같았다.

 

 

프론트 기술스텍에서 타입스크립트에 대해 고민을 많이 했는데,

과연 처음 경험에보는 이 기술을 이 바쁜 와중에 잘 해낼 수 있을까 하는 것이었다.

 

그래도 "그래 일단 해보자!!"하면서 팀원들끼리 해보기로 결정해서 밀어붙였다.

현업에서 많이 쓰이는 만큼 처음 할 때는 많이 해맸지만 지금은 잘했다 싶다.

에러 핸들링도 편하고 타스 맛보기에 아주 좋았다는...

비록 아직 활용도는 조금 부족하겠지만, 타스와 친해지는 계기가 되었다.

 

대신 애초에 고려했던

React-query는 빼기로 했다.

recoil과 궁합이 잘 맞다는 팀원분의 정보에 꼭 사용해보고 싶었지만....

타입스크립트 적용하기도 바쁠 것 같다는 생각에 이번 프로젝트는

그냥 axios로 통신하기로 결정했다.

 

그리고 정해진 스택들을 공유하며

프론트 팀원들과 함께 미니멀하게 환경을 세팅해나갔다.

 

뺄건 빼고 넣을건 넣고..! 깔끔하게 폴더구조까지 정해놓으니

뭐든 할 수 있을것만 같은 기분이 들었다.

---

🏃🏻‍♀️공통 컴포넌트 개발 : 컨테이너 컴포넌트

 

👍🏻잘했던 점:
-컴포넌트 중에서도 우선순위를 정해서 컴포넌트에서도 쓸 수 있는 컴포넌트를 우선제작한 점.
-팀원들이 내가 제작한 컴포넌트를 어떻게 하면 더 잘 활용할 수 있을까 연구하고 문서로 남긴점

 

드디어 기나긴 회의와 결정의 연속을 지나

개발에 들어갈 단계가 되었다.

 

타입스크립트는 공식문서와 핸드북을 읽어가면서 +

메인프로젝트 들어가기 전에 벼락치기로 들어뒀던 노마드 코더님의 무료 강의를

쥐어짜내가면서 처음엔 익숙하지 않다보니 당연히 시간이 더 오래 걸릴 수 밖에 없었다.

 

처음 개발이 들어갔던건 공통 컴포넌트이다.

여러 페이지에서 공통적으로 들어갈 수 있는 유연한 컴포넌트를 제작했다.

 

일단 내가 맡은 부분은 모든 페이지에서 레이아웃을 잡는 데에 공통으로 쓰이는

컨테이너 두개를 제작했다.

 

퍼블리셔 시절의 경험을 미루어봤을 때,

이것들이 없음 앞으로 반응형 분기에서 패딩과 마진값이 제각각이란걸 알았기 때문에,

가장 먼저 제작했고, 이 컨테이너 컴포넌트를 이용한 또다른 컴포넌트를 제작할 수 있었다.

 

컴포넌트에도 우선순위를 정해서 들어간게

두번 세번 작업없이 효율적인 개발을 할 수 있게 한 부분이었던 것 같다.

그리고 이부분을 팀원들이 잘 이해하고 십분 활용하길 바라며 위키로도 남겨놓았다.

 

컨테이너 컴포넌트 위키

컨테이너 컴포넌트 위키

문서를 제작할때, 너무 어렵게 설명하면 오히려 그 문서를 읽는게 힘들어질것 같아

내 나름대로 예시를 만들고 비주얼로 표현하여 

이해하기 쉽게 작성하려고 노력했고

팀원들도 그 정성을 알아주셔서 뿌듯했다.

 

---

😱 과거의 나, 다시 생각해봐

 

그리고 그다음으로 제작에 들어간게

모달 컴포넌트였다.

우리가 레퍼런스로 삼은 인스타그램의 UI는 

모달 팝업으로 엄청나게 점철되어 있는 사이트였다.

 

그래서 여기저기서 자주 쓰이는 모달 컴포넌트를 만드는게 필요했다.

만드는 것 까진 좋았다.. 

하지만 모달로 인해 이렇게 힘들줄은 ... 그땐 미처 몰랐다...

그 이야기는 다음 편에서 마저 하겠다.