타입스크립트 graphql-codegen Eslint Early exit

타입스크립트

자바스크립트의 타입을 강제시키는 언어
자바스크립트를 안전하게 사용하기 위해 마이크로소프트에서 만든 언어

웹브라우저는 HTML, CSS, Javascript 밖에 읽을 수 없다. 따라서 타입스크립트로 만든 프로그램은 실제로 실행시에 자바스크립트로 변경돼어 실행된된다.

▶︎ 이렇게 변경되는 작업을 컴파일 또는 트랜스파일 이라 한다.
▶︎ 이렇게 변경해주는 도구를 컴파일러 또는 트랜스파일러 이라 한다.

컴파일: 하나의 언어가 다른 언어로 변경되는 작업
트랜스파일: 하나의 언어가 같은 언어의 다른 버전으로 변경되는 작업

타입스크립트는 컴파일 언어

import {useMutation, gql } from '@apollo/client'
import { useRouter } from 'next/router'
import { useState } from 'react'
import { IMutation, IMutationCreateBoardArgs } from '../../src/commons/types/generated/types'

const CREATE_BOARD = gql`
    mutation createBoard($writer:String, $title:String, $contents:String) {
        createBoard(writer:$writer, title:$title, contents:$contents){
        number
        message
        }
    }
`

export default function DynamicBoardWrite(){
    const router = useRouter()

    const [ creatBoard ] = useMutation<Pick <IMutation, 'createBoard'>, IMutationCreateBoardArgs >(CREATE_BOARD)
    const [myWriter, setMyWriter] = useState<string>('')
    const [myTitle, setMyTitle] = useState<string>('')
    const [myContents, setMyContents] = useState('')

    const bbb: string = "asdf"  // 상수에 타입 지정하기
    

    // setMyWriter(234243423)  // 문자랑 숫자 모두 넣고 싶을때
    

    function onChangeMyWriter(event){
        setMyWriter(event.target.value)
    }

    function onChangeMyTtitle(event){
        setMyTitle(event.target.value)
    }

    function onChangeMyContents(event){
        setMyContents(event.target.value)
    }

    async function aaa(){
        try {
            const result = await creatBoard({
                variables: { writer : myWriter, title: myTitle, contents: myContents}
            })
            result.data.createBoard.number
            console.log(result)
            console.log(result.data.createBoard.number)    
            // router.push('/05-06-dynamic-board-read/'+ result.data.creatBoard.number ) 옛날방식
            router.push(`/05-06-dynamic-board-read/${result.data.createBoard.number}`) 
            // 최신 방식 (템플릿 리터럴)

        } catch(error){
            console.log(error)
        }
    }
  
    return (
        <>
            작성자: <input type="text" onChange={onChangeMyWriter} /><br />
            제목: <input type="text" onChange={onChangeMyTtitle} /><br />
            내용: <input type="text" onChange={onChangeMyContents} /><br />
            <button onClick={aaa}>GRAPQL-API 요청하기!!!</button>
        </>
    )
}

타입스크립트를 사용하는 이유

타입이 엄격하여 숫자 변수에는 숫자만 넣고, 문자 변수에는 문자만 넣도록 하여 안전하다.

// 정적타입이 아닌 경우
function sum (a,b){
return a+b
}

// 정적타입(타입스크립트)
function sum (a: number,b: number){
return a+b
}

gaphql에 타입스크립트 적용하기(graphql-codegen)

Playground에는 API가 너무 많아서 하나하나 타입을 보고 적을 수 없다. 그래서 자동으로 해주는 도구 graphql-codegen을 사용한다.
command + i

eslint

코드린터

여럿이서 코딩하면서 문법적인 규칙을 통일 시키기 위해 eslint 사용
ex) import 순서. ==금지. === 허용

코드포멧터

여럿이서 코딩할 때 화면에 보이는 부분을 통일시키기 위해 prettier 사용
ex) 띄어쓰기 2칸. ~길이 넘으면 줄바꿈

node?

브라우저와 동일.
자바스크립트로 개발을 하는데 이것을 읽을수 있는게 브라우저 밖에 없었음. 자바스크립트는 브라우저에만 사용하니까 브라우저가 아닌 환경에서 운영체제에도 실행시켜줄수 있게 하기 위해서 등장.
브라우저가 아닌 다른 환경에서 실행시켜주는 도구

husky

실무에서 git에 commit 하기 전에, 기존의 규칙을 지켰는지 검증해주는 도구.
규칙에 어긋나는 코드가 있다면 commit을 강제로 거절한다.

• 허스키 끄기 방법

// package.json 에서 지우기
 "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "**/*.{ts,tsx,js,jsx}": [
      "npx eslint ."
    ]
  }

---

early exit 패턴(early return)

예외 처리를 먼저하고 나머지를 처리하는 방식
코드의 구조를 단순하게 만들어주는 패턴
return: 함수를 종류한다는 의미

//틀리면 뒤로 빼버리는 early exit 패턴
 if (startPage + 10 <= lastPage) return;
//return 으로 종료시킴.

  if (!myContents) {
      alert("내용이 수정되지 않았습니다.");
      return;
    }
    if (!myPassword) {
      alert("비밀번호가 입력되지 않았습니다.");
      return;
  }