heyday2024 님의 블로그

1. Next.js error.tsx에서 "use client" 필수임.문제: Next.js에서 error.tsx가 비어 있어도 "use client"를 명시하지 않으면 yarn dev 실행 시 에러 발생.이유:error.tsx는 기본적으로 서버 컴포넌트(Server Component)로 동작.하지만 클라이언트에서 렌더링해야 하는 특정 작업(예: 상태 관리나 브라우저 API 사용)이 포함될 가능성이 있는 파일은 클라이언트 컴포넌트(Client Component)로 선언 필요.빈 파일일지라도 Next.js는 명시적 선언을 요구함으로써 코드 의도를 명확히 하고, 클라이언트-서버 간 동작을 혼동하지 않도록 방지.해결 방법: error.tsx 파일 상단에 "use client" 추가."use client";ex..

고급 타입스크립트 기법 설명조건부 타입개념조건부 타입은 extends 키워드를 사용하여 특정 조건에 따라 다른 타입을 반환하는 유연하고 강력한 타입 시스템입니다. 삼항 연산자(? :)와 비슷한 구문을 사용하며, 타입 수준에서 분기 처리를 수행합니다.기본 문법T extends U ? X : YT가 U의 하위 타입이면 X를 반환.그렇지 않으면 Y를 반환.예제type IsString = T extends string ? "string" : "not string";type A = IsString; // "string"type B = IsString; // "not string"활용 예제배열인지 확인하는 조건부 타입type IsArray = T extends any[] ? true : false;type Te..

실전 유틸리티 타입Generic을 사용해서 타입을 효율적으로 쓸 수 있게 해줌.Utility Function은 원래 "데이터를 이용해서 간단한 계산을 하는 함수"를 뜻함! 이처럼 Utility type도 간단한 계산을 수행해 주는 타입!==> 한마디로 유틸리티 타입은 타입 변환을 용이하게 하기 위해서 타입스크립트에서 지원하는 문법PickT에서 프로퍼티 K의 집합을 선택해 타입을 구성합니다.interface Todo { title: string; description: string; completed: boolean;}type TodoPreview = Pick;const todo: TodoPreview = { title: 'Clean room', completed: false,}..

타입 스크립트란? 자바 스크립트 + 정적 타입 시스템즉, 자바 스크립트의 모든 기능을 포함하지만 정적 타입 시스템이 곁들인....그렇다면 타입 시스템은 무엇일까?타입 시스템은 프로그래밍 언어에서 값들을 분류하고 각 값이 어떤 타입인지 정의하는 체계임. 이를 위해 타입 시스템은 코드 타입 검사 시기와 방법에 대한 규칙까지 설정함.nullundefinedbooleanstringnumber* 자바스크립트는 동적 타입 언어 ==> 동적 타입 언어(dynamic typed)는 프로그램을 실행한 이후에 변수, 함수의 타입이 결정됨정적 타입 시스템(static typed)은 타입 시스템 중에 프로그램이 실행되기 전에 모든 변수와 표현식의 타입을 확인하고 고정하는 방식==> 즉, 정의하자면 동적 타입 언어는 변수의 타..

.첫번째 트러블슈팅: 렌더링 방식 설정 고민1. 문제 발생 프로젝트에서 페이지 별로 다양한 렌더링 방식을 적용하는 과정에서 SSR과 ISR을 적용하는 방식에 대한 고민이 생김.렌더링 방식 종류:Incremental Static Regeneration (ISR), Server-Side Rendering (SSR), Client-Side Rendering (CSR), Static Site Generation (SSG)1) fetch에 no-store 옵션 주기2) page.tsx 컴포넌트에 dynamic 추가하기1) fetch에 옵션 주기2) page.tsx 컴포넌트에 revalidate 추가하기각각의 방식 중에 fetch 함수에서 렌더링 방식을 미리 정의해서 사용할지, 각 페이지에서 렌더링 방식을 명시적으..

문제상황:// NewProductList.tsx{/* @ts-expect-error Async Server Component */}const NewProductList = async () => { const res = await fetch("http://localhost:4001/products", { cache: "no-store", }); const data = await res.json(); const newData = data.filter((p) => p.isNew); return ( {newData.map((product) => ( {product.title} {product...

1. 렌더링 패턴 종류1. Client-Side Rendering (CSR)설명: 리액트의 전통적인 방식으로 SPA(Single Page Application)에서 클라이언트 측에서 동적으로 페이지를 렌더링.장점:최초 로딩 후 사용자와의 상호작용이 빠르고 부드럽다.서버 부하가 적고, 서버 요청 없이도 동작 가능.MPA(Multi Page Application)에서 발생했던 깜빡거림 문제를 해결.단점:초기 로딩 시간이 길어질 수 있음.SEO 최적화가 어려움(검색 엔진이 CSR을 완전히 지원하지 않는 경우가 있음).2. Static Site Generation (SSG)설명: 정적인 페이지를 빌드 타임에 미리 생성하여 제공.장점:**TTV(Time To View)**가 짧고 SEO 최적화에 유리.CDN 캐싱..

알고리즘 코드 카타를 진행하면서 새롭게 알게된 RegExp에 대해 정리해보았습니다.function solution(s) { numberArray = [ "zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine" ]; numberArray.forEach((number, index) => { const regex = new RegExp(number, "g"); s = s.replace(regex, index); }) return Number(s)}console.log(solution("one4seveneight")); //1478(- 이런 식으로..

https://mountain-due.vercel.app/ Mountain Due mountain-due.vercel.app 피드백 (제천 튜터님)전반적으로 quality 가 매우 좋습니다제출하실때 이미지 파일 용량이 매우 컸습니다, 하나당 79MB ㄷㄷ 이미지 파일을 최적화하는 것이 좋습니다. https://squoosh.app/ (Google에서 제공하는 이미지 최적화)비로그인 시 좋아요을 disabled 하는 것이 아니라 회원가입/로그인을 유도하는 방식의 UX가 더 선호됩니다실시간 유효성 검사와 제출버튼 로직을 매우 잘 짜셨습니다현재 위치에 따른 지도 interaction이 좋습니다Google 소셜 로그인도 잘 되어있습니다만, 이용약관에 대한 유효성 검사를 적용시킬 수 있는 부분이 필요하다고 생각됩..

React Hook Form의 사용 배경 및 장점React로 로그인/회원가입 폼을 구현할 때 처음에는 useState를 사용하여 각 필드의 상태를 개별적으로 관리했다. 하지만 이렇게 하면 관리해야 할 state가 많아지고, 입력할 때마다 컴포넌트가 리렌더링되는 문제가 발생했다. 이러한 비효율성을 해결하기 위해 react-hook-form을 도입했다. React Hook Form 장점:간단한 API: 필드 값 관리, 유효성 검사, 제출 핸들러를 간단하게 구현 가능.리렌더링 최소화: 내부적으로 ref를 활용하여 상태를 관리하므로 폼 상태 변경 시 불필요한 리렌더링이 발생하지 않음.유효성 검사 지원: 기본적인 유효성 검사를 쉽게 설정 가능간소화된 코드: 여러 개의 state와 이벤트 핸들러를 사용하지 않고, ..