1. 클론코딩
이번주는 프론트와 백엔드가 협업하여 정육각 웹사이트를 클론 코딩 프로젝트 진행하였습니다.
저번주에 미니프로젝트를 간당간당하게 완수를 했었기때문에 클론코딩.. 잘할 수 있을까?🙄🙄
라는 걱정이 조금 있었지만, 막상 시작되니 저번주에 했던 내용들이 떠오르면서 무난히 진행되었습니다.
첫날 와이어프레임, API 명세서 작성, 각자 작업할 부분을 정한 뒤 스켈레톤 코드를 git으로 공유하여 작업을 시작하였습니다. 작업 시작당시에 공통으로 사용할 element를 정하지 않고 작업을 진행하였는데 (예를 들어 Button이나 Grid 같은것) 나중에 합칠 때 서로 사용한 속성들이 많이 달라 결국 Grid를 2개를 만들어서 사용 했습니다.
다음 프로젝트에서는 시작전에 공통으로 사용될 부분은 반드시 사전 조율하고 해야겠다고 느껴지는 순간이었습니다.
둘째날은 제가 맡은 메인페이지와 상세페이지 부분 뷰를 클론 하였습니다.
현재 운영되고 있는 사이트를 개발자 도구를 통해 CSS가 어떻게 적용하였는지, Grid(div)는 어떻게 감싸여져 있는지 하나하나 살펴보았고, 처음 코드를 작성할 때 코드 구조를 어떻게 잡아야 되는지에 대해서 도움이 많이 되었습니다.
셋째날~다섯째날까지는 기능구현을 하며 서버와 통신을 하였는데 저번주에는 생각지 않았던
🤔데이터를 어떻게 받으면 좋을까? 에 대한 생각과
🤔어떻게 이미지 렌더링을 더 빠르게 할까? 라는 들었습니다.
일단 제가 진행한 정육각 프로젝트는
1. 메인페이지에서 베스트 상품을 보여주고
2. 다음 쇼핑페이지에서는 각 카테고리별로 상품 리스트를 보여줍니다.
3. 상품의 이미지는 모두 firebase store에 저장되어있는 것을 서버에서 url을 받아 사용했습니다.
서버분들과 합의된 데이터 흐름은 메인페이지에서는 접속하자마자 서버에서 베스트 상품 데이터만 받고, 쇼핑페이지에서는 각 카테고리를 클릭 했을 시 각 카테고리별 데이터를 서버에 요청하여 받는 형식입니다.
- 🤔데이터를 어떻게 받으면 좋을까? 의 고민과 알아낸 답
이때 제가 작업을하면서 제가 첫번째로 제가 생각해본 데이터 흐름은 메인페이지에서 전체데이터를 받고, 쇼핑페이지에서 useSelector을 사용하여 데이터를 카테고리별로 필터하여 사용하면 되지 않을까 생각했는데~ 새로고침하면 리덕스에서 데이터가 날라가기 때문에 패스!🤪
두번째로 메인페이지는 서버분들과 합의된 그대로 베스트 상품만 받는 형식 그대로 하고,
쇼핑페이지에서는 전체 데이터를 한번만 요청하고 카테고리를 필터해서 사용하면 서버에 요청을 최소화 하고 데이터를 사용할 수 있지 않을까? 라는 생각이 들었고 적용하고 싶었지만 프로젝트 데드라인😓 관계상 기존에 합의한 데이터 흐름대로 진행 했고 프로젝트 멘토링시간에 이에 관하여 멘토님께 여쭤보았습니다.
멘토님께서는 서버에 데이터 요청을 최소화하는 기준은
1. 일단 서비스의 종류에 따라 데이터를 받는 형식은 달라질 것 같다고 하셨고,
2. 데이터를 세분화 하여 받는게 서버나 프론트 서로 좋다는 말씀을 해주셨습니다.
3. 추가로 서버에서 데이터를 data라는 키 안에 묶어서 통째로 받는게 좋다고 하셨습니다. 그리고 데이터를 받을때 성공실패시 status를 어떠한 형식으로 받을지도 고민 해보는게 좋다고 하셨습니다.
- 🤔어떻게 이미지 렌더링을 더 빠르게 할까? 의 고민과 알아낸 답
이미지를 어떻게 렌더링을 빠르게 할 수 있을까에 대한 생각으로 프로젝트 안에 이미지를 넣어두고 실행 시키면 좀 더 빠르지 않을까해서 public의 image폴더를 만들어 넣고 실행하였습니다. 실행결과는 firebase store에서 받아오는 것과 큰 차이는 없었습니다.
찾아본 해결법으로는
1. 대략적인 이미지라도 보여줘야 한다면 저화질이 로딩이 빠르니, 저화질을 보여준 다음 고화질 로딩이 끝나면 보여주는 방법이나
2. 인스타그램같이 이미지를 컨텐츠로 보여주는 경우 스켈레톤 로딩을 사용하는 방법이 있었습니다.
두가지 다 사용 해보지는 않았지만 나중에 렌더링 최적화를 위해 사용해봐야겠습니다.
멘토님께서도 위에 방법을 활용해보는 것도 괜찮다고 하셨고,추가적으로
1. 보통 회사프로젝트는 이미지를 프로젝트 안에 두는 방법보다 cdn서비스 많이쓴다고 하셨습니 다. ( s3 + cloudfront나 cloudinary, Bynder)
2. 개인프로젝트 처럼 저장할 이미지가 많지 않다면 프로젝트안에 써도 괜찮다고 하셨습니다.
이외에 처음으로 조건부 렌더링을 사용하여 카테고리 버튼과 장바구니 버튼에 CSS를 적용하고
서버에서 상품 데이터를 받는게 없을 시 상품준비중이라는 이미지가 뜨게 구현해 보았습니다.
저번주까지 기본적인 CRUD만을 하다가 디테일적인 부분을 하나씩 손대보니 더욱더 재밌어지고 실전 프로젝트가 기대됩니다😁
(추가적으로 공부해야할 부분
- Axios interceptor
- useState 작동방식
- 소셜로그인 흐름 (리다이렉션 페이지를 꼭 만들어야하나?)
- status 값이 200으로 들어오는데 에러 발생시 분기처리를 어떻게 할건지?
- useEffect 안에서 async, dependency array 등 3가지기능
- map 돌릴때 key값에 index 넘기면 안되는 이유
<Switch>의 역할이 무엇인지?- history객체 메소드들
goBack(),push(),replace())
2. 프로젝트 소개 😃
🥩 정육각 클론 프론트엔드
https://github.com/kokyusik91/jeongyookgak_FE (Git hub 주소)
📰 상세 페이지
💻 웹 사이트
http://nohgangpyo.s3-website.ap-northeast-2.amazonaws.com/
🎬 실행화면
유튜브 링크 : https://www.youtube.com/watch?v=3aeIOFv_EZ0
⚙️ 기술 스택 및 툴
🥩 정육각(Music Recommended List)소개
정육각 클론코딩! 최저가 보장! 품질 보장! 호주산, 미국산 취급 안합니다 믿고 구매해주세요
🙋 팀원
Front-end(React): 김기철, 고규식, 노강표
Back-end(Node.js): 최선강, 박시준, 권민혁
🌎 API
https://rose-log-964.notion.site/f2d135f6a3a041c2927b8819cb6aff9d
⏳ 팀 프로젝트 기간
2021.10.18 ~ 2021.10.23(6일)
✨ 주요 기능
- 로그인
- 카카오 소셜 로그인을 구현하였습니다.
- JWT 토큰을 세션스토리지에 저장하여 사용합니다.
- 인터셉터를 활용하여 헤더에 토큰을 전달하였습니다.
- 쇼핑 리스트 및 상세페이지
- 리액트 리덕스를 사용하여 자신이 현재 원하는 상품 카테고리를 선택하여 그에 해당하는 상품 리스트를 볼 수 있습니다.
- 자신이 원하는 상품을 장바구니에 추가할 수 있습니다.
- 장바구니 페이지
- 자신이 장바구니에 추가한 상품의 수량을 조절하거나 삭제 할 수 있고, 총 금액을 확인할 수 있습니다.
🔨 직면한 문제 및 해결방안
- API 요청할때, Header에 토큰이 담겨질때가 있고, 안담겨질때가 있었다.
해결 : axios interceptor를 활용하여 API요청 직전에 Header에 토큰을 넣어서 요청을 보낼 수 있다. - 회원가입을 완료후, 로그인 성공 실패시 요청 응답이 모두 status 200 받는 것을 사전에 조율하지 못하여 응답값을 받는데 혼선이 있었습니다.
해결 : 백엔드와 소통하여 실패시에도 응답이 status200으로 보내준다는 것을 확인하였고, 이에따라 처리하였습니다. - 장바구니 페이지에서 새로고침을 하면 기존 데이터가 유지되는데, 뷰에서는 숫자계산이 꼬이는 문제
해결 : 장바구니 삭제 기능에서는 기존 state_list에 있는 Id들중 현재 가지고있는 Id와 비교하여 다른값들만 filter하여 대치해준다. 여기서 기존 하위 컴포넌트를 Map을 돌릴때, key={index}를 넘겨줘서 문제가 발생하여 key={id}값으로 바꿔주어 문제를 해결 하였습니다. - 장바구니에 같은 품목을 추가할 경우 기존품목에 수량만 추가되야 하는데, 항목으로 밑에 추가됨
해결 : 스토어에 저장되어있는 carts_list에서 findIndex 하여 id들을 순회하며 넘겨받은 payload.item.id와 비교하여 해당 index 값을 찾은후 index가 있으면 해당 cart_list의 count 값에 넘겨받은 payload.item.count를 더해줍니다. index가 없으면 push 해준다.
