TypeScript의 효율적인 타입 관리 - any 없이 타입 정의, 타입 파생 및 제네릭 마스터하기

1. 필요한 경우에만 타입을 정의한다as const2. any를 절대 사용하지 않는다3. 타입의 파생을 우선한다범용 타입(제네릭)요약  최근 TypeScript를 업무에서 항상 사용하고 있습니다. 기본적으로 React & Next.js와의 조합이 주요 활용 방법입니다. 그러나 본격적으로 이야기하기 전에, 평소 TypeScript를 어떻게 사용하고 있는지 소개할 필요가 있습니다. 제게 있어 TypeScript로 작성된 코드베이스가 건전하다는 것은 무엇을 의미할까요? TypeScript가 부담을 늘리는 것이 아니라 도움이 되도록 설정해야 할 규칙은 무엇일까요? 이 글은 제 스스로의 생각과 해석을 섞은 글이 될 것입니다. 이 글을 읽으려면 TypeScript를 조금 다뤄본 경험이 필요할지도 모릅니다. 하지만 ..

• format_list_bulleted Javascript
• · 2024. 5. 15.
• textsms

TypeScript 제네릭 패턴과 활용법 - 클래스, 함수, 메서드 완벽 분석

제네릭이란?언제 유용할까?배열에서 다루는 타입을 지정하고 싶을 때함수나 메서드의 인수에 범용성을 부여하고 싶을 때보충 설명: 인수의 수가 다른 오버로드제네릭을 클래스 타입으로기본응용: 여러 개의 타입 인수 지정타입 인수 기본값 설정타입 인수에 제약을 두기제네릭 메서드  제네릭이란?Java에서는 제네릭스(Generics)라고 불리기도 합니다. 언어마다 이 용어의 표현이 다르죠. TypeScript에서도 제네릭스나 제너릭스라고 불리기도 합니다. 제네릭은 "총칭형(総称型)"이라고도 불리며, 임의의 클래스나 메서드에 대해 임의의 타입을 연결할 수 있는 구조입니다. 자세한 내용은 여기와 여기에서 확인할 수 있습니다.언제 유용할까?배열에서 다루는 타입을 지정하고 싶을 때예를 들어 배열 변수를 정의할 때, 이 배열이..

• format_list_bulleted Javascript
• · 2024. 5. 15.
• textsms

TypeScript 4.5 이상 버전에서 추가된 TSConfig 옵션 살펴보기

tsconfig.json에는 많은 옵션이 존재합니다. 최근 2년 동안 TSConfig에 새롭게 어떤 옵션들이 추가되었는지 궁금해졌습니다. TypeScript 4.5의 릴리스가 2021년 11월 즈음이었으므로 약 2년 전이니, TypeScript 4.5 이후에 추가된 TSConfig 옵션들을 조사해보았습니다.버전 4.5 이후 새로 추가된 옵션 목록옵션추가된 버전preserveValueImports4.5moduleSuffixes4.7moduleDetection4.7allowArbitraryExtensions5.0allowImportingTsExtensions5.0customConditions5.0resolvePackageJsonExports5.0resolvePackageJsonImports5.0verbati..

• format_list_bulleted Javascript
• · 2024. 5. 12.
• textsms

TypeScript를 다른 도구로 다루기 위한 컴파일러 옵션

** 목차 **TypeScript를 다른 도구로 다루기 위한 컴파일러 옵션isolatedModulesisolatedModules가 해결하는 문제isolatedModules의 동작 예시에러 해결 방법verbatimModuleSyntaxverbatimModuleSyntax의 의의isolatedDeclarations의 아이디어isolatedDeclarations에 따른 제약 사항마무리TypeScript 프로젝트에서는 빌드 속도가 중요합니다. TypeScript의 빌드 속도는 CI/CD의 효율성과 직결되기 때문입니다. 하지만 tsc가 그렇게 빠르지 않다는 것은 잘 알려진 사실이며, tsc 외에 다른 도구를 TypeScript 빌드 파이프라인에 섞어 쓰는 것도 자주 있습니다. TypeScript(tsc) 컴파일러..

• format_list_bulleted Javascript
• · 2024. 5. 11.
• textsms

JSON-LD로 구조화된 데이터를 Next.js 사이트에 추가하여 SEO 개선하기

** 목 차 **JSON-LD로 구조화된 데이터를 Next.js 사이트에 추가하여 SEO 개선하기SEO의 중요성JSON-LD란?구조화된 데이터란?구조화된 데이터의 유형Next.js 사이트에 JSON-LD 구조화된 데이터 추가하기SEO의 중요성많은 개발자들이 자신의 블로그 글이나 유투브 동영상에 SEO를 전혀 고려치 않고 있는데요. 그런데, 사실 SEO에 대해 조금만 배우면 상당히 도움이 됩니다. Google, DuckDuckGo, Bing 같은 검색엔진이 여러분의 사이트가 무엇에 관한 것이며, 어떤 분야에서 전문성이 있는지 알 수 있도록 사이트를 구성하는 것이 트래픽을 늘릴 수 있게 도움을 주는데요. 오늘 알아볼 글에서 구조화된 데이터와 JSON-LD에 관한 정보를 알아보고, Next.js를 위한 코드 ..

• format_list_bulleted Javascript
• · 2024. 5. 3.
• textsms

React useReducer 완벽 이해

안녕하세요? 오늘은 React의 useReducer에 대해 완벽히 이해하는 시간을 가져볼까 합니다. ** 목차 **React 상태 관리의 최적 접근 방식useState와 useReducer 기본useState 사용 예시useReducer 사용 예시두 개의 훅 비교useReducer를 활용한 복잡한 상태 관리의 장점상태 업데이트 로직의 분리와 재사용성이벤트 소스 모델로서의 활용복잡한 상태 변경의 명확화Immer를 활용한 상태 업데이트 간소화useReducer와 Immer의 통합useState를 이용한 Immer 활용최적의 방법과 성능useState와 useReducer의 적절한 사용성능에 대한 영향React에서의 최상의 사례 예시결론React 상태 관리의 최적 접근 방식 React에서는 컴포넌트 상태를 관..

• format_list_bulleted Javascript
• · 2024. 3. 19.
• textsms