1차 프로젝트 회고록

📚프로젝트에 대하여

프로젝트 때의 내 모습...
1차 프로젝트가 끝났다.

📌프로젝트 소개

thisisneverthat은 컨템포러리 패션 브랜드다.
평소에 관심이 있던 브랜드이기도 했고, 개발자의 눈으로 홈페이지를 둘러보니 너무 과하고 화려하지도, 부족해보이지도 않아서 첫 프로젝트인 만큼 완성도를 높이는 것에 중점을 두자는 마음가짐으로 선정하게 되었다.

진행 기간 : 2022.06.20 ~ 2022.07.08
진행 인원 : 5명

프론트엔드 Git 링크
백엔드 Git 링크

📺구현영상

🛠기술 스택

Front-End

• JavaScript
• React
• Router
• Sass
• Git & GitHub

Back-End

• Node.js
• Express
• Restful API
• JWT, Bcrypt
• Prisma
• MySQL
• Git & GitHub

🗄DB Modeling

💡구현 기능

Front-End

• Login 페이지
  • 회원가입
  • 로그인
• Nav/Footer
  • Search Bar 구현 - Modal
• Main 페이지
• Collection 페이지
  • 제품들을 보여줌
  • category에 따라서 분류해서 볼 수 있음
  • 제품 아래에 컬러 이미지 클릭을 통해 다른 컬러의 제품을 볼 수 있음
• Top20 페이지
  • 각 제품들을 판매량에 따라 순서대로 나타냄
  • 각 제품에 마우스를 올리면 마우스 커서 뒤로 제품의 이미지가 확대되서 포인터를 따라다님.
• Product 페이지
  • 컬러 이미지 클릭시 다른 컬러 페이지로 이동
  • 이미지 슬라이더 구현
  • 이미지, Size&Fit, Shipping - Modal
• Cart - Page, Modal
  • 카트에 제품을 담으면 장바구니에 담긴 제품 수량이 올라감
  • 카트에서 수량 변경, 제품 카트에서 삭제 가능

Back-End

• 로그인 API
• 회원가입 API
• 비밀번호 찾기 API
• 필터 조건, 정렬 조건 API
• nav를 위한 category API
• TOP20을 위한 판매량 API
• CART API
• 상품 리스트 API
• 제품 상세 API

🙋내가 맡은 역할

1. Front-End 초기 설정
2. Back-End Collection 페이지 API
3. Product 페이지

🤔느낀 점에 대하여

코딩을 하면서 느낀 점

초기 설정을 하면서 2주동안 백엔드 공부를 하면서 까먹었던 React에 대해 다시 익혀갔다. 처음에 배웠을 때는 이해하지 못했던 코드들을 초기 설정을 하면서 이해했고, npm install로 필요한 패키지들을 설치하면서 package.json 파일을 어느정도 이해했다.
대학교 때도 그랬지만 개발 공부를 하면서 느끼는 것중에 정말 어렵지만 중요한 부분이라고 생각이 들던 게 개발환경 설정인 것 같다. 여러 언어를 배우고 코딩을 해봤지만(대부분 얕았다.) 할 때마다 이런 환경 설정 부분이 개인적으로 가장 어렵기도 하고 이해하기에 벅찼던 것 같다. 이런 부분이 기본이면서 가장 중요한 부분이라고 생각해서 개념을 잡아두고 넘어가고 싶어서(성격상 그런 것 같다) 설정을 하면서 패키지들이나 package.json 파일에 대해 조금 이해를 해보려고 노력을 했고,(프로젝트 기간이 있어서 너무 많은 시간을 투자할 수는 없었기에...) 얕게 이해를 했다. 프로젝트가 다 끝나면 꼭 더 깊게 패키지 부분들을 공부해서 개념을 잡아둘 거다.
프로젝트가 끝난 지금도 다시 2차 프로젝트를 준비하면서 초기세팅을 맡게 된다면 다시 찾아봐야 하기에...

가장 처음에 팀원들이 모여서 데이터베이스 모델링을 짰다. 정말 많은 시간이 소요되었던 것 같다. 다들 프로젝트를 처음하는 것이였기 때문에 클론 코딩할 홈페이지를 정하면서도 해야할 기능들의 난이도를 파악할 수가 없었다. 그래도 나름 다른 후보들에 비하면 단순해보였고, 처음하는 프로젝트였던 만큼 완성도를 높이는 것에 집중하려고 thisisneverthat으로 정했는데... DB 모델링을 하면서 꽤나 애를 먹었다. 그 이유는 제품의 컬러에 따라 사진을 나눠야하고 사이즈에 따라 재고를 나눠야 했기 때문이였다. 이 부분을 어떻게 처리해야 하나에 대하여 팀원들이 머리를 맞대고 엄청난 고민을 했다. 집단 지성을 이용해서 우여곡절 끝에 나온 대로 테이블을 만들었다. 나름 엄청난 고뇌와 노력을 통해 만들었는데 그렇게나 많이 수정하게 될 줄은 정말 상상조차 못 했다... 어떤 이유에서였는지는 세세하게 다 기억나지는 않지만 테이블 구조에 조금씩 문제가 있었다. 또 그 잘못된 점들을 다 내가 찾아냈다... Collection 페이지 API와 Product 페이지를 맡았던 내가 구조를 짜고 코딩을 하려고 할 때마다 잘못된 부분들이 찾아왔다. 그렇게 테이블 구조를 바꾸는 데에만 3일의 시간을 썼다.
그 때는 정말 힘들고 고통스러웠지만 지금 생각해보면 그래도 순서가 DB 모델링부터 하는 게 맞는 것 같다는 생각이 든다. 다른 팀은 바로 코딩부터 시작한 팀들이 있었는데 3일동안 DB를 수정하니까 다른 팀들은 진행속도도 빨라보이고 우리 팀은 너무 뒤쳐진 것 같고 그랬었다. 하지만 그 팀들도 나중에는 결국 DB를 붙잡고 있더라...(물론 처음부터 완벽하게 짠다면 상관이 없겠지) 개인적인 생각이지만 DB 모델링부터 하는 것이 건강한 프로젝트의 순서가 아닐까 생각한다.

그렇게 목요일이 되고 나서야 본격적으로 시작한 프로젝트 코딩. DB를 짜면서도 든 생각이지만 백부터 하고 프론트를 하는 게 더 맞는 순서라고 생각해서 내가 맡은 백엔드 API부터 짰다. API를 짜면서 '나는 프론트에 맞는구나'라는 생각이 들었다. 3일동안 테이블을 짜서 너무 지쳐있었는지도 모르겠지만 쿼리문이 나에게는 너무 어려웠다. 우리 팀의 DB가 나름 복잡해서 쿼리문의 난이도가 생각보다 있었는지도 모르겠다. 하지만 나는 좌절을 맛봤고 결국 팀원들의 도움을 받아서 API 완성시킬 수 있었다. 내가 맡았던 기능이였기에 감히 팀원들의 도움을 받았다고 표현하는 거지 사실상 팀원들이 거의 다 했다고 보는 게 맞다고 본다. 그렇게 '나와 백의 인연은 여기까지인가...'라는 생각과 '프론트는 정말 열심히 해서 뭔가를 보여주고 싶다'라는 생각으로 프로젝트 첫 주를 마무리했다.

그렇게 맞이한 프로젝트 2주차. 본격적으로 프론트 코딩을 시작하였다. 하지만 백엔드 수업부터 시작해서 거의 3주 만에 보는 리액트... 예전 기억을 되짚어보면서 시작하였다. 처음에는 역시 레이아웃 잡는 거지. 레이아웃을 짜고 하나둘씩 페이지의 모습을 갖춰갔다. 그렇게 순조로워 보였으나 찾아온 첫번째 고비. 백엔드에서 받아온 데이터로 fetch를 돌려서 뿌려주는 것... 테이블이 복잡했던 터라 fetch 후에 데이터를 필터링해줬어야 했다. 사실 지금 뒤돌아보면 간단한 필터였던 것 같은데 그 당시에 '객체 안의 배열 안의 객체 안에 배열'에 너무 어색했다. 간단하게 생각했으면 더 쉬웠을 것을 혼자 더 복잡하게 생각했었다. 그렇게 어렵사리 필터링을 끝내고 데이터를 뿌려줄 수 있었다. 그렇게 첫 번째 고비를 넘겼다.

그렇게 백엔드와의 데이터 연동을 마치고 이미지 슬라이더를 구현하기 시작했다. 그렇게 맞이한 두 번째 고비. 슬라이더를 구현하는 방법을 열심히 검색하였다. 하지만 내가 원하는 건 개념 설명과 어떻게 사용하면 되는지에 대한 정보였는데 찾으면 나오는 건 수두룩한 완성된 코드들이였다. 그 중에는 변수는 보여지는 코드 위에서 선언 되어서 무슨 변수인지도 알기 어려웠다. 그래서 하나하나 모든 속성들을 찾아보고 이해하고 한줄한줄 이해해나갔다. 그렇게 하고나서야 어떤 식으로 작성해야 하는지 조금 감이 잡혔다. 사실 하나하나 검색하고 다 이해하고 넘어가는 게 백번 옳다고 생각한다. 하지만 시간 제약이 있는 프로젝트를 진행하는데 그렇게 많은 시간을 쏟아붓는다는 게 생각보다 부담으로 다가왔었다. 조금 더 편한 길이 있는 지에 대한 고민을 하였지만 그런 건 없더라... 시간적 압박에 좀 더 상냥한 게시글을 찾고싶은 바램이였을 뿐...

그렇게 Product 페이지를 어느정도 다 구현하고 모달 창을 구현하기 시작했다. 사실 이건 고비까지라고는 생각이 들지 않았지만 그래도 고비라면 작은 고비였다. 모달 창의 props 부분이 헷갈리기 시작한 것이다... 컴포넌트처럼 나뉘어져 있었기 때문에 누가 누구의 props인지 판단이 헷갈렸다. 프로젝트의 막바지가 다가오면서 마음이 조급해져서 그랬는지도 모르겠다. 그렇게 하나하나 prop를 콘솔로 찍어보고 난 후에야 모달창을 구현할 수 있었다.

그렇게 프로젝트를 마무리하고 리팩토링에 들어갔다. 어느 정도 틀을 잡고 프로젝트를 진행하였기 때문에 리팩토링에 많은 시간을 들이지는 않았다. 리팩토링하고 수정할 것들 수정하고 추가적으로 기능들을 더 구현했다. 뭔가 2주의 기간이 끝나서 심적으로 홀가분해서인지 아니면 프로젝트 기간동안 내가 발전해서인지 리팩토링 기간에 추가적으로 기능을 구현하는 것은 수월하게 해냈던 것 같다. 이렇게 대망의 첫 프로젝트가 끝이 났다...

프로젝트가 끝나고 느낀 점

일단 프로젝트를 끝냈다는 것에 정말 많은 성취감을 느낀다. 운이 좋게도 정말 좋은 팀원들을 만나서 별탈없이 순조롭게 진행되었던 것 같다. 많은 도움을 받았고 많은 것들을 배울 수 있었던 것 같다.(받기만 하고 주지는 못한 것 같아서 미안한 느낌이랄까...ㅎㅎ) 그래도 이렇게 프로젝트를 처음으로 진행하면서 '소통이 정말 중요하구나'라는 것을 깨달았다. 우리 조는 다 같이 모여서 프로젝트를 진행했는데 즉각적으로 소통도 되고 회의도 자주하면서 더욱 더 돈독해지기도 하고 진행도 척척되었다고 생각한다. 나중에 들은 이야기지만 다른 팀들은 소통의 문제로 많은 어려움을 겪었다고 전해들었다.

또 느낀 것이 너무나도 당연한 이야기겠지만 커밋과 pr을 잘, 자주 쓰고 pull을 자주해야한다는 것을 느꼈다. 작은 코드라도 수정이 되고 에러가 고쳐지면 순식간에 main 브랜치는 머지가 일어나고 나는 기능을 구현하느라 뒤쳐졌었다. 프로젝트 중반을 지나가면서 하루가 끝나가면 commit과 pr을 올렸고 하루를 시작하면서 main을 pull로 땡겨왔다. 이런 습관을 다지는 것이 사소하지만 중요하다고 생각한다. (commit과 pr을 하지 않아서 코드를 날리는 일이 흔하게 발생한다고 했다... 상상만해도 끔찍하다😱)

개인적으로 팀이랑 잘 맞기도 하고 너무 좋았던 점이 프로젝트 진행상황에 대해서 딱딱 정리가 깔끔하게 되었던 점이다. 개인적인 성향 자체도 큰틀을 잡고 그 틀을 유지하면고 정리해나가면서 일을 처리하는 것을 좋아하는데 팀원분들도 그런 성향을 가지신 분들이 계셨고 회의록이나 했던 일들을 정리를 깔끔하게 해주시는 분도 계셨다. 그래서 프로젝트를 진행하면서 따로 답답한 점 없이 수월하게 진행되어서 너무 좋았다. 역시 정리를 하면서 해야지 마음이 편한 것 같다.

좋았던 점들, 배울 점들, 배운 점들을 다 적자면 정말 끝도 없어지기에 이 정도로 넘어가고 아쉬웠던 점을 하나 이야기해본다면 코드리뷰를 제대로 하지 못한 점이 정말 아쉽다. 아무래도 첫 프로젝트이다 보니까 내가 맡은 일들을 마무리하는 데에도 벅찼던 것이 사실이다. 내가 구현이 되지 않으면 전체적인 팀원에게 피해를 주는 것이라는 마음도 있었어서 알게 모르게 부담도 조금 되었던 것 같다. 이런 상황에 팀원들의 코드를 읽고 이해하고 댓글을 남기고 피드백을 하는 게 시간적으로도 부족했던 것 같고 능력적으로도 부족했다고 생각한다. 이 부분은 다음 프로젝트 때에는 꼭 욕심을 내보고 싶다. 코드리뷰를 잘해서 조금 더 소통을 원활하게 할 수 있다면 프로젝트를 더 효과적이고 긍정적으로 진행할 수 있을 거라고 확신한다

긍정적인 부분들을 더욱 더 발전시키고 부족한 부분들도 고쳐나가서 효율적이고 원활하게 프로젝트를 진행하고 더 나아가 나중에 시니어가 되었을 때에도 팀원들을 잘 아우를 수 있는 개발자로 성장해나가고 싶다는 생각을 하게 되었다.

여담이지만 너무 좋은 사람들과 팀이 되서 즐거웠고 이 것도 인연이라고 생각한다. 앞으로도 계속 좋은 관계를 이어갈 수 있으면 좋겠다🤗

기억하고 싶은 코드

{colorImageData.map((v, i) => (
	<img
    	className={css.productThumbnailImage}
    	key={v.id}
    	alt={v.id}
    	src={v.url}
    	onClick={() => {
      	setSliderNum(i + 1);
    	}}
    style={i + 1 === sliderNum ? { opacity: 1 } : { opacity: 0.5 }}
    />
))}

슬라이더를 구현하는 코드 중 일부를 발췌한 부분이다.
이 부분이 가장 기억에 남는? 인상에 깊은? 신기한 코드인데
백엔드에서 가져온 데이터를 맵으로 돌려서 뿌려주는 코드이다.
onClick 안에 있는 함수부분을 보면 익명함수로 처리되어있는 것을 볼 수 있다.
처음에 저 부분을 익명함수가 아닌 setSliderNum(i + 1)만 넣었었는데 리렌더링이 너무 많이 일어난다고 에러가 났었다.
어떻게 해결해야하나 고민을 하다가 멘토님께 여쭤봤었는데 일급객체, 기명함수, 익명함수를 이용해서 할 수 있다고 알려주셨다.
개념을 100% 이해하지는 못했지만 함수를 선언하냐 호출하냐의 차이정도로 일단 이해를 했다.
위의 코드처럼 쓰게 된다면 onClick이 되면 저 함수가 실행이되면서 return으로 setSliderNum(i + 1)이 실행되므로 무한 리렌더링이 일어나지 않는다.
이 코드가 가장 기억에 남는 코드이다!
더 공부해서 저 부분(일급객체)을 확실하게 짚고 넘어갈 것이다🔥