전체 글

zod는 TypeScript와 JavaScript에서 사용할 수 있는 스키마 선언 및 검증 라이브러리입니다. zod를 사용하면 객체, 배열, 숫자, 문자열 등 다양한 데이터 구조를 스키마로 정의하고, 이를 기반으로 데이터의 유효성을 검증할 수 있습니다. 이를 통해 타입 안정성과 런타임에서의 데이터 검증을 동시에 수행할 수 있습니다.왜 zod를 사용하는가?타입 안전성: zod는 TypeScript와 자연스럽게 통합되어 스키마에서 정의한 데이터 구조에 대해 TypeScript 타입을 자동으로 추론합니다.런타임 검증: TypeScript는 컴파일 타임에서만 타입을 검사합니다. zod는 런타임에서도 데이터가 올바른지 확인할 수 있어, API 응답이나 폼 입력 데이터를 검증할 때 유용합니다.간편한 사용법: zod..

turborepo 로 monorepo 구성하기(with pnpm)1) turbo 테일윈드 템플릿으로 monorepo 생성하기pnpm dlx create-turbo@latest --example with-tailwind2) apps/storybook 에 storybook 설치하기cd appsmkdir storybookcd storybookpnpm dlx storybook@latest init3) packages/ui > packages/shared 로 변경이때 package.json 의 "name" 도 꼭 수정해주어야 함각 app 폴더의 next.config.js 도 수정해주어야 함검색에서 /ui 검색후 나오는 것 모두 /shared 로 변경4) apps 폴더 원하는대로 바꾸고, lock파일 삭제후 다시 ..

turborepo 로 monorepo 구성하기(with pnpm)1) turbo 테일윈드 템플릿으로 monorepo 생성하기pnpm dlx create-turbo@latest --example with-tailwind2) packages/ui 에 storybook 설치하기cd packages/uipnpm dlx storybook@latest init3) apps 폴더 원하는대로 바꾸고, lock파일 삭제후 다시 pnpm installrm pnpm-lock.yamlpnpm install4) apps 폴더 하위의 각 app 폴더의 package.json 수정"scripts": { "dev": "next dev --port 3001", // --port 3001, ---port 3002 등으로 적용 ..

이 오류는 React의 Hydration 과정에서 발생하는 문제로, 서버에서 렌더링된 HTML과 클라이언트에서 렌더링된 HTML이 일치하지 않을 때 발생합니다. 주어진 상황에서 오류가 발생하는 원인으로는 다음과 같은 가능성을 고려할 수 있습니다:1. 비동기 렌더링클라이언트 컴포넌트 EveryWorks의 map 함수 내에서 async 함수를 사용하고 있습니다. map 함수 내에서 비동기 작업을 처리하게 되면, React는 서버와 클라이언트 간의 UI가 일치하지 않는다고 인식할 수 있습니다. map 함수 내에서 async를 사용하는 것은 권장되지 않습니다.해결 방법:blurredImages는 이미 서버 컴포넌트에서 비동기 처리로 생성되었기 때문에, 클라이언트 컴포넌트에서는 추가적으로 비동기 처리를 하지 않는..

부트캠프를 수료했습니다. 저는 원래 미술 중에서도 순수미술을 하던 사람이었습니다. 캠프를 통해 여러가지 배움을 얻었고, 당연히 코딩 스킬도 많이 상승되었지만제가 가장 크게 배우고 얻은 점은 이 개발 세계가 정말 매력적인 곳임을 깊이 알게되었다는 것입니다. 과정을 통과하며 컬쳐핏을 개발보다도 많이 강조받았는데이런 부분에서 저는 이 세계가 제가 가야할 곳이라고 확실히 알게 되었습니다. 한편으로 제가 있던 미술계의 평균적인 컬쳐핏 수준이 정말정말 개판이었기 때문에개발자들의 문화가 더욱 사랑스럽게 느껴지는 것 같기도 합니다. 컬처핏이 어쩌면 가장 중요할 수 있다는 점을다시한번 깨닳았다는 내용을 캠프 마지막 TIL 로 정리하고자 합니다. 짧은 소회였습니다 ㅎㅎ내일 부터 다시 달리자~~~

내배캠 수료짧다면 짧고 길다면 긴 부트캠프가 내일이면 끝납니다.til 은 계속 해서 작성할 예정이고기존에 작성했던 것들은 분류작업을 해보려고 합니다.시원섭섭합니다.supabase.rpc내배캠 막바지에 supabase.rpc 라는 메서드를 사용할 일이 있었습니다.sql 을 몰라서 생소한 기능이었는데 gpt 쌤에게 물어본 내용을 정리합니다. Supabase에서 supabase.rpc 메서드는 PostgreSQL의 저장 프로시저(Stored Procedure) 또는 사용자 정의 함수(User-defined Function)를 호출하는 데 사용됩니다. 이를 통해 복잡한 로직을 데이터베이스 내에서 실행하고, 결과를 가져올 수 있습니다.1. 함수 생성먼저 PostgreSQL에서 함수를 생성해야 합니다. 예를 들어,..

openai api 로 이미지 생성 후 supabase 에 쓰기(route handler)대략 아래와 같이 하면 됩니다.근데 한번 생성할 때 마다 돈나가고 10달러 충천해놔야 합니다.if (!tripImageFile && mode === 'new' && tripData) { const openai = new OpenAI({ apiKey: OPEN_AI_SECRET_KEY, }); // [서울/경기, 서울시] 이런 값입니다 대충 const [continent, country] = tripData.trip_final_destination?.split(' ') || []; // OpenAI를 사용하여 이미지를 생성 const imageGeneration = a..

tailwind-merge 라이브러리import { clsx, type ClassValue } from 'clsx';import { twMerge } from 'tailwind-merge';export function tailwindMerge(...inputs: ClassValue[]) { // clsx를 사용하여 입력된 모든 클래스네임을 결합하고, // 이를 twMerge에 전달하여 최종 병합된 클래스네임을 반환합니다. return twMerge(clsx(...inputs));} 간단히 위처럼 사용할 수 있습니다.GPT 쌤의 자세한 설명을 첨부합니다.clsx와 twMerge를 함께 사용하여 tailwindMerge 함수를 구현하면, 이 함수는 clsx만을 사용하는 경우보다 더 강력하고 ..

scrollIntoView이 좋은 걸 몰랐다니..요소를 뷰포트 내에 보이도록 자동 스크롤해주는 기능이라고 합니다.. 아래 예시에서는 div 의 아래에 버튼들이 있고인덱스를 state 로 관리하는 상황인데요. 인덱스가 변할 때 마다 useEffect 가 실행되고자동으로 인덱스에 해당하는 버튼이 화면의 중앙에 오게 됩니다. 많이 써먹을 것 같습니다!useEffect(() => { if (scrollRef.current) { const selectedButton = scrollRef.current.children[ selectedIndex ] as HTMLElement; if (selectedButton) { se..

당겨서 새로고침을 막고싶을 때모바일 버전 개발을 하다보면당겨서 새로고침이 되는 것이 매우 귀찮습니다. 특히 화면내에서 드래그 해야하는 요소들이 있을 때자꾸만 새로고침 되어서 짜증납니다. 그래서 방법을 찾아 보았습니다.역시 방법이 있었고요.. 전에는 div 같은 걸로 감싸서 높이를 제한하고 뭐 어쩌고 했던것 같은데그냥 간단하게 해결하는 방법이 있었습니다. 검색해보면 body 에다가 넣든지 html 에다 넣든지 하라고하는데저는 특정페이지에서만 막고 싶어서아래처럼 해보았습니다. useEffect(() => { document.documentElement.style.overscrollBehavior = 'none'; return () => { document.documentElement...