시그니처 프론트엔드 : 웹 개발부터 웹앱까지 프론트엔드의 모든 것

초격차 Online
시그니처 프론트엔드
웹 개발부터 웹앱까지 프론트엔드의 모든 것

01. 입문-3년차 채용공고 풀커버 커리큘럼

20개 이상 프로젝트로 기초부터 프레임워크/개발환경/모바일 대응까지 다룬 국내 유일 강의
02. FE 개발환경 다양화 반영! 39개 스택

다양한 상태관리 라이브러리, 패키지매니저, 번들러 등 프로젝트별 트렌드를 반영해 학습
03. AI기술 활용법을 익히는 6개 프로젝트

챗GPT API를 이해하고 활용하며 개발에 사용하고 AI 도구의 활용 방법까지 익히는 학습 부록 포함

기본 정보

수강대상
입문자부터 3년차까지
강의 특징
6개 대주제로 프론트엔드 개발에 필요한 주요 기술 마스터
1) HTML,CSS,JS,TS : 웹 뼈대 및 UI 구현
2) React : 구조화된 방식의 인터페이스 구현
3) React & Next.js : 서버 및 백엔드 통신 이해
4) Next.js : 성능 고려 프론트엔드 개발
5) 번들러, 패키지 매니저 등 : 개발환경 이해
6) React Native : 모바일 환경 대응 7) JS 코딩테스트까지 구성하여 면접과 CS지식까지 탄탄하게
∙ 약 230시간의 분량
∙ 입문 - 실전

동일 강의 안내
1) 본 강의의 [Part 1~Part 2] 아래의 강의와 동일합니다.
- 한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online.
- 14일 만에 만드는 스타벅스 웹 사이트 with HTML&CSS

2) 본 강의의 [Part 1~5 Ch2] 는 아래의 강의와 동일합니다.
- 한 번에 끝내는 HTML, CSS, JavaScript, TypeScript 올인원 패키지 Online.
- 프론트엔드 웹 개발의 모든 것 (시그니처) 초격차 패키지 Online.

3) 본 강의의 [Special Class +1]은 아래의 강의와 동일합니다.
- 개발자 취업 합격 패스 With 코딩테스트, 기술면접 초격차 패키지 Online.

4) 본 강의의 [Special Class 2 레벨업 +3]은 아래의 강의와 동일합니다.
- 한 번에 끝내는 현실 세상의 컴퓨터공학지식 with 30가지 시나리오 초격차 패키지 Online.

강의 특징

∙ 수강료 1회 결제로 평생 소장
∙ 부가 학습 자료 제공
∙ 실무에서 개발하듯 다양한 스택을 조합하여 사용하는 방법을 학습
| 개발 환경(클래스 2~5)
1) 메인 프레임워크 & 라이브러리 : React 18.2, Next.js 13.5.6, Next.js 14.11
2) 상태관리 : Redux5.0.1, React-Query 5.29.2, MobX 6.12.3, Zustand 4.5.2, Jotai 2.7.2, SWR 2.2.5, Redux Toolkit 2.2.3, Redux Thunk 3.1.0,
3) 스타일링 : Tailwind 3.4.3, GSAP 3.12.5, Framer-Motion 11.1.7, Emotion 11.11.4
4) 개발환경 : Webpack 5.91.0, npm 5.0, Vite 5.2.10, yarn 1.22.22, ESBuild 0.20.2, pnpm 9.1.0, Rollup 4.12.4, Parcel 2.12.0
5) 백엔드/서버/배포 : Node.js20.12.2, Firebase 10.11.0, Express.js 4.19.2, GraphQL 16.8.1, Docker 4.29.0, Github-action
6) 테스트 : Jest 29.7.0, React Testing Library 15.0.4, Cypress13.7.3
7) 기타 : React Router 6.23.0, Storybook8.0.9, MSW 2.2.13, Prettier 3.2.5, ESLint 9.1.1, Webpack Dev Server 5.0.4, dotenv 16.4.5
8) React Native 0.72.12

[1+1 이벤트 : 6월 26일 쿠폰 자동발급]시그니처 프론트엔드 : 웹 개발부터 웹앱까지 프론트엔드의 모든 것

정가~~653,000원~~

할인 금액(-66%) 435,000원

현재 판매가218,000원

월 18,167원

* 12개월 무이자 할부 시

바로 구매하기

패스트캠퍼스 프론트엔드 시그니처 강의는
변하는 트렌드와 기술 환경에 맞춰 꾸준히 발전해왔습니다.

그리고 최근에는 더 빠르게,
프론트엔드를 둘러싼 환경은 변화했습니다.

빅테크 중심으로 “연차 표기 없는”, “신입이지만 2-3년차 수준을 요구하는” 채용 공고 등장

빠르게 변화한 프론트엔드 개발환경

거스를 수 없는 메가 트렌드 AI의 등장

변화와 트렌드를 반영해 새로 태어난
가장 최신의 프론트엔드 초격차 구성

지금 이 강의를 들어야 하는 이유,
현직 개발자 Lead에게 직접 물어봤습니다.

강의 구성

프론트엔드 개발에 필요한 6가지 영역에서
기초부터 활용 능력까지, 진짜 실력 향상이 가능한 커리큘럼

네카라쿠배 채용 공고 분석 & 7명의 프론트엔드 개발자 자문을 통해 구성한 가장 최신의 커리큘럼으로
프론트엔드 개발의 핵심 역량을 확실하게 높여보세요.

6가지 클래스 구성 미리보기

프론트엔드 개발에 필요한 기술을 6가지로 분류하여
실력 향상을 위해 각 영역에서 개념과 필수 기술 스택부터 프로젝트를 통한 응용 능력까지 탄탄하게 구성했습니다.

웹 뼈대 및 UI 구현

웹 개발의 기초인 HTML, CSS, JavaScript를 사용하여
기본적인 웹사이트 구조와 디자인, 동적 기능 구현 방법 학습

Part 01 HTML/CSS/JS 기초 : 스타벅스 웹 사이트 UI 클론

Part 02 Git을 활용한 버전관리

Part 03 HTML/CSS/JS 응용 : 애플 아이패드 반응형 웹 사이트

Part 04 JavaScript 마스터 : API로 영화 검색 사이트

Part 05 TypeScript 마스터 : 영화 검색 예제 수정하기

구조화된 방식의 인터페이스 구현

메인 라이브러리인 React로 복잡한 사용자 인터페이스를
구조화하여 효율적으로 개발하는 방법을 학습

Part 06 React 기본 : 컴포넌트 작성 및 구조와 상태관리 학습

Part 07 React 활용 : 컴포넌트와 다양한 Form 제어 및 테스팅 전략 학습

서버 및 백엔드 통신 이해

SSR, 데이터 페칭 및 API 활용을 포함한 백엔드 통신을 통해
유연하고 효율적인 웹 어플리케이션을 구축 방법 학습

Part 08 React 심화
: React 기반의 렌더링 이해

Part 09 Next.js13 기본
: SSG 및 Pre-render와 백엔드 통신과 API Routes로 백엔드 로직 개발

Part 10 Next.js13 활용
: SSR 및 데이터 로딩과 React-Query로 데이터 상태 관리

성능 고려 프론트엔드 개발

고급 Next.js 기능을 사용하여, 사용자 경험을 개선하고,
애플리케이션의 로딩 속도와 반응성을 높이는 방법을 학습

Part 11 Next.js14 기본
: 서버와 클라이언트 간 데이터 전송 최적화(Streaming React Server Components)

Part 12 Next.js14 활용
: 로딩 속도와 라우팅 성능 향상(Stactic Rendering, Parallel Routes)

Part 13 Next.js14 심화
: 서버 데이터 처리를 최적화하여 진행(Server Action)

개발 환경 이해

다양한 운영 환경에서의 소프트웨어 배포 및 유지 관리,
적합한 개발 환경 구성을 이해

Part 14 프론트엔드 개발 환경의 기초
: 개발 환경 구성 및 관리(번들러, 패키지 매니저, 개발 서버 설정 등)

Part 15 프론트엔드 개발 환경의 실전
: 개발 환경 구성 전략 및 고급 기술 (모노레포 도구, 테스팅 프레임워크 등)

구조화된 방식의 인터페이스 구현

메인 라이브러리인 React로 복잡한 사용자 인터페이스를
구조화하여 효율적으로 개발하는 방법을 학습

Part 16 기초 웹뷰 개발 : React Native

Part 17 웹과 앱 통합 : 웹뷰 띄우기

Part 18 웹과 앱 통신 : 웹 SDK 활용 앱 개발

Part 19 앱 리소스 활용 : 모바일 디바이스의 마이크 등 활용 개발

개발 스택

프론트엔드 필수 & 최신 트렌드를 반영한
39가지 기술 스택을 한 번에

프론트엔드 개발자는 상황에 따라 다양한 기술 스택을 선택하고, 조합하여 사용할 수 있어야 합니다.
어떤 변화에도 대응할 수 있도록 필요한 모든 기술스택을 다 알려드릴게요.

압도적 가성비

웹 개발 기초부터, 서버, 모바일 환경 대응까지 
프론트엔드 개발에 필요한 모든 기술을 담은 국내 유일무이한 강의

개념과 간단한 예제 위주의 커리큘럼으로는 진짜 개발 실력을 키울 수 없죠.
배운 개념과 기술 스택을 바로 활용해볼 수 있도록 프론트엔드 실무 수준으로 프로젝트까지 준비했습니다!

각 영역에서의 실력 향상을 위해 준비한,
개발부터 배포까지 경험하는

20개 이상 실전 프로젝트

Class 1
Class 2
Class 3
Class 4
Class 5
Class 6

웹 뼈대 및 UI 구현

HTML,CSS로 웹 페이지의 구조 생성 - JavaScript를 활용한 동적 기능 추가 - TypeScript로
타입 안정성까지 프론트엔드 개발 기초를 탄탄히 다지기 위한 프로젝트

| 주요 학습 내용
∙ JavaScript 기능: ES6, 비동기 처리 (Promise, Async/Await), 모듈 시스템 등
∙ DOM 조작과 이벤트 처리
∙ 순수 JavaScript로 컴포넌트 구현 방법

| 주요 구현 기능
∙ 헤더와 드롭다운 메뉴 구현
∙ 전역 버튼 스타일 설정과 순차적으로 요소를 표시하는 애니메이션
∙ 수직 슬라이드와 이미지 프로모션을 위한 슬라이드쇼
∙ YouTube 영상을 배경으로 사용하거나 반복 애니메이션 적용

영화 검색 사이트

ImageSlide<div class="txc-textbox" style="background-color:#383B40; border-radius:6px; padding:20px 20px 20px 20px;">

<p style="margin-bottom: 0.5em; font-size:14px; color:#359EFF;"><b>
STEP 01
</b></p>
<b style="font-size:14px; color:#ffffff;">
동적 기능을 포함한 영화 검색 사이트 개발
</b>

</div>

STEP 01

동적 기능을 포함한 영화 검색 사이트 개발

① 기본 HTML 및 CSS
: 사용자에게 보여질 웹 페이지의 구조를 만들고 스타일링을 적용합니다.

② JavaScript DOM 조작
: JavaScript를 사용하여 DOM 요소를 동적으로 조작하고 사용자의 입력에 따라 UI를 업데이트합니다.

③ 이벤트 핸들링
: 사용자와의 상호작용을 처리하기 위해 이벤트 리스너를 구현하고 관리합니다.

STEP 02

TypeScript 마이그레이션

① JavaScript와 비교를 통한 TypeScript 학습
: 자바스크립트 코드를 타입스크립트로 변환하기 위해 기본 문법과 타입 시스템을 학습합니다.

② 타입 정의 및 인터페이스 사용
: 자바스크립트로 작성된 변수 및 함수에 타입을 명시하여 코드의 안정성과 유지보수성을 향상시킵니다.

③ 모듈화 및 구조 개선
: 타입스크립트의 모듈 시스템을 활용해 코드 구조를 개선해 관리하기 쉬운 프로젝트 구조로 마이그레이션합니다.

STEP 03

챗GPT API 활용 챗봇 구현

① 동적 UI 구현
: 사용자의 입력과 챗봇의 응답을 실시간으로 처리하고, 적절한 UI 업데이트를 제공합니다.

② 챗봇 디자인
: 사용자와의 인터랙션을 위한 챗봇 플로우를 설계하고 구현합니다.

③ AI 챗봇 통합
: OpenAI의 API를 사용하여 자연어 처리능력을 가진 챗봇 기능을 통합합니다.

구조화된 방식의 인터페이스 구현

React의 복잡한 데이터 흐름을 제어하며 상태관리와 개발시 이해해야 하는 주요 React 기능을 학습합니다.

| 학습 포인트
React 컴포넌트 작성 및 구조 익히기

| 학습 내용
∙ React 핵심 기초 개념 이해와 실습 (JSX, Props, State)
∙ Redux와 Context API를 활용한 상태 관리 심화 학습과 실습  (Reducer, Context, Redux, Redux Toolkit, Redux Thunk)
∙ React Hooks 및 라이프사이클 관련 학습(useEffect, useRef)
∙ 다양한 스타일링 방법론 비교 및 실습으로 최적의 CSS 솔루션 선택 기준 이해 (CSS modules, Emotion, Tailwind CSS)

| 활용 스택

| 학습 포인트
React의 복잡한 데이터 흐름을 제어하며 상태관리와 성능 최적화
( 프로젝트 주제 특징 : 사용자가 여러 단계를 거치며 입력한 정보를 유지, 관리 및 전달해야 함에 따라 상태관리가 중요 )

| 학습 내용
∙ 복잡한 상태관리 학습(Redux, Redux Toolkit, Redux Saga)
∙ React의 기본구조 및 서버 사이드 렌더링
∙ 성능 최적화 방법과 React 내부 동작 원리 이해
∙ 제어 및 비제어 컴포넌트, 레이지 로딩, React.memo 등의 고급 기능 사용법

| 활용 스택

| 학습 포인트
React + TypeScript + 다양한 기술 스택을 활용한 상용 수준 프로젝트

| 학습 내용
∙ 사용자 경험을 고려한 라우팅 설정(Dynamic Routing, React Router)
∙ 어떤 데이터를 저장해야 할지 판단하며 효율적인 상태 관리 학습(Zustand)
∙ 동적 UI 요소 개발 : 유저 인터랙션이 풍부한 검색, 여행지 추천, 모달 등 구현
∙ 실무처럼 외부 API를 활용하여 풍부한 기능을 구현(Google 지도 API)
∙ 사용자에 의한 장소와 숙소 정보 추가 기능을 통해 실시간 데이터 처리
∙ Express API 서버 구축 : 실제 백엔드 서버를 만들어 보면서 웹 개발의 서버 측면을 이해
∙ 컴포넌트 개발 및 문서화 : Storybook 사용법

| 학습 내용

*위 실습 이미지는 예시로, 실제 실습과 상이할 수 있습니다.

프론트엔드 개발을 위한 서버 이해

HTML,CSS로 웹 페이지의 구조를 익히고
동적인 기능을 추가하는 JavaScript과 타입 안정성을 확보한 TypeScript로 프론트엔드 개발의 기초 토대를 다집니다.

1. API 연동 & 서버 상태관리 (with React & Next.js)
복잡한 API 통합으로 프론트엔드 개발자가 데이터 처리와 서버 상호작용에 대한 깊은 이해를 할 수 있게 됩니다.

ImageSlide<b>| 프론트엔드와 백엔드의 통신 및 상호 작용 이해<br></b><span style="color:#CCCCCC">
∙ 복잡한 API 통합으로 프론트엔드 개발자가 데이터 처리와 서버 상호작용에 대한 이해<br>
∙ GraphQL 같은 현대적 API 쿼리 언어의 사용은 데이터를 효율적으로 요청 및 관리
</span>
<hr style="border:dashed 0.5px #646464;">

<b>| 주요 학습 기술
<br></b><span style="color:#CCCCCC">
∙ 상태관리 및 서버 상태 관리 적용 : React-Query<br>
∙ AI 곁들인 앱을 구현하며 API와 상호 작용 : ChatGPT API<br>
∙ 선언적 로직 작성 : Custom Hook
</span>

| 프론트엔드와 백엔드의 통신 및 상호 작용 이해
∙ 복잡한 API 통합으로 프론트엔드 개발자가 데이터 처리와 서버 상호작용에 대한 이해
∙ GraphQL 같은 현대적 API 쿼리 언어의 사용은 데이터를 효율적으로 요청 및 관리

| 주요 학습 기술
∙ 상태관리 및 서버 상태 관리 적용 : React-Query
∙ AI 곁들인 앱을 구현하며 API와 상호 작용 : ChatGPT API
∙ 선언적 로직 작성 : Custom Hook

ImageSlide<b>| 프론트엔드 개발자로서 서버 사이드 요구에 대응하기 위한 SSR<br></b><span style="color:#CCCCCC">
∙ Next.js를 활용한 SSR(서버 사이드 렌더링) 구현<br>
∙ 실시간 통신 기술을 사용하여 실시간 채팅 기능을 구현하며 데이터 흐름에 대한 이해
</span>
<hr style="border:dashed 0.5px #646464;">

<b>| 주요 학습 기술
<br></b><span style="color:#CCCCCC">
∙ 데이터 실시간 동기화 : React-Query<br>
∙ 클라우드 서비스를 통한 실시간 애플리케이션 배포 방법<br>
∙ TypeScript를 통한 엄격한 타이핑 시스템 실습
</span>

| 프론트엔드 개발자로서 서버 사이드 요구에 대응하기 위한 SSR
∙ Next.js를 활용한 SSR(서버 사이드 렌더링) 구현
∙ 실시간 통신 기술을 사용하여 실시간 채팅 기능을 구현하며 데이터 흐름에 대한 이해

| 주요 학습 기술
∙ 데이터 실시간 동기화 : React-Query
∙ 클라우드 서비스를 통한 실시간 애플리케이션 배포 방법
∙ TypeScript를 통한 엄격한 타이핑 시스템 실습

2. 랜더링 방식에 따른 통신과 서버 구현 (with Next.js 13)
프론트엔드 개발자가 백엔드 서버의 작동 방식과 데이터 처리 방법을 이해하면서, 보다 효율적이고 통합적인 개발 능력을 키울 수 있습니다.

ImageSlide<b>| Next.js 13 SSG 기반 통신 이해<br></b><span style="color:#CCCCCC">
∙ Next.js 13의 정적 라우팅 기능으로 정적 페이지를 만들어보고, 구조와 작동 방식을 이해합니다. <br>
∙ OpenAI의 Dall-E를 이용해 이미지 생성 API를 호출하여 생성된 이미지를 받아온 후, 화면에 출력해봅니다. <br>
∙ getStaticProps를 사용하여 사전에 날씨 데이터를 가져와서 페이지를 렌더링합니다.
</span>

| Next.js 13 SSG 기반 통신 이해
∙ Next.js 13의 정적 라우팅 기능으로 정적 페이지를 만들어보고, 구조와 작동 방식을 이해합니다. 
∙ OpenAI의 Dall-E를 이용해 이미지 생성 API를 호출하여 생성된 이미지를 받아온 후, 화면에 출력해봅니다. 
∙ getStaticProps를 사용하여 사전에 날씨 데이터를 가져와서 페이지를 렌더링합니다.

ImageSlide<b>| Next.js 13 SSR 기반 통신 이해<br></b><span style="color:#CCCCCC">
∙ getServerSideProps를 사용하여 서버 측에서 데이터를 불러와 SSR을 구현합니다.<br>
∙ Next-Auth의 설정을 통해 커스텀 JWT 인증을 구성하고 Vercel DB를 이용한 유저 정보 테이블을 통해 사용자 정보를 관리합니다<br>
∙ 페이지 라우터를 통해 필요한 경우 인증된 사용자에게만 접근을 허용합니다.
</span>

| Next.js 13 SSR 기반 통신 이해
∙ getServerSideProps를 사용하여 서버 측에서 데이터를 불러와 SSR을 구현합니다.
∙ Next-Auth의 설정을 통해 커스텀 JWT 인증을 구성하고 Vercel DB를 이용한 유저 정보 테이블을 통해 사용자 정보를 관리합니다
∙ 페이지 라우터를 통해 필요한 경우 인증된 사용자에게만 접근을 허용합니다.

*위 실습 이미지는 예시로, 실제 실습과 상이할 수 있습니다.

성능 고려 개발

Next.js 14로 성능을 고려한 프론트엔드 개발하며
애플리케이션의 로딩 시간을 줄이고, 반응 속도를 향상시키는 다양한 성능 최적화 기술을 배웁니다.

ImageSlide<b>| Next.js 14 앱 라우터<br></b><span style="color:#CCCCCC">
∙ Next.js 14 환경 설정하기<br>
∙ Next.js 14에 도입된 Client-Side Components와 Server-Side Components
</span>
<hr style="border:dashed 0.5px #646464;">

<b>| 속도 개선 및 최적화
<br></b><span style="color:#CCCCCC">
∙ Static Rendering : Next.js 14의 SSG 개념 및 구현 과정 학습<br>
∙ SEO(검색엔진최적화)를 위한 웹 페이지의 메타 데이터 설정 및 사이트 맵 동적 생성<br>
∙ Google Light house로 성능 개선 포인트 찾기<br>
∙ 이미지 최적화 및 반응형 이미지 제작
</span>

| Next.js 14 앱 라우터
∙ Next.js 14 환경 설정하기
∙ Next.js 14에 도입된 Client-Side Components와 Server-Side Components

| 속도 개선 및 최적화
∙ Static Rendering : Next.js 14의 SSG 개념 및 구현 과정 학습
∙ SEO(검색엔진최적화)를 위한 웹 페이지의 메타 데이터 설정 및 사이트 맵 동적 생성
∙ Google Light house로 성능 개선 포인트 찾기
∙ 이미지 최적화 및 반응형 이미지 제작

ImageSlide<b>| Next.js 14 <br></b><span style="color:#CCCCCC">
∙ Server action으로 DB에 데이터 저장(Next.js API route)<br>
∙ Streaming을 활용하여 렌더링 시간 단축
</span>
<hr style="border:dashed 0.5px #646464;">

<b>| 성능 최적화
<br></b><span style="color:#CCCCCC">
∙ Server Components로 데이터를 미리 로딩해 클라이언트 리소스 절약하기<br>
∙ Cache로 요청 최적화하기<br>
∙ React Hook Form으로 폼 상태 관리<br>
∙ Shadcn과 Tailwind를 통한 빠른 서비스 구축
</span>

| Next.js 14
∙ Server action으로 DB에 데이터 저장(Next.js API route)
∙ Streaming을 활용하여 렌더링 시간 단축

| 성능 최적화
∙ Server Components로 데이터를 미리 로딩해 클라이언트 리소스 절약하기
∙ Cache로 요청 최적화하기
∙ React Hook Form으로 폼 상태 관리
∙ Shadcn과 Tailwind를 통한 빠른 서비스 구축

*위 실습 이미지는 예시로, 실제 실습과 상이할 수 있습니다.

개발 환경 이해

번들러와 패키지 매니저 학습으로 개발환경 구성을 이해하여
효과적인 개발 시작을 위해 필요한 도구 및 소프트웨어의 설치와 구성 방법을 학습합니다.

모듈시스템 구현

CommonJS 모듈 시스템 (require/module.exports)을 구현하며 모듈 시스템 간 차이점 및 사용 방법

바벨을 사용하여 ES6+ 코드를 ES5로 변환

ES6+ 문법을 사용할 때 다양한 브라우저에서의 지원 상황을 비교하고, 크로스브라우징 이슈에 대응하는 방법

테스팅 환경 범위 비교

Jest 등 다양한 테스팅 프레임워크를 활용하여 테스트 대상 1개를 두고, 코드 커버리지 및 실행 방식을 비교

ImageSlide<b>
프로덕션 빌드 최적화를 위해 <br>
코드 난독화 및 압축
</b>

프로덕션 빌드 최적화를 위해
코드 난독화 및 압축

프로덕션 빌드 최적화를 위해 파일 크기를 줄이는 과정을 배우고, 이를 통해 성능을 향상시키는 방법

ImageSlide<b>
Github Action을 이용한<br>
CI/CD 파이프라인 구축
</b>

Github Action을 이용한
CI/CD 파이프라인 구축

실습 과정에서 자동화된 빌드, 테스트, 배포 과정과 구성환경 별 배포 전략

모바일 환경 대응

React의 기술을 활용하여 React Native로 웹과 네이티브 모바일 애플리케이션을
동시에 개발할 수 있는 웹뷰 기술에 대해 학습합니다.

ImageSlide<b>| 실습 내용
<br></b>

<span style="color:#CCCCCC">
∙ 웹과 앱 통합 : 웹뷰를 이용해서 웹 페이지를 앱에 띄우기<br>
∙ CLI, EXPO로 React Native 웹뷰 개발 환경 세팅<br>
∙ 앱의 네비게이션 기능과 웹뷰를 함께 이용해서 개발하기
</span>

| 실습 내용
∙ 웹과 앱 통합 : 웹뷰를 이용해서 웹 페이지를 앱에 띄우기
∙ CLI, EXPO로 React Native 웹뷰 개발 환경 세팅
∙ 앱의 네비게이션 기능과 웹뷰를 함께 이용해서 개발하기

ImageSlide<b>| 실습 내용
<br></b>

<span style="color:#CCCCCC">
∙ React Native로 제공하지 않는 Third party를 웹뷰를 이용해서 앱으로 구현<br>
∙ 웹뷰로 앱을 조작 ↔ 앱으로 웹뷰를 조작하는 상호 통신
</span>

| 실습 내용
∙ React Native로 제공하지 않는 Third party를 웹뷰를 이용해서 앱으로 구현
∙ 웹뷰로 앱을 조작 ↔ 앱으로 웹뷰를 조작하는 상호 통신

ImageSlide<b>| 실습 내용
<br></b>

<span style="color:#CCCCCC">
∙ 웹 사이트를 일반 웹과 웹뷰 용으로 분기하여 개발하기<br>
∙ 웹뷰에서 앱으로 통신하여 앱의 리소스 사용하기<br>
∙ AI API 이용해서 AI 애플리케이션 만들어보기
</span>

| 실습 내용
∙ 웹 사이트를 일반 웹과 웹뷰 용으로 분기하여 개발하기
∙ 웹뷰에서 앱으로 통신하여 앱의 리소스 사용하기
∙ AI API 이용해서 AI 애플리케이션 만들어보기

예상 할 수 없는 기술 변화, 빠르게 적응하는 게 정답!
AI 활용 능력을 위한 프로젝트 & 활용 툴까지

Project
AI 기능을 구현하며 AI 활용 능력 높이기 (feat. ChatGPT API)
※ 프로젝트 설명 중 아래 모양 벳지가 있는 6개의 프로젝트에서 AI 기능을 구현해봅니다.

OpenAI API 이해

주요 기능, API 키 발급 및 인증 방법 등 사용방법과 개념 이해

OpenAI 라이브러리 적용

OpenAI API를 서버 API에 통합하는 과정 이해

파인 튜닝

특정 도메인 또는 사용 사례에 맞는 기능 구현을 위해 튜닝 방법 이해

배포

환경 변수를 구성하여 프로젝트를 최종 배포하는 방법 이해

Tool

개발자 AI 업무 도구 활용 방법 부록으로 생산성 높이기

이제 개발자 필수 기술 스택! ChatGPT & Copilot 활용 온라인 강의까지 드립니다.
* [초격차 패키지 : 한 번에 끝내는 현실 세상의 컴퓨터공학지식 with 30가지 시나리오]와 같은 내용을 제공해드립니다.

CS 지식

기본기를 탄탄하게!
나동빈 강사님의 JavaScript 코딩테스트 강의로
자료구조, 알고리즘까지 완벽 해결하세요.

믿고 듣는 나동빈 강사님의 자료구조/알고리즘 핵심 개념과 문제풀이로
부실한 기본기를 탄탄한 기본기로 바꾸어 현업에서 막힘없이 개발할 수 있게 됩니다.

01 131 문제
알고리즘 핵심 유형부터 문제 풀이를 위한 문법 예제까지 !

20문제
코딩테스트 개요 및
문제 풀이를 위한
JavaScript 문법

JavaScript 핵심 문법
입출력 | 조건문 | 반복문

JavaScript 핵심 자료구조
• 자료구조(Data Structure)
• 배열(Array)과 리스트(List)
• JavaScript 스택(stack)
• Javascript 큐(queue)
• 트리(Tree)와 우선순위 큐 (Priority Queue)
• 그래프(Graph)의 표현

111문제
JavaScript 알고리즘 핵심 10개 유형

02 JavaScript 코딩테스트 합격 노하우

풀이시간을 대폭 줄이는 노하우 전수

소요 시간의 경향성을 계산을 위한 빅오표기법 학습으로 시간복잡도를 계산하여 제한된 시간 내 문제 해결하며, 시간이 모자라지 않도록 알고리즘 코딩 테스트를 준비하며 코드템플릿 제작 & 관리 방법

코딩테스트에서 참고하면 좋은 JavaScript의 문법 & 특징

코딩테스트용 JavaScript 기본사칙연산, 기본 입력(fs 모듈, readline 모듈), 조건문, Array.prototype.reduce() 등 문제풀이를 위한 문법을 정리해 알려드립니다.

03 코딩테스트의 스타 강사 나동빈 강사님

흔들리지 않는 탄탄한 기본 기본기를 위한
프론트엔드 개발자가 알아야 하는 컴퓨터 공학 지식까지 드려요!

01

데이터베이스

자세히보기
프론트엔드 개발자가 컴퓨터 구조를 이해하는 것은 하드웨어 수준에서 소프트웨어가 어떻게 실행되는지를 파악할 수 있게 합니다.  
성능 최적화
: 메모리 관리, CPU 사용 등을 이해하면 웹 애플리케이션의 로딩 속도와 실행 속도를 향상시킬 최적화 기법을 적용할 수 있습니다.
02

컴퓨터 네트워크

자세히보기
데이터 관리
: 프론트엔드 개발에서도 클라이언트 사이드 데이터 저장 기술을 활용할 수 있으며, 이에 대한 이해가 필요합니다.
API 설계 이해
: 백엔드와의 통신을 통해 데이터를 주고받는 과정에서 API 응답과 요청이 데이터베이스와 어떻게 연동되는지 이해하여 효율적인 데이터 흐름을 설계할 수 있습니다.
03

컴퓨터 구조

자세히보기
자원 최적화
: 네트워크 지식을 이해함으로써 HTTP/HTTPS 프로토콜, 웹소켓 등을 효율적으로 사용하여 애플리케이션의 네트워크 효율성을 높일 수 있습니다.
성능 논리 이해
: 네트워크 지연, 패킷 손실 등이 웹 애플리케이션의 성능에 미치는 영향을 이해하고, 이를 개선하기 위한 방법을 모색할 수 있습니다
04

개발 방법론 & SW

자세히보기
소프트웨어 개발 프로세스
: 개발 생명주기 관리, 테스팅, 유지보수 등 소프트웨어 공학의 기본 원칙을 적용하여 더 신뢰성 있는 소프트웨어를 개발할 수 있습니다.
팀 협업
: 대규모 프로젝트에서 다른 개발자들과의 협력을 원활하게 하기 위해 소프트웨어 공학에서 배우는 다양한 개발 방법론과 도구를 활용할 수 있습니다.

학습 방식

숲 [ 웹 기술 발전사 ]에 따라 학습 내용과 목적을 다잡고, 
나무 [ 세부 내용 ]을 학습하기에 학습 방향을 잃지 않습니다.

개념과 프로젝트 실습 후에는 "면접 질문"을 활용한 학습 내용 정리로 학습 효과를 증진합니다.

이론 학습 후 실습만 한다고 진짜 실력이 될까요?
과제로 복습과 응용을 문제 해결 능력까지 키워드립니다.

3단계 학습으로 배운 내용을 완전하게 나의 것으로 만들고, 기술 면접까지 대비해보세요!

강사님 소개

강의력과 개발 실력까지 갖춘 7명의 강사님

입문자에게 중요한 쉽고 자세히 설명하는 강사님, 중급자에게 중요한 실무 전달력이 뛰어난 강사님 모두 모였습니다.
믿고 수강할 수 있는 화려한 이력까지 확인하세요.

박영웅 강사님

| 담당 코스 : Part 1-5
| 이력
∙ 현) 질링스 개발팀 프론트엔드 리더 
∙ 전) 빈스토크 개발팀 과장 | 투비컴원 디자인팀 팀장
| 기타활동
∙ 올인원, 초격차, UX/UI 등 패스트캠퍼스 온라인 강의 진행 
∙ 11번가, 신한은행, KT 등 개발자 직무 역량 강화 강사/멘토

Jasper 강사님

| 담당 코스 : Part 6, 14
| 이력
∙ 현) 글로벌 H사 프론트엔드 개발(5년차)

조지영 강사님

| 담당 코스 : Part 7-8, 15
| 이력
∙ 현) 네카라쿠배급 기업 재직 중_ 현 10년차

문태경 강사님

| 담당 코스 : Part 9-10
| 이력
∙ 현) 대기업 K사_현 5년차
| 기타활동
∙ 프론트엔드 부트캠프 멘토 5기 이상

김한울 강사님

| 담당 코스 : Part 11-13
| 이력
∙ 전) 여행 스타트업 T사 _ 현 10년차
| 기타활동
∙ 주니어 개발자 멘토링 및 프론트엔드 강의 진행 
∙ 풀스택 오프라인 강의 및 커리어 코칭 진행

김대훈 강사님

| 담당 코스 : Part 15-19
| 이력
∙ 현) 주식회사 하얀마인드 CTO 및 공동창업자(2017~)
| 기타활동
∙ React Native 패스트캠퍼스 온라인 강의 진행

나동빈 강사님

| 담당 코스 : Part 20
| 이력
∙ 현) AI / Security Researcher 포항공과대학교 컴퓨터공학과 석사
| 기타활동
∙ Software Maestro 9
∙ ‘이것이 취업을 위한 코딩 테스트다 with 파이썬’ 저자
∙ KISA, 한국표준협회 및 다양한 고등학교/대학교 강의 다수

강사님 소개

수강 중 막히는 부분이 생긴다면?
강사님과 AI에 바로 물어볼 수 있는 질의응답 채널까지!
다른 데는 없는 강의 주제니까 정보 교류는 더 중요하죠!
정보 교류는 물론 수강중 궁금증 해결까지 한 번에 가능합니다.
* 본 채널은 2024.06.26 ~ 2027.05.13 동안 운영 됩니다.
* 강사님이 채널에 입장하시지만 답변이 필수로 제공되지 않는 커뮤니티 형식의 공간입니다.
* 강사님이 현업 중 답변하시기에 답변까지 영업일 기준 7일 내외 시간이 소요될 수 있습니다.

패스트캠퍼스는 시그니처 패키지 수강생들의 실력이 그 누구보다 빛나길 바랍니다.
그래서 준비한 넘치는 추가 혜택까지 확인하세요!

Benefit 01

강의 구매 즉시 신규 프론트엔드 강의 할인 쿠폰 제공

* 정확한 할인율은 쿠폰 지급 시점에 정해지며 발급된 쿠폰은 마이페이지 쿠폰 내역에서 확인할 수 있습니다.
* 쿠폰 발급 후 문자를 통해 안내될 예정이며, 마케팅 활용에 비동의 할 경우 문자가 발송되지 않을 수 있습니다.
* 2026.05.13까지 새롭게 공개되는 프론트엔드 강의에 대한 할인 쿠폰이 제공됩니다.

Benefit 02

학습 능률 상승을 책임지는 학습 도우미 3종

ImageSlide<center><span style="color:#cccccc;">헷갈리는 개발관련 영어를 모두 모은<br><b style="color:#ffffff; font-size:16px;">개발자를 위한 영단어 500 </span></b></center>

헷갈리는 개발관련 영어를 모두 모은
개발자를 위한 영단어 500

ImageSlide<center><span style="color:#cccccc;">우리 함께 Github 잔디심기 도전해봐요<br><b style="color:#ffffff; font-size:16px;">TIL(Today-I-Learned) 템플릿</b></span></center>

우리 함께 Github 잔디심기 도전해봐요
TIL(Today-I-Learned) 템플릿

ImageSlide<center><span style="color:#cccccc;">JavaScript 코딩 테스트 5주 완성을 위한<br><b style="color:#ffffff; font-size:16px;">노션 학습 플래너</b></span></center>

JavaScript 코딩 테스트 5주 완성을 위한
노션 학습 플래너

이 모든 구성을 타사와 한 눈에 비교해 보세요!
입문부터 실무자 3년차까지 활용 가능한 유일한 강의로, 첫 취업부터 이직까지 쭉 꺼내보실 수 있습니다!

이 구성에 타사 대비 가격은 1/N

월 1만원대에 한 번 구매로
기간 제한 없이 평생 수강하세요!

*런칭가(189,900원) 기준 - 12개월 무이자 할부시

커리큘럼

아래의 모든 강의를 이 강의 하나로 모두 들을 수 있습니다.
지금 한 번만 결제하고 모든 강의를 평생 소장하세요!

※ 동일한 강의에 대한 안내는 아래 [주의사항]을 통해 확인해보실 수 있습니다.

Class 01. 웹 뼈대 및 UI 구현

Part 1.HTML/CSS/JS 기초 : 스타벅스 웹 사이트 UI 클론

01. 개요

∙ 첫 인사 및 강의 개요
∙ HTML,CSS 그리고 JS
∙ 웹앱의 동작원리
∙ 웹 표준과 브라우저
∙ 웹에서 사용하는 이미지
∙ 특수 기호
∙ 오픈소스 라이선스

02. VSCode

∙ 설치 및 실행
∙ 파일 생성과 삭제
∙ 한글화
∙ 정리된 코드 만들기
∙ 태그 이름을 한 번에 변경(Auto Rename Tag)
∙ 브라우저에 출력(Live Server)
∙ 단축키 & 공백2로 만들기

03. 무작정 시작하기

∙ Doctype(DTD)
∙ HTML, HEAD, BODY
∙ CSS,JS 연결하기
∙ 정보를 의미하는 태그 살펴보기
∙ 화면에 이미지 출력하기
∙ 상태 경로와 절대 경로
∙ 페이지를 나누고 연결(링크)하기
∙ 모든 파일 공백 크기 설정
∙ 개발자 도구 사용하기

04. 웹에서 시작하기

∙ Codepen.io 소개
∙ 브라우저 스타일 초기화
∙ Emmet

05. HTML 개요

∙ 기본 문법
∙ 부모와 자식 관계의 이해
∙ 빈 태그
∙ 글자와 상자

06. HTML 핵심 정리

∙ 핵심 요소 정리
∙ 핵심 요소 출력 연습
∙ 주석
∙ 전역 속성

07. CSS 개요

∙ 기본 문법, 주석
∙ 선언 방식
∙ 선택자_기본
∙ 선택자_복합
∙ 선택자_가상 클래스 (1)
∙ 선택자_가상 클래스 (2)
∙ 선택자_가상 요소
∙ 선택자_속성
∙ 스타일 상속
∙ 선택자 우선순위

08. CSS 속성

∙ 개요
∙ 너비(width, height)
∙ CSS 단위
∙ 외부 여백(margin)
∙ 내부 여백(padding)
∙ 테두리 선(border)과 색상 표현
∙ 모서리 둥글게(border-radius)
∙ 크기 계산(box-sizing)
∙ 넘침 제어(overflow)
∙ 출력 특성(display)
∙ 투명도
∙ 글꼴
∙ 문자
∙ 배경
∙ 배치 (1)
∙ 배치 (2)
∙ 배치 (3)
∙ 플렉스(정렬) Container (1)
∙ 플렉스(정렬) Container (2)
∙ 플렉스(정렬) Items
∙ 전환
∙ 변환 (1)
∙ 변환 (2)
∙ Overwatch 캐릭터 선택 예제 (1)
∙ Overwatch 캐릭터 선택 예제 (2)

09. JS 선행

∙ 개요
∙ 데이터 종류
∙ 변수, 예약어
∙ 함수
∙ 조건문
∙ DOM API (1)
∙ DOM API (2)
∙ 메소드 체이닝
∙ 질의응답

10. 스타벅스 예제

∙ 시작하기 - 프로젝트 시작, 스타일 초기화, 파비콘
∙ 시작하기 - 오픈그래프와 트위터 카드
∙ 시작하기 - Google Fonts
∙ 시작하기 - Google Material Icons
∙ 헤더와 드롭다운 메뉴 - 로고
∙ 헤더와 드롭다운 메뉴 - 서브 메뉴
∙ 헤더와 드롭다운 메뉴 - 검색
∙ 헤더와 드롭다운 메뉴 - 메인 메뉴 (1)
∙ 헤더와 드롭다운 메뉴 - 메인 메뉴 (2)
∙ 헤더와 드롭다운 메뉴 - BEM
∙ 헤더와 드롭다운 메뉴 - 전역 배지(GSAP) (1)
∙ 헤더와 드롭다운 메뉴 - 전역 배지(GSAP) (2)
∙ 순차적 애니메이션 - 전역 버튼 스타일 (1)
∙ 순차적 애니메이션 - 전역 버튼 스타일 (2)
∙ 순차적 애니메이션 - 순차적으로 요소 보이기
∙ 요소 슬라이드 - 공지사항
∙ Swiper.js 라이브러리 버전 확인하기
∙ 요소 슬라이드 - 수직 슬라이드(Swiper)
∙ 요소 슬라이드 - 요소 가운데 배치
∙ 요소 슬라이드 - 프로모션 이미지 슬라이드 (1)
∙ 요소 슬라이드 - 프로모션 이미지 슬라이드 (2)
∙ 요소 슬라이드 - 슬라이드 영역 토글
∙ 유튜브 영상 배경 - 리워즈
∙ 유튜브 영상 배경 - Youtube iframe API (1)
∙ 유튜브 영상 배경 - Youtube iframe API (2)
∙ 유튜브 영상 배경 - 반복 애니메이션
∙ 고정 이미지 배경
∙ 3D 애니메이션
∙ 스크롤 위치 계산 애니메이션 (1)
∙ 스크롤 위치 계산 애니메이션 (2)
∙ 다중 요소 슬라이드
∙ 푸터
∙ 페이지 상단으로 이동(ScrollTo)

Part 2. Git을 활용한 버전관리

01. 버전관리

∙ 개요(Git, GitHub)
∙ 스타벅스 예제 GitHub 업로드(Push)
∙ 버전 생성과 업로드의 이해
∙ Netlify 지속적인 배포
∙ 수정사항 버전 생성(Commit)
∙ 로그인 브랜치(Branch)
∙ 로그인 페이지 개발(1)
∙ 로그인 페이지 개발(2)
∙ 로그인 브랜치 병합(Pull Request)
∙ 프로젝트 복제(Clone)
∙ 연습-버전 되돌리기(Reset)
∙ 연습-다른 환경에서 시작하기
∙ 연습-충돌(Conflict), 로컬 병합(Merge)
∙ master에서 main으로 브랜치 변경
∙ 버전 관리하지 않을 폴더 및 파일 설정(.gitignore)
∙ Git 브랜치 전략 - Git Flow 개요
∙ Git 브랜치 전략 - Git Flow 예제

02. 마크다운

∙ 개요
∙ 제목, 문장, 줄바꿈
∙ 강조, 목록
∙ 링크, 이미지
∙ 인용문, 코드 강조
∙ 표
∙ 원시 HTML, 수평선
∙ 원격 저장소에 Push

Part 3. HTML/CSS/JS 응용 : 애플 아이패드 반응형 웹 사이트

01. 데스크탑 모드로 개발

∙ 시작하기 - 소개
∙ 시작하기 - 프로젝트 초기화
∙ 시작하기 - 웹 폰트 적용과 단어 단위 줄바꿈
∙ 헤더 - 기본 구성
∙ 헤더 - CSS 배경 이미지와 대체 텍스트
∙ 헤더 - 장바구니 드롭다운 메뉴 스타일
∙ 헤더 - 장바구니 드롭다운 메뉴 스크립트
∙ 헤더 - 장바구니 드롭다운 메뉴 애니메이션
∙ 헤더 - 검색 바 스타일
∙ 헤더 - 검색 바 스크립트
∙ 헤더 - 검색 바 애니메이션
∙ 헤더 - 검색 포커스 및 값 비우기
∙ 내비게이션 사용 기술 정리
∙ 내비게이션 구성
∙ Hero 콘텐츠 구성
∙ 이미지 선택 및 드래그 방지, 공급 업체 접두사 확인
∙ Hero 콘텐츠 기본 스타일
∙ Figures 공통 스타일
∙ CSS 변수
∙ Power 섹션 - 기본 구성
∙ Feature / Infos 공통 스타일
∙ Sprite Image
∙ CSS 애니메이션과 @keyframes
∙ Sprite Image 애니메이션, JS 반복문 기초
∙ JS Intersection Observer(요소의 가시성 관찰)
∙ Display 섹션
∙ Camera 섹션
∙ Video 추가 및 제어
∙ Wireless 섹션
∙ Accessories 섹션
∙ iPadOS 섹션
∙ Apps 섹션
∙ Privacy 섹션
∙ Accessibility 섹션
∙ Whitebox 공통 스타일
∙ AR, Environment 섹션
∙ Accessory Shop, Trade 섹션
∙ Compare 섹션, Comment tagged templates 확장 프로그램
∙ 푸터 - 구입 정보
∙ 푸터 - 주의사항 각주(Footnote)
∙ 푸터 - 사이트 이동 경로(Breadcrumbs)
∙ 푸터 - JS 데이터 기반 내비게이션 표시
∙ 푸터 - 기타 정보와 날짜 표시, 화면 넘침 제어
∙ GitHub 저장소 업로드 및 Vercel 배포

02. 태블릿/모바일 모드로 개발

∙ 반응형 레이아웃을 위한 CSS @media와 Breakpoints(중단점) 설정
∙ 헤더 - 메뉴 버튼 토글과 배경 처리
∙ 헤더 - 검색 표시와 메뉴 목록
∙ 헤더 - 검색 시작과 취소 기능, 최적화
∙ 내비게이션 메뉴 토글
∙ Hero 콘텐츠
∙ Power 섹션
∙ Display 섹션
∙ Camera 섹션
∙ Wireless 섹션
∙ Accessories 섹션
∙ iPadOS 섹션
∙ Apps 섹션
∙ Privacy 섹션
∙ Accessibility 섹션
∙ Whitebox 공통 스타일과 AR 섹션
∙ 기타 섹션
∙ 푸터 섹션, 아코디언 메뉴
∙ 최종 푸쉬 및 배포 확인

Part 4. JavaScript 마스터 : API로 영화 검색 사이트

01. NodeJS

∙ 개요 및 설치
∙ NPM 개요
∙ NPM 프로젝트 시작, package.json
∙ Parcel, 개발 서버 실행과 빌드
∙ 유의적 버전(Semver)

02. JS 데이터

∙ 개요 및 프로젝트 구성
∙ 원시형 - String, Number
∙ 원시형 - Boolean, null, undefined
∙ 참조형 - Array
∙ 참조형 - Object
∙ 참조형 - Function
∙ 형 변환(Type Conversion)
∙ 참과 거짓(Truthy & Falsy)
∙ 데이터 타입 확인

03. 연산자와 구문

∙ 산술, 할당, 증감 연산자
∙ 부정, 비교 연산자
∙ 논리 연산자
∙ Nullish 병합, 삼항 연산자
∙ 전개 연산자
∙ 구조 분해 할당
∙ 선택적 체이닝
∙ If , Switch 조건문
∙ For, For of, For in 반복문
∙ While, Do while 반복문

04. 함수

∙ 선언과 표현 그리고 호이스팅
∙ 반환 및 종료
∙ 매개변수 패턴
∙ 화살표 함수
∙ 즉시실행함수(IIFE)
∙ 콜백
∙ 재귀
∙ 호출 스케줄링
∙ this

05. 클래스

∙ prototype
∙ ES6 Class 기본 문법
∙ Getter, Setter
∙ 정적 메소드
∙ 상속과 instanceof
∙ instanceof와 constructor

06. 표준 내장 객체

∙ 문자 1
∙ 문자 2
∙ 숫자
∙ 수학
∙ 날짜
∙ 배열 1
∙ 배열 2
∙ 배열 3
∙ 배열 4
∙ 객체
∙ JSON

07. 모듈

∙ 개요
∙ 가져오기와 내보내기 패턴
∙ 동적으로 모듈 가져오기, 가져온 모듈 바로 내보내기

08. 비동기

∙개요
∙콜백과 콜백 지옥
∙Promise
∙Async / Await 패턴
∙Resolve, Reject 그리고 에러 핸들링 1
∙Resolve, Reject 그리고 에러 핸들링 2
∙반복문에서 비동기 처리
∙fetch()

09. DOM

∙ Node vs Element
∙ 검색과 탐색
∙ 생성, 조회, 수정 1
∙ 생성, 조회, 수정 2
∙ 크기와 좌표

10. Events

∙이벤트 추가 및 제거
∙이벤트 객체
∙기본 동작 방지
∙버블링과 캡처링
∙이벤트 옵션
∙이벤트 위임
∙마우스와 포인터 이벤트
∙키보드 이벤트
∙양식과 포커스 이벤트
∙커스텀 이벤트

11. 기타 Web APIs

∙Console
∙Cookie, Storage
∙Location
∙History 1
∙History 2

12. 심화 학습

∙ Symbol, BigInt 데이터
∙ 불변성과 가변성
∙ 얕은 복사와 깊은 복사
∙ 가비지 컬렉션
∙ 클로저
∙ 메모리 누수
∙ 콜 스택, 테스크 큐, 이벤트 루프

13. 정규표현식

∙ 정규식 생성
∙ 메소드
∙ 플래그
∙ 패턴 1
∙ 패턴 2

14. API를 활용한 영화 검색 사이트

∙ 컴포넌트 - 개요
∙ 컴포넌트 - 컴포넌트 생성 클래스 작성
∙ 컴포넌트 - 선언적 렌더링과 이벤트 핸들링
∙ 컴포넌트 - 조건과 반복
∙ 컴포넌트 - 자식 컴포넌트에게 데이터 전달
∙ 컴포넌트 - 해쉬 라우터 관리 1
∙ 컴포넌트 - 해쉬 라우터 관리 2
∙ 컴포넌트 - 상태 관리(스토어) 1
∙ 컴포넌트 - 상태 관리(스토어) 2
∙ 프로젝트 구성, Heropy.js 연결
∙ 웹 폰트 및 색상 변수 구성
∙ 기본 라우터 구성
∙ Headline 컴포넌트
∙ Search 컴포넌트와 버튼의 공통 스타일
∙ MovieList 컴포넌트
∙ MovieItem 컴포넌트
∙ 영화 목록 더 가져오기
∙ 로딩 애니메이션 추가
∙ 예외 처리와 메시지 출력
∙ 영화 상세 정보의 상태 관리
∙ 영화 상세 정보 출력
∙ 고해상도 영화 포스터 출력 및 뒤로가기 검색어 복구
∙ 영화 상세 정보 페이지의 스켈레톤 UI 로딩
∙ TheHeader 컴포넌트
∙ 내비게이션 경로 일치 버튼 활성화
∙ TheFooter 컴포넌트
∙ 내 정보 페이지(About) 출력
∙ 404 Page Not Found
∙ 반응형 레이아웃을 위한 미디어쿼리 적용
∙ 최초 배포 및 API Key 보안 이슈 확인
∙ Vercel 구성 및 Serverless Functions 테스트
∙ 영화 정보를 반환하는 내부 API 작성 환경 변수 구성 및 최종 배포

Part 5. TypeScript 마스터 : 영화 검색 예제 수정하기

01. 문법

∙ 개요 및 빠른 개발 환경 구성
∙ 타입 종류 알아보기 - 문자부터 함수까지
∙ 타입 종류 알아보기 - Any부터 Intersection까지
∙ 타입 추론(Inference)
∙ 타입 및 할당 단언(Assertions)
∙ 타입 가드(Guards)
∙ 인터페이스 - 기본
∙ 인터페이스 - 함수 타입
∙ 인터페이스 - 인덱싱 가능 타입
∙ 인터페이스 - 확장(상속)
∙ 타입 별칭(Alias)
∙ 함수 - 명시적 this 타입
∙ 함수 - 오버로딩(Overloading)
∙ 클래스와 접근 제어자
∙ 제네릭 - 함수
∙ 제네릭 - 클래스
∙ 제네릭 - 인터페이스, 제약 조건
∙ 패키지의 타입 선언
∙ 타입 가져오기와 내보내기
∙ tsconfig.json 구성 옵션

02. TS로 영화 검색 예제 수정하기

∙ 타입스크립트 설치 및 구성
∙ Heropy.ts - Component 기능 타이핑
∙ Heropy.ts - Router 기능 타이핑
∙ Heropy.ts - Store 기능 타이핑
∙ About 스토어 타이핑, JSON to TS
∙ Movie 스토어 타이핑
∙ 각 컴포넌트의 State 및 Props 타이핑
∙ Search 및 MovieList 컴포넌트
∙ 영화 정보를 반환하는 내부 API 타이핑
∙ 최종 배포 및 확인

03. OpenAI API 활용, 챗봇 만들기

∙ OpenAI API 개요
∙ OpenAI API 대시보드 확인
∙ OpenAI API 요금제 이해
∙ Mock 데이터로 챗봇 서버 API 작성
∙ ChatBot 컴포넌트
∙ 서버 API에 OpenAI 라이브러리 적용
∙ 파인튜닝(Fine-tuning)
∙ 환경 변수 구성 및 최종 배포

Class 02. 구조화된 방식의 인터페이스 구현

Part 6. React 기본 : 컴포넌트 작성 및 구조와 상태관리 학습

01. React 소개 및 개발 환경 설정

∙ React 등장 배경 > React가 해결하려는 문제들
∙ 개발 환경 설정 (Node.js, npm, vite)

02. React의 기본 개념 1

∙ JSX 문법과 작성 방법
∙ 컴포넌트에 Props 전달하기
∙ 조건부 렌더링과 리스트 렌더링
∙ 이벤트 핸들링
∙ State

03. React의 기본 개념 2 : React Hooks 기초

∙ State > reducer > context 로 확장
∙ ref > useEffect 외부 시스템 제어 및 연동
∙ virtual dom과 랜더링(react reconciliation)

04. [프로젝트 실습 1] To do 리스트 : 리액트 컴포넌트 작성 및 구조 익히기

∙ 프로젝트 세팅하기
∙ 컴포넌트 구조 설계
∙ 컴포넌트 구현: TodoList, TodoItem
∙ 상태 관리와 로직 구현: useState, useReducer 사용하여 추가, 삭제, 수정 구현
∙ UI 완성과 스타일링

05. React 스타일링 : To do 프로젝트 스타일링으로 익히는 프레임워크

∙ CSS modules, Emotion, Tailwind CSS 비교 및 선택 기준 설명
∙ CSS 모듈로 To do 스타일링 해보기
∙ Emotion으로 To do 스타일링 해보기
∙ Tailwind CSS으로 To do 스타일링 해보기

06. React 상태 관리 기초 : To do 프로젝트 상태관리 적용해보기

∙ 글로벌 상태관리가 필요한 이유
∙ Context API 로 To do 작업하기
∙ Redux 기초 (액션, 리듀서, 스토어)
∙ Redux Toolkit
∙ 비동기 작업 처리 (Redux Thunk) (*API 관련 맛보기)
∙ Redux로 To do 작업하기

07. 면접 질문에 대답하며 정리하는 학습 내용

∙ Q. React와 그 주요 특징에 대해 설명해주세요.
∙ Q. Virtual DOM이란 무엇이며, 실제 DOM과 어떻게 다른가요?
∙ Q. props와 state의 차이점은 무엇인가요?
∙ Q. React에서 key는 왜 필요한가요?
∙ Q. useEffect 훅은 어떻게 작동하나요?

08. React 라우팅(데이터 관리) : 기초

∙ React Router 소개 : 필요성과 역할
∙ 싱글 페이지 애플리케이션(SPA)의 개념
∙ 기본 라우팅 설정
∙ 에러 페이지 핸들링
∙ 중첩 라우터
∙ 데이터 로드

09. React 테스팅 : 기초

∙ Jest와 React Testing Library
∙ 컴포넌트 테스트
∙ 스냅샷 테스트
∙ 모의 함수

10. [프로젝트 실습 2] 챗GPT API로 내용을 자동 구성해주는 블로그 프로젝트

∙ 프로젝트 세팅하기
∙ 컴포넌트 구조 설계
∙ 컴포넌트 구현: 채팅 컴포넌트, 채팅방 컴포넌트, 페이지 컴포넌트
∙ UI 완성과 스타일링
∙ 상태 관리와 로직 구현: redux를 사용하여 상태관리
∙ 라우팅 관리: 라우팅
∙ Jest, 테스트코드 작성하기
∙ firebase 배포하기

11. 면접 질문에 대답하며 정리하는 학습 내용

∙ Q. 상태 관리에 대해 설명하고, Redux나 MobX 등 외부 상태 관리 라이브러리를 사용하는 이유를 말해주세요.
∙ Q. useEffect 훅은 어떻게 작동하나요?
∙ Q. 컴포넌트 설계 시 재사용성을 높이기 위한 전략과 고려해야 할 사항에 대해 설명해주세요.

Part 7. React 활용 : 컴포넌트와 다양한 Form 제어 및 테스팅 전략 학습

01. React 활용 수준 학습을 위한 소개 및 프로젝트 셋업

∙ React 소개 : React 내부 동작 원리(Recap)
∙ typescript 설정 : 타입스크립트와 React 활용

02. React 성능 최적화 : 컴포넌트 최적화

∙ 컴포넌트를 잘 만들어야 하는 이유
∙ 성능 최적화 기법 1 : React.memo 컴포넌트 렌더링 성능 향상
∙ 성능 최적화 기법 2 : useMemo, useCallback 로 리렌더링 방지
∙ useEffect 순서
∙ React Profiler
∙ 제어 컴포넌트와 비제어 컴포넌트 + react-hook-form
∙ 레이지 로딩 (React.lazy, Suspense)

03. [프로젝트 실습 1] 멀티스텝 폼 기반 설문조사 : 컴포넌트와 다양한 Form을 제어하는 방법 중심 연습

∙ 시작하기
∙ package manager - yarn
∙ 번들러 설정하기(vite)
∙ typescript 설정하기
∙ tsconfig 설정 알아보기
∙ tailwind 설정하기
∙ 페이지 레이아웃
∙ 섹션 컴포넌트 만들기
∙ 폼 생성 컴포넌트 만들기(Formik)
∙ 드롭다운 만들기
∙ input 컴포넌트 만들기
∙ json-server 설정하기
∙ api 연동하기
∙ router 설정하기
∙ 멀티 스텝 컴포넌트 만들기
∙ 답변 폼 만들기
∙ 응답 결과
∙ 객관식 chart 만들기
∙ 주관식 리스트 만들기

04. 면접 질문에 대답하며 정리하는 학습 내용

∙ Q. React가 라이브러리일까 / 프레임워크 일까
∙ Q. React에서 component는 언제 업데이트될까?
∙Q. React가 memoized 컴포넌트가 업데이트되지 않았다는 것을 어떤 기준으로 판단할까?

05. React 상태 관리 : 활용

∙ Redux 고급 패턴 (Duck 패턴, Redux Saga)
∙ MobX를 활용한 상태 관리
∙ zustand를 활용한 상태 관리
∙ Jotai를 활용한 상태 관리
∙ 라이브러리 선택 기준 및 비교(Redux, MobX, zustand, Jotai, Context API, React 내에서 처리)

06. React 라우팅(데이터 관리) : 활용

∙ 중첩 라우팅 심화
∙ 동적 라우팅과 코드 스플리팅
∙ 라우트 가드와 인증 처리
∙ 라우팅 상태 관리 : Redux나 Context API와 함께 사용하기

07. React 생태계 및 라이브러리

∙ React Query (데이터 fetching 및 캐싱)
∙ tanstack table(데이터 테이블)
∙ GSAP(애니메이션 라이브러리)
∙ Storybook (컴포넌트 개발 및 문서화)

08. React 테스팅 : 활용

∙ E2E 테스트란
∙ Cypress를 활용한 E2E 테스트

09. [프로젝트 실습 2] (멀티 폼 기반) 여행 계획 사이트

∙ express api 서버 만들기
∙ SPA란
∙ router 설정하기
∙ 홈 만들기
∙ 레이아웃 만들기
∙ 헤더, 푸터 만들기
∙ 상태관리(zustand)
∙ 어떤 데이터를 저장해야 할지
∙ useState와 구분하기
∙ 검색 영역
∙ 추천 여행지 영역
∙ 모달 만들기
∙ 도시 상세 모달 만들기
∙ 달력 컴포넌트 만들기
∙ 일정 컴포넌트 만들기
∙ 도시페이지
∙ react와 구글 지도 연동하기
∙ wizard 만들기
∙ 장소리스트
∙ 장소 추가 기능 만들기
∙ 지도에 마커 표시하기
∙ 숙소리스트
∙ 숙소추가하기
∙ 일정 확인 페이지
∙ E2E 테스트 작성하기
∙ cypress 설정
∙ 테스트 작성

10. 면접 질문에 대답하며 정리하는 학습 내용

∙ Q. 전역상태를 사용하는 경우는 언제일까?
∙ Q. 상태 관리 라이브러리를 사용하는 이유는?
∙ Q. Redux의 3대 원칙에 대해서 설명해주세요

Class 3. 서버 및 백엔드 통신 이해 : React, Next.js 기반

Part 8. React 심화 : React 기반의 렌더링 이해

01. React Hooks : 고급 활용

∙ 상태 관리(데이터의 타입)
∙ Custom Hook 작성 및 활용방법
∙ useReducer, useContext 활용
∙ 훅을 활용한 상태 관리 패턴

02. CSR, SSR, SSG : React 기반의 렌더링 이해

∙ CSR
∙ SSR
∙ SSG
∙ React Server Component

03. 상태 관리와 서버 상태

∙ 서버 상태 관리 개념 및 접근 방법
∙ React-Query, SWR 등 서버 상태 관리 라이브러리 이해

04. API 연동 및 에러 처리를 통한 프론트엔드 개발자를 위한 서버 이해

∙ MSW로 백엔드 개발자들이 준비되지 않았을 때도 프론트엔드 개발하기(개발 효율성)
∙ React-Query(SWR 포함) 활용하기
∙ 에러 바운더리
∙ Express.js 기반 API 설계하기(RESTful API 설계 및 활용)
∙ GraphQL 개념 및 활용
∙ 서버리스 아키텍처 및 활용 (AWS Lambda, Firebase 등)

05. 살아남는 개발자 = AI 활용 가능한 개발자 : Open AI 사용하기

∙ Open AI 패키지 설치
∙ Open AI api 추가하기
∙ UI 컴포넌트 추가

06. 컴포넌트 디자인 패턴

∙ 컴포넌트 재활용성, 확장성
∙ stateful / stateless
∙ 컴파운드 패턴
∙ modal - animation

07. [프로젝트 실습 1] AI로 취향 기반 음악 추천 및 재생 사이트

∙ 프로젝트 셋업
∙ 번들러 설정 - esbuild
∙ 패키지 매니저 - pnpm
∙ 공통
∙ msw 설정
∙ 에러 바운더리 추가
∙ GraphQL
∙ 멜론 홈
∙ 노래 카드 컴포넌트 추가
∙ 슬라이더 컴포넌트 추가
∙ 섹션 추가
∙ 재생 컴포넌트 추가
∙ 애니메이션 추가(Framer-Motion)
∙ 음악 상세
∙ 재생목록
∙ 리스트 컴포넌트 추가
∙ d&d 기능 추가
∙ 믹스메이커
∙ 태그 추가
∙ 음악 추천 로직 및 hook 작성(ai)
∙ docker
∙ dockerfile
∙ 이미지 빌드
∙ 로컬에서 컨테이너 실행하기
∙ AWS(ecr, ecs)
∙ 배포하기
∙ github action 설명
∙ github action 배포 자동화

08. 면접 질문에 대답하며 정리하는 학습 내용

∙ Q. React에서 컴포넌트를 어떻게 구성하는게 효율적일까
∙ Q. Context API와 Redux 비교
∙ Q. hooks은 무엇일까?

09. [프로젝트 실습 2] AI 챗봇 대화 기능이 포함된 실시간 채팅 케케오톡 PC 버전 웹사이트

∙ Next.js를 활용한 서버 사이드 렌더링(SSR) 구현
∙ TypeScript와 React를 활용한 타입 안전성 확보
∙ React-Query를 활용한 실시간 데이터 동기화
∙ Framer-Motion을 활용한 인터랙티브한 채팅 UI 구현
∙ GraphQL 구독(Subscription)을 활용한 실시간 메시지 업데이트
∙ AWS S3를 활용한 파일 업로드 및 저장
∙ Docker를 활용한 애플리케이션 컨테이너화 및 배포 자동화
∙ GitHub Actions를 활용한 CI/CD 파이프라인 구축
∙ 고급 리액트 훅(Custom Hooks, useReducer, useContext 등)을 활용한 상태 관리 및 로직 분리
∙ 크롬 개발자 도구를 활용한 웹소켓 통신 모니터링 및 최적화

10. 면접 질문에 대답하며 정리하는 학습 내용

∙ Q. setState를 사용할 때 function을 넘기는 것은 어떨 때 필요할까?
∙ Q. bundler와 transpiler의 차이는 무엇일까

Part 9. Next.js13 기본 : SSG 및 Pre-render와 백엔드 통신과 API Routes로 백엔드 로직 개발

01. Next.js 소개

∙ 웹 발전사 중 Next.js의 등장 배경 이해 및 소개
∙ Next.js 기본 개념 설명 (diff app router)
∙ 페이지 라우터를 알아야 하는 이유

02. 프로젝트 생성 및 기본 기능 설명

∙ 프로젝트 생성
∙ 프로젝트 디렉터리 구조 이해

03. Next.js 기능 소개

∙ Font
∙ Image
∙ Link
∙ Script
∙ useRouter

04. 라우팅

∙ 정적 라우팅
∙ 동적 라우팅
∙ 중첩 라우팅 (with catch-all segments)

05. SSG

∙ getStaticProps
∙ getStaticPath

06. ISR

∙ ISR이란
∙ revalidate 옵션
∙ fallback 옵션

07. API Route

∙ API Route 소개
∙ API Route로 간단한 백엔드 로직 만들어보기
∙ 클라이언트사이드에서 API Route 호출하고 CSR 해보기
∙ 서버사이드에서 API Route 호출하고 SSR 해보기

08. 프로젝트: 날씨 앱 만들어보기

∙ 프로젝트 설명
∙ env 파일로 환경변수 설정하기
∙ 공공데이터포털 가입 및 날씨 API 호출
∙ OpenAI의 Dall-E를 이용해 이미지 생성 API 호출 (AI)
∙ 생성된 이미지 출력해보기
∙ 가져온 날씨 데이터 출력해보기
∙ 스타일링 해보기
∙ 빌드 및 Vercel에 배포해보기

09. 면접 질문 대비

∙ Q. Next.js는 라이브러리일까 프레임워크일까요?
∙ Q. SEO란?, 잘 하기 위해서는 어떤 작업을 해야할까요?
∙ Q. fallback, revalidate옵션은 어떻게 동작하나요?
∙ Q. img lazy-loading이란 무엇인가요?
∙ Q. CSR과 SSR의 차이점은 무엇인가요?

Part 10. Next.js13 활용 : SSR 및 데이터 로딩과 React-Query로 데이터 상태 관리

01. SSR 및 SSG, ISR과 비교

∙ SSR 소개 (SSG, ISR 비교)
∙ getServerSideProps로 SSR 해보기

02. 회원가입 기능 만들어보기 (간단한 DB 사용법)

∙ vercel/postgres DB 연동
∙ 유저 테이블 생성 및 회원가입 API 만들기
∙ 회원가입 API Route 호출해보기

03. next-auth를 활용한 권한 및 인증 (except refresh-token)

∙ JWT란
∙ 로그인 페이지 만들어보기
∙ next-auth를 활용한 사용자 인증 (except refresh-token)
∙ 페이지 및 API Route 보호 (middleware)

04. Next.js 활용

∙ next/dynamic
∙ Next.js에서 Suspense 사용해보기
∙ Next.js에서 ReactQuery SSR 해보기
∙ ReactQuery with Suspense

05. "프로젝트: 코인원 or Upbit API를 이용한 암호화폐 정보 조회 서비스 만들기 (소켓X) (컴플라이언스 검토 필요) 불가능시 Todo with Google Tasks"

∙ 프로젝트 설명
∙ 코인원 API 검토
∙ 암호화폐 목록 조회 기능 만들어보기
∙ 암호화폐 즐겨찾기 기능 및 정렬 만들어보기
∙ 암호화페 차트 데이터 요청해보기
∙ D3.js를 이용해서 차트 만들어보기
∙ 스타일링 해보기
∙ 빌드 및 Vercel에 배포해보기

06. 면접 질문 대비

∙ Q. SSG, ISR, SSR 차이
∙ Q. JWT란 무엇인가요?
∙ Q. next/dynamic이란
∙ Q. Next.js에서 Suspense 사용시 Hydration 에러 발생 이유

Class 4. 성능 고려 프론트엔드 개발 : Next.js 기반

Part 11. Next.js14 기본 : Next 14 새롭게 추가된 기능으로 알아보는 성능 최적화 (streaming, cache)

01. Nexjs 14 셋팅 및 소개하기

∙ Next.js 14 등장 배경
∙ Nextjs template 설치하기
∙ tailwind 설정하기

02. App Route에서 Routing과 Navigation

∙ Route 및 Page 컴포넌트란?
∙ Layout 컴포넌트란?
∙ Link 컴포넌트를 통한 Navigation

03. Server Component와 Client Component

∙ client 컴포넌트란?
∙ server 컴포넌트란?
∙ GET request로 data fetching하기
∙ Server action을 통한 POST, PUT, DELETE 요청 보내기

04. Loading UI와 Streaming을 통한 rendering 시간 단축

∙ Loading UI란?
∙ Suspense와 Streaming

05. Next 14에서 변경된 Rendering 방식 (Static Rendering, Dynamic Rendering)

∙ Static Rendering
∙ Dynamic Rendering

06. 성능 최적화를 위한 Caching

∙ Request Memoization
∙ Data Cache
∙ Full Route Cache
∙ Router Cache

07. 동적으로 Metadata (SEO) 관리하기

∙ metadata 동적으로 생성하기
∙ sitemap 동적 생성하기
∙ robot.txt 만들기

08. Next 12와 14의 차이점 정리하기

∙ App Router 차이점 알아보기
∙ Client, Server Component 차이점 알아보기
∙ static, dynamic Rendering 차이점 알아보기

09. Page Router에서 App Router로 마이그레이션

∙ App Router로 Page 이동하기
∙ Next 14 Routing Hooks 변경하기
∙ Next 14 fetch 방식으로 변경하기
∙ Codemod로 deprecated된 library 일괄 변경하기

10. 면접 질문에 대답하며 정리하는 학습 내용

∙ 상세 내용은 추후 공개됩니다.

Part 12. Next.js14 활용 : Static Rendering과 Streaming을 활용한 렌더링 최적화

01. 프로젝트 요구사항 분석하기

∙ 아이폰 비교하기 프로젝트 설명
∙ 아이폰 비교하기 아키텍처 설계하기
∙ 사용 기술 알아보기: supabase, tailwind, shadcn, vercel

02. 프로젝트 셋팅

∙ Nextjs template 설치하기
∙ tailwind 설정하기
∙ shadcn 설정하기
∙ supabase 설정하기

03. 데이터베이스 모델링 및 schema 구성하기

∙ supabase DB 설계 및 생성하기
∙ 데이터 supabase DB에 삽입하기
∙ supabase client 생성하기

04. 프로젝트 레이아웃 개발

∙ Client Component, Server Component 이해하기
∙ header, main, footer layout 정의하기
∙ 필요한 shadcn 컴포넌트 설치하기
∙ 더미 데이터로 요구사항 레이아웃 구현하기

05. Static Rendering을 통해 실제 데이터 채우기

∙ Static Rendering이란?
∙ supabase를 활용하여 Static Rendering하기

06. Image 컴포넌트 이해하기

∙ Image 컴포넌트의 동작 원리 이해하기
∙ Image 컴포넌트의 Props 사용법
∙ Responsive Image 만들기
∙ 아이폰 이미지 반응형으로 불러오기

07. 컴포넌트 개발하기

∙ 아이폰 선택하기 Combo-Box 구현
∙ URL 기반 아이폰 색상 필터 구현
∙ 아이폰 상세 스펙 아코디언 구현
∙ 공유하기 버튼 구현

08. 성능 최적화하기

∙ Google Light house로 성능 개선 포인트 찾기
∙ Suspense와 Streaming이란?
∙ Streaming을 활용하여 렌더링 시간 단축하기

09. 동적으로 Metadata (SEO) 추가하기

∙ metadata 동적으로 생성하기
∙ sitemap 동적 생성하기

10. Vercel 배포하기

∙ Vercel이란?
∙ Vercel 프로젝트 환경 셋팅
∙ Vercel에 배포하기

11. 면접 질문에 대답하며 정리하는 학습 내용

∙ 상세 내용은 추후 공개됩니다.

Part 13. Next.js14 심화 : Server Action을 활용하여 효율적으로 form 다루기

01. 프로젝트 요구사항 분석하기

∙ 링크트리 프로젝트 설명
∙ 링크트리 클론 아키텍처 설계하기
∙ 사용 기술 알아보기: supabase, supabase Auth, supabase Storage, react-hooks-form, tailwind, shadcn, vercel

02. 프로젝트 셋팅

∙ Nextjs template 설치하기
∙ tailwind 설정하기
∙ shadcn 설정하기
∙ supabase 설정하기

03. 데이터베이스 모델링 및 schema 구성하기

∙ supabase DB 스키마 설계하기
∙ supabase DB 스키마 생성하기
∙ supabase client 생성하기

04. Supabase Auth를 활용하여 회원 가입 및 로그인 페이지 구현

∙ Supabase Auth란?
∙ Google OAuth 회원 가입 및 로그인 페이지 구현
∙ id, password 회원 가입 및 로그인 페이지 구현
∙ Link Tree URL 생성 페이지 구현

05. Supabase Storage, react-hooks-form을 활용하여 개인정보 설정 페이지 구현

∙ Supabase Storage란? ∙ react hooks form이란? ∙ 개인정보 수정 form 구현 ∙ server action 활용하여 DB에 데이터 저장하기

06. Admin 페이지 구현

∙ supabase Auth를 활용하여 페이지 접근 인가하기
∙ server action을 활용하여 링크 추가 form 구현하기
∙ supabase를 활용하여 dynamic rendering하기

07. 링크 트리 퍼블릭 페이지 구현

∙ supabase를 활용하여 dynamic rendering 구현
∙ 아바타 섹션 구현하기
∙ 소셜 공유 버튼 구현하기
∙ 링크 리스트 구현하기

08. 성능 최적화하기

∙ Google Light house로 성능 개선 포인트 찾기
∙ Suspense와 Streaming이란?
∙ Streaming을 활용하여 렌더링 시간 단축하기

09. 동적으로 Metadata (SEO) 추가하기

∙ metadata 동적으로 생성하기
∙ sitemap 동적 생성하기

10. Vercel 배포하기

∙ Vercel이란?
∙ Vercel 프로젝트 환경 셋팅
∙ Vercel에 배포하기

11. 면접 질문에 대답하며 정리하는 학습 내용

∙ 상세 내용은 추후 공개됩니다.

Class 4. 성능 고려 프론트엔드 개발 : Next.js 기반

Part 14. 프론트엔드 개발 환경의 기초 : 개발 환경 구성 및 관리(번들러, 패키지 매니저, 개발 서버 설정 등)

01. 개발 환경 설정

∙ Node.js와 NPM 기초

02. 패키지 관리

∙ 패키지 매니저 소개

03. ES6 모듈 시스템 (import/export)

∙ 모듈 시스템

04. 번들러의 개념 및 필요성 이해

∙ 번들러 기초

05. 바벨의 역할 및 트랜스파일링 개념 이해

∙ Babel을 활용한 JavaScript 변환 기초

06. ESLint 설정 및 사용 방법

∙ ESLint와 Prettier를 활용한 코드 포맷팅

07. 개발 서버 및 핫 리로딩

∙ Webpack dev server 및 HMR

08. 환경 변수 사용

∙ dotenv를 활용한 환경 변수 관리

09. 협업 도구 사용

∙ Git 기본 명령어 및 브랜치 전략 이해
∙ GitHub을 활용한 코드 리뷰 및 이슈 관리

Part 15. 프론트엔드 개발 환경의 실전 : 개발 환경 구성 전략 및 고급 기술 (모노레포 도구, 테스팅 프레임워크 등)

01. 번들러 심화

∙ Webpack 고급 설정 (코드 스플리팅, 트리 쉐이킹, 캐싱 등)
∙Rollup, Parcel 등 다른 번들러 사용 경험
∙번들 최적화 기법 학습

02. 패키지 매니저 심화

∙ Yarn과 NPM 차이점 및 사용 방법
∙ Yarn Berry (PnP) 및 NPM 7 변경 사항
∙ Lerna, Turborepo 등 모노레포 관리 도구 사용

03. 타입스크립트 설정

∙ 타입스크립트 컴파일러 설정 (tsconfig.json)
∙ 바벨과 함께 사용하는 방법
∙ 타입 정의 파일 (@types) 관리

04. 테스팅 환경 구성

∙ Jest, Mocha 등 테스팅 프레임워크 설정
∙ 코드 커버리지 측정 및 분석
∙ 테스트 자동화 및 CI/CD 연동

05. 서버사이드 렌더링(SSR) 환경 구성

∙ Next.js, Nuxt.js 등 SSR 프레임워크 사용
∙ 서버와 클라이언트 간 데이터 동기화
∙ SSR 최적화 및 캐싱 전략

06. 프로덕션 빌드 최적화

∙ 코드 난독화 및 압축
∙ 벤더 번들 분리 및 장기 캐싱
∙ 트리 쉐이킹 및 데드 코드 제거

07. CI/CD 파이프라인 구축

∙ GitHub Actions 도구 사용
∙ 자동화된 빌드, 테스트, 배포 과정 구성
∙ 환경 별 배포 전략 수립

Class 6. 모바일 환경 대응

Part 16. 기초 웹뷰 개발 : React Native

01. 웹뷰 기초 이론

∙ 강의의 목적과 전체 구성 개요
∙ 웹뷰의 등장 배경 및 개념

02. React Native CLI를 이용한 기초 웹뷰 개발

∙ 학습 목표 및 구성
∙ React Native란 무엇인가?
∙ 앱 개발 환경 셋업 (React Native CLI)
∙ 웹뷰로 웹 사이트 로드하기 (React Native CLI)

03. Expo를 이용한 기초 웹뷰 개발

∙ Expo란 무엇인가?
∙ 앱 개발 환경 셋업 (Expo)
∙ 웹뷰로 웹 사이트 로드하기 (Expo)
∙ 학습 리뷰

Part 17. 웹과 앱 통합 : 웹뷰 띄우기

01. 프로젝트1 - 네이버 앱 클론 코딩

∙ 학습 목표 및 구성
∙ 프로젝트 셋업 (React Native CLI)
∙ 앱 네비게이션 구현하기 (React Native CLI)
∙ 네이버 홈 화면 구현하기 (React Native CLI)
∙ 브라우저 기능 구현하기 (React Native CLI)
∙ 네이버 쇼핑 화면 구현하기 (React Native CLI)
∙ 로그인 기능 구현하기 (React Native CLI)
∙ 웹뷰 최적화 하기 (React Native CLI)
∙ 앱 아이콘 설정하기 (React Native CLI)
∙ 프로젝트 셋업 (Expo)
∙ 앱 네비게이션 구현하기 (Expo)
∙ 네이버 홈 화면 구현하기 (Expo)
∙ 브라우저 기능 구현하기 (React Native CLI)
∙ 네이버 쇼핑 화면 구현하기 (Expo)
∙ 로그인 기능 구현하기 (Expo)
∙ 웹뷰 최적화 하기 (Expo)
∙ 앱 아이콘 설정하기 (Expo)
∙ 학습 리뷰 및 예상 면접 질문

Part 18. 웹과 앱 통신 : 웹 SDK 활용 앱 개발

01. 프로젝트2 - 유튜브 영상 구간 반복 학습기

∙ 학습 목표 및 구성
∙ 프로젝트 셋업 (React Native CLI)
∙ 유튜브 영상 로드 (React Native CLI)
∙ 웹뷰 최적화 하기 (React Native CLI)
∙ 재생 / 멈춤 기능 구현하기 (React Native CLI)
∙ Seek bar 구현하기 (React Native CLI)
∙ 구간 반복 기능 구현하기 (React Native CLI)
∙ 프로젝트 셋업 (Expo)
∙ 유튜브 영상 로드 (Expo)
∙ 웹뷰 최적화 하기 (React Native CLI)
∙ 재생 / 멈춤 기능 구현하기 (Expo)
∙ Seek bar 구현하기 (Expo)
∙ 구간 반복 기능 구현하기 (Expo)
∙ 학습 리뷰 및 예상 면접 질문

Part 19. 앱 리소스 활용 : 모바일 디바이스의 마이크 등 활용 개발

01. 프로젝트3 - 내용 요약해주는 AI 녹음기

∙ 학습 목표 및 구성
∙ React 웹 프로젝트 셋업
∙ 녹음 화면 구현 (웹)
∙ 녹음 스크립트 추출하기 (웹)
∙ 스크립트 컴포넌트 구현 (웹)
∙ 스크립트 요약하기 (웹)
∙ 스크립트 요약 컴포넌트 구현 (웹)
∙ 앱 프로젝트 셋업 (React Native CLI)
∙ 웹 프로젝트 웹앱으로 로드하기 (React Native CLI)
∙ 웹앱에서 녹음 기능 구현 (React Native CLI)
∙ 웹앱에서 사진 첨부 기능 구현 (React Native CLI)
∙ 웹앱에 데이터 저장 기능 구현 (React Native CLI)
∙ 앱 프로젝트 셋업 (Expo)
∙ 웹 프로젝트 웹앱으로 로드하기 (Expo)
∙ 웹앱에서 녹음 기능 구현 (Expo)
∙ 웹앱에서 사진 첨부 기능 구현 (Expo)
∙ 웹앱에 데이터 저장 기능 구현 (Expo)
∙ 학습 리뷰 및 예상 면접 질문

Part 20. 웹뷰 앱 배포부터 업데이트까지 모든 것

01. 웹뷰로 만든 앱 출시하기

∙ 학습 목표 및 구성
∙ Fastlane 설치하기
∙ Fastlane로 Android 앱 배포하기
∙ Fastlane로 iOS 앱 배포하기
∙ 학습 리뷰

02. 웹뷰로 만든 앱 업데이트 하기 (웹)

∙ 학습 목표 및 구성
∙ 웹 사이트 업데이트를 통한 실시간 업데이트
∙ Fastlane으로 앱 업데이트 배포하기
∙ CodePush 소개 및 설치
∙ CodePush 셋업 - Android
∙ CodePush 셋업 - iOS
∙ CodePush 셋업 - 업데이트 스크린 만들기
∙ CodePush 셋업 - 업데이트 로직 구현
∙ CodePush로 앱 업데이트 배포하기
∙ 웹뷰 리소스 업데이트 후 푸시 알림 전송 기능 구현하기 1
∙ 웹뷰 리소스 업데이트 후 푸시 알림 전송 기능 구현하기 2
∙ 학습 리뷰

Special Class 1. 탄탄한 CS 기본기 다지기

+1. JavaScript로 끝내는 자료구조/알고리즘 (코딩 테스트)

01. 코딩 테스트 개요 및 문제 풀이를 위한 JavaScript 문법

∙ 코딩 테스트 알아보기
∙ 문제 풀이를 위한 JavaScript 핵심 문법 알아보기
∙ JavaScript 입출력 문제 풀이
∙ JavaScript 조건문 문제 풀이
∙ JavaScript 반복문 문제 풀이
∙ JavaScript 배열 문제 풀이
∙ JavaScript 문자열 문제 풀이

02. JavaScript 핵심 자료구조 알아보기

∙ 자료구조(Data Structure)
∙ 배열(Array)과 리스트(List)
∙ JavaScript 스택(stack)
∙ JavaScript 큐(queue)
∙ 트리(Tree)와 우선순위 큐(Priority Queue)
∙ 그래프(Graph)의 표현

03. JavaScript 정렬(sorting) 알고리즘

∙ 선택 정렬
∙ 버블 정렬
∙ 삽입 정렬
∙ 병합 정렬
∙ JavaScript 정렬 라이브러리
∙ 정렬 문제 풀이 1
∙ 정렬 문제 풀이 2
∙ 정렬 문제 풀이 3

04. JavaScript 탐욕법(greedy) 알고리즘

∙ 그리디 알고리즘 이해하기
∙ 그리디 문제 풀이 1
∙ 그리디 문제 풀이 2
∙ 그리디 문제 풀이 3
∙ 그리디 문제 풀이 4

05. JavaScript 이진 탐색 알고리즘

∙ 이진 탐색 알고리즘 이해하기
∙ 정렬된 배열에서 특정한 값을 가지는 원소의 개수 구하기
∙ 파라메트릭 서치 이해하기
∙ 이진 탐색 문제 풀이 1
∙ 이진 탐색 문제 풀이 2

06. JavaScript 백트래킹 알고리즘

∙ 백트래킹 알고리즘 이해하기
∙ 백트래킹 문제 풀이 1
∙ 백트래킹 문제 풀이 2
∙ 백트래킹 문제 풀이 3
∙ 백트래킹 문제 풀이 4

07. JavaScript DFS 알고리즘

∙ DFS 알고리즘 이해하기
∙ DFS 문제 풀이 1
∙ DFS 문제 풀이 2
∙ DFS 문제 풀이 3
∙ DFS 문제 풀이 4
∙ DFS 문제 풀이 5
∙ DFS 문제 풀이 6

08. JavaScript BFS 알고리즘

∙ BFS 알고리즘 이해하기
∙ BFS 문제 풀이 1
∙ BFS 문제 풀이 2
∙ BFS 문제 풀이 3
∙ BFS 문제 풀이 4
∙ BFS 문제 풀이 5
∙ BFS 문제 풀이 6

09. JavaScript 다이나믹 프로그래밍

∙ 다이나믹 프로그래밍 이해하기
∙ 다이나믹 프로그래밍 문제 풀이 1
∙ 다이나믹 프로그래밍 문제 풀이 2
∙ 다이나믹 프로그래밍 문제 풀이 3
∙ 다이나믹 프로그래밍 문제 풀이 4
∙ 다이나믹 프로그래밍 문제 풀이 5

10. JavaScript 최단 경로

∙ 다익스트라 알고리즘 이해하기 1단계
∙ 다익스트라 알고리즘 이해하기 2단계
∙ 플로이드 워셜 알고리즘 이해하기
∙ 벨만 포드 알고리즘 이해하기
∙ 최단 경로 문제 풀이 1
∙ 최단 경로 문제 풀이 2
∙ 최단 경로 문제 풀이 3

11. JavaScript 투 포인터 알고리즘

∙ 투 포인터 알고리즘 이해하기
∙ 투 포인터 알고리즘 문제 풀이

12. JavaScript 누적합 알고리즘

∙ 누적합 알고리즘 이해하기
∙ 누적합 알고리즘 문제 풀이

+2. 프론트엔드 개발자가 알아야 하는 CS 지식

01. 웹(Web)

∙ 웹 브라우저의 동작 방식
∙ 쿠키(Cookie)와 세션(Session)
∙ HTTP
∙ REST API
∙ OAuth
∙ JWT(JSON Web Token)

02. 컴퓨터 구조

∙ 컴퓨터 구조 기초
∙ 컴퓨터의 구성요소
∙ 중앙처리장치(CPU) 동작 방식
∙ 캐시 메모리

03. 데이터베이스

∙ 데이터베이스 기초
∙ 키(Key)
∙ SQL 알아보기
∙ 정규화(Nomalization)
∙ 트랜잭션(Transaction)

04. 컴퓨터 네트워크

∙ OSI 7 계층
∙ TCP 3-Way / 4-Way Handshake
∙ TCP/IP 흐름제어 & 혼잡제어
∙ UDP

05. 소프트웨어 공학(SW Engineering)

∙ 코드 리팩토링
∙ 클린코드
∙ TDD
∙ 애자일(Agile)
∙ 객체 지향 프로그래밍
∙ 함수형 프로그래밍

Special Class 2. Special 레벨 업!

+3. 개발자 AI 업무 도구 활용

01. GhatGPT

∙ ChatGPT란 무엇인가?
∙ ChatGPT를 활용한 개발 방법

02. 코파일럿

∙ Github Copilot이란 무엇인가?
∙ Github Copilot 기능 살펴보기
∙ 실무에서 Github Copilot 활용하기

상세 커리큘럼 보기

이 강의도 추천해요.

학습규정 * 본 상품은 동영상 형태의 강의를 수강하는 상품입니다.
* 상황에 따라 사전 공지 없이 할인이 조기 마감되거나 연장될 수 있습니다.
* 수강 신청 및 결제를 완료하시면, 마이페이지를 통해 바로 수강이 가능합니다.

총 학습기간:
– 정상 수강기간(유료 수강기간) 최초 3개월 (90일), 무료 수강 기간은 91일 일차 이후로 무제한이며, 유료 수강기간과 무료 수강기간 모두 동일하게 시청 가능합니다.
– 본 패키지는 약 230시간 분량으로, 일 1시간 내외의 학습 시간을 통해 정상 수강 기간(=유료 수강 기간) 내에 모두 수강이 가능합니다.
– 수강시작일: 수강 시작일은 결제일로부터 기간이 산정되며, 결제를 완료하시면 마이페이지를 통해 바로 수강이 가능합니다. (사전 예약 강의는 1차 강의 오픈일)
– 패스트캠퍼스의 사정으로 수강시작이 늦어진 경우에는 해당 일정 만큼 수강 시작일이 연기됩니다.

주의사항 – 상황에 따라 사전 공지 없이 할인이 조기 마감되거나 연장될 수 있습니다.
– 천재지변, 폐업 등 서비스 중단이 불가피한 상황에는 서비스가 종료될 수 있습니다.
– 본 상품은 기수강생 할인, VIP CLUB 제도 (구 프리미엄 멤버십), 기타 할인 이벤트 적용이 불가할 수 있습니다.
– 커리큘럼은 제작 과정에서 일부 추가, 삭제 및 변경될 수 있습니다.
– 쿠폰 적용이나 프로모션 등으로 인해 5만원 이하의 금액으로 강의를 결제할 경우, 할부가 적용되지 않습니다.

환불규정 – 환불금액은 정가가 아닌 실제 결제금액을 기준으로 계산됩니다.
– 쿠폰을 사용하여 강의를 결제하신 후 취소/환불 시 쿠폰은 복구되지 않습니다.

– 수강시작 후 7일 이내, 5강 미만 수강 시에는 100% 환불 가능합니다.
– 수강시작 후 7일 이내, 5강 이상 수강 시 전체 강의에서 수강한 강의의 비율에 해당하는 수강료를 차감 후 환불 가능합니다.

– 수강시작 후 7일 초과 시 정상 수강기간 대비 잔여일에 대해 아래 환불규정에 따라 환불 가능합니다.
환불요청일 시 기준
: 수강시작 후 1/3 경과 전, 실 결제금액의 2/3에 해당하는 금액 환불
: 수강시작 후 1/2 경과 전, 실 결제금액의 1/2에 해당하는 금액 환불
: 수강시작 후 1/2 경과 후, 환불 금액 없음

* 보다 자세한 환불 규정은 홈페이지 취소/환불 정책에서 확인 가능합니다.

동일 강의 안내 1) 본 강의의 [Part 1~Part 2] 아래의 강의와 동일합니다.
- 한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online.
- 14일 만에 만드는 스타벅스 웹 사이트 with HTML&CSS

2) 본 강의의 [Part 1~5 Ch2] 는 아래의 강의와 동일합니다.
- 한 번에 끝내는 HTML, CSS, JavaScript, TypeScript 올인원 패키지 Online.
- 프론트엔드 웹 개발의 모든 것 (시그니처) 초격차 패키지 Online.

3) 본 강의의 [Special Class 1. 탄탄한 CS 기본기 다지기]는 아래의 강의와 동일합니다.
- UPSKILL : Javascript 코딩테스트 131개 예제 & CS지식으로 끝내기

4) 본 강의의 [Special Class 2 레벨업 +3]은 아래의 강의와 동일합니다.
- 한 번에 끝내는 현실 세상의 컴퓨터공학지식 with 30가지 시나리오 초격차 패키지 Online.

패스트캠퍼스 아이디 공유 금지 정책 안내 [패스트캠퍼스 아이디 공유 금지 정책]
패스트캠퍼스의 모든 온라인 강의에서는 1개의 아이디로 여러명이 공유하는 형태를 금지하고 있습니다.
동시접속에 대한 기록은 내부 시스템을 통해 자동으로 누적되며, 이후 서비스 이용이 제한될 수 있습니다.

[기기제한 정책]
패스트캠퍼스 온라인 강의 시청을 위해서는 ID별 최대 3개의 기기를 등록할 수 있으며, 기기 등록은 온라인 강의장 접속 시 자동 등록됩니다.
최대 갯수를 초과하였을 경우 등록된 기기 해제가 필요합니다.

[저작권 정책]
패스트캠퍼스의 모든 강의는 무단 배포 및 가공하는 행위, 캡쳐 및 녹화하여 공유하는 행위, 무단으로 판매하는 행위 등 일체의 저작권 침해 행위를 금지합니다.
부정 사용이 적발될 경우 저작권법 위반에 의한 법적인 제재를 받으실 수 있습니다.

root layout