far

Next.js에서 string인 경우와 File인 경우를 나눠야 해서 instanceof File이라고 작성을 했더니 잘 돌아가길래 이게 왜 런타임 환경에서 돌아가는걸까? 라는 생각이 들어 알아봤다.1. TypeScript는 컴파일 시점에만 존재한다일반적으로 interface나 type등 타입스크립트는 컴파일 시점에만 타입 정보를 활용하고, 컴파일 후 전부 사라지고 자바스크립트 코드만 남는다.// 컴파일 전interface User { id: number; name: string;}function getUser(user: User): void { console.log(user.name);}// 컴파일 후"use strict";function getUser(user) { console.log(u..

1. Query-KeyQuery-Key란?Query-Key는 쿼리를 고유하게 식별하기 위한 키로, 데이터를 캐싱하거나 새로고침할지, 캐시에서 데이터를 사용할지를 결정한다. 보통 배열 형태로, 리소스 이름과 파라미터를 포함하여 사용한다. 예를 들어, ['todos', userId]처럼 설정할 수 있다.Next.js 서버사이드에서의 Query-Key 사용서버에서 Query-Key를 설정해 데이터를 미리 가져오고, React Query가 이를 캐싱해 활용할 수 있다.// app/layout.tsximport { ReactQueryProvider } from './_providers';import './globals.css';export default function RootLayout({ children,}..

1. 시간 복잡도란?시간 복잡도는 알고리즘이 실행되는 데 걸리는 시간을 데이터 크기와 관련하여 수학적으로 표현한 것이다. 이를 통해 코드가 얼마나 효율적으로 작동하는지 예측할 수 있다. 시간 복잡도는 일반적으로 데이터 크기(n)에 따라 알고리즘이 수행해야 하는 연산의 횟수를 나타낸다.2. 빅오 표기법시간 복잡도를 표현할 때 주로 사용하는 방법이다. 최악의 경우 실행 시간을 표현하며, 특정 알고리즘이 대규모 데이터에서도 얼마나 잘 작동하는지 평가하는 데 사용된다. O(1) - 상수 시간O(1)은 입력 데이터 크기와 관계없이 항상 일정한 시간 내에 실행된다. 즉, 몇 개의 데이터가 들어오든지 간에 같은 실행 시간이 걸린다. 상수 시간 복잡도를 가지는 알고리즘은 일반적으로 데이터에 접근하거나 단일 계산을 수행..

원래 회사에서 main - develop - feature라는 단순한 브랜치 모델을 사용 했었는데, 몇달 전에 git flow를 도입했다. 그에 대한 내용을 정리해보려고 한다. 0. 왜 Git flow를 도입하게 되었는가?단순 브랜치 모델을 사용했던 이유는 팀이 작아서 간단한 브랜치 구조로도 관리가 쉬웠기 때문이다. 하지만 팀원이 늘어나면서 기능을 병행해서 개발할 때 복잡한 충돌이 날 가능성이 있고, 장기적으로 봤을 때 git flow를 사용하는게 더 좋지 않겠냐는 제안을 받아 git flow를 사용하게 되었다.1. Git Flow와 브랜치 전략Git flow는 기능 개발, 버그 수정, 릴리즈 준비 등을 체계적으로 관리하기 위한 브랜치 모델이다. 주요 브랜치는 다음과 같다.main (master): 배포..

0. 순환 참조란?순환 참조는 모듈 간의 의존성이 꼬여 있을 때 발생한다. 예시로 아래의 코드처럼 Cart 모듈이 User 모듈을 의존하고, User 모듈이 다시 Cart 모듈을 의존하는 경우 순환 참조가 발생한다. (에러 메세지에 Circular Dependency 관련 에러가 찍힌다.)// cart.module.ts@Module({ imports: [UserModule], providers: [CartService],})export class CartModule {}// user.module.ts@Module({ imports: [CartModule], providers: [UserService],})export class UserModule {}1. 순환 참조를 공통 모듈로 해결위의 Cart..

1. 레이아웃 시프트(Layout Shift)란?레이아웃 시프트는 웹 페이지가 로딩되거나 사용자가 웹과 상호작용하는 동안 배치된 요소들이 예기치 않게 이동하는 현상을 말한다. 이 현상은 사용자가 특정 요소를 클릭하려고 할 때 다른 요소가 갑자기 이동해버려 클릭 미스가 일어나거나, 경우에 따라 산만함을 유발하는 등 사용자 경험에 부정적인 영향을 미친다.2. 레이아웃 시프트는 왜 발생할까?이미지 크기 미지정: HTML에서 이미지의 너비와 높이를 미리 지정하지 않으면, 이미지가 로드되기 전까지 브라우저는 공간을 예약하지 못하고, 이미지가 로드되면서 레이아웃이 바뀌게 된다.비율을 지정하지 않은 비디오/임베드 요소: 비디오나 임베드 요소에 고정된 크기나 비율을 지정하지 않으면, 콘텐츠가 로드된 후에 레이아웃이 변..

Next14 app router로 작성되었으나, React에서도 똑같이 사용 가능하다. 사이트를 이용하다 보면 특정 페이지에서 로그인창으로 가기를 클릭하고 로그인을 하게 된다. 이 때, 로그인 성공시 전에 있었던 페이지로 다시 돌아가게끔 구현되어 있는 경우가 많다. 하지만 로그인 기능이 들어있는 도메인과 로그인 페이지로 이동시키는 기능이 들어있는 도메인이 다른 경우, 이전페이지로 돌아갈 트리거를 공유할 수 있도록 어딘가에 저장해둬야 한다. 나는 여기서 cookie를 사용해 이전 페이지로 돌아갈 트리거를 저장하기로 했다. export const setCookies = (name: string, value: string, days: number, isProduction: boolean) => { let e..

특정 값에 따라서 서로다른 input엘리먼트가 보이는 컴포넌트를 만들던 도중, 한 글자를 입력 할 때 마다 input의 포커싱이 풀리는 현상이 나타났다.대체 왜 그런가 했더니 테스트용으로 외부에 만들어뒀던 Input 컴포넌트가 스코프 내부에 들어있었다.import React, { useState } from 'react';const App = () => { const [inputValue, setInputValue] = useState(''); const InputComponent = () => ( setInputValue(e.target.value)} /> ); return ( input label {/* 이 컴포넌트는 App 컴포넌트가 리렌더링될 때마다..

프로젝트를 하던 도중 로컬 서버에서는 잘 돌아갔는데 production레벨에서 api 통신을 하기만 하면 에러가 발생했다. 처음에는 cors에러인가 싶었는데 그것도 아니었고, 배포시 .env를 잘못 등록했나 싶었는데 그것도 아니었다.이것저것 삽질을 한 결과 Github Action의 빌드창을 확인해봤더니...Cannot get final name for export 'QueryClient' of ./node_modules ......라는 에러가 발생하고 있었다. 이 에러는 React-Query의 QueryClient를 사용중인곳에 'use client'를 붙이지 않아서 생기는 문제인데, 나의 경우 Provider로 사용중인 QueryClient말고 다른곳에 테스트용으로 만들어둔 QueryClient에 '..

이 글은 Next.js 14, App Router를 기준으로 작성되었습니다.Cookie와 도메인쿠키는 기본적으로 생성된 도메인과 서브도메인에서만 사용이 가능합니다. 예를들어 domain.com이라는 도메인에서 domain.com에 대한 쿠키가 생성되는 경우, domain.com과 서브 도메인인 blog.domain.com에서는 사용이 가능하지만 testdomain.com에서는 사용이 불가능합니다. 또한 서브도메인에서 생성된 쿠키는 메인 도메인에서 사용할 수 없습니다. 즉 blog.domain.com에서 생성되는 쿠키는 domain.com에서 사용할 수 없다는 뜻입니다. 그래서 멀티도메인 사용시 domain.com에서 쿠키가 생성되도록 하는게 효율적이라 할 수 있습니다만, 프로젝트 자체가 login.dom..