AI 플래시카드: Next.js 기초 개발 가이드

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• React/Next.js를 사용하는 개발자
• 풀스택 애플리케이션 개발에 관심 있는 중급 이상 개발자
• AI 기반 학습 도구 구축을 목표로 하는 프론트엔드 개발자

핵심 요약

• FlashCard 컴포넌트 구조: phrase, meaning, examples 등의 인터페이스 정의
• Next.js App Router: app/page.tsx에서 useState와 API 호출 처리 (예: process.env.NEXT_PUBLIC_API_URL)
• NestJS 백엔드 설정: main.ts에서 enableCors() 설정 및 npm run dev로 서버 실행

섹션별 세부 요약

1. FlashCard 컴포넌트 구현

• components/FlashCard.tsx 파일 생성
• React.FC 인터페이스 정의
• phrase, examples, similarPhrases 등 데이터 구조 매핑
• map() 함수로 카드 내용 동적으로 렌더링

2. Next.js 홈 페이지 구현

• app/page.tsx에서 사용자 입력 처리 로직
• useState로 입력 상태 및 로딩 상태 관리
• /phrase/explain 엔드포인트로 POST 요청 보내기
• FlashCard 컴포넌트 렌더링 조건: flashCard 상태 존재 시

3. 환경 설정 및 백엔드 구성

• .env.local 파일에서 NEXT_PUBLIC_API_URL 정의
• NestJS 서버에서 enableCors()로 CORS 허용 설정
• npm run start:dev 또는 npm run dev로 서버 실행 (포트 3000/3001)

결론

• API URL은 .env.local에 반드시 정의해야 하며, CORS 설정은 백엔드에서 필수
• 에러 처리는 try-catch로 구현하고, 로딩 상태는 UX 개선에 중요
• Next.js App Router 사용 시 app/page.tsx가 기본 경로이며, Pages Router는 pages/index.tsx 사용