코딩애플강의를 보고 정리했습니다.

기본 변수 타입(primitive types)

// 예시용으로 작성해줬지만 name이라는 변수명은 전역변수로 사용불가능함
let name: string = 'kim';
let age: number = 20;
let check: boolean = false;

array 혹은 object 자료 안에도 타입 지정이 가능하다.

• array 타입 지정

let members: string[] = ['kim', 'park'];
let members: (string | number)[] = ['kim', 20];

• object 타입 지정

let myInfo: { age: number } = { age: 20 };

Tip!

타입스크립트는 타입을 자동으로 부여해주는 경우가있다.

let name = 'kim';
let age = 20;

이렇게만 써줘도 자동으로 name은 string, age는 number을 갖게된다.
(변수명에 마우스 올려보면 확인 가능)
array나 object 만들 때도 자동으로 알아서 된다. 그러니 간단한 변수들은 타입을 생략하자. 하지만 언제나 그렇듯 케바케니깐 타입지정하는게 보기좋다면 그렇게 하자

Union type(가장 좋음)

• OR 연산자 같은 느낌이다.
• 아래예제에서 할당하는 순간 타입은 string 또는 number 중 하나로 변한다.

let name: string | number = 'kim';
let age: string | number = 100;

name, age 변수엔 string 혹은 number만 들어올 수 있다.

array,object를 union type으로 쓰려면?

var array: number | string[] = [1, '2', 3];
var object: { data: number | string } = { data: '123' };

특징은 변수에 정의된 Union 타입은 할당과 동시에 OR 역할이 사라지는 반면에,
array, object에 정의된 Union 타입은 OR 연산자가 유지된다.

any 타입 unknown 타입

any 타입

• 아무 자료나 집어넣을 수 있는 타입이다.(쉽게말해서 실드 해제)
• 막 사용은 하지말자. 타입관련 버그가 발생할 경우 추적하기 어려워짐
  • 타입 실드를 안씌우면 타입스크립트를 쓸 이유가 없다.
    
• 비상시 쓰는 변수 타입체크 해제기능 이런 용도로 쓰자.

// 다 쌉가능
let name: any = 'kim';
name = 123;
name = undefined;
name = [];

unknown 타입

• any타입과 똑같이 모든 타입을 집어넣을 수 있다.
• 자료를 집어넣어도 타입은 그대로 unknown 이다.
• 요즘은 unknown을 사용함

let name: unknown = 'kim';
name = 123;
name = undefined;
name = [];

any unknown 차이점

let 이름: unknown;

// 타입 에러 발생
let 변수1: string = 이름;
let 변수2: boolean = 이름;
let 변수3: number = 이름;

unknown 타입을 다른 곳에 집어넣으려고 하면 타입 에러가 난다.
하지만 any는 안그럼

let name: unknown;
name[0];
name - 1;
name.data;

이렇게 해줘도 unknown타입은 에러가 난다.
역시나 any는 안그럼

왜냐하면,타입스크립트는 정확하고 확실한걸 좋아하기 때문이다.
확실하지않은 타입(unknown)에 뺄셈해주고 하는걸 싫어한다. 숫자가 아닌걸 뺄셈할 수는 없으니까.
타입스크립트에선 뺄셈은 number 류의 타입만 할 수 있고, .name 이런건 object류의 타입만 할 수 있다고 미리 정의되어있다.

결론

아직 뭘 집어넣을지 모르겠는데 약간의 안정성을 도모하고 싶으면 unknown 타입을 써보자.

강사말로는 “근데 실은 코드짜다가 any, unknown 부여할 경우는 별로 없습니다.” 라고는 하시는데.. 초보자인 내가 코드를 짜봤을때는 의외로 any를 좀 자주 접했던거같다. 근데 unknown을 알게되었으니 이제는 이거 사용할듯

왜 에러?

let age: string | number;
age + 1; // 자바스크립트에선 문자에도 +1, 숫자에도 +1 가능함

let age: unknown = 1;
age + 1;

두개의 코드 둘다 에러가 난다.
이유는 타입스크립트는 언제나 확실한걸 좋아한다.
지금 변경하려는 변수의 타입이 확실해야 연산을 수행해주는데, unknown은 number타입이 아니고, string | number 도 number 타입이 아니다.
앞서 배운 string | number은 유니온타입인데, 유니온타입은 값 할당이 되는 순간 타입이 정해진다. 만약 값을 숫자로 할당해줬다면 에러가 발생하지않는다.

코딩애플강의를 보고 정리했습니다.

tsconfig 파일 생성하기

• tsconfig.json파일 생성 (리액트나 뷰에서 사용하는거라면 이미 있을 수 있다.)

• 생성한 파일안에 다음과 같이 작성

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
    }
}

target: 타입스크립트 파일을 어떤 버전의 자바스크립트로 바꿔줄지 정해줌
(es5로 세팅해놓으면 es5버전 자바스크립트로 컴파일(변환)해줌 참고로 신버전을 원하면 es2016, esnext 이런 것도 입력할 수 있다. )

module: 자바스크립트 파일간 import 문법을 구현할 때 어떤 문법을 쓸지 정하는 곳
commonjs는 require 문법이고 es2015, esnext는 import 문법을 사용한다.

참고로,
어느정도 IE 호환성을 원한다면 es6,commonjs를 작성하지만, 신버전 자바스크립트만 표현가능한 그런 문법들이 있는데, (BigInt() 이런 함수와 bigint 타입 등..) 그런 것들은 esnext등으로 버전을 올려줘야 사용가능하다.

추가로 넣을만한 것들

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "noImplicitAny": true,
        "strictNullChecks": true
    }
}

noImplicitAny: any라는 타입이 의도치않게 발생할 경우 에러를 띄워주는 설정

strictNullChecks: null,undefined 타입에 이상한 조작하면 에러를 띄우는설정

tsconfig에 들어갈 기타 항목들

전체는 이곳참고

{
 "compilerOptions": {

  "target": "es5", // 'es3', 'es5', 'es2015', 'es2016', 'es2017','es2018', 'esnext' 가능
  "module": "commonjs", //무슨 import 문법 쓸건지 'commonjs', 'amd', 'es2015', 'esnext'
  "allowJs": true, // js 파일들 ts에서 import해서 쓸 수 있는지
  "checkJs": true, // 일반 js 파일에서도 에러체크 여부
  "jsx": "preserve", // tsx 파일을 jsx로 어떻게 컴파일할 것인지 'preserve', 'react-native', 'react'
  "declaration": true, //컴파일시 .d.ts 파일도 자동으로 함께생성 (현재쓰는 모든 타입이 정의된 파일)
  "outFile": "./", //모든 ts파일을 js파일 하나로 컴파일해줌 (module이 none, amd, system일 때만 가능)
  "outDir": "./", //js파일 아웃풋 경로바꾸기
  "rootDir": "./", //루트경로 바꾸기 (js 파일 아웃풋 경로에 영향줌)
  "removeComments": true, //컴파일시 주석제거

  "strict": true, //strict 관련, noimplicit 어쩌구 관련 모드 전부 켜기
  "noImplicitAny": true, //any타입 금지 여부
  "strictNullChecks": true, //null, undefined 타입에 이상한 짓 할시 에러내기
  "strictFunctionTypes": true, //함수파라미터 타입체크 강하게
  "strictPropertyInitialization": true, //class constructor 작성시 타입체크 강하게
  "noImplicitThis": true, //this 키워드가 any 타입일 경우 에러내기
  "alwaysStrict": true, //자바스크립트 "use strict" 모드 켜기

  "noUnusedLocals": true, //쓰지않는 지역변수 있으면 에러내기
  "noUnusedParameters": true, //쓰지않는 파라미터 있으면 에러내기
  "noImplicitReturns": true, //함수에서 return 빼먹으면 에러내기
  "noFallthroughCasesInSwitch": true, //switch문 이상하면 에러내기
 }
}

코딩애플강의를 보고 정리했습니다.

자바스크립트는 타 언어에 비해 타입에 관대하다.
자바스크립트에서는 값을 할당하는 시점에 변수의 타입이 동적으로 결정되고, 변수의 타입을 언제든지 자유롭게 결정할 수 있다.
이렇게 타입에 관대한 자바스크립트는 좋을수도 나쁠수도있다.

1. 코드 천줄 만줄 백만줄을 짜다보면,
   
2. 남이짜던 자바스크립트 수정할 일이 생기게되면
   

아무리 유능한 사람이라도 실수를하기 마련인데 이를 방지해주고자 나온게 타입스크립트다.

HTML CSS JS 웹개발시 타입스크립트 적용

• 터미널에서 다음 입력(컴퓨터마다 한 번만 하면 됨)

npm install -g typescript

• .ts로 끝나는 파일 만들고 코드 작성
  (웹브라우저는 ts파일을 못읽기때문에,js파일로 변환 작업해줘야됨)

• js파일로 변환하려면 에디터에서 터미널 새로 열고 tsc -w 입력해두면 얘가 자동으로 ts파일을 js 파일로 근처에 변환해줌.
  (윈도우 Vscode에서 안된다면 cmd 터미널열고 해당 폴더 루트로 이동후 입력해보자)

• HTML파일 등에서 타입스크립트로 작성한 코드를 사용하려면 .ts가 아니라 변환된 .js 파일 사용
  

EX)

<script src='변환된파일.js'></script>

React 프로젝트에서 Typescript 사용할 경우

1. 기존 React 프로젝트에 타입스크립트 적용할 경우
   

• 작업폴더 경로에서 터미널 열고, 다음 입력
  (불안정하고 에러 많이남 되도록이면 처음부터 타입스크립트 적용된 리액트 프로젝트 생성 추천, yarn1버전 설치되어있으면 yarn add 명령어 써주는것도 추천)

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

1. 타입스크립트 적용된 리액트 프로젝트 새로 생성

• 새로 작업폴더 하나 만들고 에디터와 터미널 오픈후 다음 입력

npx create-react-app my-app --template typescript

개요

localStorage.setItem 혹은 localStorage.getItem 코드를 사용할때 JSON.stringify(),JSON.parse()를 자주 사용하는 모습을 볼 수 있다. 왜 사용하는걸까? 사용안하면 어떻게될까?

JSON.stringify() 짚고 넘어가기

const res = await axios.post(API_URL, userData);

localStorage.setItem('user', res.data);

위 코드를 사용하면 localStorage에는 이런식으로 저장된다.

key:user, value:[object object]

그럼 여기에 JSON.stringify()를 사용해주면?

key:user,
value: "email": "wndtlr1024@gmail.com"
       "name": "정중식"
       "_id": "63078966bfb3a0725d3fd2e0"

이런식으로 문자열로 저장된다!

JSON.parse() 짚고 넘어가기

const user = (localStorage.getItem('user'));

console.log(user);
// {"_id":"63078966bfb3a0725d3fd2e0","name":"정중식","email":"asdasd@gmail.com",}

콘솔에 찍히는건 문자열이 찍힌다. 보통 localStorage.getItem을 사용하는건 객체로 사용하기위해서 인데, 이렇게 문자열로 찍히면 사용할 수 가없다. 그래서 JSON.parse()을 사용해주면,

const user = JSON.parse(localStorage.getItem('user'));
console.log(user);
// {_id: '63078966bfb3a0725d3fd2e0', name: '정중식', email: 'asdasd@gmail.com'}

이런식으로 객체로 찍히는것을 알 수 있다.

200

200 OK: 성공적으로 처리했을 때 쓰인다. 가장 일반적으로 볼 수 있는 HTTP 상태

201

201 Created: 요청이 성공적으로 처리되어서 리소스가 만들어졌음을 의미한다.
201: POST 나 PUT 으로 게시물 작성이나 회원 가입 등의 새로운 데이터를 서버에 생성하는(쓰는, 넣는) 작업이 성공했을 때 반환함

400

400: 잘못된 형식의 구문으로 인해 서버에서 요청을 이해할 수 없는 상태

예를 들면 Content-Type: application/json으로 되어있는데 JSON 타입으로 보내지 않은 요청이거나 JSON으로 요청한 데이터이지만 누락한 값 또는 데이터형식에 맞지않은 정보(number가 들어가는 데이터에 string이 들어가 있다던지..)가 있는 경우 유효하지 않으므로 서버에서 400 코드를 응답하게 된다.

401

401 (Unauthorized) : 401 코드는 클라이언트의 권한이 없어 작업을 진행할 수 없는 경우의 에러코드

예를 들어 cookie에 sessionId의 유효시간이 만료되어 권한을 상실하게되고 더이상 작업을 진행할 수 없는 경우 401 코드를 응답하게 된다.

참고 자료 (라고 쓰고 copy & paste라고 읽는다..)

okky. jch9537.log.