툴 사용법

[Storybook] 스토리북 설치하기 +) node 버전 업그레이드 에러 해결법

Storybook 설치하기 npx storybook@latest init 별 문제가 없다면 중간중간 계속 진행할 건지 물어볼 때마다 y 입력하면 끝난다. 설치는 이것으로 끝이다. 실행하면 localhost:6006로 브라우저를 띄워준다. npm run storybook Node 버전 업 에러 - 'To run storybook you need to have node 16 or higher' 가장 최신 버전의 storybook을 설치하려고 했더니 다음과 같이 node 버전 업그레이드를 하라고 한다. node.js 사이트 가서 새로 다운받으면 되긴 하는데 오래 걸릴 것 같아서 새로 설치하기보다 버전업을 알아봤다. 나는 윈도우를 사용하고 있기 때문에 nvm라는 node 버전업을 도와주는 프로그램을 github..

[Git] github 리뷰에서 Add single comment와 Start a review 차이점

PR 리뷰하는 법은 이 두 글을 참고해 공부했다. https://devlog-wjdrbs96.tistory.com/231 https://xo.dev/articles/github-collaboration-guide Comment와 Review 달기의 차이점 PR 리뷰를 하는 과정을 찾아보는데 둘의 차이점에 대해 궁금함이 생겼다. 이렇게 앞에 있는 + 버튼을 누르면 해당 줄의 아래에 코멘트 창이 생기는데 comment 달기와 review 달기 둘에는 무슨 차이가 있을까? 결론부터 말하자면 comment와 review 모두 comment이다. 다만 등록되는 시기와 알람 여부가 다르다. comment는 제출하면 바로 등록되고, 매 등록마다 알람이 울린다. 여러 줄을 리뷰해야 한다면 추천하지 않는다. review..

[tip] README에 gif 첨부할 때 사용하면 좋은 유용한 툴/사이트 모음 - 영상 자르기, gif 변환, gif 압축

README에 내가 만든 프로젝트 시연 영상을 올리고 싶은데 영상 촬영부터 편집, gif 변환, gif 용량 압축까지 하려니 막막해서 이것저것 시행착오를 겪은 결과를 공유하려고 한다. 영상 촬영부터 gif 올리는 과정까지 하나의 루틴으로 만들어봤다. 나는 고퀄 녹화 필요 없고 그냥 윈도우 기본 녹화를 쓸거다!하는 사람은 2번부터 보면 된다. 1. 화면 녹화 (OBS) 윈도우 기본 녹화를 하고 난 뒤에 원하는 부분만 확대해서 자르면 화질이 떨어져서 깨져보인다. OBS는 원하는 부분을 애초에 자르거나 확대한 상태에서 녹화하기 때문에 그럴 염려가 없다. 다운은 여기서. Open Broadcaster Software | OBS 영상 녹화와 실시간 방송을 할 수 있는 무료 및 공개 소프트웨어입니다. 윈도우, 맥 ..

[ESLint] ESLint 설치 및 설정하는 법

ESLint란? 작성한 코드가 문법에 맞는지 검사해주는 프로그램 1. 설치하기 CRA로 프로젝트를 만들었다면 설치를 안해도 이미 node_modules에 ESLint가 설치되어 있다. CRA로 만든 프로젝트가 아니라면 npm으로 설치해주자. 개발할 때 필요하므로 devDependency로 다운받는다. npm install eslint --save-dev 다음으로 VSCode의 extension을 다운받자. 2. 설정 파일 작성 package.json 파일에 보면 아래와 같이 "eslintConfig" 부분이 있다. package.json에서 바로 작성하면 찾는 것과 유지보수하기가 힘들어지므로 이 부분을 삭제하고 따로 .eslintrc.json 파일을 만들어 린트 설정을 해 줄 것이다. package.js..