리액트는 현재 웹 개발 분야에서 가장 인기 있는 프론트엔드 기술 중의 하나로, 많은 기업이 리액트를 활용하여 사용자 친화적인 웹 애플리케이션을 개발하고 있습니다. 리액트를 배운다는 것은 이런 실무 환경에서 요구되는 기술을 익히는 시작이 될 것입니다.
이 강의는 간단하지만, 완성도 있는 미니 프로젝트를 통해 리액트를 실제로 적용해 보며 실전 경험을 쌓는 기회를 제공합니다. 직접 코드를 작성하고 결과를 확인하며 다양한 문제를 해결해 나가는 미니 프로젝트는 리액트의 개념과 원리를 깊게 이해하는 데 도움을 줄 것입니다.
리액트의 기본 개념과 개발 환경 설정부터 시작하여, 실제로 NASA API를 연동한 정보 조회 게시판을 만드는 실습 프로젝트입니다.
리액트 환경 설정과 개발 도구 사용법을 익히며, 실무에서 바로 활용할 수 있는 기초를 다집니다. 이후, NASA API와 같은 오픈 API를 활용하여 천문 사진 정보를 실시간으로 조회할 수 있는 게시판을 직접 구축해 봅니다.
특히, 최신 프론트엔드 라이브러리인 Shadcn UI와 Jotai를 이용하여 사용자 인터페이스를 구축하고, 상태 관리를 체계적으로 할 수 있는 방법을 학습합니다. 이 프로젝트를 통해 복잡한 데이터를 효율적으로 처리하고, 직관적인 UI를 설계하는 능력을 배양할 수 있습니다. 최종적으로, 실제 포트폴리오에 바로 활용할 수 있는 수준의 고퀄리티 결과물을 제작할 수 있습니다.
Part 1. 리액트 이해 및 개발 환경 설정
리액트의 개념과 원리에 대한 기초 이론을 배우고, 개발 환경을 설정합니다.
이 과정을 통해 이후 다양한 프로젝트에 적용할 수 있는 튼튼한 기초를 쌓을 수 있습니다.
Part 2. NASA API 기반 정보 조회 게시판 만들기
React, Shadcn UI, TypeScript, Jotai 등 최신 프론트엔드 기술을 활용해 정보 조회 게시판을 만들어봅니다. 실습을 통해 UI를 구성하는 방법과 최신 개발 트렌드를 익히고, 데이터 통신 및 상태 관리 기술을 배울 수 있습니다.
- HTML, CSS, JavaScript에 대한 기초지식을 갖춘 개발자
- 프론트엔드 개발을 준비 중인 취업 준비생 및 개인 프로젝트를 계획 중인 개발자
- 주니어 개발자(3년 차 이내, 프런트엔드&백엔드 포함)로서 새로운 개발 트렌드에 관심이 있고, 또 다른 기술 스택의 확장을 희망하시는 개발자
- React + TypeScript + Shadcn UI를 활용하여 최신 개발 트렌드 반영 및 양질의 결과물 만들어낼 수 있다.
- Open API를 활용하여 데이터 통신을 할 수 있다.
- 중앙집중식 상태 관리 라이브러리 Jotai를 활용한 Store & State 관리를 할 수 있다.
1 | 01차시_왜 리액트를 사용할까 | 10:58 |
2 | 02차시_프로젝트 환경설정 | 27:06 |
3 | 03차시_리액트 동작 원리 | 24:41 |
4 | 04차시_프로젝트 구조 잡기 | 19:36 |
5 | 05-1차시_메인 페이지 만들기 1 | 20:53 |
6 | 05-2차시_메인 페이지 만들기 2 | 13:40 |
7 | 05-3차시_메인 페이지 만들기 3 | 13:17 |
8 | 05-4차시_메인 페이지 만들기 4 | 23:25 |
9 | 06차시_대시보드 만들기 | 23:18 |
10 | 07-1차시_데이터 가져오기 1 | 37:24 |
11 | 07-2차시_데이터 가져오기 2 | 21:47 |
12 | 08차시_상태 관리 | 27:12 |
13 | 09차시_코드 리팩토링 | 28:05 |
14 | 10차시_프로젝트 배포 | 9:29 |
자케(오카다 다쿠미)