리액트로 시작하는 미니 프로젝트
리액트를 이용해 NASA API 연동 게시판을 직접 만들어 보세요. 초보자도 완성도 높은 포트폴리오 제작이 가능합니다.
리액트는 현재 웹 개발 분야에서 가장 인기 있는 프론트엔드 기술 중의 하나로, 많은 기업이 리액트를 활용하여 사용자 친화적인 웹 애플리케이션을 개발하고 있습니다. 리액트를 배운다는 것은 이런 실무 환경에서 요구되는 기술을 익히는 시작이 될 것입니다.
이 강의는 간단하지만, 완성도 있는 미니 프로젝트를 통해 리액트를 실제로 적용해 보며 실전 경험을 쌓는 기회를 제공합니다. 직접 코드를 작성하고 결과를 확인하며 다양한 문제를 해결해 나가는 미니 프로젝트는 리액트의 개념과 원리를 깊게 이해하는 데 도움을 줄 것입니다.
무엇을 배우는 강의인가요?
리액트의 기본 개념과 개발 환경 설정부터 시작하여, 실제로 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 관리를 할 수 있다.
왜 리액트를 사용할까 | 10:58 |
프로젝트 환경설정 | 27:06 |
리액트 동작 원리 | 24:41 |
프로젝트 구조 잡기 | 19:36 |
메인 페이지 만들기1 | 20:53 |
메인 페이지 만들기2 | 13:40 |
메인 페이지 만들기3 | 13:17 |
메인 페이지 만들기 4 | 23:25 |
대시보드 만들기 | 23:18 |
데이터 가져오기1 | 37:24 |
데이터 가져오기2 | 21:47 |
상태 관리 | 27:12 |
코드 리팩토링 | 28:05 |
프로젝트배포 | 09:29 |
자케(오카다 다쿠미)