zod HOBBi 프로젝트 리팩토링을 진행중 길어지는 유효성 검사 코드에 어떻게 하면 “가독성 좋게 코드를 구현할 수 있을까?” 생각중에 Zod라는 라이브러리를 사용 및 공부하기 위해 작성해보았습니다. Zod란? Zod는 TypeScript를 위한 스키마 선언 및 검증 라이브러리입니다. 런타임에서 데이터의 타입과 구조를 검증하면서, 동시에 TypeScript 타입을 자동으로 추론해주는 강력한 도구입니다. 주요 특징 TypeScript First 런타임 검증 기본 스키마 타입들 Primitive Types (원시 타입) String 검증 Number 검증 고급 기능들 조건부 검증 선택적 필드 배열 검증 Union Types 검증 방법들 parse() - 예외 발생 safeParse() - 안전한 검증 parseAsync() - 비동기 검증 Zod의 장점 1. 타입 안전성 런타임 검증과 컴파일 타임 타입 추론을 동시에 제공 TypeScript와 완벽한 통합 2. 에러 처리 상세하고 사…

전에 이어서 storybook 배포를 진행해보았다면, CI 구축도 하면 좋을거 같아서 storybook 공식사이트에서 알려준 방법으로 차근차근 시도해 본 경험을 적어봤습니다. 크로마틱을 통한 지속적 배포(CI)하기 이제 프로젝트가 깃허브 저장소에 호스팅 되었으므로 자동으로 스토리북을 배포하기 위하여 지속적 통합(continuous integration, CI) 서비스를 이용할 수 있습니다. GitHub Actions는 깃허브에 내장된 무료 CI 서비스로, 쉽게 자동으로 배포할 수 있도록 합니다. 스토리북을 배포하기 위해 깃허브 액션 추가하기 프로젝트의 기본 폴더에 라는 새로운 디렉토리를 만들고 그 안에 라는 디렉토리를 만들어주세요. 이라는 파일을 아래와 같이 생성해주세요. 스토리북 공식사이트에서 알려준대로 코드를 복사 붙여넣기를 했었다. CHROMATIC_PROJECT_TOKEN 은 전에 배포하였을 때 받았던 토큰값을 사용하면 됩니다. 스토리북(Storybook) 배포하기 G…

HOBBi 스토리북 배포 정적 앱으로 내보내기 스토리북을 배포하기 위해서는 먼저 정적인 웹 앱으로 내보내야 합니다. 이 기능은 이미 스토리북에 내장되어 있으며 미리 구성되어 있습니다. yarn build-storybook을 실행하면 storybook-static 디렉토리에 정적인 스토리북이 생성될 것이며 이를 정적 사이트 호스팅 서비스에 배포할 수 있습니다. 크로마틱(Chromatic)으로 배포하기 스토리북 관리자가 만든 무료 배포 서비스인 Chromatic을 사용하여 안전하게 배포하고 호스팅 할 수 있습니다. 자기가 하고 싶은 레포를 선택하면됩니다. Library View Storybook을 누르시면, storybook - Storybook 볼 수 있습니다. npm run chromatic 으로 하면 배포됩니다. CHROMATIC_PROJECT_TOKEN 은 .env 파일에 넣어줬습니다. 참고 스토리북 공식문서 배포 강기봉의 현란한 날갯짓 블로그 크로마틱 배포 정적 앱으…

Storybook의 핵심 개념 컴포넌트 단위 개발 Storybook은 UI 컴포넌트 하나하나를 “Story”라는 단위로 분리해서 개발합니다. 각 Story는 컴포넌트의 다양한 상태(예: 버튼의 크기, 색상, 비활성화 등)를 독립적으로 보여줍니다. 실시간 미리보기 & 테스트 Storybook UI에서 각 Story를 클릭하면, 해당 상태의 컴포넌트를 실시간으로 미리보고, 조작(Props 변경)하며 테스트할 수 있습니다. 문서화 각 Story는 자동으로 문서화되어, 디자인 시스템, 개발자 문서, QA 가이드 등으로 활용할 수 있습니다. Storybook의 주요 기능에는 뭐가 있을까? Stories 컴포넌트의 다양한 상태/조합을 코드로 정의합니다. 예시 Controls (Args/ArgTypes) Storybook UI에서 props(Args)를 실시간으로 조작할 수 있습니다. argTypes로 props의 타입, 설명, 컨트롤 타입(슬라이더, 드롭다운 등)을 지정할 수 있습니다. Do…

Next.js 공식 문서입니다. HOBBi 프로젝트를 진행하면서 Next.js에 대해서 깊게 학습하고 사용해보기로 했었습니다. 사실 Next.js 13버전은 사용해봤지만, 15버전은 얼마나 다를까 하다가 공부한 내용을 정리해 봅니다. Next.js 15 기존에 app router 기법은 비슷한거 같았고, 기존에 app 폴더안에 이런식으로 폴더를 만들면 endpoint/abc 이런식으로 라우팅이 작동합니다.(주의할 점으로는 폴더안에 파일을 만들어야한다는 점) 그리고 공용 UI가 있을 경우 을 사용하면 좋을꺼 같다고 생각했습니다. next.js는 layout 안에 page가 작동하는 방식. 상위폴더의 layout.js 안에 하위폴더의 layout.js를 담아서 보여줍니다. layout 사용하면 좋은점 페이지 이동 시 state 보존합니다. 인터랙티브한 요소들은 유지되며 리렌더링이 되지않음 Dynamic Routes Dynamic Routes http://localhost:300…

Next.js 15 설치 next.js 에서 eslint + prttier + husky + lint-staged 우선 VSCode에서 prettier 확장 프로그램을 설치하는 것이 좋다. prttier 해당 프로젝트에서 파일을 만들고 규칙을 넣어주면된다. eslint next.js를 설치하면 eslint 사용하는 구분에 yes 하면 파일 만들어짐. eslint는 이제 8 → 9버전으로 업그레이드되면서 포맷팅 기능을 없앤다고 공식문서에 나와있음 하지만 여전히 9번저에서도 포맷팅 기능이 가능하지만, 언젠간 사라지니깐 분리를 해놓긴 해야 함. eslint-config-prettier : eslint와 prettier 충돌을 방지하기 위해서 설치✅ eslint-plugin-prettier : eslint에서 prettier 실행하는 명령어인데 이제 필요 없어짐❌ husky 초기화를 진행하면 해당 프로젝트 최상위 루트에  디렉토리가 생성되고 에  스크립트가 자동으로 추가된다. 참고로 …

Why? The Odin Project를 하면서 grid 와 flex에 대해서 나왔는데 개발을 하면서 display에 대한 배치를 정확하게 생각해 본 적은 없었지만, 과제를 하면서 grid 와 flex를 상황에 맞게 언제 사용해야 할지 의문점이 들어서 글을 남겨보려 한다. The Odin Project CSS Grid vs FlexBox 일단 grid와 flex에 차이점에 대해서 알아볼 필요가 있다. 차이점 Flex Box 1차원 레이아웃용으로 설계된 Flexbox는 단일 축(가로 또는 세로)을 따라 항목을 정렬한다. 컨테이너 내의 공간을 분배하고 품목을 한 방향으로 정렬하는 데 이상적이다. CSS Grid 2차원 레이아웃을 위한 CSS 그리드를 사용하면 열과 행을 동시에 제어할 수 있다. 따라서 두 축을 따라 정렬해야 하는 보다 복잡한 레이아웃에 적합하다. 각각의 사용시기 Flex Box 항목을 한 방향(행 또는 열)으로 정렬할 때 더 간단한 구성 요소 수준 레이아웃. CSS G…

1. Material Theme & Material Icon Theme 두개의 익스텐션을 설치해줍니다. Material Theme 사용법 원하는 색상을 골라 선택해주면 vscode 테마 색상을 바꿀 수 있습니다. (code를 오래보고 있으면 눈아프니 어두운 색상으로 해주시면 👍) Material Icon Theme 사용법 폴더 아이콘 테마도 사진과 같이 바꿀 수 있습니다. 2. Prettier 코드를 정해진 규칙에 맞춰 이쁘게 포맷팅 해주는 익스텐션입니다. → prettier 검색 → Tab Width 2 , Single Quote 체크 → format on 검색 → format on save 체크해주시면 됩니다. 간혹 prettier가 적용이 안되거나 하는 경우에는 Default Formatter 확인해보면 null 이거나 설정이 잘못되어 있는 경우가 있기 때문에 prettier로 설정해줍니다. 3. ESLint 문법 에러나 버그를 찾아주는…

1. 기본 개발 환경 세팅 & 터미널 설정 1. homebrew 구버전 삭제 위의 커맨드 실행시 /usr/local/bin/brew 가 출력되었다면 이미 설치되어 있는 것입니다. 삭제하려면 를 실행해주세요. 2. homebrew 설치 실행 후 설치가 완료되면, 이라는 문구와 함께 각각 , 로 시작하는 커맨드가 두 개 안내될 것입니다. 모두 실행해주시면 됩니다. 후에 brew install로 node, yarn, zsh 을 깔아줍니다. 3. iterm2 설치 iterm2 설치로 들어가서 다운로드를 해줍니다. iTerm2 을 실행 시켜 을 눌러 원하는데로 설정을 해주시면됩니다. 4. ohmyzsh 설치 ohmyzsh 설치 5. 폰트 저의 폰트는 fira-code를 사용합니다. font의 다운 받은 Fira Code 를 설정해줍니다. 6. 테마 iterm 테마 색상에 들어가셔서 원하는 테마 색상을 저장을 해줍니다. 으로 설정에 들어가셔서 다운받은걸 import 해주시면 됩니…