10 tutorial - Knobs Addon
source: categories/study/react-storybook/react-storybook9-10.md
10.1 Knobs Addon
스토리북에서 이 애드온을 사용하면 컴포넌트를 동적으로 편집할 수 있습니다.
yarn add -D @storybook/addon-knobs
- daily-issue
- develop
- study
- algorithm
- database - mongoDB
- database - mysql
- development environment
- gatsby
- 1 Gatsby 알아보기 및 개발 환경 구성하기 - Gatsby란 무엇일까?
- 1 Gatsby 알아보기 및 개발 환경 구성하기 - Gatsby를 위해 필수로 알아야 할 기술
- 2 Gatsby 알아보기 및 개발 환경 구성하기 - Gatsby 프로젝트 생성하기
- 3 Gatsby 알아보기 및 개발 환경 구성하기 - TypeScript 개발 환경 구성하기
- 4 간단하게 페이지 띄워보기 - TypeScript로 컴포넌트 작성하기
- 5 간단하게 페이지 띄워보기 - GraphQL Query 알아보기
- 6 간단하게 페이지 띄워보기 - Gatsby에서의 페이지 이동 방법
- 7 글 목록을 띄워 줄 메인 페이지 구현하기 - EmotionJS 라이브러리란 무엇일까?
- 8 글 목록을 띄워 줄 메인 페이지 구현하기 - EmotionJS 라이브러리를 통한 컴포넌트 스타일링 방법
- 9 글 목록을 띄워 줄 메인 페이지 구현하기 - 메인 페이지의 기본적인 틀 만들기
- 10 글 목록을 띄워 줄 메인 페이지 구현하기 - 카테고리 목록 컴포넌트 구현하기
- 11 글 목록을 띄워 줄 메인 페이지 구현하기 - 게시글 목록 부분 컴포넌트 구현하기
- 12 글 목록을 띄워 줄 메인 페이지 구현하기 - 메인 페이지 반응형 디자인 구현하기
- 13 메인 페이지에 실제 데이터 띄워보기 - Markdown 파일을 사용하기 위한 라이브러리 세팅하기
- 14 메인 페이지에 실제 데이터 띄워보기 - Markdown 파일 추가 후, GraphQL Query 확인해보기
- 15 메인 페이지에 실제 데이터 띄워보기 - 메인 페이지에서 Props로 받아 포스트 데이터 출력하기
- 16 메인 페이지에 실제 데이터 띄워보기 - gatsby-plugin-image 라이브러리로 최적화된 썸네일 사진 띄워주기
- 17 메인 페이지에 실제 데이터 띄워보기 - 카테고리 생성 및 카테고리별로 포스트 아이템 띄워주기
- 18 메인 페이지에 실제 데이터 띄워보기 - 인피니티 스크롤 기능 구현하기
- 19 포스트 아이템 링크를 만들어 해당 게시글 페이지 연결하기 - Slug에 대해 알아보고, 데이터 추가해보기
- 20 포스트 아이템 링크를 만들어 해당 게시글 페이지 연결하기 - 포스트 아이템 링크 연결 및 게시글 페이지 생성하기
- 21 포스트 아이템 링크를 만들어 해당 게시글 페이지 연결하기 - 템플릿 컴포넌트 내에서 Slug에 맞는 데이터 조회하기
- 22 게시글 페이지 구현하기 - 메인 페이지와 중복되는 부분 분리하기
- 23 게시글 페이지 구현하기 - 게시글 페이지 상단 부분 구현하기
- 24 게시글 페이지 구현하기 - 마크다운 형식의 포스트 출력하기
- 25 게시글 페이지 구현하기 - Utterances 위젯 추가하기
- 26 게시글 페이지 구현하기 - 게시글 페이지 반응형 디자인 구현하기
- 27 404 에러 페이지 구현하기 - 404 에러 페이지의 중요성
- git-beginner
- git-beginner2
- javascript deep dive
- javascript mdn
- jekyll blog 만들기 다시 정리
- JSON
- nodejs
- 객체 지향 프로그래밍 입문
- react storybook
- 1 Introduction
- 2 tutorial - start
- 3 tutorial - writing
- 4 tutorial - heirarchy, story, args
- 5 tutorial - Decorators
- 6 tutorial - Theme
- 7 tutorial - Addons
- 8 tutorial - Console Addon
- 9 tutorial - Docs Addon
- 10 tutorial - Knobs Addon
- 11 tutorial - Viewport Addon
- 12 tutorial - a11y Addon
- 13 tutorial - Environment variables
- 14 tutorial - Building Storybook
- 풀스택 리액트 토이프로젝트 - REST, GraphQL
- typescript advanced
- typescript beginner
- 1 강의 오리엔테이션
- 2 타입스크립트 소개와 배경
- 3 타입스크립트 시작하기
- 4 타입스크립트 기초 - 변수와 함수 타입 정의하기
- 5 첫번째 프로젝트 - 할 일 관리 애플리케이션
- 6 인터페이스
- 7 타입 별칭 (Type Aliases)
- 8 연산자를 이용한 타입 정의
- 9 이넘(Enums)
- 10 클래스
- 11 제네릭 (Generics)
- 12 두번째 프로젝트 - 전화번호부 애플리케이션
- 13 타입 추론 (Type Inference)
- 14 타입 단언 (type assertion)
- 15 타입 가드
- 16 타입 호환 (Type Compatibility)
- 17 타입 모듈화
- LV1. vue.js 시작하기 Age of vue.js
- LV2. vue.js 중급강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
- 0 강의 오리엔테이션
- 1 Todo App - 프로젝트 소개 및 구성
- 2 Todo App - 프로젝트 구현
- 3 Todo App - 애플리케이션 구조 개선하기
- 4 Todo App - 사용자 경험 개선
- 5 강의 중간 정리
- 6 ES6 for Vue.js - 오리엔테이션
- 7 ES6 for Vue.js - const & let
- 8 ES6 for Vue.js - 화살표 함수
- 9 ES6 for Vue.js - Enhanced Object Literals
- 10 ES6 for Vue.js - Modules
- 11 Vuex - 소개
- 12 Vuex - 주요 기술 요소
- 13 Vuex - 헬퍼 함수
- 14 Vuex - 프로젝트 구조화 및 모듈화
- LV3. vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
- 0 강의 오리엔테이션
- 1 제작할 앱 & API 소개 & Vue.js 스타일 가이드 소개
- 2 — 애플리케이션 제작 파트 — 소개 및 설계
- 3 — 애플리케이션 제작 파트 — 프로젝트 셋업
- 4 — 애플리케이션 제작 파트 — 라우터 기본
- 5 — 애플리케이션 제작 파트 — API 구현
- 6 — 애플리케이션 제작 파트 — 스토어 구현
- 7 — 중간 정리 —
- 8 라우터 실전
- 9 리팩토링 1 - 리스트 아이템 컴포넌트 공통화
- 10 리팩토링 2 - 사용자 프로필 컴포넌트 공통화
- 11 리팩토링 3 - Mixin과 하이 오더 컴포넌트
- 12 리팩토링 4 - 데이터 호출과 UX
- 13 리팩토링 5 - async & await를 이용한 비동기 처리
- 14 –애플리케이션 실전 파트– 외부 라이브러리 모듈화 방법(차트)
- 15 –애플리케이션 실전 파트– 컴포넌트 디자인 패턴
- 16 –애플리케이션 실전 파트– 서비스 배포 환경 구성
- LV4. Vue.js 끝장내기 - 실무에 필요한 모든 것
- LV5. vue.js + TypeScript 완벽 가이드
- 0 강의 오리엔테이션 및 개발환경 설정
- 1 첫 번째 프로젝트 시작하기
- 2 할 일 관리 앱 - 추가 기능 구현
- 3 할 일 관리 앱 - 조회 기능 구현
- 4 할 일 관리 앱 - 삭제 기능 구현
- 5 할 일 관리 앱 - 완료 기능 구현
- 6 할 일 관리 앱 - 정렬 기능 구현
- 7 첫 번째 프로젝트 요약
- 8 두 번째 프로젝트 시작하기
- 9 실 서비스에 타입스크립트를 적용하는 방법 2가지
- 10 점진적인 타입스크립트 적용 방식 1단계 - 라우터, HOC, 유틸 함수
- 11 점진적인 타입스크립트 적용 방식 2단계 - 컴포넌트, API 함수
- 12 점진적인 타입스크립트 적용 방식 3단계 - Vuex 스토어 타입 정의
- 13 두 번째 프로젝트 요약 정리
- 14 뷰 플러그인과 외부 라이브러리 타입 정의
- vue.js 하면서 알게된점
- 1 이름을 가지는 라우트
- 2 params VS. query
- 3 v-model 어떻게 생겼을까? v-model 원리
- 4 v-model, v-on, slot, template 코드분석
- 5 v-slot은 template 태그에만
- 6 Vue JS 히스토리 대응 (뒤로가기)
- 7 input file upload and drag drop
- 8 vue animationend and transitionend
- 9 vue watch deep handler
- 10 v-model - controlled component
- 11 api 통신 - 데이터 받아온 후 - 적용되는 컴포넌트 - 여기서 등록되는 이벤트 에러 조심!!
- 12 vue validator - vee-validate
- 13 vue.config.js devServer의 proxy, changeOrigin 설정
- 14 vee-validate code refactoring
- 15 proxy
- 16 i18n
- 17 잠시만… 프록시 설정.. 대안 생각남
- 18 vue에 storybook 기능 추가하기
- 19 webpack-spritesmith 각 폴더 이름에 맞게 mixins 함수 생성
- 20 객체 반복문 안쓰고 비교하기 - 중요
- 21 storybook에서 컴포넌트 정리할 때
- 22 vue - webpack-spritesmith 라이브러리 적용 내용 공유
- 23 vue storybook
- 24 nvm이란?
- 25 vue vuetify
- 26 vue-timepicker
- 27 개발 실패한 컴포넌트 - range (결국 Vuetify 활용 - 단 IE에서 작동하는지 봐야됨)
- 28 기초적인 실수 하지말자 Deep Copy!!!!
- 29 vuetify 속성 포함 안되도록 하는 방법!! 이 방법밖엔 없는듯..
- 30 vue-toasted 라이브러리 사용
- 31 deep copy
- 32 vue $set, $nextTick
- 33 vuetify 같은 라이브러리가 react에도 있나?
- 34 vue keep-alive 컴포넌트
- 35 Git fork 원래 저장소와 동기화 방법
- 36 vue에서 swiper 사용하기
- 37 사용자 지정 directive
- 38 window fullscreen API
- 39 풀스크린 해제시 이벤트 등록
- 40 폼 입력 바인딩
- 41 사용자 지정 inputs
- 42 slot이 있는 콘텐츠 배포
- 43 props type 유효성 검사(validator)
- 44 조건부 렌더링
- 45 리스트 렌더링
- 46 파이프 필터
- 47 overlayscrollbars, ngrok
- 48 ajax
- 49 javascript 꿀팁
- 50 overlayScrollbars scroll 이벤트
- 51 vue-fragment with v-if 이슈
- 52 lottie 및 v-icon
- 53 vuetify v directive custom 속성
- 54 컴포넌트화 할 것들은 컴포넌트화 아닌 것들은 inline scoped style로
- 55 chart.js
- 56 moment.js
- 57 eslint, prettier, stylelint, editorconfig
- 58 왜 CommonJS는 번들사이즈를 크게 하는가?
- 59 트리 쉐이킹으로 자바스크립트 페이로드 줄이기
- 60 실제 적용 후기
- 61 eslint 기능 강화 (prettier, stylelint) 및 git hook 기능 추가
- 62 빌드시 tree-shaking 기능 강화
- 63 코드 최적화 적용 결과
- 64 vuetify, lodash 트리쉐이킹
- 65 Scoped CSS
- 66 git 특정 파일만 특정 시점으로 되돌리기
- 67 error: src refspec master does not match any
- 68 2021-09-07 ~ 2022-01-07 금 중간체크 - 4개월간 해온 것들
- 69 git 권한 문제
- 70 zshell 에서 nvm 인식 안되는 문제
- 71 router-link, redirect 리서치
- 72 뷰 라우터 기본개념잡기
- 73 router-link active class, active 방법에 관한 고찰..?
- 74 라우터 이동에서 컴포넌트 이동으로 수정 후 버그 픽스
- 75 vuetify v-icon 사용법
- 76 vuetify 컴포넌트 안에 vuetify 컴포넌트 props 전달
- 77 유지보수 - 페이지별 class 조정
- 78 dropdown box 원리
- 79 postman 활용 연구
- 80 tooltip 기능
- 81 combobox 유효성 검사
- 82 vue에서 sass 기능 사용?
- 83 webpack에서 loader와 plugins의 차이점은 무엇인가요?
- 84 local storage VS session storage (텝메뉴)
- 85 IE 접속 이슈
- 86 vue.js dynamic component, json, storyblok
- 87 IE 이슈 (재귀함수, 호출 스텍 크기, 자동취소(?))
- 88 현재 api 구조 - 토스트 팝업 뜨는 구조 이해하기 (ㅇㄹ등록메시지 일치할 때)
- 89 storyblok - 헤드리스 CMS
- 90 - storyblok VueJS
- 91 MVVM
- 92 프론트 최적화 - 랜더링 횟수
- 93 JSON 데이터에 따른 문서 템플릿
- 94 input type number & maxlength
- 95 IE 11 두번째 이슈
- 96 vee-validate 동적 생성
- 97 CSS module, scoped
- 98 컴포넌트 단위에 관하여..(vueJS 관점)
- 99 반복문 key 값에 관한 고찰..
- 100 slot, scope
- 101 keep-alive, component
- 102 intro 페이지 내가 개발한 스크롤 플러그인 적용
- 103 vee-validate IE11에서 immediate 옵션 안줬는데 즉시 유효성 검사되는 이슈
- 104 부모 태그에 맞춰 img 정렬하기 object-fit: cover 기능 구현
- 105 moment.js
- 106 async/await 실행순서
- 107 객체 해체할당
- 108 스토리북 addon - 화면에 보이는 것들 조정
- 109 리액트 - 이미지 레이지로드
- 110 리액트 - 이미지 레이지로드2 상위 컴포넌트에서 레이지로드 함수 관리, 하위 컴포넌트로 레이지로드 함수 전달해서 코드 간단하게하기
- 111 React Router로 렌더링하는 컴포넌트에 prop 전달하기
- 112 로띠는 네트워크 리퀘스트가 아니다. 빌드하면 소스에 다 포함되어 나간다.
- 113 git tag
- 114 git token 설정하기 - 깃 보안강화
- 115 특정 파일 commit 기록보기
- 116 tag push
- 117 특정파일 unstaged로 돌리기
- 118 react 빌드 파일 로컬 서버에서 실행하기
- 119 Vue filter
- 120 Vue에서 moment 사용하기
- 121 딥카피(deep copy) 관련 이슈
- 122 Vue 파이프 필터
- 123 웹팩 데브 프록시 설정 (webpack devServer proxy)
- 124 eslint 기능 강화
- 125 window node localhost 제대로 안종료되었을 때
- 126 vue keep-alive 컴포넌트
- 127 Git fork 원래 저장소와 동기화 방법 (upstream)
- 128 vee-validate 3점대 버전 (vue 2점대버전이라..) (정리중..)
- 129 chart.js 3버전 (이거 많이쓰니깐 잘 알아둬야돼..) (정리중..)
- 130 내가 만든 스크롤 인터렉션 플러그인.. vue에서 쓰게끔 수정하니깐 갑자기 IE11에서 IndexSizeError가 뜬다.
- 131 타입스크립트 리서치
- 132 타입스크립트 리서치 2
- 133 웹소켓 개념
- 134 Object key 순서
- 135 IE 11 이슈 - stack overflow, chart.js 3.x
- 136 IE11 순환참조 발생하는 원인 파악중.. 파악 방법 리서치
- 137 엣지 케이스 처리 - $root, $parent, $refs, provide, inject, 프로그래밍 방식 이벤트 리스너, Circular References
- 138 member 권한 파악
- 139 vuetify, vuedraggable, + @ IE11 이슈, chart.js 3.6.4, chartjs-plugin-zoom 1.2.0
- 140 파트별 텝메뉴 나타나는거 수정
- 141 로그인 관련
- 142 IE11 이슈 - swiper + video + poster + controls // transform scale opacity
- 143 vue2 개발환경 구성
- 144 DockerFile, Kubernetes - 배포 시스템 관련 설명
- 145 타입스크립트 리서치 3 - vue2 적용
- 146 vue2 프로젝트 세팅
- 147 api 개발 (login 및 login 정보로 토큰받기 및 공통 api 요청)
- 148 ngrok 사용
- 149 라우터, 라이프사이클 훅
- 150 도커 배포시 오류
- 151 vuetify v-textarea 스크롤 이벤트
- 152 크로스사이트 스크립팅 (공격코드) - XSS
- 153 2022. 03. 31. (목) 해야될거
- 154 xss 공격방어 관련 v-html 사용 x
- 155 숫자를 base64 인코딩해주는 자바스크립트 내장 함수 (btoa / atob)
- 156 public/robots.txt
- 157 vuetify v-text-field 한글입력 방지
- 158 전화번호 형식으로 변경 (정규식)
- 159 초기값 관련
- 160 프론트엔드 개발 이슈
- 161 프론트엔드 정리 1
- 162 무한 스크롤링 이슈
- 163 고민 - 로딩 컴포넌트 제어 방법, 컴포넌트는 어떤 구조로 정리하면 좋을까 (링크드인)
- 164 dev, cbt 배포 에러 yml
- 165 쿼리스트링
- 166 vue 배포 파일 용량 큰 문제 해결
- 167 kakao developer
- 168 반복문 잘쓰자!!!
- 169 vue composition api 주의점
- 170 vue 반복문 key 값 주의
- 171 key, package.json scripts, skeleton ui, vue3 suspense component, element ui (is-esm), 임시저장 기능 구현, 트러블 슈팅 경험, 페이지 진입속도 해결, 프로젝트 진행하며 어려웠던 점, 앞으로 적용하고 싶은 것, 로딩 컴포넌트 제어, axios / swr
- 172 vue, react 등 프론트 프레임워크에서 반복문시 할당하는 Key 프롭에 관해.. (vue3 DOC 기준이지만, 내용읽어보니 vue2도 이에 해당하는듯..? 아닌가)
- 172-1 리스트 렌더링
- 172-2 API Reference: 특별한 속성들
- 173 vue.js 렌더링에 관해 - slot
- 174 스로틀링, 디바운스, requestAnimationFrame
- 175 Vue.js의 렌더링에 관해 - 가상 DOM
- 176 vue.js
- 177 portal-vue, teleport
- 178 프론트엔드 최적화
- 179 Vue는 React보다 얼마나 쉽게 최적화 컴포넌트를 만들 수 있을까?
- 180 forceUpdate 말고 key를 통해 재랜더링 시키는 방법 및 고유값 생성 방법
- 181 Promise.all, Promise.allSettled
- 182 vue awesome swiper 4.1.1
- 183 조건은 확실하게 다 달자
- 184 2022년 6월 11일 스터디 때 할 거
- 185 v-dialog eager 렌더링
- 186 Scoped slot
- 187 Input type=file
- 188 응답 느린 서버
- 189 안드로이드 카카오 인앱 브라우저 QR 스캐닝 이슈
- 190 react usememo
- 191 2021/09/07 ~ 2022/06/24 그동안의 기록들..
- vue 원리
- vue 프로젝트
- vue 리서치
- vue 입문
- developer’s quality
- Test Prism
- 1. Markdown Elements
- 2. Toasts Card
- 3. Code Blocks
- 4. Mermaid Test
- 5. Emoji Test
- 6. Gist Test
- 7. Avatar Test
- 8. Mentions Test
- 9. Fonts Test
- 10. Mathjax Test
- 11. Primer Utilities Test