인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
BEST
개발 · 프로그래밍

/

프론트엔드

실무에 바로 적용하는 스토리북과 UI 테스트

스토리북 활용법 A to Z. 스토리북의 모든것을 보여드립니다

(5.0) 수강평 36개

수강생 490명

storybookui-testingReactTypeScriptTailwindCSS

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

이런 걸 배울 수 있어요

  • 스토리북을 활용한 컴포넌트 주도 개발(CDD)

  • GitHub Action, CI를 활용한 UI 테스트 자동화

  • npm 패키지 배포를 통한 디자인시스템 활용

스토리북, 들어는 봤는데 어떻게 사용할 수 있을까요? 🤔

유저 스토리를 기반으로한 기획이 주목을 받기 시작하면서, 화면에 그려지는 UI 컴포넌트의 다양한 스토리도 점점 중요해지고 있습니다. 스토리북이 무엇인지, 어떤 기능들이 있는지 궁금한 분들을 위해 준비했어요!

이 강의에서는 스토리북의 설치부터 시작하여, React 프로젝트에 적용하는 방법, 주요 기능과 활용 방법 등을 다룹니다. 또한, 다양한 예제를 통해 실제 개발에서 어떻게 사용할 수 있는지도 함께 살펴봅니다. 스토리북을 처음 사용하는 분들도 쉽게 이해할 수 있도록 구성하였으며, 강의를 따라가면서 자연스럽게 스토리북을 익힐 수 있습니다.

이 강의의 특징

📌 가장 간단한 컴포넌트부터, 여러개의 컴포넌트를 쌓아올린 복잡한 컴포넌트까지 점진적으로 배웁니다

📌 다양한 예제를 통해 현업에서 어떻게 개발하는지 경험할 수 있습니다

📌 현업에서 스토리북을 활용하는 다양한 방식을 경험에서 오는 노하우와 함께 전달합니다

📌 프론트엔드 개발에서 유용하게 쓸 수 있는 TypeScript와 Tailwind 각종 꿀팁을 제공합니다

먼저 수강하신 분들의 이야기 📝

01j1sp7w4prz5wv2df28satqd4

이런 분들께 추천해요

스토리북은 무엇인가요
프론트엔드 프로젝트에서
스토리북을 어떻게 사용할지
막막한 개발자

디자인 시스템에 관심있어요.
사용자 경험과 개발자 경험
향상을 위해 디자인시트템을
구축하고 싶은 개발팀

UI 테스트가 궁금해요.
CI/CD 를 활용해서 UI 테스트를 자동화하고, 리뷰를 통한
컴포넌트 검증이 궁금한 개발자

수강 후에는

  • 스토리북의 기본 개념과 사용 방법을 이해하고, 프로젝트에 적용할 수 있습니다


  • Web Vital을 고려해서 컴포넌트를 개발할 수 있습니다.

  • 스토리북 decorator를 활용하여 컴포넌트를 더욱 효율적으로 개발할 수 있습니다

  • UI 테스트 자동화를 통해 디자인 시스템의 일관성을 가져갈 수 있습니다

  • 디자인 시스템을 npm 패키지로 배포해서 재사용할 수 있습니다

이런 내용을 배워요.

Screenshot 2024-02-19 at 7.47 1 (4)

Chromatic 대시보드: UI Review

디자인시스템에 새로운 컴포넌트가 추가됐다면?
GitHub을 Chromatic과 연동해서 새로운 Pull
Request가 생성될 때마다 자동으로 UI Review를 생성합니다.

스토리북 : UI 컴포넌트 검증

스토리북에서 개발된 UI 컴포넌트를 확인하고
다양한 스토리에 따라 컴포넌트가 화면에 어떻게
그려지는지 확인할 수 있습니다

Interaction Test를 통한 스토리 검증

사용자가 서비스를 이용할 때 어떤식으로 우리가
개발한 컴포넌트를 사용하는지 보고 스토리를
검증할 수 있습니다

Screenshot 2024-02-19 at 11.08 1

npm package를 활용한 디자인 시스템

새로운 프로젝트를 시작하려고 하시나요? 디자인
시스템을 npm 패키지로 배포하고 npm install을
통해 쉽게 컴포넌트를 재사용할 수 있습니다

이 강의를 만든 사람

수강 전 참고 사항

실습 환경

  • MacOS를 기준으로 설명하지만, 운영체제에 제한이 없습니다

  • React로 개발환경을 설정한 경험이 있다면 별도의 환경설정 없이 따라오실 수 있습니다

학습 자료

  • 노션 링크

  • GitHub 소스코드

선수 지식 및 유의사항

  • React로 컴포넌트를 한번이라도 만들어보신 분

  • 팀 프로젝트 경험이 없는 분들도 쉽게 따라오실 수 있습니다


이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 스토리북을 활용해보고 싶은 개발자

  • 컴포넌트 주도 개발을 해보고싶은 개발자

  • 디자인시스템을 구축하고싶은 개발팀

선수 지식,
필요할까요?

  • React

  • TypeScript

  • HTML

  • CSS

안녕하세요
강병진입니다.

4,970

명

수강생

337

개

수강평

262

개

답변

4.9

점

강의 평점

8

개

강의

더보기

커리큘럼

전체

25개 ∙ (2시간 43분)

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

수강평

전체

36개

5.0

36개의 수강평

  • 매도리님의 프로필 이미지
    매도리

    수강평 1

    ∙

    평균 평점 4.0

    4

    60% 수강 후 작성

    • 정호연님의 프로필 이미지
      정호연

      수강평 44

      ∙

      평균 평점 5.0

      5

      32% 수강 후 작성

      • 원일님의 프로필 이미지
        원일

        수강평 2

        ∙

        평균 평점 5.0

        5

        20% 수강 후 작성

        최근 요구역량에 storybook가 많이 보여서 수강했습니다. 디자인 시스템을 적용하는데 기본적인 지식을 알기쉽게 설명해줘서 좋아요:)

        • 강병진
          지식공유자

          좋은 피드백 감사합니다! 얼마전에 진행했던 멘토링에서 신입 프론트엔드 개발자분을 만났는데 첫 회사 인터뷰 할 때 스토리북 경험을 좋게 봐주셨다고 하더라구요. 좋은 결과 있으셨으면 좋겠습니다!

      • 상룡님의 프로필 이미지
        상룡

        수강평 2

        ∙

        평균 평점 5.0

        5

        100% 수강 후 작성

        친절하고 설명도 잘하셔서 디자인 시스템 구축하는데 도움이 되는 것 같습니다!

        • 안수빈님의 프로필 이미지
          안수빈

          수강평 2

          ∙

          평균 평점 5.0

          5

          18% 수강 후 작성

          최근 사내 디자인시스템 구축에 대한 욕구가 늘어나 강의를 수강하게 되었습니다. 강의를 듣다보면, 디자인 시스템에 대한 이해 뿐만 아니라, 강사님의 개발에 대한 전반적인 내공을 느낄 수 있어요!! 방향성을 잃은 요즘 강의 외에도 많은 것을 얻어갈 수 있어 좋았습니다.

          • 강병진
            지식공유자

            친절한 수강평 감사합니다 수빈님! 강의 들으면서 이해가 되지 않는 부분이나 궁금한 점이 있으시면 언제든 질문으로 올려주세요~ 그리고 멘토링 이벤트도 계속 진행중이니 커리어 전반적으로 궁금한 점이 있으시거나 상담이 필요하시면 만나서 이야기하지 않으셔도 되니 구글폼으로 질문을 보내주세요. 제가 도와드릴 수 있는 선에서 최대한 답변 드리도록 하겠습니다.

        강병진님의 다른 강의

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

        RAG를 활용한 LLM Application 개발 (feat. LangChain)강의 썸네일

        RAG를 활용한 LLM Application 개발 (feat. LangChain)

        강병진

        실리콘밸리 GenAI 해커톤 우승자에게 배우는 RAG. 현업 노하우를 가득 담았습니다

        초급

        초급

        LLM, RAG, LangChain

        LangGraph를 활용한 AI Agent 개발 (feat. MCP)강의 썸네일

        LangGraph를 활용한 AI Agent 개발 (feat. MCP)

        강병진

        대기업 AI Agent 담당자의 노하우를 가득 담은 LangGraph. 현업에서 얻어맞으면서 습득한 지식을 전달드립니다

        초급

        초급

        프롬프트엔지니어링, LLM, AI Agent

        한시간으로 끝내는 LangChain 기본기강의 썸네일

        한시간으로 끝내는 LangChain 기본기

        강병진

        커피 한잔 가격으로 즐기는(?) 공식문서에서 핵심만 뽑아온 LangChain 기본 강의입니다. 본격적인 개발에 들어가기 전 LangChain 문법과 친해지세요!

        입문

        입문

        LLM, LangChain, 프롬프트엔지니어링

        Flutter로 만드는 LLM 챗봇 (feat. Gemini)강의 썸네일

        Flutter로 만드는 LLM 챗봇 (feat. Gemini)

        강병진

        Flutter가 처음이신가요? Flutter Contributor가 처음부터 하나씩 소개해드립니다! Gemini를 활용한 AI 프로젝트로 Flutter 개발을 시작해보세요

        초급

        초급

        Flutter, 챗봇, gemini

        실무에 바로 적용하는 AWS 배포강의 썸네일

        실무에 바로 적용하는 AWS 배포

        강병진

        AWS로 서비스를 배포/운영하고싶은 분들을 위해 준비했습니다. 도메인 설정부터 도커와 서버리스까지!

        초급

        초급

        AWS, Docker, aws-ecs

        2시간으로 끝내는 프론트엔드 테스트 기본기강의 썸네일

        2시간으로 끝내는 프론트엔드 테스트 기본기

        강병진

        테스트코드! 어디서부터 시작해야할지 막막한 분들을 위해 준비했어요. 테스트 작성부터, 자동화를 통한 배포까지 한번에!

        초급

        초급

        React, Cypress, Jest

        비슷한 강의

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

        웹 게임을 만들며 배우는 React에 TypeScript 적용하기강의 썸네일

        웹 게임을 만들며 배우는 React에 TypeScript 적용하기

        제로초(조현영)

        리액트로 만든 웹 게임과 React Router, Redux, MobX에 타입스크립트를 붙여보면서 리액트와 타입스크립트를 같이 사용해봅시다.

        중급이상

        중급이상

        React, TypeScript

        따라하며 배우는 리액트 테스트 [2023.11 업데이트]강의 썸네일

        따라하며 배우는 리액트 테스트 [2023.11 업데이트]

        John Ahn

        이 강의를 통해 리액트 애플리케이션을 테스트하는 법을 배우게 됩니다.

        초급

        초급

        React, React Context, 웹앱

        [리뉴얼] React로 NodeBird SNS 만들기강의 썸네일

        [리뉴얼] React로 NodeBird SNS 만들기

        제로초(조현영)

        리액트 & 넥스트 & 리덕스 & 리덕스사가 & 익스프레스 스택으로 트위터와 유사한 SNS 서비스를 만들어봅니다. 끝으로 검색엔진 최적화 후 AWS에 배포합니다.

        중급이상

        중급이상

        React, Redux, Node.js

        비전공자를 위한 진짜 입문 올인원 개발 부트캠프강의 썸네일

        비전공자를 위한 진짜 입문 올인원 개발 부트캠프

        그랩

        왕초보도 할 수 있는 웹, 서버, 모바일 앱, 머신러닝까지 익히는 끝판왕 풀스택 강의!! 개발을 어디서부터 시작할지 막막했다면 이 강의를 강력 추천할게요. Javascript 하나로 진행합니다!

        입문

        입문

        JavaScript, React, Node.js

        리액트로 NFT 랜딩 웹사이트 따라 만들기 시리즈3강의 썸네일

        리액트로 NFT 랜딩 웹사이트 따라 만들기 시리즈3

        인디코드

        리액트를 이용해서 NFT 반응형 랜딩페이지를 따라만들면서 프로젝트를 완성시켜보는 과정

        초급

        초급

        React, NFT

        Node.js에 TypeScript 적용하기(feat. NodeBird)강의 썸네일

        Node.js에 TypeScript 적용하기(feat. NodeBird)

        제로초(조현영)

        Node.js에 타입스크립트를 적용해보고, 기존 npm 패키지에 타이핑을 추가하거나, 직접 타입스크립트 라이브러리를 만들어봅시다.

        중급이상

        중급이상

        웹앱, Node.js, TypeScript

        Next.js 15로 완성하는 실전 YouTube 클론 개발강의 썸네일

        Next.js 15로 완성하는 실전 YouTube 클론 개발

        antonio

        이 24시간 튜토리얼에서는 자신만의 유튜브 클론을 만드는 방법을 배우게 됩니다. Next 15와 React 19(tRPC 포함), 서버 컴포넌트에서의 프리페칭, 클라이언트 컴포넌트에서의 서스펜스 활용, 비디오 처리, 백그라운드 작업, AI 기능 등 고급 주제들을 다룰 것입니다.

        초급

        초급

        Next.js, React, PostgreSQL

        풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)강의 썸네일

        풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

        정재남

        React 기반의 간단한 SNS 서비스를 만들면서 REST API 및 GraphQL을 연습합니다. 프론트엔드 개발을 위한 백엔드 환경을 쉽고 간단하게 만드는 방법을 소개합니다.

        초급

        초급

        REST API, GraphQL, React

        스토리북 & 자동화 테스트와 함께 하는 컴포넌트 주도 프론트엔드 개발강의 썸네일

        스토리북 & 자동화 테스트와 함께 하는 컴포넌트 주도 프론트엔드 개발

        인프런

        입문

        입문

        frontend, 소프트웨어 테스트, storybook

        TDD 개발 방법론을 활용한 React Native 앱 개발강의 썸네일

        TDD 개발 방법론을 활용한 React Native 앱 개발

        박동호

        간단한 ReactNative 앱을 TDD 방법론을 통해 개발하면서 TDD 의 개념을 확실히 익히고, ReactNative 모바일 앱 개발에 적용할 수 있도록 연습합니다.

        초급

        초급

        JavaScript, React, React Native

        [코드팩토리] [초급] 8시간만에 끝내는 코드팩토리의 Typescript 완전정복 풀코스강의 썸네일

        [코드팩토리] [초급] 8시간만에 끝내는 코드팩토리의 Typescript 완전정복 풀코스

        코드팩토리

        TypeScript(타입스크립트)를 하나도 모르더라도 강의 하나로 Typescript 문법 고수로 만들어주는 고농축 Typescript 문법 강의입니다.

        초급

        초급

        TypeScript

        [코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core강의 썸네일

        [코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

        코드팩토리

        자바스크립트, 타입스크립트 다음은 백엔드 개발! NestJS를 이용한 REST API 백엔드 개발, Socket IO 개발 및 배포를 할 수 있게 됩니다.

        초급

        초급

        NestJS, REST API, backend

        iOS/Android 앱 개발을 위한 실전 React Native - Basic강의 썸네일

        iOS/Android 앱 개발을 위한 실전 React Native - Basic

        Wintho

        Mobile App Front-End 개발을 위한 React Native의 기초 지식 습득을 목표로 하고 있습니다. 진입장벽이 낮은 언어/API의 활용을 통해 비전문가도 쉽게 Native Mobile App을 개발할 수 있도록 제작된 강의입니다.

        초급

        초급

        React Native, React, ES6

        차세대 Node.js 백엔드 서버 개발(Fastify & Prisma & Typescript와 함께하는)강의 썸네일

        차세대 Node.js 백엔드 서버 개발(Fastify & Prisma & Typescript와 함께하는)

        Indie Coder

        빠른 속도를 자랑하는 Node.js 프레임워크 fastify 와 orm Prisma 그리고 Typescirpt를 활용한 최신 Node.js 백엔드 REST API를 학습하는 코스

        초급

        초급

        Node.js, TypeScript, Prisma

        한 입 크기로 잘라먹는 타입스크립트(TypeScript)강의 썸네일

        한 입 크기로 잘라먹는 타입스크립트(TypeScript)

        이정환 Winterlood

        문법을 넘어 동작 원리와 개념 이해까지 배워도 배워도 헷갈리는 타입스크립트 이제 제대로 배워보세요! 여러분을 타입스크립트 마법사🧙🏻‍♀️로 만들어드립니다.

        초급

        초급

        TypeScript

        웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크강의 썸네일

        웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

        코드캠프

        웹 개발을 활용해서 Android와 IOS에 서비스 가능한 모바일앱 개발을 할 수 있도록 도와주는 강의입니다.

        초급

        초급

        React, Next.js, expo

        [리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편강의 썸네일

        [리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편

        제로초(조현영)

        타입스크립트 기본 문법을 배우고, 다른 사람이 작성한 타입을 분석하는 방법과, 내가 직접 타입을 작성하는 방법에 대해 알아봅니다.

        초급

        초급

        TypeScript

        Tailwind CSS 실전 포트폴리오 퍼블리싱강의 썸네일

        Tailwind CSS 실전 포트폴리오 퍼블리싱

        코딩웍스(Coding Works)

        [Tailwind CSS 실전 포트폴리오 퍼블리싱]은 Tailwind CSS를 활용해 26가지 이상의 다양한 실전 예제 제작하는 과정입니다. 실전 예제를 빠르게 다양하게 제작하면 그 속에서 필수적인 이론을 설명합니다. 해당 강의는 개발자와 퍼블리셔가 만드는 Tailwind CSS 스타일링을 중심으로 제작되었습니다.

        초급

        초급

        TailwindCSS, HTML/CSS

        ₩59,400