개발 일지

1. 타입스크립트가 객체 타입 리터럴의 타입을 해석하는 방법 기존 객체에서 타입을 추론하게 하는 것도 좋지만, 가끔 명시적으로 객체 타입을 선언하고 싶을 때가 있을 것이다. 객체 타입은 객체 리터럴과 유사하지만, 필드 값 대신 타입을 사용해 설명한다는 특징이 있다. 1) 별칭 객체 타입 [덕 타이핑 참고하기 좋은 글] https://velog.io/@thms200/Typescript-Duck-Typing-%EB%8D%95%ED%83%80%EC%9D%B4%ED%95%91 Typescript Duck Typing (덕타이핑) 타입스크립트의 인터페이스에 대한 글을 읽다가 Duck Typing에 대해 알게되었다. 먼저 코드로 개념을 이해해보자. (위의 코드는 [Typesrcipt playground](https..

유니언(Union): 값에 허용된 타입을 두 개 이상의 가능한 타입으로 확장하는 것 내로잉(Narrowing): 값에 허용된 타입이 하나 이상의 가능한 타입이 되지 않도록 좁혀가는 것 1. 유니언 타입으로 두 개 이상의 타입 중 하나일 수 있는 값을 나타내는 방법 let math = Math.random() > 0.5 ? undefined : "math" //math type: string | undefined 이거 혹은 저거인 타입을 유니언 타입이라고 함 ` | (수직선 연산자)`를 이용해서 표시한다. 2. 타입 어노테이션으로 유니언 타입을 명시적으로 표시하는 방법 변수에 대한 명시적 타입 어노테이션을 제공하는 것이 유용할 때 사용하며, 사용자가 잠재적으로 다른 타입이 될 수 있음을 알고 있을 때 타입..

1. '타입' 정의 - 타입(Type) : 자바스크립트에서 다루는 값의 형태 (값의 속성/메서드/내장되어 있는 type of 연산자) - 타입스크립트가 인식하는 원시 타입 (7가지) string number bigint boolean symbol null undefined - 타입스크립트는 구문에서 변수나 함수의 타입을 유추할 만큼 충분히 똑똑하다. 2. 타입 시스템 - 타입스크립트의 타입 시스템이 코드를 이해하는 방법 코드를 읽고 존재하는 모든 타입과 값을 이해한다. 각 값이 초기 선언에서 가질 수 있는 타입을 확인한다. 각 값이 추후 코드에서 어떻게 사용될 수 있는지 모든 방법을 확인한다. 값의 사용법이 타입과 일치하지 않으면 사용자에게 오류를 표시한다. 타입 추론 과정을 살펴보자. 다음은 속성을 잘..

vite는 기본적으로 프로덕션 모드에서 Strict Mode를 true로 설정한다. 프로덕션에서 Strict Mode가 켜져있는 이유는 안정성과 성능을 향상시키기 위해서 인데, 'Strict Mode'를 설정함으로써 자바스크립트의 잠재적 오류를 탐지하고 경고 메세지를 출력하는 기능을 제공한다. 프로덕션 환경에서 잠재적인 버그를 발견하는 것은 어플리케이션의 안정성을 향상시키는데 기여한다. 실제로 rollup 옵션 Docs를 보게 되면, 특별한 이유 없이 이 'Strict Mode'를 해제하지 말라고 나온다. (참고 : https://rollupjs.org/configuration-options/#output-strict ) # Javascript에서 'Strict Mode'는 여러 기능들을 제공한다. 암묵..

함수형 컴포넌트에서는 앞서 공부한 라이프 사이클 메서드를 사용할 수 없다. React v16.8부터는 함수형 컴포넌트에서도 클래스형 컴포넌트의 라이프 사이클 메서드와 유사한 기능을 할 수 있는 기능들을 제공한다. 1. useState 가장 기본적인 hook. 가변적인 상태를 지닐 수 있다. (1) 사용 예 state를 컴포넌트에 추가할 때 이전 state에서 상태값 업데이트가 필요할 때 배열이나 객체 state를 업데이트 할 때 초기값을 재생성하는 것을 막고 싶을 때 key와 함께 state를 초기화 시키고 싶을 때 이전 렌더링 정보를 저장하고 싶을 때 (2) useState(initialState) 컴포넌트 최상단에 state 변수를 할당하며, 컨벤션은 일반적으로 [이름, set이름] 이런식으로 배열 ..

Redirects 유저가 보는 URL의 path를 리다이렉트 시켜서 다른 path로 이동시킨다. next.config.js 에서 redirect를 설정할 수 있다. module.exports = { async redirects() { return [ { source: '/about', destination: '/', permanent: true, }, ]; }, }; 리다이렉션은 동기(async)함수로 source, destination, permanent 프로퍼티를 가지고 있는 매핑된 배열 객체를 반환한다. source : 유입되는 요청 경로 패턴 destination : 라우팅하려는 경로 permanent : true / false true : 클라이언트/검색 엔진에 리다이렉션을 영원히 캐싱하는 경우..

* 23년 5월 5일 Next.js 13.4.0 버전 에서 App Router(stable) 버전이 릴리즈 되었습니다. ** Next.js 12 이하 버전까지는 Page Directory를, 13 버전 이후부터는 App Router를 권장합니다. (방식에 차이가 있으므로 주의) (대표적으로 App Router에서는 Custom App 이 없습니다.) Next에서는 App 컴포넌트를 사용하여 페이지를 초기화한다. 즉, Next는 기본적으로 가장 먼저 App Component를 확인하고 index.js의 컨텐츠들을 확인하기 때문에 모든 페이지들이 통과하는 관문이라고 볼 수 있다. 어떤 컴포넌트가 어느 페이지에 있어야 하는지, 모든 페이지들을 한 눈에 볼 수 있는 청사진 역할을 한다. App 컴포넌트를 사용해..

1. CSS Modules Next.js에서는 module.css 확장자로 CSS모듈을 기본적으로 지원한다. CSS Modules는 유니크한 클래스네임(className)을 생성하여 css의 범위를 한정시켜 독립적으로 사용할 수 있다. 이는 같은 클래스네임을 여러 파일에서 사용해도 충돌이 나지 않게 해주는 장점이 있다. (사용예시) Nav.tsx import { useRouter } from "next/router"; import Link from "next/link"; import styles from ".//Nav.module.css"; export default function Nav() { const router = useRouter(); return ( Home Detail ); } Nav.mo..

리액트의 전체적인 흐름을 이해하기 위해서는 라이프 사이클에 대한 이해가 필요하다. 라이프 사이클 메서드는 클래스형 컴포넌트에서만 제공되기 때문에 클래스형 컴포넌트로 대략적인 컨셉에 대해 설명 후, 함수형 컴포넌트에서의 라이프 사이클에 대해 설명한다. 1. 라이프사이클 메서드 이해하기 리액트의 라이프사이클 메서드는 9가지가 있다. 큰 단위로는 마운트, 업데이트, 언마운트 이렇게 세 가지 영역으로 나뉠 수 있다. 마운트(Mount) : 페이지가 컴포넌트에 나타남 (페인팅) 업데이트(Update) : 컴포넌트의 정보를 업데이트 (리렌더링) 언마운트(Unmount) : 페이지에서 컴포넌트가 사라짐 1-1. 마운트(Mount) 컴포넌트가 처음으로 DOM에 그려질 때를 의미한다. 따라서 컴포넌트의 초기 설정과 데이..

자바스크립트에서 객체의 키는 보통 '문자열'이다. 배열은 객체이기 때문에, Object.keys를 이용해서 배열의 키를 나열할 수도 있다. 배열의 인덱스를 나열해보면 문자열로 변환되는 것을 쉽게 알 수 있다. 타입스크립트에서는 이러한 혼란을 방지하기 위해 숫자 'Key(키)'를 허용하고, 문자열 키와 다른 것으로 인식한다. interface Array { ... [n: number]: T; } 런타임 시점에서는 키를 모두 문자열로 인식할 것이므로, 이 코드는 타입 체크 시점에 오류를 잡는 용도로 사용할 수 있겠다. ** 여기서 사용된 number 타입은 버그를 잡기 위한 순수 타입스크립트 코드임을 명심하자! ** const x = [1, 2, 3]; const keys = Object.keys(x); c..