기대 반 걱정 반으로 시작했던 1차 프로젝트가 잘 마무리되었다. 혼자 작업하는 부분도 중요했지만 팀원들과의 소통 과정 또한 굉장히 중요하다는것을 알게된 고마운 프로젝트였다. 같이 잘해주었던 위디다스 팀원분들에게 정말 감사하다.

프로젝트 소개

아디다스 공식 홈페이지 클론 코딩 진행

프로젝트 선정 과정에서 1차 프로젝트로 아디다스 공식 홈페이지를 선택하였다. 선정한 이유는 다음과 같다.
1) 국내 최대의 스포츠 커머스 사이트
2) 직관적인 UI
3) 다양한 기능 구현 가능성
4) 너무 많지도 적지도 않은 데이터로 원활한 DB 구축 및 백엔드와의 소통 원활 예상

프로젝트 기획

구현사항 및 역할 분담(Front-End)

• 로그인 및 회원가입
• 메인페이지 + Carousel 구현
• 상품리스트 페이지
• 디테일 페이지
• 장바구니, 위시리스트
• 네비게이션 바
• 푸터

해당 구현사항들중 내가 맡은 역할은 상품디테일 페이지 구현 및 네비게이션 바 구현이었다.

상품 디테일페이지 구현

• 페이지 레이아웃 세팅
• fetch 'GET' 메서드를 통한 백엔드 API 데이터 받아오기
• 받아온 데이터를 기반으로 메인 이미지, 썸네일, 가격, 재고 수량 유무에 따른 사이즈 등 표기
• useState 초기값 false 설정을 통한 onClick event 발생시 토글을 통한 추가 정보, 썸네일 등 표기
• array.map, array.filter 등의 메서드를 사용하여 재고 수량 보유시 해당 사이즈 렌더링
• fetch 'POST' 메서드를 통한 제품 장바구니 및 위시리스트 DB로의 전달

- 구현

- 디테일페이지 BLOCKER

가장 많이 애먹었던 부분은 페이지가 렌더링 되지 않는 부분이었다.
처음에는 그저 JSX 오류로 인한 페이지 렌더링 실패로 알고 왜 안되는지에 대한 답을 찾지 못하고 있었는데 찾다보니 결국 문제는 fetch에 의한 비동기적 렌더링으로 인해 발생한 오류인것을 알아냈다.
해당 문제는 옵셔널 체이닝 및 조건부 렌더링으로 해결이 가능했다.

- 네비게이션 바 구현

• 네비게이션 컴포넌트 세팅
• 목데이터 및 상수 데이터 활용으로 레이아웃에 필요한 데이터 받아오기
• onClick 시 각 페이지별 연결된 링크 설정
• 추가 구현사항 - 장바구니 및 위시리스트 추가시 관련된 해당 아이콘에 갯수 표기

- 구현

- 네비게이션 바 BLOCKER

네비게이션 바의 가장 어려웠던 부분은 array.map 메서드 사용이었다. 해당 메서드의 경우 전에 한두번 정도 써본적은 있었지만 이런 방식으로 구현해보는것은 처음이었다. 처음에는 사용에 조금 해맸으나 계속 map 메서드를 사용하다보니 그다지 어려운것은 아니었다. 역시나 언어는 익숙해지는것이 중요한거 같다.

추가적으로 삼항연산자로 로직 구현 중 Nullish Coalescing 이라는 개념도 알게 되었는데 해당 nullish 병합 연산자를 통해 값이 확정되어있는 변수를 찾을 수 있으며 해당 내용에 대한 정리는 다음에 다시 진행하겠다

프로젝트에 대한 회고

2주라는 시간동안 진행되었던 1차 프로젝트였다. 정해진 기간에 비해 내가 구현해낸 것들은 생각보다 많지 않았던것 같다. 시간을 너무 비효율적으로 보낸게 아닌가 하는 생각이 든다. 특히 렌더링에 대한 이해가 되지 않아 렌더링만 가지고 몇날 몇일을 붙잡고 있었던거 같다. 문법도 아직 초보자 수준이어서 보강할것이 많지만 자바스크립트 혹은 리액트 사용하는 문법 외에도 렌더링의 작동원리 등 더 다양한 관점으로의 추가적인 접근이 필요할거 같다. 아직 너무나도 부족한 내자신을 돌아 볼 수 있는 프로젝트 였으며 같은 팀원들 그리고 다른 팀 작업 결과물을 보고 동기부여가 충분히 되었다. 다음 프로젝트는 나 자신에게 좀 더 떳떳할 수 있도록 열심히 해야겠다. 매일 성장하는 나 자신이 될수있길.