1. 프로젝트 소개

ZARA-HOME

• ZALZARA-FE git repo
• ZALZARA-BK git repo

1-1 ☀️ 프로젝트를 하는 이유

1. 지금까지 배운 것을 복습하기 위해 서비스하고 있는 사이트 중에서 기능 구현을 해보고 싶은 사이트를 클론코딩을 한다.

2. 팀에서의 협업이 어떤 것인지 git 같은 협업에서 프로젝트 관리 툴 사용 방법을 익힌다.

3. 어떤 방식으로 프로젝트가 진행되는지 알아본다. 예를 들면 스케줄 관리, 티켓 배분, 아키텍쳐 설계 등..

---

1-2 🛠 기술 스택

공부할 것을 복습하고 공부를 하기 위한 목적이기 때문에 최대한 라이브러리의 사용을 지양하며 진행하게 되었다.

🍦      Front

UI

스타일

🔙      Back

서버

데이터

보안

---

1-3 🗓 Scrum

💉 Planning Meeting Sprint
🕖 매주 월요일
이번 주에 무엇을 해야하나 정리한다.

☀️ Daily Standup Meeting
🕖 매일 아침 10:30
Meeting 후 notion에 어제 한일, 오늘 한일, blocker 정리 공유

---

1-4 🚜 구현 사항

🖥 Front   페이지, 컴포넌트 분리

• Header
  로그인과 navbar가 나와야한다. 어느 페이지든 따라온다.
  • navbar
    누르면 해당하는 카테고리로 보내준다.
• Footer
  어느 페이지든 따라온다.

• login
  로그인과 회원 가입이 가능한 form을 통해 백엔드와 통신한다. 해당 컴포넌트는 모달

• Main
  대표하는 사진을 한장 놔둔다. 시간이 된다면 케로셀로 바꾼다.

• List
  카테고리에 해당하는 제품들을 보여준다.
  장바구니에 담기를 누른다면 장바구니 DB에 post를 한다.

• Detail
  해당하는 제품들을 보여준다.
  장바구니에 담기를 누른다면 장바구니 DB에 post를 한다.

• Shopcart
  장바구니에 담긴 데이터들을 표현한다.
  주문하기는 구현하지 않는다.
  
  

🔙 Back   route가 각자 가지는 역할

• /   홈

• /user

  • /user/signup 유저들의 회원가입
  • /user/login 유저들의 로그인
  • middleware JWT를 이용해 유저들의 로그인 상태 확인

• /categories navbar에서 누른 카테고리안에서 더 자세한 카테고리를 고름 ex) 거실 > 러그

  • /categories/:category 더 자세한 카테고리에서 그 카테고리에 해당하는 제품들의 list
    
  • /categories/:category/:id 해당하는 제품의 상세 정보

---

1-5 💾 DB 모델링

dbdiagram.io SITE

• Client에게 받아 INSERT하는 데이터는 users & shopcarts 뿐이다.
• products는 다른 정보를 나타내는 테이블들과는 *:1 관계이다
• product는 사이즈에 따라 다른 가격을 가지기 때문에 products_size라는 테이블을 통해 중간 테이블을 생성하였다.

---

2. ☕️ 회고

프로젝트를 시작하기 전

위코드를 다니기 전에는 혼자 공부를 하면서 클론코딩으로 인강을 듣고 챌린지라는 제도를 통해서 작은 프로젝트를 몇번 해서 그런지 프로젝트를 시작하는데 그 자체에는 부담감이 없었다.

하지만 나 혼자가 아니라 다른 사람들과 하는 것은 처음이었기 때문에 긴장되었는데 내 막 빨리 친해지는 성격이 아니기도 하고 내가 부족해서 프로젝트에서 발목을 잡는 것이 무서웠는데 다들 같이 차근차근 나아가고 좋은 분들이라 이런 긴장감은 일주차에 사라졌다.

프로젝트를 시작하며

프로젝트를 페이지 단위로 역할을 나누면서 작업을 진행한다는게 나한테는 엄청 생소한 일이었고 매일 아침에 standup-meeting, notion을 통해 daily Agenda 정리 등.. 책에서 본 내용을 내가 한다는 사실에 약간 흥분이 되었었다.

하지만 라이브러리의 사용 금지는 약간의 스트레스였다.

프로젝트를 진행하며

프로젝트를 진행하면서 계획이 생각보다 많이 변경되면서 초기세팅이 바뀌는 일이 잦았다.
짧은 시간이 정해져 있다는 게 다들 엄청나게 부담으로 다가왔던 것 같다.
나도 혼자 하면 날을 잡아놓고 하는 게 아니고 그냥 그 잘 나온 만큼만 구현하면 끝이었고 구현을 못하더라고 다음날 답을 알려줬기 때문에 내가 직접 오늘 할 일 내일 할 일을 잡아놓으며 그날 안에 꼭 끝나야 하고 이건 내가 몰라도 구현해야 한다는 압박감이 있었던 것 같다.

처음 내가 맡은 페이지에서 컴포넌트를 분리할 때 상태공유를 하는 컴포넌트가 많았기 때문에 멘토님께 Recoil 라이브러리를 사용하기를 원한다고 하였지만, Context API (React 내장 API)를 알려주셨다.

난 상태를 다른 데서도 공유한다는 기능은 라이브러리를 통해서만 가능한 일인지 알았었는데 진짜 신기했었다.
난 내가 리액트가 가진 핵심 기능은 알고 있었다고 생각했었는데 더 공부해야겠고 역시 공부는 뭔가를 만들면서 배우는 거라고 느꼈다.

간단할거라고 생각했던 것이 생각보다 오래걸렸다.
1주차에서 백과 함께 초기세팅을 하면서 같이 했었기 때문에 정신이 없었고 그래도 어찌저찌 내가 맡은 부분은 완성이 된 것 같다.

프로젝트 1주차 블로그

프로젝트 2주가 끝나고

기술적으로나 사람들과 같이 무언가를 만드는 협업 등 많은 것을 배운것 같다.

2주차가 끝나고 팀별로 발표를 하는데 신기한 기능들이 많았고 완성도가 엄청났다.
하나의 분야를 잡고 몰입해도 시간이 부족할거 같다는 생각을 하게 되었다.

---

2-1 기록하고 싶은 코드

🖥 프론트 - ShopCart.js

Context API를 사용해 자식에게 깔끔하고 간단하게 함수나 Props를 전달할 수 있었다.
넘겨주는 것까진 괜찮았는데 re-rendering이 되지 않아 setItems를 넘겨줘 업데이트를 하게 만들어 줄 수 있었다.

항상 내 생각이나 공부하는 것을 멈춰있으면 안된다고 느꼈다.
아는 만큼 내가 편해진다.

🖥 프론트 - Header.scss

애니메이션을 만들 기회가 없었는데 헤더를 만드신 동기분 코드를 통해 배우게 되었고 cursor까지 설정하시며 꼼꼼하게 하셔서 동기부여를 엄청 받게된 코드였다.

---

🔙 백 - userService.js

혼자 해볼 땐 해봤자 이 글자가 여기에 들어가는지 안 들어가는지 확인하는 것만 해보다가 복잡한 정규표현식을 이용해 설정하는걸 이때 처음 본 거 같다.

🔙 백 -2

const productsByCategory = async (category) => {
  return await prisma.$queryRaw`select p.id, p.name, JSON_ARRAYAGG(JSON_OBJECT(size,price)) as prices , image_url as imageUrl from product_size join sizes on size_id=sizes.id join products as p on p.id=product_id join categories as c on c.id=p.category_id join images on images.product_id=p.id where c.name=${category}  group by p.id, p.name, image_url;`;
};

SQL과 사이가 좀 좋아진 경험이라 역사적인 순간이라 기록하고 싶었다.

---

3. 결론

무엇을 해야하나

1. 내가 어떤 쪽을 좋아하는지 확실히 하는 시간을 가져본다.

   • 이걸 이제 확실히 해야 한다고 생각한다. 풀스택이 마음이 가지만 먼저 하나를 확실하게 잡자
     하나만 해도 아직 난 부족하다.

2. 앞으로 라이브러리의 사용을 최대한 지양해본다.

   • 진짜 배우는 게 많았다. 라이브러리도 공부를 해야 한다고 생각하지만 라이브러리 대부분이 나를 편하게 만들어줘 깊게 고민하지 않는다.

3. 프론트와 백 결정

   • 아직도 제대로 정하지 못했지만 일단 현재는 프 7 : 백 3 정도인 것 같다.
     백에서 URI, route 설정과 SQL을 통해 데이터를 뿌리는 것 밖에 안해봐서 그런지 몰라도 내가 하는 것에 대한 의문감을 계속 갖았다. 보람? 성취감? 이런것을 느낄 수 있던것이 프론트에 비해 현저히 낮았다 생각한다.

2차 프로젝트에 대한 마음가짐

1. 사람들과의 의사소통에 조금 더 적극적으로 사담이라도

• 프로젝트를 진행하는데 소통을 충분히 했다고 생각하지만, 지금보다 더 적극적일 필요가 있다고 생각한다.

2. 다른 팀의 코드를 살펴보기

• 마지막에 발표를 하면서 새로 보는 기능들이 많았고 어떻게 구성이 되어있나 궁금해졌다.
  프로젝트를 하면서 보기는 힘들겠지만 끝나고 보면 기술에도 마인드 셋팅에도 도움이 많이 될 것 같다.

3. 새로 배운 것이 있다면 하루~이틀 안에 블로깅하기

• 뭔가를 배울 때 기록을 하면서 해야 기억에 오래 남는다고 생각했다.
  모르는 것을 새롭게 알았을 때 내가 안 일부분만 정리한 후 프로젝트 종료 후 블로그를 보며 만약 연관되는 것이 있다면 함께 블로그를 작성해야겠다.
  개발 블로그를 작성하는 방법

4. 2차때도 1주차 회고록(기능 설명)을 작성한다.

• 1주차에 내가 구현한 기능들을 먼저 작성하며 설명을 해놓으면 회고록을 작성할때 글이 좀 더 간결해지는 것 같아 나누는게 좋은 것 같다.