![]()
React.FC와 React.ReactNode는 React에서 각각 다른 목적을 가진 타입입니다. 두 타입의 차이를 이해하면 타입스크립트로 React 애플리케이션을 개발할 때 보다 명확하게 타입을 지정할 수 있습니다.React.FC (React.FunctionComponent)설명: React.FC는 함수형 컴포넌트를 정의할 때 사용하는 타입입니다.용도: 컴포넌트의 props 타입을 지정하고, 해당 컴포넌트가 React 요소를 반환한다는 것을 명시합니다.특징:제네릭 타입으로 Props의 타입을 지정할 수 있습니다.기본적으로 children 프로퍼티를 포함하고 있습니다.컴포넌트의 반환 타입이 ReactElement임을 명시합니다.예시:import React from 'react'; interface MyC..
![]()
Q1 yarn berry 적용법yarn berry 도입에 대한 질문이 있습니다.점차 개발 폴더들이 많아 지면서 용량을 많이 차지하기 시작했습니다.여기서 가장 크게 용량을 반복적으로 차지하는 것은 node_modules 입니다.그래서 yarn berry 를 도입하려고 합니다.방법을 순차적으로 알려주세요.A1Yarn Berry(또는 Yarn 2)는 node_modules 폴더를 제거하고 패키지 종속성을 효율적으로 관리하는 데 도움을 줍니다. 이는 프로젝트의 용량을 줄이고 성능을 개선하는 데 유리합니다. Yarn Berry를 도입하는 방법을 순차적으로 설명하겠습니다.1. Yarn 설치 확인먼저, Yarn이 시스템에 설치되어 있는지 확인합니다. 터미널에서 다음 명령어를 실행해보세요:yarn --versionYa..
![]()
next font 와 tailwind 로 모노레포에 폰트 적용하기모노레포 구성은 다음과 같은 상황입니다. /apps/admin => nextjs app/apps/invitation => nextjs app/apps/www => nextjs app/apps/storybook => storybook app/packages/config-tailwind => 테일윈드 공용 설정들 모여 있는 곳/packages/shared => 공용 컴포넌트 디렉토리(nextjs 아님) 이때 같은 폰트들을 각 app 들이 모두 사용합니다.처음에 생각한 것은 shared 에만 폰트를 설정하고각 app 에서 임포트 해서 쓰는 방법이었는데shared는 nextjs가 아니어서 next font를 사용할 수 없었습니다. 또한 storyb..
![]()
pnpm 설치가 중복으로 되어서..쓸데없이 시간을 잡아먹은 부분을역시 GPT o1쌤과 함께 해결해봤고 이 내용을 정리합니다..알겠습니다. npm uninstall -g pnpm 명령어가 제대로 작동하지 않는다면, 몇 가지 이유가 있을 수 있습니다. 다음 단계를 통해 문제를 해결해보세요.pnpm의 설치 방법 확인하기:Homebrew를 통해 설치된 경우:위 명령어를 실행했을 때 pnpm이 나열된다면 Homebrew를 통해 설치된 것입니다.brew list pnpmpnpm이 npm을 통해 설치되지 않았을 수 있습니다. 예를 들어, Homebrew나 다른 패키지 매니저를 사용하여 설치했을 수 있습니다.Homebrew를 통해 pnpm 제거하기:brew uninstall pnpm만약 pnpm이 Homebrew로 설..
![]()
새로 나온 chatGPT-o1 에게 ISR 에 관해 물어봤습니다.revalidatePath 를 통해 데이터가 업데이트 되면 메인페이지를 ISR 하도록 하였습니다.이것이 next.js 에서 적용되는 원리와 과정에 대해 물어보았습니다.GPT 쌤의 답변당신은 Next.js 14 프로젝트에서 App Router를 사용하고 있으며, 라우트 핸들러 내에서 revalidatePath 함수를 구현하여 서버 데이터가 업데이트될 때 Incremental Static Regeneration(ISR)을 트리거했습니다. 이 메커니즘은 전체 재빌드나 수동 개입 없이도 정적으로 생성된 페이지가 최신 데이터를 반영하도록 보장합니다. 이제 이것이 어떻게 작동하는지 원리와 과정을 자세히 살펴보겠습니다.Incremental Static ..
![]()
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 등으로 적용 ..
![]()
부트캠프를 수료했습니다. 저는 원래 미술 중에서도 순수미술을 하던 사람이었습니다. 캠프를 통해 여러가지 배움을 얻었고, 당연히 코딩 스킬도 많이 상승되었지만제가 가장 크게 배우고 얻은 점은 이 개발 세계가 정말 매력적인 곳임을 깊이 알게되었다는 것입니다. 과정을 통과하며 컬쳐핏을 개발보다도 많이 강조받았는데이런 부분에서 저는 이 세계가 제가 가야할 곳이라고 확실히 알게 되었습니다. 한편으로 제가 있던 미술계의 평균적인 컬쳐핏 수준이 정말정말 개판이었기 때문에개발자들의 문화가 더욱 사랑스럽게 느껴지는 것 같기도 합니다. 컬처핏이 어쩌면 가장 중요할 수 있다는 점을다시한번 깨닳았다는 내용을 캠프 마지막 TIL 로 정리하고자 합니다. 짧은 소회였습니다 ㅎㅎ내일 부터 다시 달리자~~~
![]()
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..
![]()
모바일에서 테스트해야만 할때개발을 하다보면 모바일에서 직접 보고 싶을때가 있습니다. 그럴때는 자신의 와이파이 IP 를 알아낸 뒤모바일기기에서 localhost:3000 대신192.168.xx.xx:3000 으로 접속하면 됩니다. 그런데 해당 상황에서 nextjs 라우트핸들러를쓰거나 뭐 하면 fetch 가 다 실패하게 됩니다. 왜냐하면 localhost:3000으로 잡혀있는데날라오는곳은 192.168.xx.xx 여서 그런것 같습니다. 예를들어 로그인 시 api/auth/login 으로 날린다~ 라면이 요청이 실패하게 되고 loaded failed 등의 에러가 잡힐 것입니다. 이럴때 임시적으로 대처할 수 있는 방법을 찾았습니다.package.json 수정방법은 간단했습니다.package.json 에 아래와 ..
![]()
문제상황오늘은 캐러셀을 만들다가 유저가 반복적으로 이전, 이후를 클릭할 경우에 캐러셀 자동 넘어가기 기능을 재개하는 시점을 어떻게 잡아야 할 것인지에 대한 문제에 봉착했습니다. 캐러셀은 좌 우 로 직접 넘겨볼 수 도 있고, 가만히 놔두면 자동으로 넘어가기도 하게끔 만들고 싶었는데,자동으로 넘어가다가 유저가 좌 우를 클릭하여 개입할 경우에 문제가 발생했습니다. 단순히 좌 우를 유저가 클릭하면 requestAnimationFrame(이하 rAF) 을 cancel 하고, setTimeout 을 이용해 5초 뒤에 다시 rAF 를 실행하게 하였는데, 그러자 클릭할 때마다계속해서 rAF 가 실행되어 결국 stack overflow 엔딩이 될 것이 명백했습니다. 생각한 해결책생각한 해결책으로는, 유저가 좌, 우를 ..
![]()
오늘은 전 팀원님과 지난 팀프로젝트 코드 리뷰를 진행했습니다! 꽤나 시간이 걸렸지만 한 줄 한 줄 이야기 나누면서 이해도도 높아지고 함께 코딩한다는 것이 어떤 느낌인지도 확실히 알 수 있었습니다. 그 과정에서 내 코드를 돌아보며, ' 좋은 함수' 란 무엇인지에 대해 되새겨 보았습니다. 특히, 함수 보다 상위 스코프에서 정의된 변수를 사용할 경우, 함수 실행시 해당 상위 변수를 파라미터에 넣어서 쓰는게 좋은지, 아니면 그냥 상위 변수를 참조해도 되는지가 명확하지 않았습니다. 그래서 '좋은 함수'에 대해 다시한번 되짚어 보았습니다. 1. 순수 함수 (Pure Functions): 가능하면 순수 함수를 사용하는 것이 좋습니다. 순수 함수는 동일한 입력에 대해 항상 동일한 결과를 반환하며, 외부 상태를 변경하지..
![]()
첫 WIL 을 작성해보려고 합니다. 캠프 첫 주차를 무사히 통과했고, 배운 것이 참 많은 한 주 였습니다. (사전캠프 때부터 함께하긴 했지만)새롭게 만난 팀원들과 함께프로젝트를 진행하는 것이 쉽지많은 않았던 것 같습니다. 전공자 분들이 계셨지만, 프론트엔드 팀프로젝트는 모두 처음이셔서 하나하나 찾아보고 배우면서 진행해야 했기 때문입니다. 하지만 우리 팀은 케미(?)가 잘 맞았고, 금요일 쯤에는 흩어지는게 아쉬워서수업 종료 이후에도 모두가 남아 계속 이야기를 이어갈 정도로 팀워크가 좋았습니다. [github]1주일을 돌아보면, 우리가 가장 어려워했던 것은 github을 이용한 협업과정 이었습니다.명령어와 동작을 하나하나 이해하고, 알아가게 된 뒤에도 병합상황 등에서 뜻대로 되지..
![]()
오늘 첫 팀 프로젝트를 완료하고 발표까지 마쳤습니다! KPT 에 의거하여 회고를 작성해보려고 하니다. 먼저 K(Keep - 현재 만족하고 있는 부분) 로는, 1. 팀원 분들과의 협업 프로세스가 안정적으로 잘 진행되었다고 생각합니다. 2. 역할 분담 역시 자연스럽게 효율적으로 잘 이루어 진 것 같습니다. 다음으로 P(Problem - 문제라고 생각되는 부분) 로는, 1. 다른 팀의 발표를 보며, 디자인의 중요성을 다시한번 느꼈습니다. 2. readme 작성도 중요한 부분임을 배웠습니다. 3. crud 에서 auth 는 반드시 필요한 것임을 배웠습니다. 마지막으로 T(Try - 해결책) 로는, 1. 프론트엔드에서 디자인이 차지하는 부분이 정말 크다는 것을 체감했고, 디자인을 직접 해야하는 상황이라면, 전체 ..
![]()
오늘은 팀원분들과의 팀프로젝트 마지막 날이었습니다. 거의 하루종일 git & github 때문에 어려웠던 날이었습니다. ㅜ. ㅜ 우리는 각각 branch 를 나눠 작업하고 main 에 병합하는 방법으로 진행해보기로 했는데, 아직 익숙하지 않다보니 계속 에러와 마주쳤습니다. 특히 pull, merge 등 병합 상황에서 conflict가 발생했을 때 충돌 부분을 수정하는 것이 무언가 아직은 부담스럽고 어렵게 느껴졌습니다. 그러나 어려움 끝에 각각 작업한 결과들을 main에 성공적으로 병합할 수 있었고 시간 내에 프로젝트를 완성하였습니다. 물론 여러가지 부족한 점이 많지만 첫 팀프로젝트를 무사히 완료한 것에 뿌듯함을 느낍니다. 마지막으로 오늘 겪었던 git 문제 해결 상황을 정리합니다. ■ 개인branch 에..
![]()
오늘도 팀원들과 함께 팀프로젝트를 진행하였습니다. 바닐라 환경(?) 그러니까 아무것도 없는 폴더에서 시작하여 html 마크업부터 하고, js, css 작성 및 연결하는 상황인데, 오늘의 문제는 env 사용시 마주친, "process is not defined" 였습니다... vite 혹은 react, next 프로젝트에서는 env사용시 클라이언트에서도 NEXT_PUBLIC 등을 붙여주면 접근이 가능했는데, 바닐라 환경(?)에서는 계속해서 process 에 접근하지 못하는 문제가 있었습니다. // 문제가 된 코드 const request = await fetch( `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${long}&appid=${..
![]()
첫 TIL 을 작성해보겠습니다. 어제 오늘, 팀원 분들과 계속 소통하면서 첫번째 프로젝트를 완성시켜 나가고 있습니다. 혼자서만 외롭게 써오던 github를 새롭게 만난 팀원분들과 함께 협업으로 사용하니 매우 신기합니다. 이 과정에서, 정확하고 매너있는 소통이 정말 중요한 덕목임을 다시 한번 배우는 시간이 되고 있습니다. 협업을 통해 자연스럽게 배우는 것이 정말 많은 것 같습니다. 오늘만 해도 git 과 github 의 여러 명령어들과 씨름하면서 branch 의 개념, stage와 commit 의 차이 pull 과 push 등에 대해 깨닫는? 시간이 되었습니다. 궁금한 것은 pull request 및 merge 에 대한 것인데, 내일 더욱 학습해보려고 합니다. 또한 내일부터는 오늘배운 TIL 작성가이드를 ..
