Thumbnail
지식공유자의 깜짝할인 중
개발 · 프로그래밍 프론트엔드

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

(5)
7개의 수강평 ∙  229명의 수강생

24%

51,980원

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

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

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

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

이런 분들께 추천드려요!

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

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

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

저서: 코어 자바스크립트

유튜브 채널: FE재남

아티클 및 인터뷰 영상:

커리큘럼 총 48 개 ˙ 12시간 7분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 1. 아코디언 Accordion
아코디언 (1/6) 보이는 요소만 렌더링 미리보기 19:29
아코디언 (2/6) css로 숨김/보임 처리 03:23
아코디언 (3/6) css transition 추가 07:05
아코디언 (4/6) 순수 JavaScript로 작성 16:44
아코디언 (5/6) HTML만으로 작성 11:11
아코디언 (6/6) ctrl + F로 검색 기능 추가 02:14
아코디언 (보너스) details 태그에 추가된 name 프로퍼티로 하나만 열리도록 02:59
섹션 2. 탭메뉴 TabMenu
탭메뉴 (1/4) 보이는 요소만 렌더링 09:59
탭메뉴 (2/4) css로 숨김/보임 처리 02:45
탭메뉴 (3/4) 단일 트리 형태의 html로 작성 05:42
탭메뉴 (4/4) 순수 자바스크립트로 작성 (+ html 버전 코드 리뷰) 12:43
섹션 3. 툴팁 Tooltip
툴팁 (1/6) 기본 09:04
툴팁 (2/6) 하나의 툴팁만 열리는 context 도입 14:11
툴팁 (3/6) HTML만으로 작성 14:35
툴팁 (4/6) 툴팁이 화면 안에서만 보이도록 처리 29:26
툴팁 (5/6) (보강) viewport 관련 아쉬운점 보완 12:56
툴팁 (6/6) 순수 자바스크립트로 작성 06:59
섹션 4. 반응형 텍스트박스 TextBox
텍스트박스 (1/4) canvas - controlled 버전 13:24
텍스트박스 (2/4) canvas - uncontrolled 버전 03:05
텍스트박스 (3/4) canvas를 대체하는 다른 아이디어 04:00
텍스트박스 (4/4) 순수 자바스크립트로 작성 04:10
섹션 5. 여러줄 말줄임 LineClamp
여러줄 말줄임 (1/4) canvas 버전 12:41
여러줄 말줄임 (2/4) canvas를 대체하는 다른 아이디어 10:02
여러줄 말줄임 (3/4) 순수 자바스크립트로 작성 14:50
여러줄 말줄임 (4/4) 코드 요약 및 QnA 07:34
복습스터디 #1. 텍스트박스, 여러줄 말줄임 - 코드리뷰 18:29
섹션 6. 지연로딩 LazyLoading
지연로딩 (1/2) 리액트 버전 27:57
지연로딩 (2/2) 순수 자바스크립트 버전 12:04
복습스터디 #2. 지연로딩 - 코드리뷰 22:12
섹션 7. 무한스크롤 InfiniteScroll
무한스크롤 (1/3) 리액트 버전 39:21
무한스크롤 (2/3) 순수 자바스크립트 버전 21:45
무한스크롤 (3/3) QnA 12:21
복습스터디 #3. 무한스크롤 - 코드리뷰 + QnA + 버그수정 27:23
섹션 8. 횡 스크롤 박스 ScrollBox
스크롤박스 (1/2) 리액트 버전 43:27
스크롤박스 (2/2) 순수 자바스크립트 버전 16:01
복습스터디 #4. 스크롤박스 - 코드리뷰 + QnA (feat: parallex) 31:56
복습스터디 #5. 스크롤박스 - 코드리뷰 + QnA (리팩토링) 07:31
섹션 9. 스크롤 스파이 ScrollSpy
스크롤스파이 (0/4) 사전 준비 작업 05:59
스크롤스파이 (1/4) scroll Event로 감지 28:34
스크롤스파이 (2/4) IntersectionObserver 사용 12:53
스크롤스파이 (3/4) 순수 자바스크립트 버전 13:12
스크롤스파이 (4/4) 스크롤박스 재활용 32:06
복습스터디 #6. 스크롤스파이 - 버그수정 + 코드리뷰 + QnA 14:45
강의 게시일 : 2024년 03월 20일 (마지막 업데이트일 : 2024년 05월 13일)
수강평 총 7개
수강생분들이 직접 작성하신 수강평입니다.
5
7개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
강민혜 thumbnail
5
구현 방법을 한 가지만 알려주시는게 아니라 여러 방식을 소개해 주셔서 너무 알차요!! 그리고 단순히 UI 요소의 기본 동작 구현을 넘어서 아코디언 ctrl+F로 검색하면 열리는 기능, 툴팁이 화면 안에서 보이도록 하는 방법 등 정말 디테일한 동작까지 알려주시더라구요. 평소 개발할 때 구현해보지 않은 UI를 개발하면 구글링이나 유튜브를 이용해서 따라했었는데, 강의를 듣고 나니까 '이 UI는 이런식으로 구현해야 되겠구나'라는 감이 잡혀서 구현에 대한 자신감이 많이 생긴 것 같아요. 가격에 비하면 다른 강의들보다 훨씬 얻어갈 수 있는게 많은 것 같습니다. part1도 유익했는데 part2도 요소들 목록을 보니 너무 기대되네요!!! 주니어 프론트 개발자들에게는 최고의 강의인 것 같습니다ㅎㅎ 항상 좋은 강의 감사합니다 :)
2024-03-31
지식공유자 정재남
민혜님, 소중한 강의평 감사합니다! 강의내용을 저보다 잘 소개해 주신 것 같아요 ㅎㅎ :D
2024-03-31
지호손 thumbnail
5
기본적인 웹 요소들을 직접 구현하고 애니메이션을 적용하는 과정을 함께 참여하면서 고민도 해볼 수 있었던 것 같아서 배울 점이 많았습니다. :)
2024-03-23
지식공유자 정재남
감사합니다. 재밌게 수강해주시기 바라요 :)
2024-03-26
지니지니 thumbnail
5
강의 컬렉터로서 여러 강의를 들어봤지만 진짜 최고의 강의인것 같습니다! 일단 강사님이 최신 타입스크립트 문법, 리액트 문법에 능숙하셔서 이럴때 저런걸 쓰는구나하고 보고있는 것만으로도 실력이 느는것 같습니다. 원래 책이랑 문서만 보고는 잘 이해가 안가는데, 문서로만 배웠던 내용을 아~ 저렇게 적용하는구나 하고 다시한번 체득하게 됩니다. 레벨은 너무 신입보다는 1-3년차 주니어들이 보면 좋으실 것 같습니다. 일단 강의자체가 실무에 바로 적용 할 수 있고, 리액트 심화부분까지 젹용해보기 때문입니다~ 단순 구현에만 그치지 않고 어떻게하면 좀 더 좋은 코드가 될지 고민해보면서 주니어에서 중니어로 한단계 성장하고 싶은 분들에게는 꼭 추천드립니다. 이제 어떤 ui를 만나더라도 이제 구현할 수 있다는 자신감이 생겼습니다 ㅋㅋㅋㅋ100% 이해를 못햇더라도 챕터별로 짜여졌던 코드를 다시 보면서 실무에 적용할 수 있다는 점이 너무 좋은거 같습니다. 일단 이 강의를 들으면서 완성된 ui 코드를 갖고있는 것 만으로도 강의의 값어치를 넘는거 같네용ㅎㅎ 다음파트도 얼른 나왔으면 좋겠습니다!
2024-03-24
지식공유자 정재남
정성스러운 수강평 감사합니다 😃 제가 이 강의를 기획하면서 기대했던 것이 잘 전해진 것 같아 기쁘고 힘이 나네요! 다음 파트도 영상 편집에 박차를 가해서 최대한 빨리 오픈할 수 있도록 해볼게요 😂
2024-03-25
ding-co thumbnail
5
사실 리뷰를 잘 남기는 성격은 아닌데 이번 강의를 보면서 참 좋다는 생각을 많이 했습니다. 초반에 Next 14 맛보기로 프로젝트 셋팅, 그리고 좌측 사이드바를 만들 때의 생각할 수 있는 방법, 이후 리액트에서 Vanilla 코드를 작성하는 방식, 재사용 컴포넌트별로 어떻게 구현하고 사고하는지에 대해 라이브코딩으로 잘 알려주십니다. 원래 강의를 모두 다 듣고 리뷰를 작성하려고 했는데 지금 작성합니다 ㅎㅎ 은은하게 하루에 컴포넌트 강의 하나씩만 수강해도 좋을 것 같습니다~ 좋은 강의 만들어주셔서 감사합니다!
2024-03-30
지식공유자 정재남
정성스러운 수강평 감사합니다 😄 하루 한 컴포넌트씩 보시는거 뒤로 갈수록 힘들어지실까 걱정되네요. 무리하지 않는 선에서 적당히 꾸준히 끝까지 완주해주시길 기대합니다.
2024-03-30
p.cdoomco thumbnail
5
잘들어보겠습니다!
2024-03-21
지식공유자 정재남
화이팅 :D
2024-03-26