BEST

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

Name: [코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
Price: 396000 KRW
Rating: 5 (17 reviews)

수백명의 개발자를 배출한 ‘진짜’ 부트캠프의 완벽한 프론트엔드 커리큘럼 입니다. 이 강의 하나로 여러분은 현업 주니어 개발자 수준까지 성장 가능하며, 프론트엔드 기술스택의 활용 능력과 지식을 얻게 될거에요. 누구나 사회적, 경제적, 교육적 배경에 상관없이 커리어를 쌓을 수 있도록, [코드캠프]가 준비했습니다 :)

(5.0) 수강평 17개

수강생 528명

난이도 입문

수강기한 무제한

이론 실습 모두

코드캠프

코딩독학

이론 실습 모두

코드캠프

코딩독학

현대글로비스

임직원들도 이 강의를 듣고 있어요!

현대글로비스

임직원들도 이 강의를 듣고 있어요!

수강 후 이런걸 얻을 수 있어요

심화과정을 대비하는 친절한 [CSS&Javascript]
최기술스택을 활용한 [웹 프론트엔드]
실무역량을 위한 [하이브리드앱 프론트엔드]
미니 포트폴리오 2개, 실무 포트폴리오 2개
전체적인 개발 사이클 완벽 이해

'진짜' 부트캠프에서 만든
[완벽한 프론트엔드 코스]는요

"코딩의 '코'자도 모르는 나.. 개발자로 취업할 수 있을까?" 그런 걱정은 당장 넣어두세요.
이 강의에서는 쌩초보도 현업 개발자 수준으로 성장할 수 있도록 탄탄한 기초 강의부터 시작하니까요!

온·오프라인으로 2,000명이 넘는 수강생이 선택한 '고농축 프론트엔드 코스 '
더 강력하게 업데이트 되어 '완벽한 프론트엔드 코스'로 다시 찾아 왔습니다😀

프론트엔드의 핵심 기술
우리는 왜 React.js와 Next.js를 사용해야 할까요?

Next.js는 React 라이브러리의 프레임워크예요. React와 달리 기본적으로 Next.js는 Server-Side Rendering (SSR)을 하기 때문에 검색엔진 최적화(SEO, Search Optimiziation)에 좋아요. 또한 pre-rendering을 통해 미리데이터가 렌더링 된 페이지를 가져올 수 있게 해주므로 사용자 경험 면에서도 유리하죠.

이 외에도 페이지 기반 라우팅, 이미지 최적화, built-in-css등을 제공해서 프로젝트 성능을 향상해 주고 개발자들이 개발하기 편한 환경을 제공하니, 효율성 있고 성능 높은 개발을 할 수 있습니다 :)

마지막으로 이제는 하이브리드앱 시대!
React와 Next를 기반으로 React.Native와 Expo를 활용해 더욱 편리하고 효율적으로 하이브리드앱을 개발하고 안드로이드와 IOS에 서비스를 구축할 수 있습니다.

게다가 완프 강의 하나로
이만-큼의 스택을 한 번에 겟!

이 강의에서는 프로젝트를 통해 React와 Next.js 뿐만 아니라, Typescript, Graphql 등 다양한 주요 스택을 활용하며 학습을 진행해요. 하나의 기능을 구현하기 유기적으로 연결된 언어들의 사용 방법을 습득하며, 자연스럽게 다양한 기술 스택을 이해하게 될 거에요.

진짜 실무에서는 다양한 언어와 기술 스택을 적절히 사용하며 최고의 효율을 낼 수 있어야 하니까요!

*version: 수강 시 사용하는 주요 스택 버전입니다. (필요시 참고해주세요!)

-"next": "14.2.13",
-"react": "^18",
-"react-dom": "^18",
-"typescript": "^5"
-"@apollo/client": "^3.11.8",
-"graphql": "^16.9.0",
-"react-hook-form": "^7.53.1",
-"zod": "^3.23.8",
-"zustand": "^5.0.0",
-"tailwindcss": "^3.4.1",

'Version'과 해당 기술 스택에 대한 이해가 없어도 괜찮아요. 강의에서 꼼꼼하고 친절하게 설명해 드릴게요:)

💡 컴퓨터 사양을 확인해주세요.

· Mac OS는 사양 무관합니다.  
· Window OS를 사용할 경우, git-bash 설치가 필요합니다. 
 - 수업자료 > 환경 세팅을 참고해주세요.  
 - Intel Core i5 9세대 이상 / AMD RYZEN 5 2세대 이상 

- RAM 16GB 이상 추천

💡일과표를 만들어 규칙적으로 꾸준히 학습하시길 권장해요.
💡학습 자료를 받기 위해 협업툴 ‘노션’ 계정을 만들어주세요.
💡수강에 필요한 학습자료는 노션(링크)으로 제공됩니다.
※ 학습 자료의 저작권은 코드캠프에게 있습니다. 무단 도용 · 배포 · 복제를 금지합니다.

Q. 아무런 지식 없이 수강해도 될까요?

네. 코딩의 '코'자를 몰라도 괜찮아요. 더 깊고 넓게 이해할 수 있도록 쌩기초 과정인 '시작은 프리캠프'와 부트캠프로 가기 위한 중간 과정인 'CSS&JS 마스터 과정'을 함게 제공하고 있어요.

Q. 기초 지식이 있다면 어디부터 수강하면 되나요?

기초적인 HTML, CSS, Javascript만 이해하고 있다면, 'CSS&JS 마스터 과정'부터 시작하는 것을 추천드려요. 만약 국비교육, 기타 온라인 교육 등으로 CSS와 Javascript가 튼튼하다면 바로 '웹 프론트엔드 부트캠프'부터 시작해도 좋아요.

Q. 웹 프론트엔드 부트캠프 강의를 효율적으로 수강하는 방법이 있나요?

섹션별 강의를 수강해주세요! 평균적으로 한 섹션당 3~5개 소주제로 나누어져 있어요. 체계적인 수업인 만큼, 일과표를 만들어서 규칙적으로 학습하는 것을 추천해요!
학습과제가 있다면 과제를 진행해주세요! 학습과제는 있는 섹션과 없는 섹션으로 나누어져 있어요. 포트폴리오 과제를 하기 전에 학습 과제를 해본다면 도움이 될꺼에요!
필수과제(포트폴리오 과제)를 진행해주세요! 섹션 내용을 기반으로 제공되는 섹션별 필수 과제는 포트폴리오 제작을 위해 반드시 해야해요! 단, 참고할 수 있는 레퍼런스코드는 중반까지만 제공되고 있어요!그 이후부터는 모든 코드를 스스로 짤 수 있어야 진짜 포트폴리오르 사용할 수 있다는 점 명심해주세요.

Q. 계단식 커리큘럼이 무엇인가요?

완벽한 프론트엔트의 커리큘럼은 꼬리에 꼬리를 무는 연속적인 강의 구성을 가지고 있어요!
예를 들어 [Section 26-02 리프레시토큰]을 수강하기 위해서는 [Section 23-07]에서 작성한 코드를 복사해와서 수업을 이어가고 있습니다. 즉, [Section 23-07]을 수강해서 코드를 작성했어야 하고, 또한 복습도 해서 해당 코드가 무엇인지 알고 있어야 되겠죠?

특정 섹션을 건너띄고 궁금한 섹션을 수강하고 싶어도 걱정하지 마세요! 강사님의 수업 코드를 별도로 다운로드 받을 수 있도록 제공되고 있어요! 하지만 수업을 통해 직접 작성한 코드가 아니라 다운로드 받은 코드였다면 해당 코드를 이해할 수 있어야 잘 따라갈 수 있다는 점은 꼭, 반드시 명심해주세요!

Q. 수강 중 궁금한 점이 생겼어요.

커뮤니티에 질문을 남겨주세요. 빠른 시일 내에 속 시원한 답변을 달아드릴께요😁

이런 분들께
추천드려요

학습 대상은
누구일까요?

전문적인 커리큘럼으로 제대로 성장하고 싶은 누구나
국비 또는 다른 강의에 부족함을 느낀 누구나
충분한 과제로 체계적인 코딩 공부를 하고 싶은 누구나
사수가 필요로 하는 주니어 개발자
트렌드에 맞는 포트폴리오를 구축하고 싶은 취준생

선수 지식,
필요할까요?

코딩에 대한 열정과 의지💪🏻

안녕하세요
코드캠프입니다.

인프런인증

16,141

명

수강생

520

개

수강평

232

개

답변

4.8

점

강의 평점

개

강의

"Try anything, Try everything!"

코드캠프는 유능한 개발자를 양성하며 개발의 미래를 바꾸고자 하는 목표를 가지고 있습니다. 사회적, 경제적, 교육적 배경에 상관없이 누구에게나 커리어 전환의 기회를 제공하기 위해 인프런에 나타났답니다. 코캠과 함께 커리어 점프에 도전하세요!

공동 지식공유자

커리큘럼

전체

444개 ∙ (162시간 6분)

해당 강의에서 제공:

수업자료

섹션 1. [입문] 시작은 프리캠프

36개 ∙ (9시간 1분)

1. 👉 섹션 01 : 웹앱 서비스 이해 & 프로그램 설치
2. [01-01] 웹앱 서비스란?
03:21
3. [01-02] 프로그램 설치 (VS code, Extension)
07:53
4. 👉 섹션 02 : HTML과 기술스택 이해하기
5. [02-01] HTML은 약속된 '명령어'이다.
11:30
6. [02-02] HTML의 핵심
42:25
7. [02-03] 기술스택 이해하기
06:14
8. 👉 섹션 03 : CSS의 기본과 싸이월드 실습 1탄
9. [03-01] CSS 배우기
25:28
10. [03-02] CSS 정렬
20:43
11. [03-03] 씨이월드 만들기 1탄
43:24
12. 👉 섹션 04 : Javascript의 기본과 싸이월드 실습 2탄
13. [04-01] 웹 언어 'Javascript' 이해하기
02:40
14. [04-02] 변수와 상수
17:07
15. [04-03] 배열
24:30
16. [04-04] 객체
20:40
17. [04-05] 싸이월드 만들기 2탄
39:42
18. 👉 섹션 05 : Javascript 실무와 싸이월드 실습 3탄
19. [05-01] 데이터 타입과 연산자
17:29
20. [05-02] 조건문
19:53
21. [05-03] 반복문
22:18
22. [05-04] 수학 객체
06:43
23. [05-05] DOM
10:41
24. [05-06] 싸이월드 만들기 3탄
27:30
25. 👉 섹션 06 : Javascript 응용과 싸이월드 실습 4탄
26. [06-01] 함수
09:13
27. [06-02] 함수 작성 방법
14:20
28. [06-03] 내장함수
24:08
29. [06-04] 싸이월드 만들기 4탄
23:30
30. 👉 섹션 07 : Javascript 이벤트 변경 감지와 싸이월드 실습 5탄
31. [07-01] 내장함수 리뷰
10:59
32. [07-02] 이벤트 변경 감지
16:04
33. [07-03] 싸이월드 만들기 5탄
43:24
34. 👉 섹션 08 : Final 과제와 Github 잔디 심기
35. [08-01] final 과제
07:55
36. [08-02] Git/Github
22:01

섹션 2. [입·중급] CSS&JS 마스터

134개 ∙ (30시간 49분)

37. CSS&Javascript 마스터 OT
05:35
38. 👉 섹션 01
39. [CSS 01-1-1] 여백 - CSS 소개 및 여백 설정
27:53
40. [CSS 01-1-2] 여백 - 박스사이징
08:00
41. [CSS 01-1-3] 여백 - 마진상쇄
09:38
42. [CSS 01-2-1] 정렬 - 아이템 정렬
12:09
43. [CSS 01-2-2] 정렬 - 넘치는 아이템 내려주기
12:18
44. [CSS 01-2-3] 정렬 - flexbox 세로가 안되는 이유
12:44
45. [JS 01-1-1] 변수와 함수 - 다양한 데이터 저장
26:55
46. [JS 01-1-2] 변수와 함수 - 변수와 문자열의 조립
11:14
47. [JS 01-1-3] 변수와 함수 - 함수와 스코프
33:37
48. [JS 01-2-1] 변수와 함수의 활용 - 호이스팅
12:50
49. [JS 01-2-2] 변수와 함수의 활용 - 호이스팅에서 발생하는 문제와 TDZ
18:52
50. [JS 01-2-3] 변수와 함수의 활용 - DOM
30:39
51. 👉 섹션 02
52. [CSS 02-1-1] 변형과 애니메이션 - 트랜지션
11:40
53. [CSS 02-1-2] 변형과 애니메이션 - 트랜스폼
14:43
54. [CSS 02-1-3] 변형과 애니메이션 - 애니메이션
11:29
55. [CSS 02-2-1] 애니메이션 응용 - 토스트
13:17
56. [CSS 02-2-2] 애니메이션 응용 - 로딩
09:19
57. [CSS 02-2-3] 애니메이션 응용 - 스켈레톤
11:58
58. [JS 02-1-1] 브라우저 기능 - 스토리지
21:55
59. [JS 02-1-2] 브라우저 기능 - 스토리지와 JSON 저장
15:17
60. [JS 02-1-3] 브라우저 기능 - 라우팅
18:46
61. [JS 02-2-1] 조건문과 반복문 - 조건 필터링
26:21
62. [JS 02-2-2] 조건문과 반복문 - 아이템 반복
01:06:16
63. [JS 02-2-3] 조건문과 반복문 - 아이템 반복 심화
34:21
64. 👉 섹션 03
65. [CSS 03-1-1] 포지션 - 절대위치
09:20
66. [CSS 03-1-2] 포지션 - 상대위치
08:19
67. [CSS 03-1-3] 포지션 - 화면위치
07:05
68. [CSS 03-2-1] 스크롤 - 스크롤 만들기
17:24
69. [CSS 03-2-2] 스크롤 - 스크롤 헤더 고정시키기
06:28
70. [CSS 03-2-3] 스크롤 - 스크롤 헤더 배경 뿌옇게 만들기
04:38
71. [JS 03-1-1] 스크롤 - 스크롤
17:26
72. [JS 03-1-2] 스크롤 - 스크롤과 주소창
11:44
73. [JS 03-1-3] 스크롤 - 이벤트리스너와 스크롤 감지
19:42
74. [JS 03-2-1] 이벤트 버블링 - 1
18:36
75. [JS 03-2-2] 이벤트 버블링 - 2
13:55
76. [JS 03-2-3] 이벤트 버블링 - 이벤트 캡처링
12:04
77. 👉 섹션 04
78. [CSS 04-1-1] 반응형 디자인 - 반응형 디자인
10:00
79. [CSS 04-1-2] 반응형 디자인 - 미디어쿼리
18:19
80. [CSS 04-1-3] 반응형 디자인 - rem으로 유지보수 높이기
12:48
81. [CSS 04-2-1] 반응형과 grid 조합 - 그리드 정렬
15:36
82. [CSS 04-2-2] 반응형과 grid 조합 - 플렉스박스와 그리드 비교
13:10
83. [CSS 04-2-3] 반응형과 grid 조합 - 플렉스박스와 그리드의 혼합
11:48
84. [JS 04-1-1] 디바이스 감지 - 디바이스 사이즈 감지 미적용
22:26
85. [JS 04-1-2] 디바이스 감지 - 디바이스 사이즈 감지 적용
12:33
86. [JS 04-1-3] 디바이스 감지 - 디바이스 동적 스크롤 %감지
09:28
87. [JS 04-2-1] 모바일 감지 - 모바일 감지
09:41
88. [JS 04-2-2] 모바일 감지 - 모바일 핀치줌 인/아웃
13:30
89. [JS 04-2-3] 모바일 감지 - 모바일 가상키보드
11:03
90. 👉 섹션 05
91. [CSS 05-1-1] 쌓임맥락과 Z-Index - z-index
09:20
92. [CSS 05-1-2] 쌓임맥락과 Z-Index - 쌓임맥락
17:42
93. [CSS 05-1-3] 쌓임맥락과 Z-Index - 리팩토링
20:32
94. [CSS 05-2-1] 모달과 중첩모달 - 모달 배경 만들기
09:05
95. [CSS 05-2-2] 모달과 중첩모달 - 모달 아이템 만들기
16:00
96. [CSS 05-2-3] 모달과 중첩모달 - 중첩 모달 만들기
16:43
97. [JS 05-1-1] 키보드 감지 - 키보드 감지
25:53
98. [JS 05-1-2] 키보드 감지 - 키보드와 입력창
08:50
99. [JS 05-1-3] 키보드 감지 - 폼 개념과 폼에 탑재된 키보드 기능
13:37
100. [JS 05-2-1] 브라우저 API - API와 웹API
12:56
101. [JS 05-2-2] 브라우저 API - 내비게이터
31:00
102. [JS 05-2-3] 브라우저 API - 타이머
23:30
103. 👉 섹션 06
104. [CSS 06-1-1] 이미지맞춤과 비율 - 이미지 맞춤 변경
08:09
105. [CSS 06-1-2] 이미지맞춤과 비율 - 이미지 비율 변경
09:38
106. [CSS 06-1-3] 이미지맞춤과 비율 - 이미지 맞춤과 비율 동시 변경
08:59
107. [CSS 06-2-1] 페이지전환 애니메이션 - 날아오는 애니메이션
12:49
108. [CSS 06-2-2] 페이지전환 애니메이션 - 날아서 돌아가는 애니메이션
10:02
109. [CSS 06-2-3] 페이지전환 애니메이션 - 이전 페이지와 다음 페이지 결합 애니메이션
16:31
110. [JS 06-1-1] 오픈API - 문장
18:33
111. [JS 06-1-2] 오픈API - 이미지
15:23
112. [JS 06-1-3] 오픈API - 이미지 응용
10:23
113. [JS 06-2-1] 메뉴 이동 - 메뉴이동을 위한 페이지 복사
15:23
114. [JS 06-2-2] 메뉴 이동 - 메뉴 이동을 위한 iframe
15:32
115. [JS 06-2-3] 메뉴 이동 - 메뉴 이동을 위한 컴포넌트
12:25
116. 👉 섹션 07
117. [CSS 07-1-1] 심화UI - accent 색 변경
07:59
118. [CSS 07-1-2] 심화UI - 커스텀 토글
23:24
119. [CSS 07-1-3] 심화UI - 커스텀 드롭다운
41:30
120. [CSS 07-2-1] 다크모드 - 다크모드
10:41
121. [CSS 07-2-2] 다크모드 - 다크모드와 다양한 태그들
08:11
122. [CSS 07-2-3] 다크모드 - 다크모드와 CSS 전역 변수
11:36
123. [JS 07-1-1] 검색과 디바운싱 - 검색
14:23
124. [JS 07-1-2] 검색과 디바운싱 - 디바운싱
13:05
125. [JS 07-1-3] 검색과 디바운싱 - 디바운싱과 API
11:41
126. [JS 07-2-1] 무한스크롤과 스로틀링 - 무한스크롤
20:26
127. [JS 07-2-2] 무한스크롤과 스로틀링 - 스로틀링
20:57
128. [JS 07-2-3] 무한스크롤과 스로틀링 - 스로틀링과 API
09:25
129. 👉 섹션 08
130. [CSS 08-1-1] 달력 - 커스텀 달력 - 클릭영역
10:56
131. [CSS 08-1-2] 달력 - 커스텀 달력 - 플레이스홀더
15:18
132. [CSS 08-1-3] 달력 - 선택과 검증
09:50
133. [CSS 08-2-1] 그라데이션 - 선형 그라데이션
14:06
134. [CSS 08-2-2] 그라데이션 - 원형 그라데이션
06:03
135. [CSS 08-2-3] 그라데이션 - 텍스트 그라데이션
12:26
136. [JS 08-1-1] 페이지네이션 번호 - 페이지네이션
16:48
137. [JS 08-1-2] 페이지네이션 번호 - 이전/다음페이지 번호
13:06
138. [JS 08-1-3] 페이지네이션 번호 - 마지막페이지 번호
21:31
139. [JS 08-2-1] 페이지네이션 목록 - 클릭된 페이지 예시 목록
12:25
140. [JS 08-2-2] 페이지네이션 목록 - 클릭된 페이지 목록
13:05
141. [JS 08-2-3] 페이지네이션 목록 - 클릭된 페이지 활성 표시
14:21
142. 👉 섹션 09
143. [CSS 09-1-1] 크로스브라우징 - 메모장에 HTML, CSS 코딩하기
11:59
144. [CSS 09-1-2] 크로스브라우징 - 크로스브라우징
19:58
145. [CSS 09-1-3] 크로스브라우징 - 브라우저 버전과 CAN-I-USE, MDN
22:16
146. [CSS 09-2-1] 폰트 - 폰트
08:03
147. [CSS 09-2-2] 폰트 - 폰트와 로딩
22:25
148. [CSS 09-2-3] 폰트 - 폰트와 크로스브라우징
10:58
149. [JS 09-1-1] 크로스브라우징 - 메모장에 HTML, CSS 코딩하기
10:57
150. [JS 09-1-2] 크로스브라우징 - 크로스브라우징 이슈
14:33
151. [JS 09-1-3] 크로스브라우징 - 브라우저 버전과 CAN-I-USE, MDN
23:38
152. [JS 09-2-1] 웹표준과 접근성 - 검색엔진최적화(SEO)
17:42
153. [JS 09-2-2] 웹표준과 접근성 - SEO와 웹표준
07:30
154. [JS 09-2-3] 웹표준과 접근성 - SEO와 웹접근성
10:05
155. 👉 섹션 10
156. [CSS 10-1-1] 라이브러리 - 부트스트랩
10:31
157. [CSS 10-1-2] 라이브러리 - Material 디자인
05:21
158. [CSS 10-1-3] 라이브러리 - 테일윈드 CSS
16:12
159. [CSS 10-2-1] 트렌드 및 방향 - 1단계
27:03
160. [CSS 10-2-2] 트렌드 및 방향 - 2단계
14:40
161. [CSS 10-2-3] 트렌드 및 방향 - 3단계
12:07
162. [JS 10-1-1] 라이브러리 - 풀페이지 스크롤
09:26
163. [JS 10-1-2] 라이브러리 - 웹 에디터
16:14
164. [JS 10-1-3] 라이브러리 - 드래그 앤 드롭
08:47
165. [JS 10-2-1] 트렌드 및 방향 - 1단계
16:46
166. [JS 10-2-2] 트렌드 및 방향 - 2단계
19:25
167. [JS 10-2-3] 트렌드 및 방향 - 3단계
16:00
168. 🔥 CSS&Javascript Master 강의 ppt 다운로드🔥
169. 🔥 CSS&Javascript Master 강의 코드 다운로드🔥
170. 🔥 CSS&Javascript Master 과제 레퍼런스 코드 다운로드🔥

섹션 3. [중급] 웹 프론트엔드 부트캠프

213개 ∙ (97시간 28분)

171. 👉 섹션 01
172. [01-01] 리액트와 컴포넌트
52:38
173. [01-02] props와 state
41:09
174. [01-03] 리액트를 사용하는 이유 (동시에 바꿔보기)
34:57
175. [01-04] state 검증 (회원 가입 검증)
47:02
176. [01-05] module import와 export
18:08
177. 👉 섹션 02
178. [02-01] 한방에 만드는 리액트 CRA
33:16
179. [02-02] 리액트 보일러플레이트
32:23
180. [02-03] React 페이지 이동
46:26
181. [02-04] setState의 원리
52:08
182. [02-05] 거짓(False)을 나타내는 것들
14:26
183. 👉 섹션 03
184. [03-01] 타입스크립트
41:40
185. [03-02] 기초타입
54:21
186. [03-03] 린터와 포멧터
43:22
187. 👉 섹션 04
188. [04-01] Next 세상
46:49
189. [04-02] Next 페이지 이동
21:10
190. [04-03] CSS-Module
37:32
191. [04-04] Next 내장 기능 (폰트, 이미지)
40:23
192. 👉 섹션 05
193. [05-01] 데이터 통신 이론
50:24
194. [05-02] 데이터 통신 실습
01:25:13
195. 👉 섹션 06
196. [06-01] 동기/비동기
36:35
197. [06-02] 그래프큐엘 셋팅
12:24
198. [06-03] 게시글 등록과 네트워크 에러 해결
31:21
199. [06-04] 게시글 등록 연습
54:00
200. 👉 섹션 07
201. [07-01] 정적라우팅
15:57
202. [07-02] 게시글 조회 기초
48:40
203. [07-03] 게시글 조회 연습
49:58
204. 👉 섹션 08
205. [08-01] 반복문 map
26:01
206. [08-02] map 주의사항
47:28
207. [08-03] 구조분해 할당과 커스텀 훅
01:04:19
208. 👉 섹션 09
209. [09-01] 게시글 수정
39:36
210. [09-02] 게시글 수정 심화
01:08:41
211. [09-03] 게시글 수정 실무
32:23
212. [09-04] 게시글 수정 폴더구조 리팩토링
01:19:53
213. [09-05] 게시글 수정 타입보완
28:27
214. 👉 섹션 10
215. [10-01] API 타입
37:41
216. 👉 섹션 11
217. [11-01] 이벤트 전파와 버블링
20:36
218. [11-02] 이벤트 전파와 중단
57:34
219. 👉 섹션 12
220. [12-01] 라이브러리와 프레임워크
01:03:07
221. [12-02] UI프레임워크 연습 - 별점
35:14
222. [12-03] UI프레임워크 연습 - 캐러셀
26:09
223. [12-04] 라이브러리 - 우편번호 모달
56:01
224. [12-05] 리팩토링(prev state)
27:53
225. [12-06] 라이브러리(타입스크립트)
04:28
226. [12-07] 안전한 리팩토링
18:36
227. 👉 섹션 13
228. [13-01] children
36:38
229. [13-02] children 타입스크립트
12:37
230. [13-03] 레이아웃
38:41
231. [13-04] 레이아웃 숨기기
15:28
232. [13-05] 컴포넌트 합성과 셋팅
10:30
233. 👉 섹션 14
234. [14-01] 페이지네이션 기초
41:50
235. [14-02] 페이지네이션 이전/다음/마지막 페이지
46:26
236. [14-03] 리팩토링(state 끌어올리기)
01:04:20
237. 👉 섹션 15
238. [15-01] 스프레드연산자와 데이터복사
46:29
239. [15-02] 데이터복사 실무 응용
43:36
240. [15-03] el과 타입스크립트
12:00
241. [15-04] 무한스크롤
26:07
242. [15-05] 스프레드연산자와 리팩토링
36:46
243. [15-06] 스프레드연산자와 데이터 삭제
09:22
244. 👉 섹션 16
245. [16-01] 클래스 컴포넌트와 this
01:06:41
246. [16-02] 컴포넌트 생명주기
17:59
247. [16-03] 컴포넌트 생명주기와 useEffect
31:55
248. [16-04] useEffect와 open-API
20:13
249. 👉 섹션 01
250. [17-01] CORS와 PROXY서버
25:04
251. [17-02] 웹 구조
30:55
252. [17-03] 백엔드와 DB
01:04:50
253. [17-04] 서버와 포트
27:47
254. [17-05] 백엔드 API
38:35
255. [17-06] 백엔드 API와 DB 연동
32:16
256. [17-07] 파이어베이스(BaaS)
39:57
257. 👉 섹션 18
258. [18-01] 이미지 저장 과정
22:34
259. [18-02] 이미지 업로드
45:50
260. [18-03] useRef와 이미지 버튼
12:32
261. [18-04] 이미지 검증 및 등록
33:14
262. [18-05] 게시글 이미지와 함께 등록
27:35
263. 👉 섹션 19
264. [19-01] 검색
33:04
265. [19-02] 검색어 디바운싱
28:57
266. [19-03] 검색어 키워드에 색칠하기
19:10
267. [19-04] 검색어 타입스크립트
10:06
268. 👉 섹션 20
269. [20-01] callback / promise / async-await
01:17:28
270. [20-02] callback 사용 사례와 el, prev 실체
22:14
271. [20-03] 그래프큐엘 실체
37:20
272. [20-04] promise 작동원리
22:19
273. [20-05] promise로 나만의 fetch 만들기
13:48
274. 👉 섹션 21
275. [21-01] 글로벌스테이트(서버데이터 캐시와 fetchPolicy)
46:06
276. [21-02] 글로벌스테이트(서버데이터 캐시와 update)
16:14
277. [21-03] 글로벌스테이트(로컬데이터 캐시)
25:46
278. 👉 섹션 22
279. [22-01] 로그인
39:29
280. [22-02] JWT 토큰 실습
25:14
281. [22-03] 회원가입과 암호화
13:21
282. [22-04] 로그인 실습
43:15
283. [22-05] 로그인 토큰과 새로고침
45:48
284. [22-06] 로그인과 토큰 검사
08:40
285. 👉 섹션 23
286. [23-01] 클로저와 HOF
26:49
287. [23-02] HOF
23:41
288. [23-03] HOC
31:21
289. [23-04] 제네릭 타입
35:32
290. [23-05] 제네릭과 HOF/HOC
24:28
291. 👉 섹션 24
292. [24-01] 폼 라이브러리
33:04
293. [24-02] 검증 라이브러리
30:24
294. [24-03] 유틸리티 타입
29:09
295. [24-04] 유틸리티 타입 적용
33:11
296. 👉 섹션 25
297. [25-01] 공통 컴포넌트
33:18
298. [25-02] 공통 컴포넌트와 베이스 컴포넌트
35:31
299. [25-03] 공통 컴포넌트와 제네릭타입
23:42
300. [25-04] 공통 컴포넌트와 제네릭타입 심화
29:23
301. [25-05] 라이브러리 버전 이해
10:37
302. [25-06] 공통 콤포넌트 npm 배포
49:30
303. [25-07] 공통 콤포넌트 npm 조직 배포
17:46
304. 👉 섹션 26
305. [26-01] 로그인 연장
31:34
306. [26-02] 리프레시토큰
01:15:28
307. [26-03] 리프레시토큰과 새로고침
41:15
308. [26-04] 연속적인 프로미스
19:09
309. 👉 섹션 27
310. [27-01] 결제 프로세스
22:23
311. [27-02] 포트원
48:08
312. 👉 섹션 28
313. [28-01] 날짜/시간과 브라우저
15:40
314. [28-02] 날짜/시간과 기능 실행
04:46
315. [28-03] 날짜/시간과 이벤트루프
19:34
316. [28-04] 마이크로큐와 마이크로큐
25:17
317. [28-05] 마이크로큐와 await 원리
42:37
318. 👉 섹션 29
319. [29-01] 지도
29:45
320. [29-02] 지도와 SPA
32:29
321. [29-03] 지도와 라이브러리
05:12
322. 👉 섹션 30
323. [30-01] 웹 에디터와 폼 라이브러리
30:16
324. [30-02] 웹 에디터와 폼 전송
29:33
325. [30-03] 웹 에디터와 XSS
30:55
326. [30-04] OWASP Top 10
08:57
327. [30-05] 하이드레이션
11:57
328. [30-06] 하이드레이션 심화
38:41
329. 👉 섹션 31
330. [31-01] 메모이제이션
39:22
331. [31-02] 메모이제이션 응용
23:13
332. [31-03] 메모이제이션과 map
20:36
333. [31-04] 브라우저 렌더링
44:03
334. [31-05] 이미지 미리보기 성능 개선
28:26
335. [31-06] 새로운 이미지 방식과 게시글 등록
16:10
336. [31-07] 다중 업로드와 Promise.all
24:33
337. [31-08] 다중 이미지 업로드 성능 개선
31:52
338. [31-09] 리페치 성능 개선
41:47
339. [31-10] 북마크/좋아요/구독 성능 개선
34:06
340. [31-11] 데이터 조회 성능 개선
25:43
341. [31-12] 이미지 조회 성능 개선
18:30
342. [31-13] 파일 조회 성능 개선
36:00
343. [31-14] 윈도잉과 무한스크롤 성능 개선
46:12
344. [31-15] 프론트엔드 성능 최적화 총정리
12:00
345. 👉 섹션 32
346. [32-01] 브라우저 주소창의 실체
31:50
347. [32-02] 오픈그래프
31:08
348. [32-03] 다이나믹 오픈그래프
01:01:48
349. [32-04] RSC와 fetch
34:32
350. [32-05] RSC와 하이드레이션
29:57
351. [32-06] 부모 RCC와 자식 RSC
14:48
352. [32-07] RCC와 RSC 합성
23:00
353. 👉 섹션 33
354. [33-01] 폼 리팩토링을 위한 RCC/RSC 합성
53:22
355. [33-02] RSC와 현대 폼 발전 방향
25:19
356. [33-03] RSC와 현대 웹 발전 방향
11:09
357. [33-04] 검색 리팩토링을 위한 Shallow 라우팅
51:32
358. [33-05] 모달 리팩토링을 위한 parrarel 라우팅
28:04
359. [33-06] 그래프큐엘 리팩토링을 위한 프레그먼트
45:42
360. 👉 섹션 34
361. [34-01] 백엔드 프록시서버
35:17
362. 👉 섹션 35
363. [35-01] 테스트코드
35:08
364. [35-02] UI 테스트
23:07
365. [35-03] 기능 테스트
14:18
366. [35-04] API 모킹 테스트
01:08:06
367. [35-05] E2E 테스트
29:33
368. [35-06] 테스트코드와 TDD에 대한 오해
03:11
369. 👉 섹션 36
370. [36-01] 배포
40:38
371. [36-02] 정적페이지 배포
31:34
372. [36-03] 도메인 연결
36:42
373. [36-04] 네트워크와 트러블슈팅
29:24
374. [36-05] SSL과 HTTPS
48:38
375. [36-06] 동적페이지 배포
01:09:32
376. [36-07] 동적페이지 도메인 접속
15:35
377. [36-08] 동적페이지 로드밸런서 연결
48:42
378. [36-09] 와이어샤크와 API
08:40
379. [36-10] 도커
01:14:42
380. [36-11] 도커와 포트포워딩
17:25
381. [36-12] 도커 빌드 성능 개선
18:31
382. 🔥 Web Front-end Bootcamp 강의 코드 다운로드🔥
383. 🔥 Web Front-end Bootcamp 과제 레퍼런스 코드 다운로드🔥

섹션 4. [중·고급] 하이브리드앱 부트캠프

61개 ∙ (24시간 46분)

강의 게시일: 2024. 12. 17.

마지막 업데이트일: 2025. 05. 13.

수강평

전체

17개

5.0

17개의 수강평

SuperDuper
수강평 7
∙
평균 평점 5.0
2026. 03. 11.
5
50% 수강 후 작성
잘 보고 있습니다! 강의 50% 남았는데 끝까지 정복해 보겠습니다
shine_SY
수강평 23
∙
평균 평점 4.8
2025. 05. 06.
5
30% 수강 후 작성
다른 강의보다 더 훨씬 꼼꼼하게 자세히 알려주셔서 잘 따라올수 있었던것 같습니다!!! 앞으로 남은 강의 잘 달려보겠습니다!!!
수뼈
수강평 49
∙
평균 평점 4.9
2026. 07. 21.
5
30% 수강 후 작성
지성
수강평 2
∙
평균 평점 5.0
2026. 02. 07.
5
60% 수강 후 작성
이현철
수강평 4
∙
평균 평점 5.0
2026. 09. 01.
5
68% 수강 후 작성

코드캠프님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

코드캠프

코딩과 사랑에 빠져버린 8년차 풀스택 개발자 Captain의 사심이 가득 담긴 커리큘럼이에요. 백엔드의 모든 것을 다 알려주고 싶은 Captain의 마음이 녹아있죠! 이 강의를 듣다보면 '이렇게까지 알려준다고?' 하는 생각을 떨칠 수 없을 거예요. 모두가 어려워하는 부분까지 꼭꼭 씹어 떠먹여주는 이 강의로 시작해 볼까요?

입문

NestJS, Node.js, JavaScript

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

코드캠프

웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

코드캠프

웹 개발을 활용해서 Android와 IOS에 서비스 가능한 모바일앱 개발을 할 수 있도록 도와주는 강의입니다.

초급

React, Next.js, expo

웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

코드캠프

[코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습

코드캠프

너무나 어렵게만 느껴지는 알고리즘... 수학과 친하지 않은 수강생이라도 이 강의 하나로 알고리즘 기초를 한 번에 끝낼 수 있을 거예요! 알고리즘을 푸는 데 필요한 기초 개념을 차근차근 배우고, 더 나아가 문제에 적용하는 코드캠프의 노하우까지 싹 다 알려드릴게요 :)

초급

JavaScript

[코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습

코드캠프

[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)

코드캠프

10분만에 바이브코딩으로 만들 수 있는 단순한 서비스는 이제 버리세요! '진짜' 실무적용 바이브코딩을 배울 수 있습니다. 기획과 디자인대로 실서비스 수준의 고도화된 서비스를 커서AI NCOP로 만들어보시죠. No Code, Only Prompt

중급이상

React, Next.js, cursor

[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)

코드캠프

[CSS&JS Master] - 트렌디한 감정기록 일기장 만들기

코드캠프

최신 CSS 프러퍼티와 실무적인 Javascript를 프로젝트를 진행하면서 재밌게 배울 수 있습니다.

입문

HTML/CSS, JavaScript, vanilla-javascript

[CSS&JS Master] - 트렌디한 감정기록 일기장 만들기

코드캠프

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

코드캠프

1년간 300여명의 개발자를 배출한 ‘진짜’ 부트캠프의 고농축 커리큘럼 입니다. 이 강의 하나로 여러분은 현업 주니어 개발자 수준까지 성장 가능하며, 프론트엔드 기술스택의 활용 능력과 지식을 얻게 될거에요. 누구나 사회적, 경제적, 교육적 배경에 상관없이 커리어를 쌓을 수 있도록, [인프런X코드캠프]가 준비했습니다 :)

입문

React, Next.js, GraphQL

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

코드캠프

[코드캠프] 훈훈한 Javascript

코드캠프

다른 언어도 많은데.. 왜 자바스크립트여야 하냐구요? 자바스크립트는 전세계에서 가장 많이 쓰는 언어로, 비전공자도 빠르게 배울 수 있고 이해하기 쉬운 구조를 가지고 있어요. 게다가 구글, 페이팔, 아마존 등 유명 기업들도 활용하고 있다니! 더 이상의 고민이 필요한가요?

입문

JavaScript

[코드캠프] 훈훈한 Javascript

코드캠프

[코드캠프] 강력한 CSS

코드캠프

CSS만 집요하게 모아놓은 강의 보셨나요? 이 강의에서는 총 2가지 프로젝트를 진행하면서, 가장 기본적인 레이아웃 구성부터 반응형까지 구현하게 될 거에요! 자, 이제 준비되셨다면 시작해볼까요?

초급

HTML/CSS

[코드캠프] 강력한 CSS

코드캠프

[코드캠프] 시작은 프리캠프

코드캠프

코딩 부트캠프의 독보적인 커리큘럼으로 만든 강의입니다. 가장 기초적이고 실무에서 꼭 필요한 내용들로 구성되어 있어요. '누구나 가능한 개발자로의 커리어 전환' 이 강의로 시작하세요.

입문

HTML/CSS, JavaScript

[코드캠프] 시작은 프리캠프

코드캠프

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

코드캠프

입문

React, Next.js, GraphQL

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

코드캠프

[자바스크립트부터 리액트까지] 포기없는 React로 가는 길 [Full vers.]

영코디 킴쌤

리액트를 공부하다가 포기하셨나요? 코딩이 처음인 쌩초보, 비전공자도 자바스크립트부터 리액트까지, 포기하지 않고 React로 가는 길을 열어드립니다.

입문

JavaScript, React, jQuery

[자바스크립트부터 리액트까지] 포기없는 React로 가는 길 [Full vers.]

영코디 킴쌤

부트캠프에서 알려주지 않는 것들 (리액트 렌더링 최적화 편) 2편

애프터캠프

React 렌더링 원리, 최적화를 마스터해서 실전 활용 및 면접 준비를 해보세요!

중급이상

React, react-usememo, 기술면접

부트캠프에서 알려주지 않는 것들 (리액트 렌더링 최적화 편) 2편

애프터캠프

SEO 최적화 랜딩페이지 솔루션 & 노출전략: 바이브코딩으로 완성 with Nextjs

ludgi

실전 바이브 코딩으로 회사 소개 랜딩페이지를 완성합니다. Cursor AI + Next.js + TypeScript + TailwindCSS + shadcn/ui + MCP 스택으로, 설계부터 배포까지 한 번에 진행합니다. 핵심은 “빠른 구현 + 검색 엔진에 잘 노출되는 SEO 기반”입니다. 🏁 강의 목표 랜딩 제작 → 성능 최적화 → SEO 반영 → 배포/인덱싱 실시간 코딩(바이브 코딩)으로 섹션별 완성본을 바로 확인 검색 반영까지 직접 체험 🛠️ 실습 스택 Cursor AI, Next.js(App Router), TypeScript TailwindCSS, shadcn/ui, MCP 워크플로우 🔍 SEO 실습 강사가 제공하는 SEO 최적화용 MD 파일 적용 메타데이터, OG/Twitter 카드, robots/sitemap, 구조화 데이터(JSON-LD) 다국어 라우팅 선택 적용 🎯 완성물 반응형 회사 소개 랜딩 + 문의 폼 Lighthouse 95+ 목표 Vercel 배포 후 Search Console 등록 및 인덱싱 요청 📚 이 강의로 배우는 것 히어로/신뢰/기능/FAQ 섹션을 빠르게 구성하는 법 shadcn/ui로 깔끔한 UI 구성 폼 검증과 기본 전환 추적 포인트 설계 구조화 데이터 + 다국어 라우팅으로 SEO 스코어 올리기 배포 후 Search Console을 통한 인덱싱 과정 이해 💡 현업 인사이트 (강의 특전) 단순히 코드 구현만이 아니라, 실제 시장에서 활용되는 마케팅·노출 방식도 간단히 짚어드립니다. 광고, 블로그 포스팅, 댓글 작업의 현실적인 단가 범위 외주·용역 업체들이 실제로 SEO, 노출 작업을 어떻게 진행하는지 개발자가 직접 참여했을 때와 외주를 맡겼을 때의 비용/효율 차이 이 부분을 통해 단순히 기술을 넘어서 실제 현업에서 어떻게 활용되는지, 어떤 비용 구조로 움직이는지까지 감각을 익힐 수 있습니다. 한 줄 정리 “구현 → 최적화 → 배포 → 인덱싱”의 흐름을 따라가며, 실제 검색 노출과 현업 시장 구조까지 연결되는 웹 제작 프로세스를 배웁니다.

입문

React, Node.js, cursor

SEO 최적화 랜딩페이지 솔루션 & 노출전략: 바이브코딩으로 완성 with Nextjs

ludgi

구조 탐색과 조작의 모든 것 - [DOM 완전 정복 Part 1]

nhcodingstudio

React, Next.js, Vue를 아무리 공부해도 코드가 추상적으로 느껴지고, 구조가 확실히 이해되지 않는다면, 그 근본 원인은 DOM에 대한 이해 부족일 수 있습니다. DOM은 모든 프론트엔드 프레임워크의 기반이며, 웹 페이지의 구조와 동작을 연결해주는 실체입니다. 이 강의는 단순한 선택자나 조작법을 넘어, HTML이 어떻게 DOM 객체로 바뀌고, 이 구조를 어떻게 선택하고 탐색하며, 조작할 수 있는지를 처음부터 차근차근 알려주는 DOM 완전 정복의 Part 1 입문 강의입니다. HTML 태그는 구조일 뿐이고, 자바스크립트는 행동일 뿐이지만, 그 둘을 연결하는 핵심이 DOM입니다. 이 연결고리를 명확히 이해하면, 어떤 프레임워크를 쓰든 그 안의 진짜 구조와 흐름을 정확히 꿰뚫어볼 수 있게 됩니다.

입문

HTML/CSS, JavaScript, React

구조 탐색과 조작의 모든 것 - [DOM 완전 정복 Part 1]

nhcodingstudio

[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)

코드캠프

중급이상

React, Next.js, cursor

[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)

코드캠프

Complete Full-Stack Python Developer Roadmap: Learn FastAPI, React, Database Design API Architecture

IT s Dev

A Complete End-to-End Developer Journey — Build Lightning-Fast APIs, Modern Frontend Interfaces, Real Projects, Authentication Systems, Dashboards & Full Deployments Using FastAPI, React, and Vibe Coding Techniques.

입문

React, React Native, react.js

Complete Full-Stack Python Developer Roadmap: Learn FastAPI, React, Database Design API Architecture

IT s Dev

누구보다 빠르게 배우는 풀스택 게시판 만들기

Neo

이 강의에 서버(Java+Springboot) 와 프론트(React, ReactNative, Flutter, Android, iOS)를 모두 담았습니다. 이 강의로 풀스택 게시판 만드는 경험을 진행해보세요

입문

React, React Native, iOS

누구보다 빠르게 배우는 풀스택 게시판 만들기

Neo

웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

코드캠프

웹 개발을 활용해서 Android와 IOS에 서비스 가능한 모바일앱 개발을 할 수 있도록 도와주는 강의입니다.

초급

React, Next.js, expo

웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

코드캠프

[Electron #1] Electron + React로 만드는 타이머 앱 (With Zustand)

닭강정

React, Electron, Zustand를 활용해 타이머 앱을 직접 제작하고 크로스 플랫폼(윈도우, 맥 OS, 리눅스)으로 배포까지 하는 실전 강의입니다. 익숙한 React 웹 개발을 시작으로, Zustand를 통한 전역 상태 관리와 최종 GUI 배포까지, 데스크톱 앱 개발의 전체 흐름을 배우실 수 있습니다!

초급

React, Electron, GUI

[Electron #1] Electron + React로 만드는 타이머 앱 (With Zustand)

닭강정

AI 웹개발 실전 프로젝트 (Stitch · Figma Make · React)

이지웹

"생성형 AI를 활용해 기획·디자인·구현·배포까지 완성하는 웹개발 실전 프로젝트 강의" 아이디어 구상부터 시작해서, AI로 디자인 뚝딱 만들고, React로 실제 작동하는 웹사이트 구현, 그리고 인터넷에 배포까지 - 모든 과정을 차근차근 함께 완성합니다. Stitch와 Figma Make 같은 최신 AI 도구들이 디자인 작업을 도와주고, 복잡한 코딩도 단계별로 쉽게 따라할 수 있게 알려드려요.

초급

React, Figma, stitch

AI 웹개발 실전 프로젝트 (Stitch · Figma Make · React)

이지웹

[풀스택 입문] Firebase보다 10배 좋은 Supabase

로펀

풀스택 개발에 날개를 달아줄 Supabase! Firebase의 상위호환인 Supabase로 풀스택 개발을 2시간만에 완성합니다.

초급

PostgreSQL, Next.js, TailwindCSS

[풀스택 입문] Firebase보다 10배 좋은 Supabase

로펀

공식문서로 배우는 실전 타입스크립트

어쩔코딩

타입스크립트를 제대로 이해하려면 공식문서를 한번쯤 보셔야겠죠? 문서에서 중요한 부분들만 콕 집어서 알기 쉽게 전달해드리고 실전에 필요한 내용들도 같이 알려드리는 강의입니다!

입문

TypeScript, JavaScript, ES6

공식문서로 배우는 실전 타입스크립트

어쩔코딩

너네 백엔드 하고 싶은 거 있으면 얼마든지 해 난 괜찮어 왜냐면 나는 파이어베이스가 있어

제주코딩베이스캠프

프론트엔드 개발자인데 로그인 기능을 구현하지 못해 아쉬웠던 적 있으신가요? DB를 이용해 데이터를 저장하고 불러오는 기능을 구현하고 싶지만 쿼리를 공부하기는 부담스러우셨나요? 파이어베이스라면 쉽게 가능합니다! 리액트와 파이어베이스의 힘으로 유저 인증, 데이터 저장, 호스팅 등 웹 개발에 필수적인 기능들을 같이 구현해봅시다! (해당 강의는 22년 8월 녹화로 파이어베이스의 메이저 업데이트를 반영한 강의입니다.)

초급

Firebase, React

너네 백엔드 하고 싶은 거 있으면 얼마든지 해 난 괜찮어 왜냐면 나는 파이어베이스가 있어

제주코딩베이스캠프

실습으로 배우는 데이터베이스: 약 복용시간 앱 만들기 (SQLite & React Native Expo)

Kyo

리액트 네이티브로 약 복용 시간 알림앱을 개발합니다. 데이터베이스 기초 및 SQL 문법 기초 학습을 바탕으로, SQLite를 사용하여 데이터를 다루는 앱을 만들고 스토어 배포까지 진행합니다.

초급

React Native, SQLite, database

실습으로 배우는 데이터베이스: 약 복용시간 앱 만들기 (SQLite & React Native Expo)

Kyo

[PROKIT] 바이브코딩/프론트엔드 연습용 문제집: 타이머 앱 만들기

닙스(NYBS)

개발 프로젝트를 위한 미션 콘텐츠입니다. DevTime이라는 타이머 앱을 직접 구현해보면서 프로젝트 실습을 해볼 수 있도록 PRD 기획 문서, Figma 시안, API 엔드포인트를 제공합니다. 실제 서비스와 유사한 수준의 프로젝트를 구현해 보면서 그동안 학습한 지식을 완벽하게 자신의 것으로 만들어 보세요 🚀

입문

React

[PROKIT] 바이브코딩/프론트엔드 연습용 문제집: 타이머 앱 만들기

닙스(NYBS)

제로부터 TypeScript로 Claude Code 만들기

Hiro Son

"왜 AI가 이런 코드를 짰지?", "왜 방금 말한 걸 기억 못 하지?" 클로드 코드(Claude Code)와 같은 AI 도구를 쓰다 보면 마주하는 답답함, 그 원인은 도구가 어떻게 동작하는지 모르니까입니다. 이 강의는 그 블랙박스를 투명하게 열어젖힙니다. 우리는 25강에 걸쳐 LLM에게 파일을 보는 '눈(Read)', 코드를 고치는 '손(Edit)', 명령을 수행하는 '발(Bash)'을 직접 달아주며, 실제 현업 도구와 똑같이 동작하는 나만의 Coding Agent를 밑바닥부터 구현합니다. 단순히 라이브러리 사용법을 배우는 것이 아닙니다. AI가 어떻게 프로젝트 구조를 파악하고, 왜 긴 대화에서 기억을 잃는지, 그것을 기술적으로 어떻게 해결하는지(Sliding Window, Summary) 직접 코드로 구현하며 체득합니다. 이 과정을 통해 여러분은 AI 도구의 단순한 '사용자'에서, 작동 원리를 꿰뚫고 도구를 내 입맛대로 개조하고 평가할 수 있는 'AI 공급자'의 시야를 갖게 될 것입니다.

초급

React, TypeScript, vercel

제로부터 TypeScript로 Claude Code 만들기

Hiro Son

iOS/Android 앱 개발을 위한 실전 React Native - Basic

Wintho

Mobile App Front-End 개발을 위한 React Native의 기초 지식 습득을 목표로 하고 있습니다. 진입장벽이 낮은 언어/API의 활용을 통해 비전문가도 쉽게 Native Mobile App을 개발할 수 있도록 제작된 강의입니다.

초급

React Native, React, ES6

iOS/Android 앱 개발을 위한 실전 React Native - Basic

Wintho

React Native with Expo: 제로초에게 제대로 배우기

제로초(조현영)

웹 개발자가(특히 React 개발자라면) 정말 손쉽게 앱을 출시할 수 있는 시대가 되었습니다. Expo와 함께라면 더더욱 빠르게 Android와 iOS 앱 모두를 출시할 수 있습니다. Expo를 통해 빠르게 앱까지 출시할 수 있는 개발자가 되어봅시다.

초급

React, React Native, 하이브리드 앱

React Native with Expo: 제로초에게 제대로 배우기

제로초(조현영)

HTML/CSS/JS만 알아도 OK! React와 Firebase로 완성하는 실전 프로젝트

이지웹

React와 Firebase를 활용하여 로그인, 게시글 관리, 파일 업로드, 프로필 관리 등 실제 서비스에서 사용되는 핵심 기능을 구현하는 웹 애플리케이션을 만들어보는 강의입니다. Firebase Authentication을 이용한 이메일 로그인과 소셜 로그인, Firestore 기반 데이터 저장 및 실시간 데이터 처리, Firebase Storage를 활용한 파일 업로드 기능, 그리고 프로필 관리 기능까지 단계적으로 구현하면서 하나의 완성된 웹 서비스를 만들어 보실 수 있습니다. 프론트엔드 개발을 배우시는 분들이 복잡한 서버 구축 없이 Firebase를 활용하여 빠르게 웹 서비스를 구현하는 방법을 이해하실 수 있도록 구성된 강의입니다.

초급

React, Firebase, firebase-firestore

HTML/CSS/JS만 알아도 OK! React와 Firebase로 완성하는 실전 프로젝트

이지웹

연관 로드맵

강의가 포함된 로드맵으로 학습해 보세요!

[인프런x코드캠프] 가장 쉽게 배우는 실무중심 풀스택

코드캠프

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

수강 후 이런걸 얻을 수 있어요

'진짜' 부트캠프에서 만든[완벽한 프론트엔드 코스]는요

시작은 프리캠프

CSS&JS 마스터🆕

웹 프론트엔드 부트캠프 🆕

하이브리드앱 부트캠프🆕

이런 분들에게는더없이 안성맞춤이죠

더 높은 커리어점프를 위해부트캠프의 수업자료와 과제를 제공해요

내 손으로 채운 코드로포트폴리오를 완성하세요.

시작은 프리캠프

CSS&JS 마스터

웹 프론트엔드 부트캠프

하이브리드앱 부트캠프

프론트엔드의 핵심 기술우리는 왜 React.js와 Next.js를 사용해야 할까요?

게다가 완프 강의 하나로이만-큼의 스택을 한 번에 겟!

빈틈 하나까지 놓치지 않는'선 넘는' 프론트엔드 부트캠프 커리큘럼

#01. React와 Next.js

#02. JS와 비동기핵심

#03. 컴포넌트 설계

#04. 캐시

#05. 로그인과 보안

#06. 심화기능

#07. 성능 최적화

#08. 프론트엔드 서버

#09. 테스트

#10. 웹 배포

#01. 모바일 CSS구조

#02. 웹/앱 통신

#03. 심화 기능

#04. 마이크로 프론트엔드

#05. 앱 로그인

#06. 앱 배포

[완벽한 프론트엔드 코스]수강 후엔 나도 개발자!

더 높은 커리어점프를 위해실무 적용 [바이브코딩] 강의도 준비했어요.

연관 추천강의 :

잠깐!수강 전 확인해주세요.

혹시궁금한 점이 있으신가요?

Q. 아무런 지식 없이 수강해도 될까요?

Q. 기초 지식이 있다면 어디부터 수강하면 되나요?

Q. 웹 프론트엔드 부트캠프 강의를 효율적으로 수강하는 방법이 있나요?

Q. 계단식 커리큘럼이 무엇인가요?

Q. 수강 중 궁금한 점이 생겼어요.

팀 코드캠프를소개합니다.

이런 분들께 추천드려요

안녕하세요 코드캠프입니다.

커리큘럼

수강평

코드캠프님의 다른 강의

비슷한 강의

연관 로드맵

'진짜' 부트캠프에서 만든
[완벽한 프론트엔드 코스]는요

이런 분들에게는
더없이 안성맞춤이죠

더 높은 커리어점프를 위해
부트캠프의 수업자료와 과제를 제공해요

내 손으로 채운 코드로
포트폴리오를 완성하세요.

프론트엔드의 핵심 기술
우리는 왜 React.js와 Next.js를 사용해야 할까요?

게다가 완프 강의 하나로
이만-큼의 스택을 한 번에 겟!

빈틈 하나까지 놓치지 않는
'선 넘는' 프론트엔드 부트캠프 커리큘럼

[완벽한 프론트엔드 코스]
수강 후엔 나도 개발자!

더 높은 커리어점프를 위해
실무 적용 [바이브코딩] 강의도 준비했어요.

잠깐!
수강 전 확인해주세요.

혹시
궁금한 점이 있으신가요?

팀 코드캠프를
소개합니다.

이런 분들께
추천드려요

안녕하세요
코드캠프입니다.