[원티드] React Hook과 SPA 실전개발 with Next.js

이 글은 네이버 블로그에 2024년 8월 18일에 올렸던 것을 그대로 옮겨온 것입니다.

React의 핵심 개념을 배우고 JSX를 통해 실제로 코드를 작성합니다.

상태 관리의 기초부터 Hooks를 사용한 고급 기법까지, 효율적인 상태 관리 방법을 배웁니다.

서버 사이드 렌더링과 정적 사이트 생성을 포함하는 SPA를 Next.js로 구축하는 방법을 배웁니다.

챌린지 종료 후 React와 Next.js를 활용한 컴포넌트 기반 개발, 상태 관리, 서버 사이드 렌더링, 그리고 SPA 최적화에 대한 깊이 있는 이해와 실용적인 적용 능력을 답변할 수 있게 됩니다.

• React의 핵심 개념과 JSX를 통한 실습

• React, JSX 문법, Virtual DOM

• • 왜 React인가? 웹 개발에서의 그 중요성과 변화
• • React의 주요 특징과 개발자에게 주는 이점들
• • 함수형 대 클래스형 컴포넌트: 사용 시기와 장단점
• • JSX 소개: HTML과의 차이점
• • 조건부 렌더링과 이벤트 처리
• • React 컴포넌트 만들기: 실습을 통해 배운 내용 적용

• 프론트엔드 개발자의 지속 가능한 가치

• 상태 관리와 React Hooks 탐구

• 상태(state)와 속성(props), Hooks

• • 상태와 속성의 구분 및 각각의 역할
• • useState와 useEffect로 컴포넌트 생명주기 관리
• • 실제 예제를 통한 Hooks 이해

• Next.js를 이용한 SPA 개발

• Next.js, 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG)

• • SPA와의 차별점과 Next.js에서의 적용
• • 차별점과 Next.js에서의 적용
• • 동적 라우팅과 데이터 로드 방법
• • Next.js를 활용한 입력폼 개발

• SPA 개발의 전 과정을 실습하며 완성도 높은 애플리케이션 만들기

• 통합 상태 관리, 라우팅과 API 연동, 배포 및 최적화

• • 실제 사례를 바탕으로 한 요구 사항 분석
• • 성능과 SEO를 위한 최적화 전략
• • 실제 배포 과정의 이해와 준비