프로젝트 | 쿠팡 클론코딩 3회차(feat. Next.js)

프론트엔드 챌린지
실무에서 잘쓰이는 기술스택을 가지고 쿠팡 클론코딩 하기

 

🎥 목차

프로젝트 미션

사용한 기술스택

깨달은 점

오류 해결방법

아쉬운 점

 

🚀 프로젝트 미션

이번 챌린지에서는 쿠팡 상품 페이지를 구현해보겠습니다.

공통된 UI들을 컴포넌트로 추출하고 확장성을 고려하여 단단하계 설계해봅니다.

상태 관리 및 비즈니스 로직에 집중하여, 화면을 어느 단위로 나누는 것이 효율적일지 고민해봅니다.

가독성 좋은 JSX 작성, 디렉토리 구조 등 프론트엔드에서의 Clean Code에 집중합니다.

데이터 연동을 위해 쿠팡과 동일한 형식의 API가 제공, 데이터 연동을 꼭 해보시길 적극적으로 권장합니다!

(Next.js의 API routes 기능을 활용해 일종의 BFF를 만들어서 데이터들을 가공해서 활용해보셔도 좋을 것 같아요 😃 )
이거는 시간이 부족해서 하지 못했다.

 

👨‍💻 사용한 기술스택 (+ 라이브러리)

프레임워크 : Next.js

라이브러리
@emotion-styled

useQuery
Axios

배포

Netlify

 

💡 깨달은 점

next.js 정리

드디어 next.js 공식 문서를 완독했다.
틈 날때마다 블로그 정독하자

공부 | next.js 정리

 

Styled-components VS @emotion

처음은 styled-components를 배웠고, 이후에는 emotion을 배우게 되었다.

emotion 라이브러리가 styled-components 보다 빠르다고해서, 앞으로 emotion을 적극 이용해야겠다고 생각했다.

그러나, styled-components에서는 별도의 설정없이도 이용가능했던 기능들이, emotion을 이용할때는 별도의 설정이 필요했다.

이러한 이유로 나처럼 초심자가 사용하기에는, styled-components를 버리면 안되는 필수 라이브러리라고 생각했다.

 

Gallery, Carousel

작년 원티드 프리온보딩 지원했을때 원티드 웹사이트에 나온 네비바와 이미지 슬라이드를 구현하는 시험을 본적이 있었다.

그 당시에는 네비바는 완성했지만, 이미지 슬라이드는 인터넷에 사람들이 친절하게 정리를 해두었지만, 이해할 지식이 없어서인지 해당 코드를 봐도 바닐라 자바스크립트로 구현할 수 없었다.

그래서 slick 라이브러리를 이용하여 완성을 했다.

그러나 바닐라 자바스크립트로 만들지 않아서인지, 합격의 문턱을 넘지 못했었다.

그로부터 약 7개월이 지난지금, 이미지 슬라이드를 구현할 수 있어서 좋았다.

 

😥 오류 해결방법

component selector

emotion에서 component selector를 사용하기 위해서는 별도의 설정이 필요하다.

오류 | emotion component selector 오류

 

🐧 아쉬운 점

실력이 부족한 만큼 소모되는 시간이 많다.

이번에는 오류가 많이 없어서 코드를 작성하는데 많은 시간을 할애했다.

그러나 오류만큼 사소한 코드를 작성하는데도 시간을 많이 잡아먹었는데, 일례로 Event type을 설정하는 것조차 검색을 통해 확인하고 코드를 작성한다.

나에게 주어진 시간은 한정적인데 반해, 사소한 코드작성하는것까지 인터넷을 검색하면서 컴포넌트들을 구현하다보니 시간이 많이 소모되었다.

나중에 시간을 소모하지 않기 위해 Event에 관련된 type을 정리를 해야겠다.

https://beautiful-starship-ab8be3.netlify.app/products/1?vendoritemId=2&itemId=3