StoryBook 관련 자료조사

스토리북이란? Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It’s open source and free. 스토리북은 UI 구성 요소와 페이지를 개별적으로 빌드하기 위한 프론트엔드 워크샵입니다. 수천 개의 팀이 UI 개발, 테스트 및 문서화를 위해 사용하고 있습니다. 오픈 소스이며 무료입니다. 다른 기업들 스토리북 적용 예시 스토리북 쇼케이스 페이지에 접속하면 다른 기업들의 storybook 을 볼 수 있다. 해당 카테고리 내에는 여러가지 소분류 항목이 나열되어 있는데,..

• format_list_bulleted 프론트엔드
• · 2023. 3. 2.
• textsms

상태관리 라이브러리 - Mobx 업그레이드 자료조사(Mobx@4 -> @5 vs @6 )

개요 현재 회사에서 사용중인 상태 관리 라이브러리는 Mobx@4 로 Node@14 를 기반으로 세팅되어 있다. 최근 Node 버전을 14 -> 18 로 올리는 중인데, 기존에 사용되던 Mobx 와의 버전이 맞지 않아서 Mobx 도 업그레이드를 진행하게 되었다. Node@18 은 Mobx@5 와 Mobx@6 을 지원하기 때문에 어떤 버전으로 업그레이드 하는 것이 좋은지 자료조사를 하게 되었다. 각 버전별 변경사항 Mobx@5 가장 큰 변화는 Proxy 를 지원하는 것이다. Mobx@6 makeObservable 가장 큰 변화는 기존에 사용되던 decorator 가 deprecated 되어 더이상 사용할 수 없으며, makeObservalbe 메서드를 통해서 class 내부의 프로퍼티 값들을 observab..

• format_list_bulleted 프론트엔드
• · 2023. 2. 20.
• textsms

npm - npm install 시 특정 버전 설치하기

개요 일반적으로 모듈을 설치할 때는 npm install 로 설치를 하게된다. 위의 방식으로 설치를 하게되면, 해당 모듈의 최신 버전(latest)을 설치하게된다. 상황에 따라 특정 버전의 모듈이 필요한데 이때 npm 설치하는 방법을 알아보자. 방법 방법은 굉장히 간단하다. 다음과 같다. npm install @@ 의 의미가 특정 버전을 가리키는 옵션이다. 예제 예를 들어 mobx 5.0.0 을 설치하고자 할 경우 다음과 같다 (mobx의 최신 버전은 2023.02.20 기준으로 6.8.0 이다.) npm install mobx@5.0.0

• format_list_bulleted 프론트엔드
• · 2023. 2. 20.
• textsms

MacOS/맥북 - 터미널에서 VSCODE 열기 (zsh: command not found: code)

개요 개발을 하다보면 터미널에서 해당 레파지토리 에 접근해서 VS CODE 를 여는 경우가 있다. 이때 사용하는 명령어가 code 인데, 맥북을 초기화한 후에 zsh: command not found: code 라고 뜨면서 code 명령어가 동작하지 않았다. 오늘은 해당 사항을 해결하는 방법을 알아보자. 현상 git clone 을 통해 레파지토리를 복사했고, 바로 터미널을 통해 VS CODE 를 열려고 시도했다. ➜ repository git:(main) code . zsh: command not found: code해결 터미널 에서 VS CODE 의 path 가 설정되지 않아서 발생하는 현상이다. VS CODE 에서 path 를 설정해주면 해결된다. VS CODE 에 Path 등록하기 VS CODE 열..

• format_list_bulleted 개발 일반/terminal
• · 2023. 2. 17.
• textsms

MacOS/맥북/M1 - zsh: command not found: nvm 해결하기

개요 brew 를 활용해서 nvm 을 설치했는데 zsh: command not found: nvm 에러가 뜨면서 동작하지 않았다. 해당 내용을 해결하는 내용을 포스팅하겠다. 문제 재현 brew 를 통해 nvm 설치한 후 설치되었나 확인해보았다. nvm -v zsh: command not found: nvm문제 해결 nvm 을 설치할 때 출력 내용을 보면 해결하는 힌트가 있다. Please note that upstream has asked us to make explicit managing nvm via Homebrew is unsupported by them and you should check any problems against the standard nvm install method prior t..

• format_list_bulleted 개발 일반/terminal
• · 2023. 2. 16.
• textsms

MacOS/맥북 - 구글 크롬 북마크 내보내기 및 가져오기

개요 맥북 초기화 이후에도 지금까지 등록했던 북마크 를 그대로 유지하고 싶었다. 구글 크롬 에서 북마크 내보내기 및 가져오기 기능을 지원하고 있어서 해당 기능을 이용해서 손쉽게 북마크를 재등록 하는 방법을 알아보려고 한다. 방법 구글 크롬 브라우저 접속 > 우측 상단의 ... 버튼을 클릭한다. 북마크 > 북마크 관리자 를 선택한다. 북마크 관리자 페이지 > 우측 상단의 ... 버튼을 클릭한다. 위의 버튼을 클릭하면 북마크 가져오기 와 북마크 내보내기 를 확인할 수 있다. 북마크 내보내기 현재까지 등록된 북마크를 파일로 html 파일로 내보내는 기능이다. 사용자가 파일명을 변경할 수 있다. 북마크 가져오기 내보냈던 북마크 html 파일을 가져오면 해당 북마크를 사용할 수 있다. 가져온 북마크를 확인할 수 ..

• format_list_bulleted 생활/맥북
• · 2023. 2. 16.
• textsms