Error! missing queryFn ❓상황 v4 버전의 @tanstack/react-query의 useInfiniteQuery 함수 사용시 발생한 오류 🔎 원인 파악 v3에서는 querykey가 문자열과 배열을 허용했지만, v4에서는 querykey가 배열만 허용되게 바뀌었다. ✨ 해결 방법 querykey를 배열로 변경했더니 fetch 잘 되었다.

SSG 기반 웹사이트 구현하기 ❓상황 SSG기반으로 웹사이트를 구현하기위해 사용하는 next.js를 확실하게 공부하고 싶어서 정리하게 되었음. 📖 next.js 이란? Next.js는 빠른 웹 응용 프로그램을 만들 수 있는 구성 요소를 제공하는 유연한 React 프레임워크입니다. 웹사이트를 구현할때, 고려할 사항은 다음과 같습니다. 사용자 인터페이스 - 사용자가 응용프로그램을 사용하고 상호 작용하는 방식. 라우팅 - 사용자가 응용프로그램의 다른 부분을 탐색하는 방법. 데이터 가져오기 - 데이터가 저장되는 위치와 데이터를 가져오는 방법. 렌더링 - 정적 또는 동적 콘텐츠를 렌더링할 때와 장소를 지정합니다. 통합 - 사용하는 타사 서비스(CMS, 인증, 결제 등) 및 이러한 서비스에 연결하는 방법. 인프라 ..

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

Line Awesome의 아이콘 사용법 정리 ❓상황 패스트캠퍼스 강의 수강 중, 이미지 슬라이드에 사용할 아이콘을 구현하기 위해 정리함 이전에 react-icons 사이트의 아이콘을 사용했는데, 다른 사이트의 아이콘 사용하는 경험도 쌓기 위함. 📖 Line Awesome 이란? React 프로젝트에 주로 사용되는 아이콘들을 포함하고 있음. Font Awesome의 모던한 아이콘을 제공한다고 적혀있다(자회사인듯?) 🐸 설치 // npm npm install line-awesome // yarn yarn add line-awesome import { FaBeer } from "@react-icons/all-files/fa/FaBeer"; class Question extends React.Component ..

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