✅ 본 게시글은 스토리북 7.1.0 버전과 TypeScript를 기반으로 작성되었습니다. 잦고 반복되는 디자인 변경은 개발자를 힘들게 해요!디자인 시스템을 개발하면서 가장 힘든 부분은 변경 사항이 발생했을 때 컴포넌트의 UI가 정상적으로 렌더링되는지 확인하는 것이었다.특히나 가장 기본 요소인 색, 여백, 글씨 크기와 같은 요소가 변경될 경우 현재 컴포넌트 뿐만이 아닌 다른 모든 컴포넌트에 영향을 미치기 때문에 이를 일일이 확인해가며 이를 체크하는 것이 너무 힘들었고 시간도 많이 소비되었으며 미처 잡지 못하는 경우 역시 존재했다.때문에 이를 해결할 수 있는 방법이 없을까 테스트 쪽으로 눈을 돌리게 되었고, 거기에서 스토리북의 Visual Test를 통해 이를 해결할 수 있다는 것을 알게 되어 적용해보게 되..
✅ 본 게시글은 스토리북 7.1.0 버전과 TypeScript를 기반으로 작성되었습니다. Storybook으로 컴포넌트를 문서화해보자 치스톡에서 디자인 시스템을 만들면서 신경쓰고 있는 부분 중 하나가 스토리북 활용이다. 스토리북은 컴포넌트를 서비스 로직과 독립된 UI를 실행, 테스트하는 용도로도 사용할 수 있지만, 컴포넌트를 설명하기 위한 문서로도 사용할 수 있다. 오늘은 이 문서 용도에 집중에서 스토리북으로 어떻게 컴포넌트 문서를 작성할 수 있는지 알아보려고 한다. 1️⃣ Autodocs & JSDoc로 문서 작성하기 - `'autodocs'` 태그 스토리북은 컴포넌트를 자동으로 문서화해주는 기능을 가지고 있다. 바로 autodocs 기능인데 이는 스토리북의 메타 정보에 tag에 `'autodocs'`..
Create Issue Branch로 이슈 브랜치를 자동으로 만들어보자 깃허브는 Issue의 Development 항목을 통해서 이슈 브랜치를 만들 수 있는 기능을 제공한다. 하지만.... 이게 좀 여러모로 불편한 점들이 있다. prefix 설정이라거나, 이슈 이름으로 그대로 브랜치를 만들어서 이름을 영어로 적어야한다거나...등등 그래서 오늘은 깃허브 액션 맛보기 겸 Create Issue Branch를 통해서 이슈에 브랜치를 자동으로 생성해보려한다. Create Issue Branch 왜 쓰나요? 앞서 말했듯, 깃허브에서는 이미 이슈를 대상으로 브랜치를 만들 수 있는 기능을 제공한다. 하지만 이슈 이름을 그대로 브랜치로 만들어버리기 때문에 특정 규칙으로 브랜치 이름을 만들고 싶다면 커스텀 하는 것이 불..
prettier로 import 정렬하기개발을 하다보면 파일 위에 import 문이 우후죽순 생겨난다.언젠가 정리해야지....하면서 외면해왔다가 더이상 미루면 더 힘들어질 것 같아서 그 전에 후딱 처리해야겠다는 생각에 드디어 설정했다.막상 해보니....굉장히 쉽더라. 설치하기yarn add -D @trivago/prettier-plugin-sort-imports 위 명령어를 통해서 prettier-plugin-sort-imports를 설치해주자.그 트리바고가 맞다. 설정하기// .prettierrc.json{ ... "importOrder": [ "^@customTypes/(.*)$", "^@root/(.*)$", "^@src/(.*)$", "^@assets/(.*)$", "..
husky를 사용해서 git hook을 만들어보자 이전 interface 프로젝트를 개발할 때 백엔드 팀원 분이 작업했던 pre commit git hook이 참 탐이 났더랜다. 그래서 오늘은 husky를 이용하여 commit 전에 실행되는 git hook을 만들어보려고 한다. 오늘 만들 git hook은 크게 2가지로, 1. 커밋이 되기 전에 staged 상태에 있는 파일들을 lint-staged로 검사하는 hook 2. 커밋 시 특정 컨벤션을 따를 수 있도록 선택지를 제공하는 git-cz(commitizen)을 실행하는 hook 이렇게 2개이다. ❓ git hook과 husky git hook은 git에 어떤 이벤트가 발생했을 때, 자동으로 특정 스크립트를 실행하는 기능이다. 크게 클라이언트 훅과 서..
프로젝트와 Storybook에 SVGR 설정하기 치스톡 프로젝트를 진행하면서 SVGR을 사용해야할 일이 생겼다. 오늘은 Next.js기반 프로젝트와 Storybook에 SVGR을 설정하는 방법을 적어보려한다. SVGR이란? SVG는 벡터 기반의 이미지 파일로, 용량이 작고 크기를 바꿔도 이미지가 깨지지 않기 때문에 웹에서 자주 사용되는 이미지 포맷이다. 이 SVG를 Next.js 기반 프로젝트에서 사용하기 위해서는 크게 2가지 방법을 통해 가져올 수 있다. 하나는, svg 파일의 경로를 img 파일의 src 속성에 넣어 img 태그와 함께 사용하는 방법이고, 다른 하나는 svg 파일을 JSX 형태인 리액트 컴포넌트로 바꿔서 이를 불러와 사용하는 방법이다. 두 방법 모두 장·단이 있지만, svg를 리액트 ..
프로젝트를 시작할 때 가장 기본! (포맷까지 했지만) 널뛰기 하는 것 같아서 차마 적지 못하고 따로 뺀 프론트엔드 개발환경 설정 2편! 오늘은 VS Code에서 ESLint와 Prettier를 설정해보자. 항상 Reference는 마지막에 표시하는데 다들 읽어보면 좋을 것 같아서 이번에는 최상단에 표시한다. 나는 이 블로그의 글을 직접 적용해보며 작성한 것이라 정확한 내용은 아래 블로그를 참고하는 것이 좋다. ESLint, Prettier Setting, 헤매지 말고 정확히 알고 설정하자. ESLint, Prettier 관련해서 환경 세팅을 하면 항상 어쩔 땐 잘되고, 어쩔 땐 안되고... 구글링하면 그렇게 많이 나오는 방식들을 전부 해봐도 계속 안돼서 시간을 그렇게 버릴 때가 많았던 것 같다. 그 he..
이 글을 적기 위해서 컴퓨터를 포맷했다. (아님) 한 번 쯤은 정리하고 넘어가야하는 프론트엔드 개발환경 기초 설정! 1. VS Code 설치 VS Code는 마이크로소프트에서 개발한 에디터이다. 프론트엔드를 개발하려면 코드를 작성하고 편집하는 툴이 필요할텐데 VS Code가 그 대표적인 예시이다. MS는 에디터라고 주장하지만 사실상 IDE 취급을 받고 있다. 즉, VS Code는 프론트엔드 개발에서 코드를 편집하고 작성할 수 있는 가장 대중적인 프로그램이다. 다양한 확장자와 플러그인을 지원하기 때문에 프론트엔드 개발 이외에도 많이 사용된다. 이를 쓰고 싶지 않다면 자신이 편한 IDE를 다운로드해서 사용해도 된다. 2. Git 설치 Git은 변형을 추적할 수 있는 형상 관리 도구이다. 말이 굉장히 어려운데..
컴퓨터 포맷 후 다시 개발환경을 설정하는 와중에 PowerShell에서 yarn 명령어가 실행되지 않는 버그가 발생했다. yarn : 이 시스템에서 스크립트를 실행할 수 없으므로 어쩌고 저쩌고 하는 말이었는데 이 김에 해결방법을 작성해두려고한다. 1. PowerShell을 관리자 권환으로 열어 아래를 입력한다. Set-ExecutionPolicy RemoteSigned 2. 입력하라는 메세지가 뜨면 y를 누른다. 3. 잘 동작 한다.
깃허브를 사용하면서 기능별로 feature 브랜치를 파고 PR을 올리고 머지한 적은 있지만, 브랜치 명칭별로 어떤 역할을 하는지, 어떻게 관리되어야하는지에 대해서는 깊게 생각해본 적이 없었다. 오늘 인턴쉽을 진행하며 배웠던 깃 플로우 전략을 아주아주 간단하게 정리해두려고 한다. 브랜치의 종류는 5가지가 있다. develop 개발이 진행 중인 branch feature 특정 기능의 개발이 진행되는 branch release 기능 개발이 끝나고, 제품 출시 전 테스팅용 DB와 서버에서 빌드되어 QA 과정에 놓이는 branch master 빌드 되어 실제 배포되는 branch hotfix 배포된 결과물에서 발생한 문제를 빠르게 해결하기 위한 branch 실제 개발과정에서는 위 브랜치를 다음과 같이 적용한다. ..
Online WebSocket & Socket.io Tester - PieSocket Realtime Recent use cases, blogs, tutorials and stories. www.piesocket.com REST API는 그냥 링크를 타고 들어가면 json 형태의 응답을 바로 볼 수 있어 어떤 응답이 들어오는지 확인할 수 있지만, 웹소켓의 경우는 여의치 않습니다. 이를 위해 웹소켓을 테스트해볼 수 있는 사이트를 소개하려 합니다. 위에 있는 사이트인데 홈페이지는 다음과 같습니다. 로그인이 별도로 필요하진 않으며 Enter your websocket url and connect 부분에 웹소켓 url을 넣고 Connect 버튼을 누르면 정상적으로 연결 시 아래와 같은 화면이 뜹니다. 이 화면에..
