전체 글43 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. TS 타입 챌린지 스터디 - 7 Week 7Medium-645-Difftype Diff = Omit;O & O1을 통해 두 객체가 가진 key 값을 모두 포함할 수 있는 객체를 생성하고, 중복되는 key를 제거하는 형태O & O1은 객체간의 인터섹션으로, 객체의 인터섹션은 모든 키를 포함하는 객체를 생성한다. (동일한 key가 있다면, 해당 key의 value의 타입은 O[key]와 O1[key]가 intersection된 타입을 갖게 된다.)keyof (O | O1)은 O | O1 연산을 먼저 수행하고 keyof 연산을 수행하며,keyof 연산은 유니언 타입에 대해 실행되면, 유니언 구성원이 공통으로 갖는 키만을 반환한다.keyof O | keyof O1은 O와 O1의 키가 모두 포함된 유니언을 반환한다. (모든 key값을 얻고자 할.. 2025. 2. 22. TS 타입 챌린지 스터디 - 6 Week 6Medium-459-Flattentype Flatten = T extends [infer First, ...infer Rest] ? First extends any[] ? [...Flatten, ...Flatten] : [First, ...Flatten] : T;배열 T를 재귀적으로 평탄화하는 형태infer First를 통해 첫 요소를 추출하고, 그것이 배열이라면 spread 연산자를 통해 평탄화한다.만약 첫 요소가 배열이 아니라면 그냥 추가한다.이렇게 재귀적으로 평탄화를 진행하면 최종적으로 모든 요소가 평탄화된 배열을 얻을 수 있다.Medium-527-AppendToObjecttype AppendToObject = { [key in keyof T | U]: key extend.. 2025. 2. 13. 이전 1 2 3 4 5 다음