🤍 전 강의 25% 할인 중 🤍

2024년 상반기를 돌아보고 하반기에도 함께 성장해요!
인프런이 준비한 25% 할인 받으러 가기 >>

Thumbnail
상반기 결산 25% 할인 중(D-5)
NEW
개발 · 프로그래밍 프론트엔드

[React / VanillaJS] UI 요소 직접 만들기 Part 2 대시보드

(5)
2개의 수강평 ∙  138명의 수강생

25%

51,970원

69,300원
지식공유자: 정재남
총 41개 수업 (10시간 35분)
수강기한: 
12개월
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

초급자를 위해 준비한
[프론트엔드, React] 강의입니다.

대표적인 UI 요소들을 React 버전 및 순수 JavaScript 버전으로 만들어 보면서, Web API를 활용한 다양한 관점과 방법을 경험하고, 프론트엔드 개발 실력을 한층 끌어올려 보세요.

✍️
이런 걸
배워요!
React 실무 지식
DOM API
그밖의 다양한 Web API 활용 능력

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
프론트엔드 개발 지망생
프론트엔드 주니어 개발자
📚
선수 지식,
필요할까요?
HTML
CSS
JavaScript (ES6+)
React
TypeScript

안녕하세요
정재남 입니다.
정재남의 썸네일

안녕하세요, 시니어 프론트엔드 개발자 정재남 입니다.
서로 돕고 함께 발전하는 건전한 공유문화를 지향하여 다양한 활동을 하고 있습니다.

저서: 코어 자바스크립트

유튜브 채널: FE재남

아티클 및 인터뷰 영상:

커리큘럼 총 41 개 ˙ 10시간 35분의 수업
이 강의는 영상, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 1. 스낵바 Snackbar
스낵바 (1/3) context 적용 미리보기 29:43
스낵바 (2/3) createPortal 활용 12:49
스낵바 (3/3) 순수 자바스크립트 버전 20:20
복습스터디 #1. 스낵바 코드리뷰 + QnA - Observer의 성능 관련 09:28
섹션 2. 모달 Modal
모달 (1/4) context 적용 57:22
모달 (2/4) createPortal 활용 20:53
모달 (3/4) 순수 자바스크립트 버전 21:33
모달 (4/4) HTML Dialog 버전 21:23
섹션 3. 팝오버 Popover
팝오버 (1/3) 컨텐츠 내부에서 띄우기 12:20
팝오버 (2/3) createPortal 활용 10:00
팝오버 (3/3) HTML Dialog 버전 14:26
복습스터디 #2. 모달, 팝오버 - 코드리뷰 04:53
섹션 4. 이미지 슬라이드 ImageSlide
이미지슬라이드 (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
캐러셀 (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
갤러리 (1/2) 캐러셀 재활용 버전 23:59
갤러리 (2/2) 이미지 뷰어 버전 17:12
복습스터디 #5. 갤러리 - 코드리뷰 02:39
섹션 7. 셀렉트박스 SelectBox
셀렉트박스 (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
자동완성 (1/2) 셀렉트박스 재활용 24:30
자동완성 (2/2) 비동기 데이터 처리 20:40
복습스터디 #7. 자동완성 - 코드리뷰 + QnA (deferredValue vs. debounce) 04:52
섹션 9. 드래그&드랍 리스트 Drag & Drop List
드래그&드랍 리스트 (1/1) draggable 프로퍼티 활용 13:18
강의 게시일 : 2024년 05월 22일 (마지막 업데이트일 : 2024년 05월 22일)
수강평 총 2개
수강생분들이 직접 작성하신 수강평입니다.
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
withkey thumbnail
5
디자인시스템을 구축하면서 수개월동안 고민했던 문제들, 특히 헤드리스, 컴파운드 등에 대한 문제들이 섹션7에서 모두 해결되었습니다.. 특히 createContext에서 제너릭을 사용하는 부분에서.. 전율을 느꼈습니다.. 🫨 코어자바스크립트부터 시작해서, 여러 이펙티브 타입스크립트, 리액트 공식문서 스터디, 컴포넌트 강의까지.. 좋은 강의와 자료 너무너무 감사드립니다. 😭👍
2024-05-29
지식공유자 정재남
과분한 칭찬에 몸둘바를 모르겠네요 😅 도움이 되셨다니 다행이고, 앞으로도 더 재밌고 유익한 컨텐츠를 마련하고자 노력하겠습니다!
2024-05-29
신원세 thumbnail
5
단순히 정보를 전달하는 강의가 아닌 수강생과 소통하는 느낌이 들어서 집중이 더 잘되는 강의였습니다!! 바닐라 자바스크립트 버전으로 구현하는 부분이 있는 것도 좋아요 👍
2024-06-13
채널톡 아이콘