heyday2024 님의 블로그

1. Tailwind CSS groupgroup 클래스는 CSS의 가상 클래스와 자식 선택자를 활용해, 부모 요소의 상태에 따라 자식 요소의 스타일을 지정할 수 있는 기능을 제공합니다.이 기능은 자식 요소가 직접 상태를 가지지 않아도, 부모 요소의 상태(예: hover, focus, 등)에 따라 스타일링을 유연하게 적용할 수 있도록 돕습니다.사용 방법그룹화 요소에 group 클래스 추가부모 요소에 group 클래스를 추가하여 그룹화합니다.자식 요소에 상태 기반 스타일 적용자식 요소에 group-* 접두사(예: group-hover, group-focus)를 사용하여 부모의 상태에 따라 스타일을 설정합니다.2. Tailwind CSS group-hovergroup-hover 클래스는 그룹화된 요소가 호버 ..

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 소셜 로그인도 잘 되어있습니다만, 이용약관에 대한 유효성 검사를 적용시킬 수 있는 부분이 필요하다고 생각됩..