[NextJS] 2025 Programmers Dev-course

의존성 설치 가져온 프로젝트를 VSCode에서 열기 terminal 열기 코드 컨벤션 설정 적용 빌드 실행 스토리북 실행

프로젝트 생성 프로젝트 설정 package.json ESLint 모듈 프로젝트 구조 참고: Prettier & ESLint, Airbnb Style Guide 코드 컨벤션 설정

React에서 폼을 쉽게 만들고 관리할 수 있도록 도와주는 라이브러리 useForm() 훅 하나로 폼 상태 관리, 유효성 검사, 제출 핸들링 등을 처리 특징 간단한 API uncontrolled component 방식: 렌더링 감소 작은 번들 크기 가볍고 빠른 속

모바일에서 뷰포트 설정 모바일 기기에서 자동으로 이미지를 줄여서 보여주는 것을 막고 원본 크기로 보이게 함 3배 이미지 PC용을 모바일용보다 3배 큰 이미지를 사용하여 이미지 깨짐이 없도록 함 next image 자동 이미지 최적화

shadcn는 tailwind 기반으로 작동함 tailwind 설치 후 사용 가능 tailwind 환경 설정 terminal tailwind.config.js global.css shadcn ui.shadcn.com 환경 설정 terminal comp

백엔드랑 통신하는 부분 백엔드랑 직접 연결되는 코드는 이곳에 넣는다 page 디자인용 컴포넌트와 비즈니스 컴포넌트를 가져와서 만든다 통신하는 부분을 호출한다 business components 재사용하는 form 같은 것 이곳에서는 백엔드와 통신하는 부분을

개념 설명 JavaScript와 TypeScript로 작성된 애플리케이션을 테스트하기 위한 테스트 프레임워크 설정 없이 바로 사용할 수 있는 직관적인 프레임워크 주로 단위 테스트, 통합 테스트, 스냅샷 테스트를 작성하고 실행하는 데 사용됨 Facebook에서 개발

웹 애플리케이션 테스트 프레임워크 JavaScript 기반 엔드-투-엔드(End-to-End) 테스트 특징 실시간 테스트 자동화된 테스트 직관적인 API 브라우저와의 깊은 통합 빠른 실행 설치 실행

UI 컴포넌트 테스트 도구 UI 컴포넌트를 시각적으로 확인할 수 있음 설치 환경 설정 package.json 실행 디렉터리 구조

목적 DOM 관련 단언(assertion) 작성 도구 Jest 사용 시 DOM 상태 테스트에 유용함 주요 기능 DOM 상태를 확인하는 추가적인 단언 함수 제공 (toBeInTheDocument, toHaveClass, toHaveAttribute, toHaveS

설명 React 기반 프로젝트에서 테스트 작성 시 필수적인 도구 주요 기능: 컴포넌트를 DOM에 렌더링 (render 함수) DOM 요소를 찾기 위한 다양한 쿼리 제공 (getByText, getByRole, queryBy...) 사용자 이벤트 시뮬레이션 (fir

Next.js 컴포넌트 테스트 환경설정 방법

리액트 개발 환경 설정 node.js 설치 실행중일 때 빠져나오는 법 cirt+c

기본 모달 컨트롤 open?: boolean 모달이 열려 있는지(true), 닫혀 있는지(false)를 제어합니다. onOpenChange?: (open: boolean) => void 모달의 열림/닫힘 상태가 변경될 때 실행되는 콜백 함수입니다. onClose?: () => void 모달이 닫힐 때 실행되는 콜백 함수입니다. modal?:...

ECMAScript 문법 종류 두가지 화살표 함수 함수 선언문 비교 화살표 함수 더 많이 사용하는 방식 호이스팅 불가 (안정적) 함수 선언문 호이스팅 가능 (버그 유발 가능성)

CallbackPage 방법 > lib/api/user/user.ts > app/callback/page.ts useAuth 처리 방법 > lib/api/user/user.ts 비교 CallbackPage 유지보수 용이, 높은 확장성 useAuth 인증 로