한빛 로고
내 콘텐츠장바구니
no Image fallback
react_thum.png

리액트로 만드는 NASA API 기반 정보 조회 게시판

강사박성재
14강(5:00:51)
초급
기간무제한
수강료57,000
할인가45,600
적립/혜택

1,710P적립 (3%)

리액트로 시작하는 미니 프로젝트

리액트를 이용해 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 관리를 할 수 있다.


강사

박성재

박성재

유튜브 ‘구디 사는 개발자 9Diin’, 프로그래밍 교육 업체 ‘위 아트 스튜디오(WE’ART STUDIO)’를 운영하고 있는 박성재입니다. 비전공자로 IT업계에 뛰어들어 프론트엔드 개발자를 거쳐, 지금은 대기업 프로그래밍 강의까지 진행하게 되었습니다. 안 해 본 길에 대한 도전과 열정으로 제가 가진 지식을 나누는 일에 진심인 개발자입니다.

 

경력
전) 지에스아이엘 프론트엔드

 

저서 및 강의
– 해커스 HRD
1) 가장 쉽게 배우는 자바스크립트, 기초부터 실무까지
2) 가장 쉽게 배우는 Vue.js, 기초부터 실무까지
– 하나 금융그룹 DT 교육

커리큘럼

재생 02차시_프로젝트 환경설정02차시_프로젝트 환경설정

27:06

재생 03차시_리액트 동작 원리03차시_리액트 동작 원리

24:41

재생 04차시_프로젝트 구조 잡기04차시_프로젝트 구조 잡기

19:36

재생 05-1차시_메인 페이지 만들기 105-1차시_메인 페이지 만들기 1

20:53

재생 05-2차시_메인 페이지 만들기 205-2차시_메인 페이지 만들기 2

13:40

재생 05-3차시_메인 페이지 만들기 305-3차시_메인 페이지 만들기 3

13:17

재생 05-4차시_메인 페이지 만들기 405-4차시_메인 페이지 만들기 4

23:25

재생 06차시_대시보드 만들기06차시_대시보드 만들기

23:18

재생 07-1차시_데이터 가져오기 107-1차시_데이터 가져오기 1

37:24

재생 07-2차시_데이터 가져오기 207-2차시_데이터 가져오기 2

21:47

재생 08차시_상태 관리08차시_상태 관리

27:12

재생 09차시_코드 리팩토링09차시_코드 리팩토링

28:05

재생 10차시_프로젝트 배포10차시_프로젝트 배포

09:29

수강 후기

첫 번째 수강평을 남겨주세요!
다른 수강생에게 큰 도움이 됩니다.

20% 57,000

45,600