![]()
Math.sin, cos, tan이전에 작성했던 Three.js 코드 중에 이해가 안되고 넘어간 부분이 있어 정리합니다.문제의 코드는 다음과 같습니다.// 오브젝트02 서서히 올라갔다 내려갔다octaAnimation() { if (this.objGroup && this.objGroup.getObjectByName('object02')) { const to = this.objGroup.getObjectByName('object02'); if (to) { to.rotation.y += 0.001; to.position.y = -9 + Math.sin(Date.now() / 1000) * 1; } }}그냥 매우 간단한 수학(Math.sin)을 이용한 것이지만바로 이해가 ..
![]()
*임시방편임 pnpm install 시 pnpm-lock.yaml 이 자꾸 바뀔때 pnpm i --frozen-lockfile --no-verify-store-integrity
![]()
문제 분석문자열 s에서 각 문자에 대해 문자 t와의 최소 거리를 구하는 문제입니다. 문자열의 길이는 최대 100으로 제한되므로, O(n^2)의 알고리즘도 사용할 수 있습니다. 다만, 더 효율적인 방법을 찾을 수 있다면 좋습니다.풀이법 1: 이중 루프 사용const arr = str.split('');let answer = [];for (let i = 0; i 풀이 설명각 문자에 대해 t의 위치를 기준으로 모든 거리 차이를 구합니다.Math.abs(j - i)를 사용해 각 t와의 거리를 배열 distance에 저장합니다.distance 배열에서 최소값을 찾아 answer 배열에 추가합니다.시간 복잡도바깥쪽 루프(for i)는 n번 실행되고, 내부 루프(for j)도 n번 실행되므로, 총 시간복잡도는 O(n..
![]()
Docker는 컨테이너 기술을 활용하여 애플리케이션과 그 종속성을 격리된 환경에서 실행할 수 있도록 해주는 오픈 소스 플랫폼입니다. 이를 통해 개발, 테스트, 배포 과정에서 일관된 환경을 제공하고, “한 번 빌드하면 어디서든 실행 가능”한 형태를 구현할 수 있습니다. 1. Docker의 기본 개념컨테이너(Container): 애플리케이션과 그에 필요한 라이브러리, 종속성을 모두 하나의 패키지로 묶어 격리된 환경에서 실행할 수 있는 단위를 의미합니다. 가상머신과 유사하지만, 컨테이너는 운영체제 수준에서 격리되므로 가상머신보다 더 가볍고 효율적입니다.이미지(Image): 컨테이너를 실행하기 위한 모든 요소(코드, 런타임, 라이브러리 등)를 포함한 읽기 전용 템플릿입니다. 이미지는 컨테이너를 생성하는 기반이 ..
![]()
CD/CDCI/CD는 지속적 통합(Continuous Integration)과 지속적 배포(Continuous Deployment) 또는 지속적 전달(Continuous Delivery)을 의미하며, 소프트웨어 개발 및 배포 프로세스를 자동화하여 코드 품질을 유지하고 더 빠르게 배포할 수 있도록 도와주는 핵심 개념입니다. 실무에서 CI/CD는 보통 버전 관리 시스템(GitHub, GitLab 등)과 연계하여 사용됩니다. 1. CI(Continuous Integration)정의: 개발자들이 각자 작업한 코드를 주기적으로 중앙 저장소에 병합하는 과정. 이때 코드를 병합할 때마다 자동으로 테스트와 빌드가 실행됩니다.목표: 코드가 항상 최신 상태로 유지되고, 각자 개발한 코드가 제대로 동작하는지를 지속적으로 확..
![]()
CORS? SOP?1. SOP(동일 출처 정책, Same-Origin Policy)웹 보안 모델의 핵심으로, 다른 출처의 리소스에 대한 접근을 제한브라우저에서 실행되는 JavaScript가 다른 출처의 API나 리소스에 접근하지 못하도록 함동일 출처의 정의: 프로토콜, 호스트, 포트가 모두 같은 경우 참고링크SOP의 목적: 악의적인 스크립트가 민감한 정보에 접근하는 것을 방지하기 위함2. CORS(교차 출처 리소스 공유, Cross-Origin Resource Sharing)SOP의 제한을 일부 해제하기 위한 보안 정책서버측에서 특정 출처에 대한 접근을 허용할 수 있게 해줌동작방식:클라이언트 측 요청: 요청이 발생할 때 브라우저는 요청이 안전한지 확인하기 위해 CORS 확인서버 측 응답: 특정 클라이언트..
![]()
0. Closure + HOC클로저: 이벤트가 발생할 때마다 이전의 상태를 기억해야 하기 때문에 클로저가 필요. 반환된 함수가 실행될 때마다 클로저를 사용하여 함수 실행여부를 결정할 수 있음고차 함수: 인자로 실행하려는 함수를 받아, 이 함수를 조건에 따라 실행하는 새로운 함수를 반환1. Debouncingtype Debounce = (...args: T) => void;function debounce(func: (...args: T) => void, delay: number): Debounce { let timer: ReturnType | null = null; return (...args: T) => { if (timer !== null) clearTimeout(timer); timer..
![]()
1.Q1: OOP는 Stateful 프로그램에는 적합하지만, Stateless 프로그램에는 적합도가 떨어지는 편인가?A1: ① Stateful과 Stateless의 개념 Stateful 프로그램은 내부에 상태(state)를 유지하며, 그 상태에 따라 프로그램의 동작이 달라집니다. 예를 들어, 은행 계좌의 잔액 정보를 저장하고 그에 따라 입출금 작업을 수행하는 시스템은 상태를 유지해야 합니다. 반면에 Stateless 프로그램은 내부에 상태를 유지하지 않습니다. 즉, 각 요청이나 함수 호출은 이전의 상태에 영향을 받지 않고 독립적으로 처리됩니다. 예를 들어, 단순한 계산기 프로그램은 입력값에 따라 결과를 반환하지만, 내부에 상태를 저장하지 않습니다.A1: ② 객체지향 프로그래밍(OOP)과 Stateful ..
![]()
1. 싱글톤 패턴이란? Zustand 는 싱글톤 패턴?싱글톤 패턴(Singleton Pattern)은 소프트웨어 디자인 패턴 중 하나로, 하나의 클래스에서 단 하나의 인스턴스만 생성되도록 보장하는 패턴입니다. 즉, 애플리케이션 전체에서 특정 클래스의 객체가 오직 하나만 존재하고, 어디서든 이 객체에 접근할 수 있는 전역적인 접근점을 제공합니다. 정의:싱글톤 패턴은 클래스의 인스턴스를 하나로 제한하고, 해당 인스턴스가 전역적으로 사용될 수 있도록 하는 디자인 패턴입니다. 동작 방식:• 클래스 내에 하나의 인스턴스만을 생성하며, 외부에서 해당 인스턴스를 직접 생성할 수 없도록 생성자를 private으로 설정합니다.• 클래스가 처음 호출되면 내부적으로 인스턴스를 생성하고, 이후부터는 동일한 인스턴스를 반환하여..
![]()
자주써도 헷갈리는 parallel routes 와 intercepting routes 로기본적인 modal 만드는 법을 정리해보려고 합니다. 1. Parallel RoutesParallel Routes 는 모달을 만들기 위한 기능은 아닙니다.공식문서에 따르면, Parallel Routes를 사용하면 동일한 레이아웃 내에서 하나 이상의 페이지를 동시에 또는 조건부로 렌더링할 수 있습니다. 대시보드나 피드와 같이 앱의 매우 동적인 섹션에 유용합니다. 예를 들어 대시보드에서 Parallel Routes를 사용하여팀 페이지와 분석 페이지를 동시에 렌더링할 수 있습니다 라고 합니다.만드는 법은 아래처럼 @ 를 붙여서(슬롯이라고 합니다) 폴더를 생성하고 page.tsx 만들면 됩니다.app/ ├─ @moda..
![]()
git config --global --list 실행시뭔가 좀 꼬여가지고 대충 아래와 같이 나오는 상황이었는데credential.helper 를 지우고 싶었습니다...filter.lfs.clean=git-lfs clean -- %ffilter.lfs.smudge=git-lfs smudge -- %ffilter.lfs.process=git-lfs filter-processfilter.lfs.required=truecredential.helper=cachegit config --global --unset credential.helpergit credential-cache exit위 명령어는 글로벌 Git 설정에서 credential.helper 항목을 삭제하고 캐시된 인증 정보도 삭제합니다. macOS 키체..
![]()
supabase 하나의 프로젝트에 여러 배포사이트 OAuth 연결하기supabase 대시보드 > Authentication > URL Configuration 으로 이동Site URL 에는 대표 주소든 뭐든 아무거나 하나 입력하단 Redirect URLs 에 위 Site URL 과 다른, 원하는 주소를 주소/** 형식으로 입력OAuth provider login 코드에 아래 내용 추가const getURL = () => { let url = process?.env?.NEXT_PUBLIC_SITE_URL ?? // 변수명 이거 아니어도 되고 암튼 env에 있는 걸로 process?.env?.NEXT_PUBLIC_VERCEL_URL ?? // vercel 에서 자동으로 생성 'http://..
![]()
여기 에 작성했던 내용중 부족한 내용이 있었습니다.컴포넌트와 값을 반환하는 커스텀 훅 사용시 주의사항을 다시 정리합니다.1. useCallback 사용리렌더링 통제가 어렵습니다.반환할 컴포넌트를 useCallback 처리합니다.function usePreferTheme({ mode }: UsePreferThemeProps) { const [selectedTheme, setSelectedTheme] = useState([]); const handleThemeChange = () => { // setSelectedTheme() 어쩌구 등등.. } // useCallback 사용! const PreferThemeToRender = useCallback(() => { ..
![]()
수파베이스 db 복제하고 싶을때(단 backup.gz 파일 있어야함)0. psql 설치brew install libpqecho 'export PATH="/usr/local/opt/libpq/bin:$PATH"' >> ~/.zshrcsource ~/.zshrc1. zip 해제gunzip path/to/your/file/db_dump.backup.gz2. psql 명령어로 백업 파일 복원하기psql -h 호스트명 -p 포트명 -U 사용자명 -d 디비이름 -f path/to/your/file/db_dump.backup• -h: 호스트 이름 (Supabase에서 제공하는 데이터베이스 호스트)• -p: 포트 번호• -U: PostgreSQL 사용자 이름• -d: 대상 데이터베이스 이름• -f: 복원할 백업 파일의..
![]()
useReducer는 React에서 상태 관리를 위해 사용하는 훅 중 하나로, 복잡한 상태 로직을 보다 체계적으로 관리하고 싶을 때 유용합니다. 특히 상태 변경 로직이 여러 단계로 나누어져 있거나, 상태 업데이트가 명확한 액션에 의해 이루어져야 할 때 사용됩니다. Redux의 상태 관리 방식과 유사하게 리듀서 패턴을 사용하여 상태를 업데이트합니다.useReducer의 기본 구조useReducer는 세 가지 요소를 인자로 받습니다:리듀서 함수: 현재 상태와 액션을 받아서 새로운 상태를 반환하는 함수입니다.초기 상태: 상태의 초기 값입니다.초기화 함수 (선택적): 초기 상태를 더 복잡한 방식으로 설정해야 할 경우에 사용할 수 있습니다.useReducer는 dispatch 함수를 반환하며, 이 dispatch..
![]()
싱글 스레드인 자바스크립트가 어떻게 비동기를 구현합니까?네, 좋은 질문입니다! JavaScript는 싱글 스레드(single-threaded) 언어입니다. 즉, 한 번에 하나의 작업만 처리할 수 있는 실행 스레드를 가지고 있습니다. 그럼에도 불구하고, 비동기 작업을 통해 마치 멀티스레드처럼 여러 작업이 동시에 실행되는 것처럼 보일 수 있습니다. 이는 JavaScript의 런타임 환경, 특히 이벤트 루프(Event Loop)와 콜백 큐(Callback Queue) 덕분입니다.자바스크립트의 비동기 작업 처리는 자바스크립트 엔진(V8 엔진 등)과 이를 실행하는 런타임 환경(브라우저, Node.js 등)의 구조에 의해 가능해집니다.1. 싱글 스레드와 비동기 처리JavaScript는 기본적으로 싱글 스레드로 동작..
![]()
"어쩌구.확장자" 를 "어쩌구_high.확장자" 같은식으로 바꾸고 싶다.jpg 외에도 .png 파일명을 함께 처리하고 싶다면, .replace() 메서드에서 정규식을 사용하여 .jpg와 .png 둘 다를 한 번에 처리할 수 있습니다.예시:const fileName = "1727585085748_IMG_7877.jpg"; // 또는 "1727585085748_IMG_7877.png"const highFileName = fileName.replace(/\.(jpg|png)$/i, '_high.$1');console.log(highFileName); // 출력: 1727585085748_IMG_7877_high.jpg 또는 1727585085748_IMG_7877_high.png설명:\.(jpg|png)$..
![]()
cn : tailwind-merge 와 clsx를 결합한 유틸리티 함수import { clsx, type ClassValue } from "clsx";import { twMerge } from "tailwind-merge";export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs));} 이런 유틸리티 함수를 찾았는데아주 유용해 보였습니다. 그런데 이전 프로젝트에서 twMerge 함수만으로도clsx 없이 유사하게 썼던 기억이 있어서차이점에 대해 다시 짚어봤습니다. 결론은위처럼 cn (이름이야뭐,,,) 함수를 쓰는 것이clsx 의 여러 기능도 사용하면서 tailwind 유틸리티 클래스들을효과적으로 병합할 수 있는 좋은 방법이다였습니다..
![]()
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 엔딩이 될 것이 명백했습니다. 생각한 해결책생각한 해결책으로는, 유저가 좌, 우를 ..
