포스코 X 코딩온 7기 3차 프로젝트 회고! ch. 1

길다면 길었고, 짧았다면 짧았던
포스코 X 코딩온 풀스택 웹개발자 7기가 드디어 끝이 났다! 
 
처음엔 이게 하루라도 빨리 끝나면 소원이 없겠다 싶었는데,
막상 끝나니 시원 섭섭..
 
마지막에 아쉬울 수 있었던 이유는
마지막 팀 프로젝트에서 만난 팀원들과의 케미가 좋았던
덕분이 아닐까.. 싶다 ㅎㅎ
 
3차 팀프로젝트때 만난 팀원들 덕분에
프로젝트도 무사히 끝냈다!
 

 
팀원들 뿐만 아니라
무사히 수료할 수 있게 도와주신 모두에게 감사인사..
 
그리고
바쁘다, 피곤하다는 핑계로
회고록이 아아아아주 많이 밀려 버렸다
 

 
우선 .. 3차 팀 프로젝트 먼저 ..
차근차근... 회고해보고록 하겠다..
 

---

주제 선정 ?

 
팀원이 발표 되고, 주제를 선정하는데
대두되는 주제가 다 비슷했다
 
뭐 판매 사이트라던지, 모임 사이트 라던지
엄청나게 특별한 주제가 나오지 않았는데
 
승찬님이 푸바오의 엄청난 광팬이라며
푸바오 사이트를 만들어 보는 것이 어떠냐고 
의견을 제시했는데,
듣자마자 팀원 모두가 푸바오에 꽂혔다
 
그래서 ㅋㅋ 주제는 푸바오로 결정!
 
모두가 만족하는 주제 였던 것 같다
 
 

프로젝트 초안 및 회의 내용

 

 
현호님이 한땀한땀 손수 작성한
프로젝트 초안이다
 
절대 피그마 못써서 이렇게 제작한게 아니라..
 
뭐 여튼, 대충 기능은 회원가입/로그인, pubao소개(home), goods shop,
community, community공감 순 순위 측정 
그리고 반응형, 시간 남으면 웹소켓도 넣기 ..
 
그리고 React, NodeJs, MySql를 사용하여 제작하고,
배포는 AWS를 사용하기로 하였다.
 
기능 회의를 마치고 드는 생각..
일단 넣고 싶은 기능을 다 넣긴 했는데
이걸 2주만에 끝낼 수 있나?..
 
뭐.. 일단..
 해보자고~..
 
내가 맡은 역할은 
pubao goods shop을 제작하기로 하였다!
 

---

Goods ShopPage 제작과정

 
1. Goods 이미지 제작

시중에 푸바오 관련 굿즈들이 몇 개 있긴 했지만
이런 식으로 내가 야매로 제작했다 
ㅋㅋㅋㅋ
 
나름 귀여운 듯 ㅋ
 
2. 굿즈 데이터 json제작

우선 처음 제작할 때 초안으로 json파일을 만들어서 
여기서 상품 정보 꺼내서 썼다.
 
(나중에 DB에 정보 넣고 
거기서 상품 정보 꺼내서 쓰려고 다시 구현해보았는데..
이미 json파일에서 정보를 불러오도록 코드를 다 짜둔 탓에
DB에서 불러오도록 하는 것이 
조금 어려웠다... 해결 방법은 다음 블로그에서.. Comming Soon..)
 
 
3. json파일에서 데이터 꺼내서 출력하기

Card 컴포넌트 안에 데이터를 저장해두고,
 
slice함수 써서 배열로 부터 특정 범위를 복사한 값들을 담고 있는
새로운 배열을 만들어서,
 
map함수로 반복문 돌려서 출력함
 
 
4. useState
 
리액트로 제작하면서 유용했던 것!
useState hook을 사용하여 
상품 더보기기능, 모달 기능 등을 제작하였다
 
 
5. 장바구니 기능
 

cart리덕스를 만들어서 
이 곳에서 수량 증가 감소기능, 삭제기능, 
장바구니에 담기 기능을 만들었다.
 
여기서 dispatch()를 사용하면
html안에서 reducer함수를 동작시킬 수 있다.
 
(근데 이것도 db에 담기도록 수정해야 할듯..
수정 방법은 빠른 시일 내에 
Comming Soon...)
 

 

강의도 참고하고, 검색도 해가며
넣어야 할 기능들은 대충 넣었는데
 
db에서 상품정보 꺼내오기,
그리고 디자인 다시하기..
 
막판에 home에 디자인 몰빵 하느라
shop디자인은
개나 줘버렸다
 

---

home 디자인

 

썸넬 용

 
승찬님이 원 페이지 기능은 구현해두셔서
거기에 나의 디자인 숟가락만 얹어서 완성된
Home, About, BestPhoto페이지
 
나름 귀여운 듯 ㅎㅎ

 
#에버랜드 #연락주세요_ㅋ
#푸바오 #에버랜드_콜라보
 
 
3차 프로젝트 회고는
 ch. 2 에서 계속됩니다..

큰 의미는 없지만
아무튼 상도 받았다 ㅋ