프론트엔드 챌린지 실무에서 잘쓰이는 기술스택을 가지고 쿠팡 클론코딩 하기 🎥 목차 더보기 프로젝트 미션 사용한 기술스택 깨달은 점 오류 해결방법 아쉬운 점 🚀 프로젝트 미션 이번 챌린지에서는 쿠팡 상품 페이지를 구현해보겠습니다. 공통된 UI들을 컴포넌트로 추출하고 확장성을 고려하여 단단하계 설계해봅니다. 상태 관리 및 비즈니스 로직에 집중하여, 화면을 어느 단위로 나누는 것이 효율적일지 고민해봅니다. 가독성 좋은 JSX 작성, 디렉토리 구조 등 프론트엔드에서의 Clean Code에 집중합니다. 데이터 연동을 위해 쿠팡과 동일한 형식의 API가 제공, 데이터 연동을 꼭 해보시길 적극적으로 권장합니다! (Next.js의 API routes 기능을 활용해 일종의 BFF를 만들어서 데이터들을 가공해서 활용해보셔..

프론트엔드 챌린지 실무에서 잘쓰이는 기술스택을 가지고 쿠팡 클론코딩 하기 🎥 목차 더보기 프로젝트 미션 사용한 기술스택 깨달은 점 오류 해결방법 아쉬운 점 🚀 프로젝트 미션 쿠팡 서비스의 로그인 페이지와 회원가입 페이지에서 사용되는 컴포넌트들을 만들어볼 것입니다. 총 네 개의 컴포넌트를 설계하며, 실무에서처럼 다양한 유즈케이스에 탄력적으로 대응할 수 있는 구조에 대해서 고민해봅니다. 만든 컴포넌트들은 Storybook을 사용해 누구나 확인할 수 있도록 배포합니다. 만들어볼 컴포넌트 Button Input Check CheckGroup 👨‍💻 사용한 기술스택 (+ 라이브러리) 프레임워크 : Next.js 라이브러리 @emotion-styled react-hook-form storybook 배포 chroma..

[진행중] React 가장 실무에 가까운 쿠팡 클론 코딩 챕터 Ⅰ 상세 보기 www.numble.it 프론트엔드 챌린지 실무에서 잘쓰이는 기술스택을 가지고 쿠팡 클론코딩 하기 ❓상황 Next.js 프레임워크가 실무에서 많이 쓰인다고 하여, 개발역량 향상을 위해 공부하려고 인터넷에 Next.js관련 정보를 얻다가 챌린지를 시작하게 되었다. 특히, 실무에서 가장 잘 쓰이는 기술스택을 모아놨다고 한다. 곧바로 채용이 될 수는 없겠지만, '기업들이 원하는 인재상에 잘 맞는 개발자가 되지 않을까'하는 기대감도 생겼다. 🎥 목차 더보기 프로젝트 미션 사용한 기술스택 깨달은 점 오류 해결방법 아쉬운 점 🚀 프로젝트 미션 로그인을 위해 필요한 Data Fetching 모듈을 만들어볼 것입니다. 주어진 Interface..

🎉 성과 완성한 부분 1. 포트폴리오 웹사이트의 경력부분 등록 완성한 이유 1. 취업을 하게되어서 수정하게 되었다.

🎉 성과 완성한 부분 자바스크립트 → 타입스크립트 완성한 이유 넘블 챌린지의 개발 조건 중 하나는 자바스크립트 대신 타입 스크립트로 코드를 작성하는 것이다. 따라서 이를 수행하기 위해 타입스크립트로 변환했다. ✨ 느낀 점 👍 알게 된 점 타입스크립트에서 CSS Module 사용하기 1. 터미널에 밑의 코드 입력(CSS Module 기능 설치) npm install -D typescript-plugin-css-modules 2. tsconfig.json 파일에 밑의 코드 입력 3. scr 폴더에 global.d.ts 파일 생성 후 밑의 코드 입력 여기까지 진행완료하면 CSS Module을 사용할 수 있게 된다. 인수 타입 설정하기 문자열을 숫자로 변환시켜주는 함수, 인수타입 문자열로 바꾸기 처음에 에러가 ..