인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
NEW
개발 · 프로그래밍

/

프론트엔드

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

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

42명 이 수강하고 있어요.

ReactNext.jsGraphQLReact Native하이브리드 앱
Thumbnail

입문자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.

이런 걸
배워요!

  • 심화과정을 대비하는 친절한 [CSS&Javascript]

  • 최기술스택을 활용한 [웹 프론트엔드]

  • 실무역량을 위한 [하이브리드앱 프론트엔드]

  • 미니 포트폴리오 2개, 실무 포트폴리오 2개

  • 전체적인 개발 사이클 완벽 이해

노베이스 비전공자도
⭐ 프론트엔드 개발자로 커리어점프 ⭐

비주얼배너(격자 3개)

💥 Attention!

이 강의는 코딩 부트캠프에서 실제 사용하는 강의로 '현장감이 일부 느껴질 수 있습니다.'
노베이스부터 비전공자 그리고 주니어 개발자까지 모두 수강 가능한 커리큘럼으로 구성되어 있습니다.

2025 중간배너(격자o)

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

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

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

🎯'완프' 강의 하나로 기초부터 웹, 그리고 하이브리드앱까지 배울 수 있는 완벽한 강의를 제공해요.

3. 시작은 프리캠프 커버이미지

시작은 프리캠프

  • 누적 4,000명 이상이 수강한 최고의 쌩기초 강의에요.

  • 코딩이 뭐야? 프로그램 설치부터 기초 쌓기

  • 웹 구조 및 HTML, CSS, Javascript 기본 문법과 활용을 배워요.


    ✅ 프로젝트: 회원가입, 미니홈피


CSS&JS Master 커버이미지

CSS&JS 마스터🆕

  • 기초를 넘어 실무에 적용 가능한 CSS와 Javascript를 배워요.

  • 60개 이상의 최신 프로퍼티를 통해 CSS를 마스터 할 수 있어요.

  • 실무적인 기능구현을 통해 Javascript를 마스터할 수 있어요.


    ✅ 프로젝트: 트렌디한 대시보드 일기장

WEB FRONT-END 커버이미지

웹 프론트엔드 부트캠프 🆕

  • 코딩 부트캠프 '코드캠프'의 대표 프론트엔드 강의를 그대로 제공

  • 2025년을 위한 최신 React, Next 및 라이브러리를 학습해요.


  • 100시간이 넘는 꼼꼼하고 체계적인 계단식 실무 커리큘럼


    ✅ 프로젝트: 여행자를 위한 커뮤니티 및 상품구매 '여행플랫폼'

Hybrid App 커버이미지

하이브리드앱 부트캠프🆕

  • 부트캠프 최초! 하이브리드앱 과정을 제공해요.

  • React.Native와 Expo를 활용해서 하이브리드앱을 구현해요.

  • 최상의 포트폴리오 구축 및 나만의 하이브리드앱 사수 만나보세요.


    ✅ 프로젝트: 하이브리드앱으로 완성하는 '여행플랫폼'

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

A to Z
10시간 수준의 개념강의 말고
'진짜' 전문적인 강의를 원해요.

개발..?
아무것도 모르지만 취업 수준까지 제대로 성장하고 싶어요.

어?! 금지~
정말 꼼꼼하게 알려주는
나만의 사수가 필요해요.

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

온라인 강의를 듣고있지만.. 과제가 부족하다고 생각든 적은 없으신가요?
부트캠프에서 진행하는 학습자료와 과제를 그대로 제공하고 있어요.

강의, 학습자료 복습, 섹션별 과제를 잘 따른다면 엄청난 성장을 기대할 수 있어요😁

섹션별 학습자료 이미지

꼼꼼한 학습자료 제공 (노션)

📑 섹션별 학습자료

강의를 수강하면서 내용의 이해를 도와주는 자료에요. 실제 부트캠프에서 사용하는 자료인만큼 잘 활용한다면, 놓친 부분이 없도록 큰 도움이 될 거에요.

디자인 가이드

수업에 필요한 디자인 제공 (Figma)

📑 디자인 가이드

프론트엔드 수업에 꼭 필수적인 디자인을 제공하고 있어요. 디자인을 그대로 따르며 포트폴리오를 만들어갈 수 있고, 추가적인 기능을 더 할 수 있다면 더욱 큰 성장을 이룰 수 있을 거에요.

섹션별 과제 이미지

섹션별로 나누어진 명확한 과제

📑 섹션별 명확한 과제

집에서 부트캠프를 진행하듯이 섹션별로 명확한 과제를 안내하고 있어요. 과제를 충실히 따라가며 내 포트폴리오에 실무적인 프로젝트를 추가해보세요!

✅기초 과제에는 레퍼런스 코드도 제공해요.

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

'완벽한 프론트엔드'에서는 집중적으로 성장할 수 있도록 각 과정별로 프로젝트를 완성할 수 있도록 커리큘럼이 구성되어 있습니다. 모두가 이해할 수 있는 계단식 커리큘럼으로 실제 프로젝트를 만들면서 강의를 따라가다 보면 성취감뿐만 아니라 실력도 올라가겠죠?

시작은 프리캠프 포폴 이미지 (1)

시작은 프리캠프

HTML, CSS, 기초 Javascript를 연습을 위한 싸이월드를 완성해보세요.

CSS&JS 포폴 이미지 (1)

CSS&JS 마스터

나의 감정을 기록할 수 있는 트렌디한 대시보드 일기장을 완성해보세요.

숙소예약 포폴 이미지 (1)

웹 프론트엔드 부트캠프

CRUD에 충실한 여행자 게시판 '트립토크'와 숙박상품을 구매할 수 있는 '여행플랫폼'을 완성해보세요.

하이브리드앱 포폴 이미지 (1)

하이브리드앱 부트캠프

이제는 '여행플랫폼'을 하이브리드앱으로 완성해보세요.

프론트엔드의 핵심 기술
우리는 왜 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'과 해당 기술 스택에 대한 이해가 없어도 괜찮아요. 강의에서 꼼꼼하고 친절하게 설명해 드릴게요:)

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

💡React의 기초부터 핵심까지 담고 있어요. 웹 커리큘럼의 주요 내용을 확인해보세요💡

1. React와 Next.js

#01. React와 Next.js

확 업그레이드된 React18의 기초부터 핵심까지 학습할 수 있어요. 각종 패키지를 설치하고 Javascript런타임 환경인 Node.js를 이해하며 React와 Next로 프로젝트를 생성합니다.

2. JS와 비동기핵심

#02. JS와 비동기핵심

브라우저 실습으로 알아보는 스코프, 클로저, 호이스팅, 이벤트루프, await와 마이크로큐 관계 및 state 렌더링 학습해요.

3. 컴포넌트 설계

#03. 컴포넌트 설계

타입스크립트와 유틸리티/제네릭타입을 활용한 공동컴포넌트 설계 및 npm 배포를 활용해서 유저/관리자 프로젝트를 공유할 수 있도록 구현합니다.

4. 캐시

#04. 캐시

페치정책에 따른 서버 데이터캐시 실습 및 로컬 데이터 캐시를 효율화하기 위한 Shallow-Routing를 학습해요.

5. 로그인과 보안

#05. 로그인과 보안

accessToken과 refreshToken의 활용 및 localStorage 토큰 탈취 및 XSS 방어 실습, CORS와 CSRF 이해를 바탕으로 하는 proxy API 만들어 볼 수 있어요.

6. 심화기능1

#06. 심화기능

결제, 지도 및 우편번호, 에디터 실습해요. 또한 실제 연습을 위한 백엔드 API 제공하고 있어요.

7. 성능 최적화

#07. 성능 최적화

프론트엔드를 위한 10가지 성능 최적화를 배우고 적용할 수 있어요. (메모이제이션, 프리페치, 프리로드, 원도잉 등)

8. 프론트엔드 서버

#08. 프론트엔드 서버

SSR/CSR과 하이드레이션 이해를 기반으로 하는
React 18 RCC/RSC 리팩토링을 진행하고 프로젝트에 적용해요.

9. 테스트

#09. 테스트

MSW를 활용한 API 모킹 테스트와 playwright를 활용한 E2E 테스트를 할 수 있어요.

10. 웹 배포

#10. 웹 배포

브라우저 동작원리와 네트워크, 도커를 기반으로 AWS에 S3 정적사이트 배포 및 EC2 동적사이트 HTTPS 배포 실습을 진행해요.

⭐이제는 하이브리드앱의 시대! [안드로이드/IOS] 앱 커리큘럼의 주요 내용을 확인해보세요⭐

11. 모바일 CSS 구조

#01. 모바일 CSS구조

다양한 디바이스 사이즈, 공통헤더, 스크롤에 따른 푸터 대응 및 태블릿 확장을 위한 CSS 구조 설계를 배울 수 있어요.

12웹_앱 통신

#02. 웹/앱 통신

앱과 웹의 통신을 위한 API 구조 설계를 학습하고 적용하는 법을 학습해요.

13. 심화기능2

#03. 심화 기능

앱 알림, 위치정보, 기계정보, 카메라, 안드로이드 백버튽 및 권한 변경에 대한 내용을 배우고 실습할 수 있어요.

14. 마이크로 프론트엔드

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

다양한 마이크로-프론트엔드 방식에 대한 이해를 바탕으로 하는 웹뷰의 도메인 분리 및 웹뷰간 캐시 공유를 학습하고 실습할 수 있어요.

15. 앱 로그인

#05. 앱 로그인

accessToken과 refreshToken의 활용 및 루팅을 활용한 asyncStorage 토큰 탈취 실습과 SharedPreference와 keychain에 안전하게 저장하는 내용을 배우고 실습할 수 있어요.

16. 앱 배포

#06. 앱 배포

하이브리드앱 배포 과정에 대한 이해 및 테스트 배포실습을 진행해요.

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

🙆🏻‍♀️ 실무에 바로 활용할 수 있는 포트폴리오 2개

👨🏻‍🎓 스스로 성장할 수 있는 튼튼한 개발 지식 구축 (특히 무엇을 어떤 키워드로 검색할 수 있도록 성장!)

💁🏻‍♀️ 실무에서 부드러운 커뮤니케이션을 하는 주니어 개발자

🙋🏻‍♀️ 혼자서도 할 수 있는 Web Platform 개발

👨🏻‍💻 혼자서도 할 수 있는 하이브리드 App 개발 (Android, IOS)

더 높은 커리어점프를 위해
[백엔드 코스]도 준비했어요.

thumbnail-back

백엔드 부트캠프 코스

연관 추천강의 :

실습용 API를 이용해 프론트엔드 최신 기술스택과 개발 사이클을 이해했다면, Node.js와 Nest를 중심으로 백엔드까지 더 깊게 배워보세요. 필요한 API를 직접 만들고 데이터를 다루는 법과 검색, 결제, 배포 등 백엔드의 모든 것을 알려드려요. 백엔드 코스까지 완주하고 풀스택 개발자로 더 높이 커리어 점프하세요🚀

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

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

· 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. 웹 프론트엔드 부트캠프 강의를 효율적으로 수강하는 방법이 있나요?

  1. 섹션별 강의를 수강해주세요! 평균적으로 한 섹션당 3~5개 소주제로 나누어져 있어요. 체계적인 수업인 만큼, 일과표를 만들어서 규칙적으로 학습하는 것을 추천해요!

  2. 학습과제가 있다면 과제를 진행해주세요! 학습과제는 있는 섹션과 없는 섹션으로 나누어져 있어요. 포트폴리오 과제를 하기 전에 학습 과제를 해본다면 도움이 될꺼에요!

  3. 필수과제(포트폴리오 과제)를 진행해주세요! 섹션 내용을 기반으로 제공되는 섹션별 필수 과제는 포트폴리오 제작을 위해 반드시 해야해요! 단, 참고할 수 있는 레퍼런스코드는 중반까지만 제공되고 있어요! 그 이후부터는 모든 코드를 스스로 짤 수 있어야 진짜 포트폴리오르 사용할 수 있다는 점 명심해주세요.



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

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

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


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

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

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

14.코드캠프 소개이미지
15. 노원두 소개이미지

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 전문적인 커리큘럼으로 제대로 성장하고 싶은 누구나

  • 국비 또는 다른 강의에 부족함을 느낀 누구나

  • 충분한 과제로 체계적인 코딩 공부를 하고 싶은 누구나

  • 사수가 필요로 하는 주니어 개발자

  • 트렌드에 맞는 포트폴리오를 구축하고 싶은 취준생

선수 지식,
필요할까요?

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

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

수강생 수

12,423

수강평 수

332

강의 평점

4.8

강의 수

8

"Try anything, Try everything!"

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

커리큘럼

전체

384개 ∙ (129시간 10분)

수업 자료

가 제공되는 강의입니다.

강의 게시일: 
마지막 업데이트일: 

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!