인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
로드맵 썸네일
개발 · 프로그래밍

UI 요소 만들기 Part 1 & 2 합본

작성자 프로필 이미지

정재남

React
TypeScript
DOM

초급 대상

로드맵 참여중인 유저 프로필 사진
로드맵 참여중인 유저 프로필 사진

77명 참여중

25% 할인

5개 남음•전체 구매 적용
쿠폰 받기

다양한 UI 요소를 직접 만들어 봅시다!

순수 JavaScript(vanilla-js) 버전과 React 버전으로 만들어보고, 가능한 다양한 방법들을 도입해 봅니다.

  • 다양한 버전의 컴포넌트들을 작성하면서 각각의 특징을 비교 체험하세요.


  • 현업에서 많이 쓰이는 API들을 적용해보면서 실무 감각을 키워보세요.

이런 분들께 추천해요

UI 컴포넌트는 라이브러리에만 의존하여 개발 자신감이 부족한 프론트엔드 개발자

최신 HTML5 API 및 DOM API에 익숙하지 않은 분

UI 컴포넌트 개발실력 향상에 대한 갈증을 느끼는 분

수강 후에는

  • 이 강의 하나로 UI 요소는 끝! UI 요소에 대해서 만큼은 시니어 프론트엔드 개발자 수준의 개발 지식을 쌓으실 수 있어요.

  • 이 강의에서 다루는 요소들을 조합/발전시키면, 새로운 UI 요소들도 얼마든지 직접 작성하실 수 있는 자신감이 생깁니다.

이런 내용을 배워요.

Part2 기존 컴포넌트들을 재사용할 수 있는 방법을 고민하는 강의입니다.

Part 1

  1. 아코디언

  2. 탭메뉴

  3. 툴팁

  4. 반응형 텍스트박스

  5. 여러줄 말줄임

  6. 지연로딩

  7. 무한 스크롤

  8. 횡 스크롤 박스

  9. 스크롤 스파이

Part 2

  1. 스낵바

  2. 모달

  3. 팝오버

  4. 이미지 슬라이드

  5. 캐러셀

  6. 갤러리

  7. 셀렉트 박스

  8. 자동 완성

  9. 드래그앤드랍 리스트

이 강의의 특징

생생한 라이브 코딩

온라인 스터디에서 진행한 라이브 코딩을 그대로 녹화 / 편집한 강의로 생생한 현장감과 빠른 피드백을 장점으로 합니다. 정해진 틀에 갇히지 않은 다양한 관점을 제시해 드리기도 하고, 예상치 못한 문제에 대한 해결 방안을 경험해보실 수도 있을 것입니다.

단계별 난이도 조정, 최신 API 소개 및 적용

요구되는 기술이 비슷한 요소들끼리 묶고, 점차 난이도가 단계별로 상승하도록 강의를 구성하였습니다. 또한 최신 HTML5 및 DOM API들을 두루 소개, 적용해보면서 익숙해지는 데에 주력하였습니다.

소개1 798×1009

로드맵 상세보기

총 2개 코스

로드맵에 포함된 강의 썸네일
인프런
[React / VanillaJS] UI 요소 직접 만들기 Part 1
대표적인 UI 요소들을 React 버전 및 순수 JavaScript 버전으로 만들어 보면서, Web API를 활용한 다양한 관점과 방법을 경험하고, 프론트엔드 개발 실력을 한층 끌어올려 보세요.

₩51,970

₩69,300

로드맵에 포함된 강의 썸네일
인프런
[React / VanillaJS] UI 요소 직접 만들기 Part 2
대표적인 UI 요소들을 React 버전 및 순수 JavaScript 버전으로 만들어 보면서, Web API를 활용한 다양한 관점과 방법을 경험하고, 프론트엔드 개발 실력을 한층 끌어올려 보세요.

₩51,970

₩69,300

25% 할인

5개 남음•전체 구매 적용
쿠폰 받기

로드맵 코스 2