만들면서 배우는 리액트: 컴포넌트 설계와 리팩토링

섹션 (1) 개발 환경 구성 꿀팁

수업에 필요한 개발 환경을 구성합니다. 코드 편집 도구와 실무에서 자주 사용되는 리액트 관련 VSCode 플러그인, 리액트 개발자 도구, GitHub, Prettier 등을 안내합니다.

섹션 (2) 프로젝트 생성 - 폴더, 파일 구조, 설정 파일 안내

리액트 프로젝트를 만드는 방법을 알아보고 최신 프런트엔드 빌드 도구인 Vite로 프로젝트를 생성합니다.

NPM, ESLint, 프로젝트 라이브러리 관리 방법, 커스텀 명령어에 대해서 알아보고 전반적인 프로젝트 구성 이해도를 높입니다.

섹션 (3) 할 일 관리 앱 빠르게 만들기

리액트의 상태, 이벤트 핸들러와 같은 기본 문법으로 할 일 관리 앱의 주요 기능을 빠르게 구현합니다.

구현하면서 코드를 정확하고 빠르게 작성할 수 있는 코드 작성 방법. 생산성을 높여주는 코드 단축키 등을 맥, 윈도우 사용자 모두를 위해 알려줍니다.

섹션 (4) 리팩토링으로 배우는 컴포넌트 설계와 상태 정의

컴포넌트를 UI 역할 별로 분리하면서 생기는 문제점을 살펴봅니다. 여러 개의 컴포넌트 간에 데이터를 전달하는 방법. 프롭스와 상태를 어떻게 정의해야 하고 컴포넌트 간에 유기적으로 연결될 수 있는지 살펴봅니다.

에러를 눈으로 보고 직접 같이 해결하면서 동작 원리를 함께 알아봐요.

섹션 (5) 애플리케이션 배포

간단하고 귀여운 애플리케이션이지만 내가 만든 걸 자랑할 수 있게 사이트에 배포해 봅니다. 자동 배포 방법과 간단한 빌드 명령어를 배웁니다.

장기효 (캡틴판교)

• 11년차 프론트엔드 개발자

• 저서

  • 쉽게 시작하는 타입스크립트

  • Do it! Vue.js 입문

  • 나는 네이버 프런트엔드 개발자입니다

    
    

• 기업 강의 : 네이버, 삼성, LG, SK, 현차, CJ 등 실무자 대상 강의

• 캡틴판교의 유튜브 채널,

  기술 블로그, GitHub

"인프런이 만난 사람" 인터뷰

• 1편 _ 결국엔 '같이 간다'는 마음으로

• 2편 _ 지금이 웹 개발하기엔 '참 좋은 시기'