TypeScript

[Typescript] Codegen 설치 및 사용 방법 / GraphQL-codegen

GraphQL-Codegen이란? 타입스크립트에서는 변수, 상수, 함수 등에 타입을 지정해줘야한다. 하지만 내가 만들지 않은 데이터에는 어떻게 타입을 적용할 수 있을까? 그 가장 큰 예시가 Backend에서 받아오는 API이다. GraphQl-Codegen은 지정해둔 스키마의 데이터를 긁어와서 타입 문서를 자동으로 생성해준다. GraphQL-Codegen 설치 가장 좋은 방법은 공식 문서를 참고하는 것이다. 하지만 매번 찾아보기 귀찮으니 방법을 간략하게 메모해둔다. 공식 문서 : https://www.graphql-code-generator.com/ 1. 필요한 위치에서 하단의 명령어를 입력한다. 둘 중 하나만 하면 된다. yarn add -D @graphql-codegen/cli npm install ..

[React/Typescript] Eslint / prettier 설치 및 기본 세팅

Eslint / prettier 란? 각각 코드 린터, 코드 포맷터의 한 종류로 프로젝트 코드의 규칙을 점검해준다. (코드 린터, 코드 포맷터 사이에도 디테일한 차이가 있지만 이 포스팅은 그걸 기록하기 위한 글이 아니니까 생략한다. 대신 ESlint와 prettier의 공식 페이지를 링크해둠) https://eslint.org/ ESLint - Pluggable JavaScript linter Customize Preprocess code, use custom parsers, and write your own rules that work alongside ESLint's built-in rules. You can customize ESLint to work exactly the way you need i..

[Typescript] Javascript vs Typescript

TypeScript란? 타입이 정해져있지 않은 자바스크립트를 보다 안전하게 사용하기 위해 마이크로소프트에서 만든 언어. 자바스크립트의 슈퍼셋(상위집합)으로, 타입이 정해져있는 자바스크립트라고 생각하면 빠르게 이해할 수 있다.. 웹브라우저는 HTML, CSS, Javascript밖에 읽을 수 없기 때문에 실제 실행시에는 자바스크립트로 컴파일되어 실행된다. 인터프리터 언어인 자바스크립트가 타입스크립트의 컴파일러 역할을 하는 셈. TypeScript를 사용하는 이유 자바스크립트는 타입이 엄격하지 않다. 그러한 특징 때문에 개발의 자유도가 높은 반면, 예상치 못한 오류가 발생할 확률도 높은 편. 오류의 예시 의도 0+1+1+1+1 = 4 결과 "0"+1+1+1+1 = "01111" 가장 위험한 것은 이러한 것이..