개발 · 프로그래밍

/

프론트엔드

[React / VanillaJS] UI 요소 직접 만들기 Part 2

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

(5.0) 수강평 5개

수강생 222명

Reactvanilla-jsuiTypeScriptDOM
Thumbnail

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

이런 걸
배워요!

  • React 실무 지식

  • DOM API

  • 그밖의 다양한 Web API 활용 능력

🎉 로드맵을 통해 수강시 25% 할인 🎉

로드맵 링크: https://inf.run/MJDa8

(이미 두 강의 중 하나만 수강중인 경우에도 나머지 강의에 대해 25% 할인이 적용됩니다.)

다양한 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. 드래그앤드랍 리스트

이 강의의 특징

소개2

생생한 라이브 코딩

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

소개3

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

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

소개1

수강 전 참고 사항

실습 환경

다음 각 버전 혹은 그 이상의 환경이 갖추어져 있으면 됩니다.

  • Node.js 16

  • React 18

  • Next.js 13

  • TypeScript 4

학습 자료

  • 예제 코드를 압축파일 형태로 제공합니다.

선수 지식 및 유의사항

  • 기초적인 HTML/CSS, 자바스크립트 문법, 리액트 문법은 숙지하고 있다는 전제 하에 수업을 진행합니다.

  • Next.js 및 TypeScript 등은 작업 편의상 도구로 활용하였을 뿐으로, 자세히 다루지 않습니다.

  • 본 강의는 지식공유자가 진행한 스터디의 녹화, 편집한 강의입니다.


수강기간 제한 안내

  • 본 강의는 적절한 기간 내의 학습을 장려하기 위한 수단으로 수강기간을 1년으로 제한했습니다.

  • 수강기간 이내에만 수강 가능하도록 하기 위함은 아닙니다!


  • 부득이 기간 내 수강을 완료하지 못하셨거나 혹은 다시 듣고 싶으신 경우, 언제든지 이메일로 연락 주세요! 확인 즉시 연장해 드릴게요. (커뮤니티 탭의 자주묻는질문 내용을 참고하세요)

연관 강의 📺

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 프론트엔드 개발 지망생

  • 프론트엔드 주니어 개발자

선수 지식,
필요할까요?

  • HTML

  • CSS

  • JavaScript (ES6+)

  • React

  • TypeScript

안녕하세요
정재남입니다.

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

저서: 코어 자바스크립트

유튜브 채널: FE재남

아티클 및 인터뷰 영상:

커리큘럼

전체

42개 ∙ (10시간 35분)

수업 자료

가 제공되는 강의입니다.

강의 게시일: 
마지막 업데이트일: 

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!