Thumbnail
BEST
개발 · 프로그래밍 프론트엔드

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

(4.6)
48개의 수강평 ∙  1,689명의 수강생
396,000원

월 79,200원

5개월 할부 시
지식공유자: 코드캠프
총 341개 수업 (128시간 6분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

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

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

✍️
이런 걸
배워요!
실무 포트폴리오 2개
최신 기술 스택을 활용한 8개의 프로젝트 구현
전체적인 개발 사이클 완벽 이해
실무 커뮤니케이션 역량 증진
+α 백엔드의 기본 CRUD까지 습득

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

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

 
 
💫NEW 버전 업데이트💫
 ※ NEW버전은 빈틈 하나 놓치지 않도록 더 세분화 해 준비한 커리큘럼입니다 :)

💡 구버전(ver.1)은 삭제되었습니다 :)
💡 기존 수강생은 Ver.2로 수업 진행해주세요. (복습 권장합니다!)


'진짜' 부트캠프에서 만든
[고농축 프론트엔드 코스]는요

✅ 공부도 실무처럼! 실무에 적용하는 법을 알려주는 실무 중심 강의

비전공자부터 전공자까지 모두가 이해할 수 있는 계단식 커리큘럼

[React, Next.js, Graphql] 최신 기술의 언어 학습과 프로젝트 구현

 취업률 92%의 인증된 '진짜' 부트캠프의 커리큘럼으로 진행

노베이스도 가능한 완전 기초부터 개발자 취업 수준까지 성장


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

A to Z,
전문적인 강의를 원해요.

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

실무에서 사용하는 기술과
진짜 노하우를 배우고 싶어요.


우리는 왜
React와 Next.js를 사용해야 할까요?

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

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


쌩초보도 괜찮아요,
우선 기초부터 뿌셔볼까요?

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

 

🧩 기초뿌시기 step01.

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

웹·앱 개발의 기초 중에 기초, HTML · CSS · Javascript의 기본적인 문법과 활용 방법을 배우고, 배운 내용을 토대로 회원가입과 미니홈피를 구현할거예요.

 


🧩
 기초뿌시기 step02.

60개 이상의 최신 프로퍼티를 통한 CSS!

오늘 배운 내용은 오늘 복습하자! 강의 수강 후 충분한 연습을 통해 완전히 내 것으로 흡수할 수 있게 도와줄 거예요.

🧩 기초뿌시기 step03.

Javascript로 웹페이지의 기능을 더 풍요롭게.

함께 사용하는 도구들과 Javascript가 동작하는 원리, 코드를 작성하는 법을 위주로 학습하며 d-day counter와 to-do list를 구현하며 배운 내용을 완전한 내 것으로 만드는 시간이예요.

 

빈틈 하나까지 놓치지 않는

'선 넘는' 프론트엔드 커리큘럼

#01. React 기초

React의 기초부터 시작해볼까요? 우선, 각종 패키지를 설치해요. 그리고 Javascript 런타임 환경인 Node.js를 이해하며 React로 프로젝트를 생성합니다.

#02. 데이터 통신

Rest-API와 GraphQL의 차이에 대해 이해하고, Apollo Client를 통해 백엔드와의 통신 방법을 습득해요.

#03. 라우팅 및 리렌더링

페이지 이동 방식인 Router와 Dynamic Routing의 차이를 이해하고 활용할 수 있어요.

#04. 폴더 구조·props·컴포넌트 재사용성

Container/Presenter 패턴에 대해 이해하고, 컴포넌트를 재사용하는 법을 통해 효율을 높여줍니다.

#05. 타입스크립트

타입스크립트의 여러 가지 타입에 대해 이해하고 내 포트폴리오에 적용해봅니다.

#06. 프레임워크 / 라이브러리와 레이아웃
구조

웹페이지를 꾸며주는 다양한 라이브러리. 그것들의 활용법을 배우고, 사용성을 위한 페이지네이션과 무한스크롤을 구현해요.

#07. 컴포넌트와 생명주기

클래스 컴포넌트의 생명주기와 함수형 컴포넌트의 생명주기 차이를 이해해보고, 이를 바탕으로 활용하는 법을 학습합니다.

#08. 백엔드 구조 및 파이어베이스

API를 직접 만들어 보고, 백엔드의 기초를 이해할 수 있어요. 또한 BAAS 서비스인 파이어베이스를 활용해볼 거예요. 백엔드를 이해하는 프론트엔드 개발자라니! 너무 매력적이지 않나요?

#09. 이미지 업로드

'홈페이지에 예쁜 이미지를 올리고 싶어요!' 이미지 업로드에 대한 프로세스를 이해하고 검증을 통해 직접 업로드 할 수 있어요.

#10. 검색

웹페이지에 검색기능은 빠질 수 없죠. 검색 프로세스를 이해하고 디바운싱을 적용해 내 웹페이지를 한껏 고도화합니다.

#11. 로그인과 권한 분기

JWT 토큰 방식의 로그인 프로세스를 이해해요. 또한 로그인 유무로 권한 분기를 설정하고 Recoil을 활용해 Globalstate를 관리할 수 있어요.

#12. 폼 라이브러리

React-Hook-Form과 yup을 활용해서 기존 코드들을 리팩터링해서 더 효율적으로 서비스를 개선할 수 있어요.

#13. custom hooks

구조 분해 할당과 타입스크립트의 제네릭 타입을 활용해서 커스텀 훅을 만들 수 있어요.

#14. 카카오 지도 및 웹에디터

SSR과 CSR을 아시나요? 이 차이에 대해 이해해 보고, 카카오 지도와 웹 에디터를 사용하는 법을 배워요.

#15. 결제 및 이벤트 루프

E-commerce platform의 핵심! 결제 프로세스를 이해하고 구현해봐요. 또한 자바스크립트의 구동 원리에 대해 더 정확하게 알아갈 거예요.

#16. refresh Token

refresh Token을 사용해서 실무에서도 사용할 수 있는 로그인 프로세스를 학습해요. 

#17. 성능 최적화

useMemo와 useCallback, 이미지 임시 URL을 활용해서 기존의 코드들을 마치 실무에서처럼 리팩토링할 수 있어요.

 

* 별도의 수업용 API를 제공합니다.

#18. 테스트 코드 및 배포

jest와 cypress를 활용해서 테스트 코드를 만들어 볼 거예요. 이를 통해 단위 테스트와 통합 테스트를 진행해서 내 코드를 테스트하는 시간이에요.

 

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

☝🏻 올어바웃 자유게시판

블로그, 커뮤니티 등 웹의 어디에서나 빠지지 않는 게시판을 직접 구현할 수 있어요. 코딩을 이론만 알고 한다는 것은 불가능해요! 프로젝트 실습을 통해 페이지네이션, 무한 스크롤 등 여러 기능으로 나만의 코드를 채워나가요. 게다가 내 개성에 맞는 UI로 꾸밀 수 있으니 흥미뿐만 아니라 실력도 올라가겠죠?

✌🏻 게시판으로 만드는 이커머스 플랫폼

"혹시.. 당근이세요?🥕" 쿠팡, 당근마켓과 같은 E-commerce Platform이 어떻게 만들어지는지 아시나요? 회원가입, 로그인, 결제, 커뮤니티 등 많은 기능을 담고 있는 E-commerce 웹사이트를 내 손으로 구현할 수 있어요. 아직은 막막하겠지만 이 강의를 수강하고 나면 멋진 포트폴리오가 만들어져 있을 거예요.

🎯 이 강의로 얻는 포트폴리오 입니다.
· 01. 자유게시판
 - UI·리스트업·페이지 네이션·글 수정 및 삭제 등 웹의 가장 핵심이 되는 기능들을 구현하고 이를 바탕으로 하나의 포트폴리오를 완성합니다.
· 02. 중고마켓 - 첫번째 포트폴리오로 제작한 게시판을 중고마켓으로 고도화 하는 포트폴리오 입니다. 로그인·권한분기·결제·이미지 처리 등의 기능을 구현합니다.

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

여러 언어를 한 번에 이해하는 것은 어려운 일이죠. 이 강의에서는 프로젝트를 통해 Javascript, Typescript, React, Next.js, Graphql 등 다양한 스택을 직접 활용하며 나만의 웹페이지를 완성해요. 하나의 기능을 구현하기 위해 유기적으로 연결된 언어들의 사용 방법을 습득하며, 자연스럽게 이해하게 될 거예요.

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

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

- next 12.1.0
- react": 17.0.2
- react-dom": 17.0.2
- typescript": ^4.8.4
- @types/node": 17.0.2
- @types/react": 17.0.2
- @apollo/client": ^3.6.9
- @emotion/styled": ^11.10.0
- @material-ui/core": 4.12.4
- antd": ^4.22.8
- eslint": ^8.0.1
- prettier": 2.7.1

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

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

 


📑 섹션별 학습자료

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

 

 

📑 섹션별 과제자료

오늘 배운 내용은 오늘 복습하자! 강의 수강 후 충분한 연습을 통해 완전히 내 것으로 흡수할 수 있게 도와줄 거예요.


📑 섹션별 포트폴리오

각 섹션에서 배운 기능을 활용해 포트폴리오를 만들 때 참고할 수 있는 자료에요. 이 강의로 내 포트폴리오에 두 개의 프로젝트를 추가해보세요!

 


이 강의의 수강생이
직접 만든 서비스를 소개합니다.

🎨 Artipul
미대생의 작품을 쉽게 구매할 수 있는 서비스에요. 메인페이지뿐만 아니라 결제 오픈 API로 포인트 충전, 결제를 가능하게 하고, Socket.io를 사용해 실시간 입찰 기능까지 구현했어요.

 

📙 Flog
여행 일정 · 가계부 · 여행 로그로 구성된 여행 가이드북 서비스에요. drag&drop 기능으로 여행 일정을 짜면 실시간으로 DB에 저장되어 사용성을 높였어요. 게다가 다른 유저와 일정을 공유할 수 있도록 구현했어요!

 


[고농축 프론트엔드 코스]
수강 후엔 나도 개발자!


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

👨🏻‍🎓 스스로 성장할 수 있는 튼튼한 개발 지식 구축

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

👨🏻‍💻 타 부서와 협업 능력이 뛰어난 프런트엔드 개발자

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

 

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

👉🏻 연관 추천강의 :


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


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

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

· Mac OS는 사양 무관합니다.

· Window OS를 사용할 경우, git-bash 설치가 필요합니다.
- 수업자료 > 환경 세팅을 참고해주세요.

- Intel Core i5 9세대 이상 / AMD RYZEN 5 2세대 이상
- RAM 16GB 이상 추천

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

 

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

Q. 아무런 지식 없이 수강해도 될까요?
네. 코딩의 '코'자도 몰라도 괜찮아요. 더 깊고 넓게 이해할 수 있도록 HTML·CSS·Javascript의 쌩기초 과정이 포함되어 있어요.

Q. 별도의 교재가 있나요?
노션으로 제공해드리는 [강의 자료]를 활용해주세요! 본 자료는 실제 부트캠프에서 사용하는 그대로의 자료에요. 무단 도용·배포·복제를 금지합니다.

Q. 기초강의 (시작은 프리캠프, CSS, Javascript)의 수업자료 리스트가 헷갈려요.

Q. 수강 중 궁금한 점이 생겼어요.
커뮤니티에 질문을 남겨주세요. 코드캠프 팀이 빠른 시일 내에 속 시원한 답변을 달아드릴게요 :)


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


이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
전문 커리큘럼으로 제대로 성장하고 싶은 누구나
국비 또는 다른 강의에 부족함을 느끼신 분
최신 기술 스택으로 개발 사이클을 완성하고 싶은 주니어 개발자
트렌드에 맞는 포트폴리오로 취업하고 싶은 취준생
체계적으로 코딩 공부를 하고 싶은 대학생
📚
선수 지식,
필요할까요?
코딩에 대한 열정과 의지💪🏻

안녕하세요
코드캠프 입니다.
코드캠프의 썸네일

"Try anything, Try everything!"

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

공동 지식공유자: 노원두의 썸네일
커리큘럼 총 341 개 ˙ 128시간 6분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 1. 시작은 프리캠프
섹션0|웹앱 서비스 이해 & 프로그램 설치
▶ 웹·앱 서비스란? 미리보기 03:22 ▶ 프로그램 설치(VS Code, Extension) 미리보기 07:54
섹션1|HTML과 기술스택 이해하기
▶ HTML은 약속된 '명령어'이다 미리보기 11:31 ▶ HTML의 핵심 미리보기 42:26 ▶ 기술스택 이해하기 미리보기 06:15
섹션2|CSS의 기본과 싸이월드 실습 1탄
▶ CSS 배우기 25:29
▶ CSS 정렬 20:44
▶ 싸이월드 만들기 1탄 43:25
섹션3|Javascript의 기본과 싸이월드 실습 2탄
▶ 웹 언어 자바스크립트 이해하기 02:41
▶ 변수와 상수 17:08
▶ 배열 24:31
▶ 객체 20:41
▶ 싸이월드 만들기 2탄 39:43
섹션4|Javascript 실무와 싸이월드 실습 3탄
▶ 데이터 타입과 연산자 17:30
▶ 조건문 19:54
▶ 반복문 22:19
▶ 수학 객체 06:44
▶ DOM 10:42
▶ 싸이월드 만들기 3탄 27:31
섹션5|Javascript 응용과 싸이월드 실습 4탄
▶ 함수 09:14
▶ 함수 작성 방법 14:21
▶ 내장함수 24:09
▶ 싸이월드 만들기 4탄 23:31
섹션6|Javascript 이벤트 변경 감지와 싸이월드 실습 5탄
▶ 내장함수 리뷰 11:00
▶ 이벤트 변경 감지 16:05
▶ 싸이월드 만들기 5탄 43:25
섹션7|FINAL 과제와 Github 잔디 심기
▶ final 과제 07:56
▶ Git/Github 22:02
섹션 2. 강력한 CSS
섹션0|CSS개요
▶ CSS란? 미리보기 03:38 ▶ CSS 기본 용법 미리보기 02:12 ▶ CSS 적용 방식 미리보기 03:36
▶ 선택자1 05:18
▶ 폰트 기본 스타일 16:42
▶ 박스 모델 24:12
▶ inline vs block 12:26
▶ 실습1 48:17
섹션1|레이아웃(float&flex)
▶ 레이아웃이란? 미리보기 02:02
▶ 선택자2 07:22
▶ css 레이아웃의 흐름 미리보기 05:02
▶ float 레이아웃 52:47
▶ flex 레이아웃 23:20
▶ 실습2 17:14
섹션2|레이아웃(flex2)
▶ 선택자3 33:22
▶ flex 레이아웃2 11:19
▶ 실습3 08:35
섹션3|폰트&단위
▶ css 상속 11:23
▶ 웹폰트 15:29
▶ 폰트 26:31
▶ 단위 06:59
섹션4|배경&색상
▶ 캐스케이딩 16:33
▶ 배경 17:39
▶ 색상 04:28
▶ 단위2 03:00
섹션5|position / transition
▶ 단위 심화 31:15
▶ position 24:45
▶ transition 10:35
섹션6|transform
▶ transform 17:57
▶ transform 중첩 적용 06:30
▶ transform + transition 47:51
섹션7|animation
▶ animation의 원리 05:16
▶ keyframes 02:34
▶ animation 09:29
▶ animation 실습 42:20
섹션8|grid 레이아웃
▶ grid 레이아웃 05:24
▶ grid 속성 18:39
▶ grid 레이아웃 실습 08:04
▶ flex와 grid의 차이점 06:39
섹션9|반응형 레이아웃
▶ 반응형 웹이란? 08:42
▶ 미디어 쿼리 13:10
▶ breakPoint 12:06
▶ 반응형 실습 01:00:30
섹션 3. 훈훈한 Javascript
섹션0|변수, 문자와 숫자 미리보기 ▶ 변수란? 미리보기 13:34 ▶ 변수 선언과 데이터 할당 미리보기 06:42 ▶ 변수 선언 키워드 미리보기 18:58 ▶ String, Number 미리보기 13:58
섹션1|배열, 객체
▶ 배열 11:47
▶ 배열 메소드 17:16
▶ 객체 16:31
▶ 객체 메소드 15:58
섹션2|함수
▶ vscode세팅 (enmet) 03:58
▶ HTML 문서 개념 설명 23:24
▶ JS로 기능 만들기 (함수 선언과 호출) 06:35
▶ JS로 기능 만들기 (onclick 이벤트 추가) 04:11
▶ querySelector를 활용한 데이터 참조 13:53
▶ 날짜를 생성하는 new Date 20:28
▶ 함수의 리턴 13:37
▶ 함수 선언의 종류 05:50
섹션3|조건문
▶ vscode 세팅 (Live Server 설치) 07:01
▶ localhost란? 07:47
▶ D-Day Counter HTML 구조 완성 27:06
▶ 비교연산자 12:43
▶ 배열과 객체의 비교 12:30
▶ 조건문과 논리연산자 21:42
▶ 조건에 따른 메세지 출력 13:33
섹션4|반복문
▶ 스크립트 태그의 위치 20:13
▶ JS로 HTML, CSS 조작 22:33
▶ 반복문이란? 04:48
▶ for문과 while문 10:26
▶ 반복문을 활용한 날짜 데이터 리팩토링 13:18
▶ for-of와 for-in 23:45
▶ 반복문을 사용한 텍스트 갱신 07:53
▶ setInterval 07:55
▶ clearInterval 24:54
섹션5|함수 활용
▶ 함수의 인자와 매개변수 30:57
▶ 브라우저의 web storage 07:24
▶ localStorage 접근 방법 07:24
▶ 조건문과 storage 데이터의 조합 05:30
▶ storage 데이터 유무에 따른 조건문 15:51
섹션6|DOM
▶ <ul>, <ol>, <li> 태그 12:06
▶ DOM이란? 13:57
▶ 키보드 event 체크 08:50
▶ JS로 HTML 태그 생성 03:46
▶ appendChild 12:28
섹션7|스코프, 호이스팅
▶ addEventListener 22:45
▶ eventListener를 활용한 태그 삭제 26:33
▶ 함수 스코프, 블록 스코프 09:55
▶ 실행 컨텍스트 19:26
▶ 객체 localStorage 저장 15:37
▶ 함수, 변수의 호이스팅 30:23
섹션8|데이터 통신
▶ geolocation 16:29
▶ openWeatherMap 02:29
▶ API란? 02:36
▶ openWeatherMap API 10:54
▶ HTTP 프로토콜 08:03
▶ 동기와 비동기 13:43
▶ Promise 객체 05:33
▶ then, catch 20:29
섹션9|구조분해할당
▶ 구조분해할당 19:54
▶ spread 연산자 15:16
▶ 깊은 복사, 얕은 복사 15:07
▶ rest 파라미터 03:56
▶ 구조분해할당 적용 09:45
▶ JSON 데이터 활용 19:24
▶ localStorage로 렌더링 딜레이 해결 16:38
섹션 4. 오리엔테이션 및 설치
01-Node.js 설치 41:33
01-설치를 위한 cli 명령어 05:31
01-01-example React 세상 35:53
01-02-emotion JSX와 CSS-IN-JS 40:20
포트폴리오 리뷰 30:20
섹션 5. 컴포넌트와 state
02-리액트와 컴포넌트 27:58
02-01-(counter 비교) let vs state 41:00
02-02-signup-state 43:09
포트폴리오 리뷰 33:15
섹션 6. 데이터 통신
03-데이터 통신 기초 42:17
03-데이터 통신 실습 01:03:15
섹션 7. GraphQL
04-01-rest-get 44:32
04-GraphQL 세팅 27:30
04-02-graphql-mutation 29:48
04-03-graphql-mutation-args 09:41
04-04-graphql-mutation-input 13:33
04-05-graphql-mutation-product 14:05
포트폴리오 리뷰 11:51
섹션 8. Routing
05-01-static-routing 13:54
05-02-static-routing-board 10:52
05-03-static-routing-board-query 47:34
05-04-dynamic-routing-board-query 25:54
05-05-dynamic-routing-board-mutation 16:39
포트폴리오 리뷰 23:56
섹션 9. container-presenter
06-01-container-presenter 01:20:38
06-export vs export-default 12:44
포트폴리오 리뷰 23:41
섹션 10. setState
07-01-set-state 01:00:12
섹션 11. map
08-01-map-fruits 23:15
08-02-map-boards 14:25
08-03-map-boards-delete 34:28
포트폴리오 리뷰 24:43
섹션 12. boards 작성하기/수정하기
09-01-board-edit/new 09:23
09-02-board-component-edit/new 19:24
09-03-boards 수정 1편 56:11
09-04-boards 수정 2편 42:58
포트폴리오 리뷰 (boards 수정 1편) 14:50
포트폴리오 리뷰 (boards 수정 2편) 36:55
섹션 13. TypeScript
10-TS 기초 35:22
10-01-typescript 30:25
10-02-typescript-boards 47:59
10-03-typescript-utility-type 24:08
10-04-graphql-codegen-mutation/query 30:33
포트폴리오 리뷰 54:55
섹션 14. 이벤트 버블링
11-01-event-bubbling 33:58
11-02-stop-propagation 10:28
섹션 15. 코드 포멧터와 린터
12-린터와 포멧터 46:50
포트폴리오 리뷰 11:24
섹션 16. 프레임워크와 라이브러리
13-UI 프레임워크 19:34
13-01-library-icon 13:42
13-02-library-star 26:43
13-03-modal 37:26
13-04-prev-state 15:37
포트폴리오 리뷰 51:58
섹션 17. 레이아웃 구성
14-01-props-children 22:14
14-레이아웃 만들기 39:36
14-컴포넌트 합성 13:21
14-글로벌 스타일과 폰트 20:10
포트폴리오 리뷰 41:25
섹션 18. 페이지네이션
15-01-pagination 38:42
15-02-pagination-next 19:30
15-03-pagination-last 27:14
15-04-lifting-state-up 28:59
포트폴리오 리뷰 20:00
섹션 19. 무한스크롤
16-스프레드 연산자와 데이터 복사 36:08
16-01-comment-edit 49:03
16-02-infinite-scroller 35:16
16-03-inputs-refactoring 20:03
포트폴리오 리뷰 42:49
섹션 20. 클래스와 openAPI
17-01-class-counter 01:01:30
17-02-class-lifecycle 15:01
17-03-functional-lifecycle 25:30
17-04-openapi-with-useEffect 17:37
17-CORS 32:45
포트폴리오 리뷰 13:49
섹션 21. 백엔드의 이해
18-백엔드와 데이터베이스 25:49
18-Node.js 19:31
18-ORM과 DB연동 35:34
18-데코레이터 이해 07:02
18-graphql 서버프로그램 16:27
18-서버와 포트 23:42
18-게시판 API 만들기 실습 45:45
18-01-firebase 39:24
포트폴리오 리뷰 21:05
섹션 22. 이미지 처리
19-이미지 저장 과정 21:04
19-01-image-upload 32:14
19-02-image-ref 11:11
19-03-image-validation 23:30
19-04-image-with-board 11:54
포트폴리오 리뷰 51:37
섹션 23. 검색 기능 구현
20-01-search 38:44
20-02-search-debouncing 18:00
20-03-search-keyword 15:30
포트폴리오 리뷰 16:02
섹션 24. state-prev와 graphql의 실체
21-01-functional-component / map-el / state-prev 37:07
21-graphql의 실체 34:47
섹션 25. Global-state
22-01-fetch-policy / fetch-policy-moved 52:41
22-02-global-state-with-recoil 19:39
섹션 26. 로그인 처리
23-로그인 처리 과정 56:58
23-JWT 토큰 35:33
23-회원가입과 암호화 15:26
23-01-login / login-success 49:50
23-02-login-localstorage / login-localstorage-success 56:37
23-03-login-check / login-check-success 06:43
23-04-closure / function-with-return-function / hof 01:00:26
23-05-login-chech-hoc / login-check-hoc-success 19:33
23-hoc 동작원리 06:45
23-06-basket-localstorage 40:12
23-07-wrap-async-hof 10:06
섹션 27. react-hook-form과 custom-hooks
24-01-react-hook-form 34:19
24-wrap-async 주의사항 06:30
24-02-react-hook-form-with-yup 36:24
24-03-common-components 21:37
24-04-destructuring / destructuring-with-use-state / rest-parameter-with-basket-localstorage 55:01
24-05-custom-hooks-use-auth / custom-hooks-use-move-to-page 01:05:56
24-06-typescript-generic 57:21
포트폴리오 리펙토링 13:06
섹션 28. 카카오 지도 연동
25-01-kakao-map 36:24
25-01-kakao-routing / kakao-routing-moved 43:55
섹션 29. apollo-cache-state
26-01-apollo-cache-state 51:44
섹션 30. 웹 에디터
27-01-web-editor 55:49
27-02-web-editor-hook-form 10:55
27-03-web-editor-xss-submit / web-editor-xss-detail 52:14
27-04-web-editor-hydration 32:07
섹션 31. 결제 처리
28-결제 프로세스 38:55
28-아임포트 15:49
28-01-payment 25:21
섹션 32. 이벤트 루프와 promise
29-시간관련 이벤트 13:41
29-01-eventloop 30:48
29-02-callback-promise-async/await 01:10:44
29-03-basic-promise / myaxios-with-promise 26:40
29-04-macro-micro-queue 26:31
29-05-is-submitting / micro-queue-with-await 44:46
섹션 33. refreshToken
30-로그인 만료 시간 연장 52:31
30-01-login-refreshtoken / login-refreshtoken-success 01:17:36
30-새로고침과 토큰 재발급 21:45
30-02-observable-flatmap 23:44
섹션 34. 메모이제이션과 이미지 최적화
31-01-memoization 38:08
31-02-memoization-with-child 27:46
31-03-memoization-with-map 20:22
31-04-crp-reflow-repaint 15:10
31-05-crp-reflow-repaint-with-layout-shift 12:35
31-06-crp-prefetch-preload 35:37
31-07-image-upload-preview / image-upload-submit 01:03:42
31-08-basic-promise-all / image-upload-submit-promise-all 54:35
31-레이지로드와 이미지 라이브러리 18:31
31-09-image-preload / image-preload-moved 17:07
31-10-data-prefetch / data-prefetch-moved 28:56
31-11-optimistic-ui 44:09
31-프론트엔드 성능최적화 총정리 13:29
섹션 35. 브라우저
32-브라우저 주소창의 실체 25:24
32-01-opengraph-developer / opengraph-provider 34:36
32-02-opengraph-provider-with-ssr 42:46
섹션 36. 테스트코드와 TDD
33-테스트 코드 17:20
33-01-jest 23:10
33-02-jest-unit-test 12:58
33-03-jest-unit-test-snapshot 13:05
33-04-jest-unit-test-event 10:36
33-05-jest-unit-test-mocking 01:10:38
33-06-cypress-e2e-test / cypress-e2e-test-moved 17:17
33-TDD 03:33
섹션 37. 배포
34-배포 21:28
34-정적페이지와 동적페이지 배포가이드 48:49
34-정적페이지 배포 37:48
34-도메인 연결 33:45
34-네트워크와 트러블 슈팅 47:20
34-SSL과 HTTPS 50:02
34-가상컴퓨터 배포 01:02:55
34-정적페이지 동적페이지 분기배포 45:14
34-도커 01:00:12
34-도커 실전 34:26
섹션 38. 향후 방향성과 git협업
35-앞으로의 공부 방향 33:35
35-Git 협업하기 48:10
35-codecamp-frontend-team / codecamp-frontend-user 40:40
섹션 39. closing OT
36-취업준비 가이드 17:44
Front-end main-course closing OT 20:26
강의 게시일 : 2022년 12월 16일 (마지막 업데이트일 : 2023년 04월 24일)
수강평 총 48개
수강생분들이 직접 작성하신 수강평입니다.
4.6
48개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
수달 thumbnail
5
안녕하세요. 1년차 주니어 백엔드 개발자입니다. 회사의 필요와 개인적인 욕심으로 프론트 분야도 학습을 하는 중이었는데 마침 이 강의를 만나게 되어 바로 구매 후 수강중입니다. 확실히 백엔드 분야와는 다른 흐름이 눈에 띄어서 처음에는 낯설게 느껴졌지만, 자바스크립트라고 하는 언어의 원리와 사용법까지도 함께 알려주시니 점점 재미와 속도가 붙네요. 원리만 학습하는 것이 아니라 함께 만들어 가면서 공부하는 방식인 덕분에 이해가 잘 되지 않을 때에도 이것저것 혼자서 만져보며 학습할 수 있어서 더 좋은 것 같습니다. 좋은 커리큘럼 덕분에 이 강의를 모두 듣고나면, 최소한 프론트엔드의 로직을 이해할 수 있는 백엔드 개발자라는 포지션. 그 이상을 가져갈 수 있을 것이라 기대가 되네요. 좋은 강의 감사합니다.
2022-12-19
움냐 thumbnail
5
오프라인으로 코드캠프 풀스택 과정 수료한 수료생입니다! 문자로 원두 멘토님의 강의가 인프런에 올라온다는 썰을 듣고 달려왔습니다. 개발자가 된 이후 개발자의 시선으로 이 커리큘럼을 말씀 드리자면 프로젝트의 성능을 고려하는 주니어가 되고싶다면 완벽한 커리큘럼인 것 같습니다! 주니어도 흔히 접할 수 있는 react에서 사용하는 memoization뿐만 아니라, 브라우저 렌더링 원리를 기반으로 한 repaint, reflow도 배우다 보니 확실히 리팩토링 할 때 고려할 수 있는 폭이 넓어졌습니다! 그리고 유지보수에 조금 더 유리한 방면으로 코드를 짤 수 있는 패턴들을 알려주시고, 팁들을 주셔서 개인적으로 잘 활용해보고 있습니다! 이 강의를 다시 보게되다니ㅠ 원두멘토님 절 기억하실지 모르겠지만, 보고싶습니다ㅜㅜㅜ 노원두! 노게인! 포에버!
2022-12-16
기쁜 문어 thumbnail
5
노원두 멘토님께 오프라인 강의를 들어 본 학생입니다! 혼자 듣기 아까운 퀄리티의 강의여서 주변 친구들에게도 이미 추천을 많이 했었는데, 이렇게 인프런에서 뵙게 되다니 너무 반가워요ㅠㅠ 보고 싶었어요 ㅠㅠ 이전에 다른 강사님의 수업도 들어봤지만, 실습 없이 이론 위주의 수업이 대부분이어서 막상 직접 코딩을 하려고 하면 막막하기만 했습니다.. 반면 노원두 멘토님은 실무에서 사용되는 기술 위주로 이해하기 쉽게 알려주시고, 원리를 파악한 후 스스로 직접 구현까지 해보도록 수업이 진행되어 실무에서도 바로 적용할 수 있을 정도의 수준을 만들어 주셨습니다. 수업에서 다루지 않은 기술을 마주하게 되어도 배운 원리들을 적용해서 파악할 수 있게 되었습니다. 또한 수업 중간중간에 해주시는 조언들을 통해 개발자로서 가져야 하는 마인드도 배울 수 있었습니다. 멘토님께서 개발을 진심으로 즐기고 사랑하시는 마음이 느껴져서 저도 덩달아서 개발 공부가 즐거워진 부분도 있습니다. ㅎㅎ 노원두 멘토님은 정말 저의 은사님이십니다,,💕 하루가 다르게 변하는 프론트 업계답게🥲 제가 아직 배우지 않은 새로운 기술과 내용이 많아 보여서 수강하려 합니다! 다른 수업도 열리면 바로 또 들으러 올게여ㅎㅎㅎ
2022-12-16
감자도리 thumbnail
5
원두 멘토님..... 인프런에 강림해주시다니요. 믿고듣는 원두 멘토님 강의 ㅠㅠㅠ 엉엉 잘 지내시죠? 너무 보고싶어요. 멘토님 덕분에 프론트엔드 개발자로 취업하고 1년째 회사 잘 다니고 있어요ㅠㅠ! 인프런 구경하다가 강의 갑자기 올라와서 호다닥 강의 결제했어요! 프론트엔드는 소장하구 백엔드는 공부해보려구요❤️ 첫 부분 조금 다시 들었는데 멘토님 목소리와 얼굴 너무 향수병 유발하는 것... 이렇게라도 뵐 수 있어 너무 좋습니다!!! 멘토님 따라서 다시 한 번 열공해서 풀스택으로 점프업해볼게요!!!!! 조만간 인사드리러 가겠습니다! 존경합니다 멘토님!😍
2022-12-16
JAB thumbnail
5
웹 프론트엔드 개발자가 되기 위해 준비중인 학생입니다. 인프런 코드캠프 HTML, CSS, 자바스크립트까지 다 듣고 프론트엔드 코스까지 있어 같이 구매했습니다!!!!! 앞부분 리액트 강의 듣고 있는데, 너무 재미있어요~~~!!!!!!! 아직까지 어려운 부분은 없는데, 뒤로 갈수록 점점 어려워질까봐 조금 걱정이 되지만! 열심히 들어볼 에정입니다! 일단 노션 자료가 너무 좋아요ㅠㅠㅠㅠㅠ 제 마음에 쏙 들어요ㅠㅠㅠㅠㅠ 이해안되는 부분들은 무한 반복으로 돌려보면 되겠죠..?????ㅎㅎㅎ 감사합니다!!!!!! 화이팅 꼭 수강 완료해서 포트폴리오 완성시켜 보겠습니다 화이팅
2022-12-19