
코드로 배우는 React 19 with 스프링부트 API서버
구멍가게코딩단
스프링 부트(Spring Boot ver3.4.x)로 제작되는 API 서버와 React 19 (with TypeScript) 연동 프로젝트 완성하기! 포트폴리오 작성 부트캠프 과정 전체를 강의로 제작
중급이상
React, TypeScript, Spring Boot
React 시작은 Next.js 프레임워크로 시작하세요! 실무에서 개발에 필요한 필수적인 예제들만 간추려 개발해 봅시다. Todo 예제는 너무나 중요하므로 2번 개발해야 합니다. 한번은 컴포넌트 중심으로 다음에는 브라우저의 경로에 맞게 처리되는 라우팅 중심으로! 로그인은 zustand를 이용하세요! 정말 적은 양의 코드로 전역 상태를 처리할 수 있습니다.
컴포넌트와 컴포넌트를 구성하는 방법
컴포넌트의 상태(state)와 속성(props)
API 서버와 연동하는 리액트 어플리케이션
Next.js를 이용한 라우팅 처리
React는 라이브러리에서 프레임워크를 사용하는 단계로 넘어가고 있습니다.
처음 시작부터 Next.js 를 배워두세요!
Next.js는 브라우저에서 동작하는 클라이언트 컴포넌트와 서버에서 동작하는 서버 컴포넌트 모두를 지원합니다.
처음 학습하는 분들은 클라이언트 컴포넌트를 우선적으로 학습하고 이후에 서버 컴포넌트를 학습하는 것이 좋습니다.
예제를 통해서 배우세요!
'백문이 불여일견'이고 '백견이 불여일타'입니다.
간단한 예제를 여러 방식으로 변형하는 것만으로도 많은 공부가 됩니다.
지식이 아닌 노하우를 예제를 통해서 학습해야 합니다.
Easygoing React 쉽게 시작하세요!
처음엔 JavaScript로 시작하셔도 괜찮습니다.
처음엔 디자인 없이 시작하셔도 괜찮습니다.
처음엔 완성된 구조에서 시작하셔도 괜찮습니다.
컴포넌트가 무엇인지 알아봅니다.
컴포넌트의 속성/상태 등에 대해서 알아봅니다.
외부 서비스와 연동하는 기능을 만들어 봅니다.
상태 관리는 Zustand를 이용하는게 요즘 트렌드
섹션 (1) 개발 환경
Next.js를 이용하는 개발 환경 설정과 실행
Next.js를 이용하면 프로젝트의 기본 설정이 모두 완성된 상태에서 개발이 가능해 집니다.
섹션 (2) 컴포넌트! 컴포넌트! 컴포넌트!
컴포넌트로 원하는 기능을 작성해 봅니다.
컴포넌트를 어떻게 나눠야 할까?
컴포넌트간에 통신은 어떻게 해야할까?
구현하는데 필요한 기초적인 JavaScript 문법도 같이 학습합시다.
첫 Todo 예제에 AI를 이용해서 디자인을 적용합니다.
섹션 (3) 컨테이너와 프리젠테이션
여러 개의 컴포넌트가 통신하면서 결과를 만들어야 한다면?
컴포넌트의 상태
컴포넌트의 속성
JavaScript의 배열과 filter
구조 분해 할당
전개 연산자
섹션 (4) 라우팅 처리되는 Todo
좀 더 현실적인 예제를 만들려면 브라우저의 주소창에 맞는 화면을 만드는 '라우팅(Routing)'이 필요합니다.
Next.js는 라우팅을 기본으로 제공합니다.
Next.js는 레이아웃도 기본으로 제공합니다.
Fetch API를 이용하는 습관을 들이세요.
<Link>만 이용해야 하는 이유를 알아두세요.
섹션 (5) Zustand를 활용해 봅시다.
Zustand는 현장에서 가장 인기있는 전역 상태 관리 라이브러리입니다. 몇 줄의 코드 만으로 전역 상태를 관리할 수 있습니다.
로컬스토리지에 결과를 보관할 수도 있습니다.
다른 라이브러리보다도 사용방법이 간단합니다.
React 입문자를 위한 강의입니다.
React를 배우고 싶은 분들을 위한 입문용 강의입니다.
JavaScript의 변수를 선언할 줄 알아야 합니다.
제어문과 반복문에 대해서 알아야 합니다.
함수와 배열에 대하서 알아야 합니다.
브라우저에서 HTML과 JS를 이용해서 이벤트 처리를 해 본 적이 있어야 합니다.
학습 대상은
누구일까요?
React를 처음 해보고 싶은 사람
Next.js를 처음 시작하는 사람
빠르게 React의 개념을 학습하고자 하는 사람
선수 지식,
필요할까요?
JavaScript 기초 지식(변수, 제어문, 배열, 함수)
1,968
명
수강생
129
개
수강평
263
개
답변
4.8
점
강의 평점
5
개
강의
구멍가게코딩단은 2015년부터 개발과 관련된 직종의 사람들의 모임을 위해 만들어진 커뮤니티입니다.
강의의 진행은 현재 구멍가게 코딩단을 운영하고 있는 쿠키 담당자가 진행하고 있습니다.
2015년 부터 '코드로 배우는 ..' 시리즈를 집필하고 있습니다.
전체
37개 ∙ (8시간 7분)
해당 강의에서 제공:
1. 강의소개
09:35
3. 컴포넌트의 생성
15:41
4. 함수를 알아봅시다
10:50
5. 컴포넌트내 제어처리
14:08
6. 컴포넌트내 반복문
16:22
7. 컴포넌트의 props
14:33
8. 컴포넌트의 상태(state)
17:47
9. 컴포넌트간 통신
14:20
12. Todo예제 개발준비-소스코드
09:39
14. Todo 목록출력과 등록
17:52
15. Todo 삭제와 수정처리1
09:10
16. Todo 수정처리2
14:40
17. Todo 수정처리3
21:03
18. 화면 디자인 수정하기
08:48
19. 비동기 통신에 대한 이해
13:13
22. 동적 경로 처리와 Link
11:19
23. 조회 처리
14:18
24. POST방식으로 등록 호출하기
12:58
25. POST방식의 등록처리2
11:38
26. 커스텀훅과 수정화면
15:03
27. PUT방식과 수정처리
13:11
28. DELETE방식과 삭제처리
11:16
29. Zustand 와 전역상태
13:16
30. 전역 상태를 위한 스토어
16:41
31. 스토어처리 복습
08:45
32. 의존성이 없는 컴포넌트 구조
10:03
33. Zustand의 persist
12:06
34. 로그인처리 개요
14:55
35. 로그인상태 스토어처리
10:47
37. 로그아웃 처리와 디자인
08:48
얼리버드 할인 중
₩9,900
50%
₩19,800
지식공유자님의 다른 강의를 만나보세요!
같은 분야의 다른 강의를 만나보세요!