본문 바로가기

TypeScript18

[Next.js] Dynamic Routes(동적 경로) Dynamic Routes 정해지지 않은 동적 데이터를 세그먼트로 사용하려는 경우, 요청 시 채워지거나 빌드 시 미리 렌더링되는 동적 라우팅을 사용할 수 있다. 동적 세그먼트는 이름을 대괄호로 묶어 만들 수 있다. 이 세그먼트는 layout, page, route 및 generateMetadata(메타데이터 함수)에 매개변수로 전달된다. Example(예제) 예를 들어 app/blog/[slug]/page.js에서 [slug]는 동적 세그먼트이며, 아래와 같이 매개변수로 전달된다. type PageTypes = { params: { slug: string } }; const Page = ({ params }: PageTypes) => { return My Post: {params.slug}; }; Gen.. 2023. 9. 26.
[Next.js] Getting Started - Installation(설치하기) Next.js 공식문서 바로가기 Next.js 설치하기 React의 CRA와 유사하게 간편 설치할 수 있으며, 자동 설치와 수동 설치가 있다. 자동 설치 자동 설치의 경우, 명령어로 설치 후 기본적인 폴더 구조가 자동으로 생성된다. npx create-next-app (프로젝트명) 설치 시 아래와 같은 프롬프트가 표시된다. Would you like to use TypeScript? (타입스크립트 사용 여부) Would you like to use ESLint? (eslint 사용 여부) Would you like to use Tailwind CSS? (테일윈드 사용 여부) Would you like to use `src/` directory? (src 폴더를 사용할지 여부) Would you like .. 2023. 8. 2.
[Next.js] Getting Started Next.js를 시작하며 조금 더 디테일한 구현을 위해, 공식 문서를 학습 목표로 삼아 번역하는 개인 스터디입니다. Next.js ? Next.js는 React의 서버사이드 렌더링 구축을 위한 프레임워크이다. 번들링, 컴파일 등의 도구들을 추상화하고 자동으로 구성하며 애플리케이션 구축에 집중할 수 있게 해준다. 주요 기능 Routing 레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원하는 서버 컴포넌트 위에 구축된 파일 시스템 기반 라우터 Rendering 클라이언트/서버 컴포넌트를 사용한 렌더링. 서버의 정적/동적 렌더링을 더욱 최적화할 수 있다 Data Fetching React 컴포넌트의 async/await 지원과 웹 플랫폼과 일치하는 fetch API를 통해 간소화된 데이터 불러오기 가.. 2023. 7. 30.
[Typescript] Type Challenge Type Challenge 챌린지 링크 타입스크립트의 여러 유형과 유틸리티들의 작동 방식을 이해하도록 돕는 도전 형태 4-Pick 내장 유틸리티 Pick를 사용하지 않고 구현해보기. (T에서 프로퍼티 집합인 K를 선택해 타입을 구성한다) interface Todo { title: string; description: string; completed: boolean; } type TodoPreview = MyPick; const todo: TodoPreview = { title: 'Clean room', completed: false, }; /** 풀이 */ type MyPick = { [k in K]: T[k]; }; 7-Readonly 내장 유틸리티 Readonly를 사용하지 않고 구현해보기. (T의 .. 2023. 7. 23.
[Typescript] 네임스페이스와 모듈 네임스페이스와 모듈 namespace와 module은 기능적인 차이보다 같은 기능의 방식 차이며, 심지어 컴파일 진행 시 동일하게 작동하는 코드를 반환한다. 네임스페이스의 단점 네임스페이스를 모듈로 변경하면, 아래와 같은 모습이 되기 쉽다. // shapes.ts export namespace Shapes { export function Triangle() {...} export function Square() {...} } 위에서 최상위 모듈인 Shapes는 의미없이 내용물을 감싸고 있고, 이는 import 진행 시 아래와 같이 불필요한 경로를 거치게 한다. // shapeConsumer.ts import * as shapes from './shapes'; const t = new sha.. 2023. 7. 14.
[Typescript] 네임스페이스 (namespace) 네임스페이스 (namespace) JavaScript는 네임스페이스를 지원하지 않지만, TypeScript를 사용하면 네임스페이스를 활용할 수 있다. Typescript에서 모듈은 크게 내부 모듈(Internal Module)과 외부 모듈(External Module)로 나뉘는데, 여기서 내부 모듈이 바로 네임스페이스이다. 외부 모듈은 우리가 알고있는 export로 선언된 모듈이며, 내부 모듈인 네임스페이스는 전역 이름 공간과 분리된 별도의 네임스페이스 단위 이름 공간을 말한다. // DOM 이라는 모듈 내부 선언 namespace Dom { // 외부에서 접근 불가 const variable = 1; // 외부 접근 가능 (export) export const add = (arg1: number, ar.. 2023. 7. 14.
[Typescript] 모듈 해석 상대적 vs. 비-상대적 모듈 import 모듈 해석(module resolution)은 컴파일러가 import가 무엇을 참조하는지 알아내기 위해 사용하는 프로세스이며, 모듈 참조가 상대(상대 경로)적 혹은 `비-상대적(절대 경로)이냐에 따라 모듈 import는 다르게 해석된다. 상대 경로 상대적 import는 가져온 파일에 상대적으로 해석되고 ambient 모듈 선언으로 해석 될 수 없다. import Entry from './components/Entry'; import { DefaultHeaders } from '../constants/http';절대 경로 비-상대적 import는 baseUrl로 해석되거나, 밑에서 다루게 될 경로 매핑으로 해석될 수 있고 ambient.. 2023. 7. 9.
[Typescript] 모듈 (module) ECMAScript 2015부터 Javascript에는 모듈 개념이 있고, Typescript는 이 개념을 공유한다. 모듈은 자체 스코프 내에서 실행되는데, 즉 모듈 내에서 선언된 변수, 함수, 클래스 등은 export, import를 사용하지 않으면 외부에서 보이지 않는다. Javascript에서 사용하는 유명한 모듈 로더로는 CommonJS 모듈용 Node.js의 로더와, 웹의 AMD 모듈용 RequireJS 로더가 있다. Export 선언 export 하기 export 키워드를 추가해 모든 선언을 내보낼 수 있다. First.ts export interface PropTypes { // ... }Second.ts import { PropTypes } from './First'; exp.. 2023. 7. 7.
[Typescript] 제네릭 (Generics) 제네릭의 Hello World (Hello World of Generics) 아래의 identity 함수는 인수로 무엇이 오던 그대로 반환한다. 제네릭이 없다면 아래처럼 특정 타입을 주어야 한다. function identity(arg: number): number { return arg; } 혹은 any 타입을 사용할 수 있지만, 우리는 무엇이 반환되는지 알아야하며 인수의 타입을 캡처할 방법이 필요하다. 제네릭을 사용하면 아래처럼 표시할 수 있다. // 선언식 function identity(arg: T): T { return arg; } // 표현식 const identity2: (arg: T) => T = arg => arg; 함수에 T라는 타입 변수를 추가했고, T는 사용자가 준 인수의 타입을 캡.. 2023. 6. 12.
[Typescript] 열거형 (Enums) 숫자 열거형 (Numeric enums) enum Direction { Up = 1, Down, // 2 Left, // 3 Right, // 4 } 문자열 열거형 (String enums) 문자열 열거형은 숫자형처럼 자동 증가하는 기능은 없지만, 지정된 이름과 무관하게 유의미한 좋은 값으로 커스텀 후 실행할 수 있다. enum Direction { Up = "UP", Down = "DOWN", Left = "LEFT", Right = "RIGHT", } 이종 열거형 (Heterogeneous enums) 기술적으로 아래처럼 숫자와 문자를 섞어서 사용할 수 있지만, 이렇게 사용하지 않는 것을 권장한다. enum BooleanLikeHeterogeneousEnum { No = 0, Yes = "YES" }.. 2023. 6. 11.

티스토리툴바