리액트 컴포넌트가 리렌더링이 발생하는 경우는 아래와 같다.state가 바뀔 때props가 바뀔 때부모 컴포넌트가 리렌더링 될 때불필요한 리렌더링이 많이 발생하게 된다면 성능 저하로 이어진다. 불필요한 리렌더링이 발생하지 않고 특정 상황(dependencies: 의존성

새롭게 바뀐 리액트 공식문서 에서는 함수형 컴포넌트를 사용할 것을 권장하고 있다. 기존 클래스형 컴포넌트를 함수형 컴포넌트로 migrate 하는 방법도 친절하게 소개하고 있다.클래스형 컴포넌트는 코드 안에 라이프사이클 기능과 state 기능이 구현이 된다는 것이다.함수

Next.js 공식문서 튜토리얼을 마치고 본격적으로(?) 사용해보기 위해서 프로젝트를 시작했다.새 컴포넌트를 만들던 중에 갑자기 머릿속에서 스친 질문이 있었다.Next.js 에서 제시하는 파일명 컨벤션이 있을까?이전에 리액트만 사용했을 때는 디렉토리 내 파일명을 Pas

Next.js 프로젝트에서 TypeScript를 사용하면 next-env.d.ts 파일이 최상위 디렉토리에 생성된다.이 파일은 타입스크립트 컴파일러가 Next.js의 타입을 가져오게 한다.수시로 바뀔 수 있기 때문에(빌드할 때마다?) 직접 수정이나 제거를 하지 않는다.

함수에 전달되는 parameter에도 타입 애너테이션을 사용해서 타입을 선언할 수 있다.파라미터에 타입을 선언하지 않으면 파라미터의 타입은 암시적으로 any 가 된다. 명확하게 파라미터의 타입을 선언하면 오류를 줄일 수 있다.타입스크립트에서는 함수 선언에서 사용된 모든

객체 타입은 객체의 형태 를 설명하는 방법이다.객체 타입타입을 사용해 설명변수 뒤에 콜론 : 을 사용하고 속성의 타입을 설명속성들을 세미콜론 ; 으로 구분객체 리터럴값을 사용해 설명변수 뒤에 할당연산자 = 를 사용키-값을 콤마 , 로 구분객체 타입을 사용하는 것보다 타

타입스크립트는 값을 바탕으로 타입을 추론한다.타입 추론의 두 가지 핵심 개념 (타입스크립트에서만 존재)유니언내로잉(narrowin)값에 허용되는 타입을 두 가지 이상으로 나타내는 타입이다.| 를 사용해서 유니언 타입임을 나타낸다.유니언 타입 선언의 순서는 중요하지 않다

타입은 값의 형태이다값에 존재하는 속성과 메서드typeof 연산자가 설명하는 것을 의미TS의 가장 기본적인 타입은 JS의 7가지 원시 타입(primitive type)nullundefinedbooleanstringnumberbigintsymbol타입 시스템은 프로그래밍

작년 12월부터 매월 진행되는 원티드 프리온보딩 챌린지에 참여하고 있다.이번 달(2월)의 주제는 타입스크립트였다. 그렇지 않아도 TS를 공부하면서 앞으로 만들 프로젝트들에 적용해나가려던 참이여서 내겐 그야말로 완벽한 타이밍이었다.TS 강의와 공식문서를 보면서 혼자 얕게

Figma를 오랜만에 사용하니 그 전에는 못봤던 기능이 하나 생겼다.예전에는 피그마 작업물을 복사하면 옵션이 PNG로 복사하거나, SVG로 복사하는 옵션만 있던 것으로 기억하는데 CSS로 복사 하는 옵션이 생겼다! 🫢복사하려는 대상을 우클릭한 뒤 Copy as CSS

JavaScript의 API를 문서화하는 툴이다. JSDoc에서 제공하는 태그를 이용해서 클래스, 함수, 모듈, 메서드, 파라미터 등을 문서화한다. 여러 종류의 태그들이 있어서 잘 사용하면 구체적인 정보가 담긴 문서를 만들 수 있다.jsdoc.appJSDoc 3.6 한

함수를 정의하는 가장 대표적인 방법이다. 다른 언어들도 함수 선언문으로 함수를 정의한다.함수 선언문에서는 함수 이름을 생략할 수 없다.자바스크립트의 함수는 일급 객체다. 함수가 일급 객체라는 것은 함수를 값처럼 자유롭게 사용할 수 있다는 의미이다. 함수는 일급 객체이므

keyof 키워드를 사용하면 인터페이스의 key 값들을 유니언의 형태로 받을 수 있다. Partial은 프로퍼티를 모두 옵셔널로 바꿔준다.Partial<T>을 사용해서 에러를 해결할 수 있다.Partial과 반대로, 모든 프로퍼티를 필수로 바꿔준다.Requried

제네릭 을 이용하면 클래스, 함수, 인터페이스를 다양한 타입으로 재사용할 수 있다.제네릭을 사용하게 되면 선언할 때 type 파라미터(T)만 명시하고, 사용하는 시점에 사용할 타입을 결정한다.파라미터의 타입만 다르고 동일한 함수를 사용하고 싶을 때 활용할 수 있는 방법

위 코드는 자바스크립트(ES6)에서 정상적으로 실행되지만 타입스크립트에서는 에러가 발생한다.사진과 같이 color 프로퍼티가 Car 에 없다는 에러가 발생한다.타입스크립트에서 클래스를 작성할 때는 멤버 변수를 미리 선언해야 한다.멤버 변수를 미리 선언하지 않아도 되는

자바스크립트에서 let과 const 키워드를 사용해서 변수를 선언할 수 있다.const 는 변하지 않는 값을 선언할 때 사용하고,let은 변할 수 있는 값을 선언할 때 사용한다.타입스크립트에서 위와 같이 작성하고 마우스를 올려보면 const로 선언한 userName1은

함수 오버로드는 전달받은 매개변수의 개수나 타입에 따라 다른 동작을 하게 하는 것을 의미한다. 자바스크립트는 동일한 매개변수라도 다른 타입을 가지는 것이 가능한 언어이다.매개변수의 개수나 타입에 따라서 함수가 다르게 동작해야 하는 경우에 함수 오버로드를 사용할 수 있다

타입스크립트에서만 존재하는 기능이므로, 자바스크립트로 컴파일 되지 않는다. (타입 체킹으로 많이 쓰임)객체의 구조를 정의한다. (속성, 속성의 타입) 함수의 구조를 정의한다. (파라미터와 리턴 값의 타입)구조만 정할 수 있을 뿐, 값을 정할 수는 없다.readonly

"strict": true 옵션은, 아래의 주석 처리된 옵션들을 모두 활성화한 것과 같은 옵션이다.이 옵션은 타입스크립트가 보다 엄격하게 타입을 체크할 수 있도록 돕기 때문에 "strict": true로 하고 개발을 하는 것이 좋다."noImplicitAny": tru

디버깅과 개발할 때 필요compilerOptions에서 sourceMap 옵션을 설정하고 터미널에 tsc를 실행하면 디렉토리에 .map 파일이 생성된다개발자도구 Sources 탭에서 .ts 파일을 확인할 수 있다. ⇒ 디버깅 용이 ✨컴파일 된 js 파일이 생성되는 위치