Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
개발 · 프로그래밍

/

프론트엔드

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

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

(5.0) 수강평 8개

수강생 292명

  • 정재남
실습 중심
바닐라JS
Reactvanilla-jsuiTypeScriptDOM

먼저 경험한 수강생들의 후기

이런 걸 배울 수 있어요

  • React 실무 지식

  • DOM API

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

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

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

(이미 두 강의 중 하나만 수강중인 경우에도 나머지 강의에 대해 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. 드래그앤드랍 리스트

이 강의의 특징

생생한 라이브 코딩

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

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

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

수강 전 참고 사항

실습 환경

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

  • Node.js 16

  • React 18

  • Next.js 13

  • TypeScript 4

학습 자료

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

선수 지식 및 유의사항

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

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

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


연관 강의 📺

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • 프론트엔드 개발 지망생

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

선수 지식,
필요할까요?

  • HTML

  • CSS

  • JavaScript (ES6+)

  • React

  • TypeScript

안녕하세요
입니다.

32,332

수강생

671

수강평

393

답변

4.8

강의 평점

11

강의

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

저서: 코어 자바스크립트

유튜브 채널: FE재남

아티클 및 인터뷰 영상:

커리큘럼

전체

42개 ∙ (10시간 35분)

해당 강의에서 제공:

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

수강평

전체

8개

5.0

8개의 수강평

  • withkey님의 프로필 이미지
    withkey

    수강평 2

    평균 평점 5.0

    5

    32% 수강 후 작성

    Problems that I had been struggling with for months while building the design system, especially problems with headless and compound, were all solved in Section 7. Especially in the part where generics are used in createContext... I felt a thrill. 🫨 Starting from Core JavaScript, various Effective TypeScripts, React official documentation study, and even component lectures... Thank you so much for the great lectures and materials. 😭👍

    • jaenam
      지식공유자

      I don't know what to do with all the praise 😅 I'm glad it was helpful, and I'll continue to work hard to provide more fun and useful content in the future!

  • imhass님의 프로필 이미지
    imhass

    수강평 2

    평균 평점 5.0

    5

    31% 수강 후 작성

    • eddie85님의 프로필 이미지
      eddie85

      수강평 7

      평균 평점 5.0

      5

      100% 수강 후 작성

      This lecture helped me understand how and based on what criteria to utilize browsers, HTML, React, and Vanilla when developing UI. Additionally, it was very helpful to see the overall flow when developing UI while watching the lecture.

      • zimablue14님의 프로필 이미지
        zimablue14

        수강평 14

        평균 평점 4.4

        5

        100% 수강 후 작성

        I wish the course duration was a little longer, but the content is 100%.

        • tladud1125661님의 프로필 이미지
          tladud1125661

          수강평 2

          평균 평점 5.0

          5

          31% 수강 후 작성

          It helps a lot in UI design.

          ₩69,300

          정재남님의 다른 강의

          지식공유자님의 다른 강의를 만나보세요!

          비슷한 강의

          같은 분야의 다른 강의를 만나보세요!

          연관 로드맵

          강의가 포함된 로드맵으로 학습해 보세요!