전체보기45 [Tailwind CSS IntelliSense] GitHub에 이슈를 남기고 얻은 배움 프로젝트 진행 중 발생한 문제 상황사내 디자인 시스템을 Tailwind CSS v4 기반으로 재구축하는 작업을 진행하게 되었다.v4에서는 CSS 기반의 configuration을 제공하는데, 이를 컴파일하여 styles.css로 제공하는 구조를 채택했고, consuming 프로젝트를 가정하여 사용 테스트를 하던 중 Tailwind CSS IntelliSense가 동작하지 않는 문제가 발생했다. 원인을 분석해보다@import "tailwindcss";@import "fake-package/styles.css";consuming 프로젝트 쪽에서 컴파일된 css를 불러오는 구조는 위와 같이 작성하였다.{ "tailwindCSS.experimental.configFile": "apps/next-app/app/.. 2025. 5. 9. TailwindCSS v4 인텔리센스 활성화 과정 정리 TailwindCSS v4가 기존의 v3와 구성 방식이 많이 달라졌습니다.VSCode에서 인텔리센스가 제대로 동작하지 않는 문제가 있어 개인적으로 찾은 원인과 해결 방식을 정리해봅니다. 1. TailwindCSS v4에서의 기본 설정v4에서는 포스트css, 테일윈드 컨피그와 같은 설정 파일을 별도로 구성하는 대신 CSS 파일에서 직접 스타일 설정을 구성합니다.먼저 다음과 같이 엔트리 css 파일을 생성했습니다./* src/styles.css */ @import 'tailwindcss';@import 'tailwindcss/preflight'; - tailwindcss/preflight는 이전 v3에서 @tailwind base; @tailwind components; @tailwind utilities.. 2025. 4. 12. TS 타입 챌린지 - 13 Week 13Medium-5310-Join문제에서 U 타입을 string | number로 제한하고 주어지지 않았을 경우 ','를 기본값으로 사용하도록 제한하고 있음문자열 템플릿에 담기 위해서 T 또한 string | number로 제한을 했음type Join = T extends [] ? Result : T extends [ infer First extends string | number, ...infer Rest extends (string | number)[] ] ? Result extends "" ? Join : Join : Result;첫 번째 접근 방식: Result 파라미터를 이용하여 문자열을 누적하는 방식으로 구현하였다.T는 입력 배열, U는 구분자.. 2025. 4. 3. Next.js 프로젝트에서 발생한 document is not defined 에러 분석 회사에 합류한 지 약 일주일 째, 난해한 문제를 만났습니다.사내 Next.js 프로젝트가 제 로컬환경에서만 ReferenceError: document is not defined를 나타내며 실행이 되지 않았습니다.동료 개발자는 같은 코드를 로컬에서 실행하는 데 아무런 문제가 없었기 때문에 어떤 문제일까를 분석하는 과정에서 로컬 환경 자체의 비교를 진행하는 경험을 하게 되었습니다.이 글은 lottie-react 라이브러리와 Node.js, 그리고 Next.js의 SSR이 얽혀있는 이슈였고 그 이슈를 분석하는 과정을 기록했습니다. 문제 상황프로젝트를 클론하고 의존성을 설치한 후 pnpm 명령어를 통해 실행하자 / directory에서 리액트는 다음의 에러와 함께 에러 트레이스를 보여주었습니다. Referen.. 2025. 4. 1. TS 타입 챌린지 스터디 - 12 Week 12Medium-4499-Chunktype Chunk = T extends [] ? CurrentChunk extends [] ? Result : [...Result, CurrentChunk] : T extends [infer F, ...infer Rest] ? CurrentChunk["length"] extends N ? Chunk : Chunk : never;CurrentChunk와 Result은 빈 배열로 초기화하여 chunk를 분리하는 작업을 진행할 배열과 결과를 저장할 배열로 사용한다.문제는 T가 튜플이어야 함을 안내하고 있어 readonly unknown[]로 제한을 두었다.T extends []를 통해 먼저 T가 빈 배열인지 확인한다.만일 빈 배열이라면 .. 2025. 3. 29. TS 타입 챌린지 스터디 - 11 Week 11Medium-4179-Fliptype Flip> = { [K in keyof T as T[K] extends keyof any ? T[K] : `${T[K]}`]: K;};Object의 key-value를 value-key로 바꾸는 문제No need to support nested objects and values which cannot be object keys such as arrays문제에 따라 중첩 객체에 대해서, value가 배열인 경우는 고려하지 않는다.value가 배열인 경우는 제외하지만 숫자형, 불리언이 존재할 수 있어 그 경우에 대한 처리가 필요하다.Record로 기본적으로 T는 객체로 제한한다.as T[K]를 이용하여, PropertyKey로 쓰일 수 있는 value라면 .. 2025. 3. 23. TS 타입 챌린지 스터디 - 10 Week 10Medium-3188-TupleToNestedObjecttype TupleToNestedObject = T extends [ infer First extends string, ...infer Rest extends string[]] ? { [K in First]: TupleToNestedObject } : U;string[] 형태로 주어진 배열을 중첩된 객체로 변환한다infer 키워드를 사용하여 First와 Rest를 나누고, First를 키로 하는 객체를 재귀적으로 생성한다.주어진 tuple이 empty인 경우 U에 주어진 타입을 그대로 반환하도록 문제가 제시하고 있다.Medium-3192-Reversetype Reverse = T extends [infer First, ...inf.. 2025. 3. 19. TS 타입 챌린지 스터디 - 9 Week 9Medium-2757-PartialByKeystype IntersectionToObj = { [K in keyof T]: T[K];};type PartialByKeys = [K] extends [never] ? Partial : IntersectionToObj]: T[Key]; } >;K가 주어지지 않은 경우 never로 처리하도록 기본값을 설정하고, 검증 후 Partial로 문제 의도에 따라 모든 key에 대해 optional 처리를 한다.그렇지 않은 경우, T의 key인 K에 대해서는 optional 처리를 한 object와, 그렇지 않은 원래 상태를 그대로 유지하는 object를 만들고 intersection한다.그리고 추가적인 타입 IntersectionToObj를 .. 2025. 3. 8. TS 타입 챌린지 스터디 - 8 Week 8Medium-1978-PercentageParser${infer F}${infer N}${infer S} 형태로 진행하고 F, S가 각각의 Sign을 만족하는지를 판별하려 했으나해당 위치가 비어있는 경우 N에 해당하는 부분이 쪼개지는 경우가 발생type PlusMinus = "+" | "-";type PercentSign = "%";// Divide the string into prefix and resttype PrefixCheck = T extends PlusMinus ? T : never;type SuffixCheck = T extends `${infer R}${PercentSign}` ? [R, "%"] : [T, ""];type PercentageParser = P extends.. 2025. 3. 5. 이전 1 2 3 4 5 다음
