69,300원
초급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.
대표적인 UI 요소들을 React 버전 및 순수 JavaScript 버전으로 만들어 보면서, Web API를 활용한 다양한 관점과 방법을 경험하고, 프론트엔드 개발 실력을 한층 끌어올려 보세요.
✍️
이런 걸
배워요!
이런 걸
배워요!
React 실무 지식
HTML5 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
커리큘럼
총 47 개
˙ 11시간 43분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. Intro + 환경세팅
4 강
∙ 1시간 4분
섹션 1. 아코디언 Accordion
7 강
∙ 1시간 3분
아코디언 (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
4 강
∙ 31분
탭메뉴 (1/4) 보이는 요소만 렌더링
09:59
탭메뉴 (2/4) css로 숨김/보임 처리
02:45
탭메뉴 (3/4) 단일 트리 형태의 html로 작성
05:42
탭메뉴 (4/4) 순수 자바스크립트로 작성 (+ html 버전 코드 리뷰)
12:43
섹션 3. 툴팁 Tooltip
6 강
∙ 1시간 27분
툴팁 (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
4 강
∙ 24분
텍스트박스 (1/4) canvas - controlled 버전
13:24
텍스트박스 (2/4) canvas - uncontrolled 버전
03:05
텍스트박스 (3/4) canvas를 대체하는 다른 아이디어
04:00
텍스트박스 (4/4) 순수 자바스크립트로 작성
04:10
섹션 5. 여러줄 말줄임 LineClamp
5 강
∙ 1시간 3분
여러줄 말줄임 (1/4) canvas 버전
12:41
여러줄 말줄임 (2/4) canvas를 대체하는 다른 아이디어
10:02
여러줄 말줄임 (3/4) 순수 자바스크립트로 작성
14:50
여러줄 말줄임 (4/4) 코드 요약 및 QnA
07:34
복습스터디 #1. 텍스트박스, 여러줄 말줄임 - 코드리뷰
18:29
섹션 6. 지연로딩 LazyLoading
3 강
∙ 1시간 2분
지연로딩 (1/2) 리액트 버전
27:57
지연로딩 (2/2) 순수 자바스크립트 버전
12:04
복습스터디 #2. 지연로딩 - 코드리뷰
22:12
섹션 7. 무한스크롤 InfiniteScroll
4 강
∙ 1시간 40분
무한스크롤 (1/3) 리액트 버전
39:21
무한스크롤 (2/3) 순수 자바스크립트 버전
21:45
무한스크롤 (3/3) QnA
12:21
복습스터디 #3. 무한스크롤 - 코드리뷰 + QnA + 버그수정
27:23
섹션 8. 횡 스크롤 박스 ScrollBox
4 강
∙ 1시간 38분
스크롤박스 (1/2) 리액트 버전
43:27
스크롤박스 (2/2) 순수 자바스크립트 버전
16:01
복습스터디 #4. 스크롤박스 - 코드리뷰 + QnA (feat: parallex)
31:56
복습스터디 #5. 스크롤박스 - 코드리뷰 + QnA (리팩토링)
07:31
섹션 9. 스크롤 스파이 ScrollSpy
6 강
∙ 1시간 47분
스크롤스파이 (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월 09일)
수강평
총 7개
수강생분들이 직접 작성하신 수강평입니다.
5
7개의 수강평
5점
4점
3점
2점
1점
VIEW
추천 순
최신 순
높은 평점 순
낮은 평점 순
평점 순
높은 평점 순
낮은 평점 순
사실 리뷰를 잘 남기는 성격은 아닌데 이번 강의를 보면서 참 좋다는 생각을 많이 했습니다.
초반에 Next 14 맛보기로 프로젝트 셋팅, 그리고 좌측 사이드바를 만들 때의 생각할 수 있는 방법,
이후 리액트에서 Vanilla 코드를 작성하는 방식, 재사용 컴포넌트별로 어떻게 구현하고 사고하는지에 대해 라이브코딩으로 잘 알려주십니다. 원래 강의를 모두 다 듣고 리뷰를 작성하려고 했는데 지금 작성합니다 ㅎㅎ
은은하게 하루에 컴포넌트 강의 하나씩만 수강해도 좋을 것 같습니다~
좋은 강의 만들어주셔서 감사합니다!
2024-03-30
강의 컬렉터로서 여러 강의를 들어봤지만 진짜 최고의 강의인것 같습니다! 일단 강사님이 최신 타입스크립트 문법, 리액트 문법에 능숙하셔서 이럴때 저런걸 쓰는구나하고 보고있는 것만으로도 실력이 느는것 같습니다. 원래 책이랑 문서만 보고는 잘 이해가 안가는데, 문서로만 배웠던 내용을 아~ 저렇게 적용하는구나 하고 다시한번 체득하게 됩니다.
레벨은 너무 신입보다는 1-3년차 주니어들이 보면 좋으실 것 같습니다. 일단 강의자체가 실무에 바로 적용 할 수 있고, 리액트 심화부분까지 젹용해보기 때문입니다~
단순 구현에만 그치지 않고 어떻게하면 좀 더 좋은 코드가 될지 고민해보면서 주니어에서 중니어로 한단계 성장하고 싶은 분들에게는 꼭 추천드립니다.
이제 어떤 ui를 만나더라도 이제 구현할 수 있다는 자신감이 생겼습니다 ㅋㅋㅋㅋ100% 이해를 못햇더라도 챕터별로 짜여졌던 코드를 다시 보면서 실무에 적용할 수 있다는 점이 너무 좋은거 같습니다. 일단 이 강의를 들으면서 완성된 ui 코드를 갖고있는 것 만으로도 강의의 값어치를 넘는거 같네용ㅎㅎ
다음파트도 얼른 나왔으면 좋겠습니다!
2024-03-24