25%
51,970원
초급자를 위해 준비한
[프론트엔드, React] 강의입니다.
대표적인 UI 요소들을 React 버전 및 순수 JavaScript 버전으로 만들어 보면서, Web API를 활용한 다양한 관점과 방법을 경험하고, 프론트엔드 개발 실력을 한층 끌어올려 보세요.
✍️
이런 걸
배워요!
이런 걸
배워요!
React 실무 지식
DOM API
그밖의 다양한 Web API 활용 능력
이런 분들께 추천드려요!
🎓
학습 대상은
누구일까요?
학습 대상은
누구일까요?
프론트엔드 개발 지망생
프론트엔드 주니어 개발자
📚
선수 지식,
필요할까요?
선수 지식,
필요할까요?
HTML
CSS
JavaScript (ES6+)
React
TypeScript
안녕하세요
정재남 입니다.
정재남 입니다.
안녕하세요, 시니어 프론트엔드 개발자 정재남 입니다.
서로 돕고 함께 발전하는 건전한 공유문화를 지향하여 다양한 활동을 하고 있습니다.
저서: 코어 자바스크립트
유튜브 채널: FE재남
아티클 및 인터뷰 영상:
원티드) 신입 개발자, 뭘 공부해야 하죠? https://www.wanted.co.kr/events/22_02_s01_b01
인프런) To. 주니어 개발자 https://www.inflearn.com/pages/for-junior-developers-20211207
벤처이몽) 벤처/스타트업 시니어 개발자와 주니어 개발자의 솔직담백 토크쇼 https://youtu.be/6D7I4NNFHsU?si=nD6-F7EU_ZtYqDLI
바닐라코딩) 프론트엔드 개발자 취업 마인드셋 https://youtu.be/zX68pyoLctI
커리큘럼
총 41 개
˙ 10시간 35분의 수업
이 강의는 영상, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. Intro + 환경세팅
4 강
∙ 1시간 4분
섹션 1. 스낵바 Snackbar
4 강
∙ 1시간 12분
스낵바 (1/3) context 적용
미리보기
29:43
스낵바 (2/3) createPortal 활용
12:49
스낵바 (3/3) 순수 자바스크립트 버전
20:20
복습스터디 #1. 스낵바 코드리뷰 + QnA - Observer의 성능 관련
09:28
섹션 2. 모달 Modal
4 강
∙ 2시간 1분
모달 (1/4) context 적용
57:22
모달 (2/4) createPortal 활용
20:53
모달 (3/4) 순수 자바스크립트 버전
21:33
모달 (4/4) HTML Dialog 버전
21:23
섹션 3. 팝오버 Popover
4 강
∙ 41분
팝오버 (1/3) 컨텐츠 내부에서 띄우기
12:20
팝오버 (2/3) createPortal 활용
10:00
팝오버 (3/3) HTML Dialog 버전
14:26
복습스터디 #2. 모달, 팝오버 - 코드리뷰
04:53
섹션 4. 이미지 슬라이드 ImageSlide
5 강
∙ 50분
이미지슬라이드 (1/5) 순수 자바스크립트 버전
17:55
이미지슬라이드 (2/5) 리액트 기본 버전
07:06
이미지슬라이드 (3/5) CSS scroll기능 활용
06:55
이미지슬라이드 (4/5) 페이지네이션 추가
12:43
이미지슬라이드 (5/5) HTML/CSS만으로 작성하는 기법 소개
06:01
섹션 5. 캐러셀 Carousel
6 강
∙ 1시간 1분
캐러셀 (1/3) 순수 자바스크립트 버전
15:59
캐러셀 (2/3) 리액트 버전
11:02
캐러셀 (3/3) 3D 버전
11:19
캐러셀 (보너스) 토론 - 직접 작성 vs. 라이브러리 사용
07:23
복습스터디 #3. 이미지슬라이드, 캐러셀 - 코드리뷰
07:05
복습스터디 #4. QnA (useCallback 바로 적용? aria 프로퍼티?)
08:17
섹션 6. 갤러리 Gallery
3 강
∙ 43분
갤러리 (1/2) 캐러셀 재활용 버전
23:59
갤러리 (2/2) 이미지 뷰어 버전
17:12
복습스터디 #5. 갤러리 - 코드리뷰
02:39
섹션 7. 셀렉트박스 SelectBox
6 강
∙ 1시간 33분
셀렉트박스 (1/5) 기본 기능 구현
29:08
셀렉트박스 (2/5) headless #1 context 적용
24:23
셀렉트박스 (3/5) headless #2 hook 적용
11:02
셀렉트박스 (4/5) headless #3 popover 재활용
07:41
셀렉트박스 (5/5) HTML select - 기본이 가장 좋은 이유
04:42
복습스터디 #6. 셀렉트박스 - 코드리뷰 + QnA (headless, compound?)
16:19
섹션 8. 자동완성 Autocomplete
3 강
∙ 50분
자동완성 (1/2) 셀렉트박스 재활용
24:30
자동완성 (2/2) 비동기 데이터 처리
20:40
복습스터디 #7. 자동완성 - 코드리뷰 + QnA (deferredValue vs. debounce)
04:52
섹션 9. 드래그&드랍 리스트 Drag & Drop List
1 강
∙ 13분
드래그&드랍 리스트 (1/1) draggable 프로퍼티 활용
13:18
섹션 10. 전체 리뷰
1 강
∙ 24분
강의 게시일 : 2024년 05월 22일
(마지막 업데이트일 : 2024년 05월 22일)
수강평
총 2개
수강생분들이 직접 작성하신 수강평입니다.
VIEW
추천 순
최신 순
높은 평점 순
낮은 평점 순
평점 순
높은 평점 순
낮은 평점 순
디자인시스템을 구축하면서 수개월동안 고민했던 문제들, 특히 헤드리스, 컴파운드 등에 대한 문제들이 섹션7에서 모두 해결되었습니다.. 특히 createContext에서 제너릭을 사용하는 부분에서.. 전율을 느꼈습니다.. 🫨 코어자바스크립트부터 시작해서, 여러 이펙티브 타입스크립트, 리액트 공식문서 스터디, 컴포넌트 강의까지.. 좋은 강의와 자료 너무너무 감사드립니다. 😭👍
2024-05-29
단순히 정보를 전달하는 강의가 아닌 수강생과 소통하는 느낌이 들어서 집중이 더 잘되는 강의였습니다!! 바닐라 자바스크립트 버전으로 구현하는 부분이 있는 것도 좋아요 👍
2024-06-13
