목차1. 프로젝트 세팅2. 실습 스크립트 작성1. 프로젝트 세팅1. 타입스크립트와 프리즈마 설치 및 초기화우선 타입스크립트와 프리즈마를 설치해줄 거다.npm install typescript ts-node @types/node --save-dev # ts 설치npx tsc --init # ts 초기화npm install prisma --save-dev # prisma 설치npx prisma init --datasource-provider sqlite # prisma 초기화 (sqlite 기반) 프리즈마 버전도 확인할 수 있다. prisma를 초기화 하면 prisma/, prisma.config.ts, env 파일이 생긴다. 이 때 prisma.config.ts 파일도 생성된 걸 확인할 수 있는데, ..

목차1. ORM이란?2. Prisma란?3. Prisma의 작동 흐름1. ORM이란?ORM(Object-Relational Mapping)은 데이터베이스의 테이블을 코드의 객체로 바꿔서 다루는 기술이다.SQL문이 ( SELECT * FROM users WHERE age > 20 ) 이라면,JS 코드로 아래와 같이 작성할 수 있다.const users = await prisma.user.findMany({ where: { age: { gt: 20 } },}); 이러면 Prisma가 SQL을 만들어서 DB에서 가져온다.2. Prisma란?Prisma는 Node.js, TypeScript 환경에서 사용하는 ORM 라이브러리이다.다음 세 가지 역할을 수행한다.구성 요소역할Prisma ClientDB에 쿼리를 ..

1. Chromatic에서 레포 선택 난 이피 프로젝트 추가하고 레포도 선택했는데 ACCOUNTS에 안뜨면 Check your permissions에서 추가하면 된다. 스토리북 선택한다. 이 명령어를 그대로 CLI에 입력한다. 열일하는중.. That's very nice! 배포된 스토리북 chromatic 홈 화면에서 프로젝트와 활동 내역 등을 확인할 수 있다. 여기까지만 하면 스토리를 하나 추가할 때마다 다시 빌드하고 배포해줘야하는데,사람이 스토리만 추가하면 자동으로 빌드, 배포를 해주도록 자동화를 해보자.https://www.chromatic.com/docs/github-actions/#available-options Why Chromatic? • Chromatic docsChromat..

[ 대표 이미지 ]목차1. Vite React에 tailwindcss 설치하기2. 세팅하기 1. Vite React에 tailwindcss 설치하기1. 개요tailiwind v4는 왜이렇게 안되는 걸까Next.js로 리액트 프로젝트를 생성할 때는 tailwindcss를 선택하기만 하면 자동으로 같이 설치해줬는데,Vite로 리액트 프로젝트를 생성할 땐 tailwindcss를 내가 직접 설치해주어야 한다. 이게 생각보다 부드럽게 안풀렸어서 기록해본다.뭐만 하면 다 v4 버전 이후로는 안된다고 하고, 구글링하면 다 이전 버전밖에 없다. 2. 배경pnpm 라이브러리 사용Vite로 React 프로젝트 생성 후, tailwindcss 설치 3. pnpm으로 tailwind 설치하기1. tailwind 설치아래와 같..

목차1. ESLint의 Flat-blahblah2. FlatConfig3. FlatCompat1. ESLint의 Flat-blahblah플젝을 하던 중 prettier를 .prettierrc로 작성해서 ESLint도 똑같이 .eslintrc로 작성했다가 알 수 없는 오류들을 마주했고,이제는 eslint.config.js로 파일을 작성해야한다는 것을 깨달았다.그리고 eslint.config.js에서는 FlatCompat이라는 것을 사용했다. Flat Config System은 ESLint 9 이상에서 도입된 개념이다.공식 페이지를 확인해보니, 정확히는 8부터 슬슬 준비하다가 9에서 잘 다듬어서 낸 것 같다.https://eslint.org/blog/2023/11/whats-coming-in-eslint-9..

목차1. Prettier란?2. Prettier 세팅하기3. 문제 생겼던 거 : bracketSpacing1. Prettier란?코드의 스타일을 일관되게 유지할 수 있도록 수정해주는 코드 스타일링 도구이다. 2. Prettier 세팅하기Prettier 세팅 단계를 나눠보자.필요한 패키지 설치하기필요한 문서 작성/수정하기.prettierrc.prettierignoreeslint.config.mjs.vscode/settings.json와우. 차근차근 해보자. 1. 필요한 패키지 설치하기npm install --save-dev prettiernpm install --save-dev eslint-config-prettier eslint-plugin-prettier패키지명패키지 역할prettier쓸려면 설치co..

목차1. ESLint란?2. ⚙️ ESLint 설치 및 기본 설정3. 🔗 Prettier 설치 및 ESLint와 연동4. 📂 설정 파일 작성 (eslint.config.js)5. 🤖 Husky + lint-staged로 커밋 전 자동 검사 설정1. ESLint란?ESLint는 JS/TS 코드에서 문법 오류, 스타일 위반, 버그 가능성 등을 사전에 감지하는정적 분석 도구(linter)이다. ESLint를 프로젝트에 적용하는 과정을 알아보자.⚙️ ESLint 설치 및 기본 설정 (+플러그인 추가)🔗 Prettier 설치 및 ESLint와 연동📂 설정 파일 작성 (eslint.config.js)🤖 Husky + lint-staged로 커밋 전 자동 검사 설정 2. ⚙️ ESLint 설치 및 기본 설..

https://fonts.google.com/ Browse Fonts - Google FontsMaking the web more beautiful, fast, and open through great typographyfonts.google.com 목차1. Google Fonts란?2. 사용해보기1. Google Fonts란?Google이 제공하는 웹 폰트 라이브러리 및 API 서비스로, 다양한 무료 글꼴을 웹사이트나 앱에서 쉽게 사용할 수 있게 해주는 플랫폼이다. 웹페이지 들어가보면 저렇게 폰트들을 확인할 수 있다.필터를 적용해서 찾을 수도 있고, 왼쪽 사이드바 보면 폰트 뿐만 아니라 아이콘 다운도 가능한 걸 확인할 수 있다. 2. 사용해보기1. 마음에 드는 폰트 선택 후, [Get Font] 클..

목차1. Netlify란?2. 시작하기3. 배포하기1. Netlify란?https://www.netlify.com/ Scale & Ship Faster with a Composable Web Architecture | NetlifyRealize the speed, agility and performance of a scalable, composable web architecture with Netlify. Explore the composable web platform now!www.netlify.com Netlify는 정적 웹사이트와 프론트엔드 웹 앱을 빠르고 쉽게 배포하고 관리할 수 있게 해주는 클라우드 기반 플랫폼이다.= 웹사이트용 호스팅 플랫폼 배포를 쉽게 할 수 있고, 무료 버전으로도 사용이 가..

목차1. 웹팩(webpack)이란?2. 웹팩의 장점3. 주요 구성 요소4. CRA 명령어와 웹팩1. 웹팩(webpack)이란?JavaScript, CSS, 이미지 등 여러 자원(module)들을 묶어 출력 파일(bundle)로 만들어주는 모듈 번들러이다.웹팩은 프론트엔드 프레임워크에서 사용하는 대표적인 모듈 번들러이다. JavaScript, CSS, 이미지 등 여러 자원(module)들을 묶어 출력 파일(bundle)로 만들어주는 모듈 번들러이다.웹팩은 프론트엔드 프레임 과거에는 HTML 태그를 통해 JS 파일을 로드했었다. 이 방식은 아래와 같은 한계점이 있었다.순서에 민감함중복, 네임스페이스 충돌 발생유지보수가 어려움 하지만 현대 웹 앱이 점점 더 복잡해지며 다양한 자원(asset)들을 사용하게 ..

목차1. Storybook이란? 1.1 스토리북 특징 1.2 스토리북 구성2. Storybook 시작하기3. Storybook 사용하기1. Storybook이란?스토리북(Storybook)은 UI 컴포넌트를 독립적으로 개발하고 테스트하도록 돕는 도구이다.비즈니스 로직 및 컨텍스트로부터 분리된 UI 컴포넌트를 만들고 디자인 시스템을 구축할 수 있다.https://storybook.js.org/ Storybook: Frontend workshop for UI developmentStorybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI develop..

목차1. Tailwind CSS란?2. Tailwind 시작하기3. 고급 기능4. 에러 : tailwind 설치 안됨1. Tailwind CSS란?오픈 소스 CSS 프레임워크이다.다른 여러 스타일 프레임워크들과 달리, 미리 만들어진 컴포넌트를 제공하는 것이 아니라, 원자화된 유틸리티 클래스를 제공한다.클래스 이름을 사용하여 HTML 요소에 직접 스타일을 적용하는 방식이다. button여기서 각 클래스명의 의미를 간단하게 살펴보면 아래와 같다.bg-blue-500 : 배경색은 blue 500hover:bg-blue-600 : hover시, 배경색은 bluee 600text-white : 텍스트색은 흰색py-2 px-4 : 상하 0.5rem, 좌우 1rem paddingrounded : 모서리 둥글게장점빠른..