HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🐣
프론트엔드 데브코스 4기 교육생/
🍏
김나영팀/
React JS(+TS) 스토리북 코드 스니펫

React JS(+TS) 스토리북 코드 스니펫

생성일
Aug 8, 2023 05:40 AM
태그
😶‍🌫️
React 강의 수강 중, storybook을 작성하는 과정에서 중복되는 코드를 스니펫으로 만들면 더 효율적일 것 같아서 만들어봤어요! (특히 typescript..)
github.com
https://github.com/chasj0326/vscode_snippets_self/tree/main/storybook_react
코드 작성에는 도움이 되지만, 학습에는 방해가 될 수 있으니..! 다 외웠지만 같은 부분을 계속 타이핑하는 것에 시간이 많이 쓰인다! 싶을 때 사용하는 것을 추천드립니다 🐱👍🏻
 

✨ 에디터에 적용하기

안타깝게도 vscode 환경만 고려했습니다! 다른 에디터라면 수정이 필요해요!
  1. 상단에 링크된 깃허브 레포 들어가기
  1. 코드 다운로드
  1. 에디터에 적용하기 (a, b 중 선택해서 적용하시면 됩니다)
    1. 프로젝트 루트 폴더/.vscode 에 추가하기
    2. vscode snippets 설정 기능 사용하기 (코드 조각 생성 → 열린 파일에서 코드 복붙)
VS Code에서 나만의 Snippets 만들기
저같은 경우 블로그 글을 마크다운 (Markdown) 으로 작성을 하는데요. 이때 카테고리 별로 정해진 포맷을 사용합니다. 매번 여러 카테고리의 글을 써야하니, 이 포맷들을 모두 기억하고 사용하기가 어렵습니다. 그러다보니 카테고리별로 전체 마크다운 포맷을 미리 등록하여 사용하면 어떨까 싶었는데요. 이와 비슷한 경우를 Snippets이란 이름으로 여러 에디터에서는 지원하고 있습니다.(VS Code의 Snippets 예시)각 언어별/프레임워크별로 Snippets을 지원하지만, 여기서는 제가 필요한대로 코드가 생성되어야 하므로 나만의 Snippets을 만들어 보겠습니다. 본문 먼저 Code -> Preferences -> User Snippets로 이동합니다. Windows에서는 File -> Preferen..
VS Code에서 나만의 Snippets 만들기
https://jojoldu.tistory.com/491
VS Code에서 나만의 Snippets 만들기
 

✨ 사용하기

단축키 + tab 키를 활용하시면 됩니다. (따로 키 설정은 필요하지 않아요!)
  1. 스니펫 단축키로 불러오기
      • TS : strt 또는 storyts
      • JS : strj 또는 storyjs
      (단축키 변경하시고 싶으시면, 스니펫 파일 내의 prefix 를 변경하시면 됩니다)
  1. Tab키로 이동하면서 빈칸 채우기
      2. title 필드와 component 필드를 채울 수 있게 해놨어요! tab키를 누르면 커서가 이동하고, 작성하시면 됩니다
      (이 부분도 변경하고 싶으시면, 스니펫 파일 내의 body 를 변경하시면 됩니다)

JS 버전

TS 버전