Tyrellcode

TypeScript란 범용성이 넓은 자바스크립트 특성상 문법적인 허용범위가 너무 넓어서 코드가 정상적으로 컴파일 되더라도 실행에 문제가 생기는 경우가 많았다. 이것을 해결하기위해 문법적인 부분을 추가한 것이 Typescript라 보면되겠다. 거의 똑같다.

우선

https://nodejs.org/ko/

node -v
npm -v

yarn 설치

보통 npm을 명령어로 설치하지만 페이스북이 만든 자바스크립트 패키지 매니저로 yarn이 더 안정성과 보안성이 뛰어나다고 알려져있다.

npm install yarn -g
//작업 폴더 만들기
yarn init -y

//타입스크립트를 글로벌 전역으로 설치한다.
yarn install -g typescript

// 환경설정 파일 설치
 tsc --init
 
 //만약 tsc --init 작동안할시
 
 tsc -watch 입력후 실행

tsc --init 문제가 초기에 해결이 안됐는데 아래와 같은 문구를 출력하였다. 이는 tsc -watch를 실행한 후에는 정상적으로 작동하였다.

error TS6231: Could not resolve the path '—init' with the extensions: '.ts', '.tsx', '.d.ts', '.cts', '.d.cts', '.mts', '.d.mts'.
  The file is in the program because:
    Root file specified for compilation

그러면 아래와 같이 파일이 생성되게 된다.

//Typescrpt를 node에서 실행가능하도록 런타임 설치
//ts를 js로 컴파일하여 js로 실행하도록 해준다.

yarn i ts-node --save-dev

yarn create next-app --typescript 프로젝트명

프로젝트명에는 대문자 x 


//아래 문구를 실행할때에는 무조건 행 프로젝트 디렉토리에서 실행해야한다.
yarn dev



//Eslin는 정해진 코드 포멧을 따르지 않을경우 에러를 표시해주는것으로 .eslintrc.json파일 안에 규칙을 정의한다.
yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-next eslint-config-prettier

.eslintrc.json 파일이 있을텐데 다 지우고 아래를 복붙



{
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "next/core-web-vitals",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "rules": {
    "@typescript-eslint/no-unused-vars": "error", // 사용되지 않는 변수를 에러로 인식
    "@typescript-eslint/no-explicit-any": "error" // any 타입 정의를 에러로 인식
  }
}

yarn add -D prettier



.prettierrc.json 해당 프로젝트 경로에 생성
//일반적인 .prettierrc.json 규칙 아래와 같이 정의
{
  "semi": false,
  "trailingComma": "es5",
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false
}

Default formatter를 아래와 같이 설정

format on save 도 설정

보통 프로젝트를 할 때 Git을 이용하여 협업을 한다. 이번 포스터에서는 기본적으로 알아야하는 Git의 명령어를 정리해보도록하겠다.

아래는 나의 Git이다. 나의 경우 노트북과 데스크탑을 이용하기 때문에 git을 이용하여 코드를 Git 에 올려서 사용한다.

왼쪽에 있는 New 버튼으로 새로운 프로젝트를 만들 수 있는데 이번 프로젝트에서는 test_po라는 이름으로 만들었다. readme.md 는 프로젝트에 대한 정보 및 저작권 등을 기록해 놓을 수 있는 파일이다.

그럼 아래와 같은 화면이 나오게 된다.

아래에서 사용하게될 git 주소는 https://github.com/~~.git  형태의 주소이다.

나와 있는 git 코드를 사용하기 위해서는 git bash라는 것이 필요하다.

https://git-scm.com/

git에 들어가서 자기 운영체제에 맞는 파일을 설치해주면 된다.

git bash를 검색하면 cmd와 같은 커맨드 창이 나오게 된다.

거기에 아래 코드 1,2번째 줄을 입력하면 되는데 이 과정을 하는 이유는 나중에 자료를 올릴 때 누가 올리고 수정했는지 알아야하기 때문에 초기에 설정이 필요하다. 처음만 설정하면 되고 만약 내가 다른 컴퓨터에서도 사용한다면 해당 컴퓨터에서도 config 설정이 필요하다.

3번째줄 git config --list의 경우 1,2 번째의 이름 변경이 제대로 되었는지 확인하는 환경 설정 보기이다.

name,email 설정할때 아무반응이 없이 다음 명령어 입력 칸이 나오니 --list를 이용해서 변경되었는지 확인하면 된다.

git config --global user.name "test" //이름 설정
git config --global user.email "test@test.com" //글로벌 이메일 설정
git config --list  //환경 설정 내용 보기

그 후 내가 업로드 하고싶은 파일이나 폴더를 Git에 올리면 되는데 이를 위해서는

해당 폴더 파일 우클릭후 Git bash here을 클릭하면 해당 폴더를 기준으로한 작업 bash가 열리게 된다.

수동으로 하기 위해서는 cd "경로"를 git bash에 입력하면된다.

cd "경로"

그 후 아래 코드를 순차적으로 넣으면 된다. git status는 변경사항이 있는 파일이나 새로추가한 파일의 경우 빨간색으로 나타내고 git add를 사용하여 변경 사항을 올리게 되면 초록색으로 변경된다. 이때 commit 명령을 사용해 repository에 올리고 마지막 push를 하게 되면 서버에 변경사항이 올라가게 된다. 아래 두번째 사진에 예시를 올려놓음

git init    //.git 파일 생성

git add .   //선택 폴더 내의 모든 파일을 staging area에 올린다.

  -> 특정파일만 하고 싶다면 ex) git add test.txt
  
 git branch (만들 가지명) // git branch 만드는 코드

git status   //상태확인

git commit -m "코멘트" // 마지막으로 파일을 올리기 전 변경된 내용에 대한 코멘트 등을 적는다.
-> repository에 올라간다.

git remote add origin 프로젝트 주소
<- clone에 https://프로젝트주소.git 주소를 적어주면 된다. 이걸 해야 어디로 파일을 올릴 것인지 정할 수 있음
<- 아래 3번째 사진 보고 참고

git push origin main //최종적으로 서버에 파일을 올리게 된다.
or
git push --set-upstream origin main

아래는 git이 작동되는 원리를 설명한 그림으로

- Working Directory: 현재 파일을 작업(추가, 수정, 삭제)하고 있는 영역 (state 확인시 빨간 글자로 나타남)

- Staging Area: Working Directory에서 add 명령어를 통해 파일이 이동되어 있는 상태로 commit 전 상태(state 확인시 녹색 글자 상태)

- Repository: commit으로 repository에 올려놓고 push 명령어를 통해 최종적으로 원격 저장소로 업로드하게된다. 

이제 파일 올리는 방법을 알았으니 파일 다운로드 하는 방법에 대해 설명하겠다.

만약 새로운 컴퓨터를 사용한다면, Git bash에서 cd 명령어를 사용하여 저장할 파일 경로로 설정한 뒤, 아래 코드를 사용한다.

git init
git clone 가져올 프로젝트 주소

해당 경로에 프로젝트 파일이 모두 저장된다.

git pull origin branch 명

내가 원하는 branch를 가져오고 싶을 때 쓰고 위 clone에서도 사용가능

만약 수정한 파일을 commit 과 push를 다 한 상태여서 다른 컴퓨터에서는 새로운 변경사항이 반영되기 전이라면,  다시 clone을 하거나 pull을 통해 데이터를 가져올 수 있다.

clone은 모든 데이터를 가져오기 때문에 시간적 데이터적으로 손해를 볼 수 있으니 맨 처음에만 clone을 사용하고

변경사항만 비교해서 가져오는 pull을 사용한다면, 더 효율적으로 사용 가능할 것이다.

git init은 처음에만 사용하고 그 뒤로는 사용할 필요가 없다. 숨김파일로 이미 폴더에 저장되어 있기 때문.

가끔 push할 때 error가 뜨는 경우가 있는데 이는 pull을 이용하여 기존 서버 프로젝트 데이터를 가져오지 않았기 때문에 발생한다. pull을 사용하고 제대로 병합이 안됐을 경우 코드를 다시 추가 한 후 push하면 된다.

대게 프로젝트는 기존 파일을 바로 변경하는 것이 아닌 branch 형식으로 진행되게 된다.

즉 기존 파일을 복사하여 새로운 가지로 만들고 수정한 뒤에 나중에 병합(merge)를 하는것이다.

branch를 만드는 것은 github 사이트에서도 가능하지만, 코드로도 가능하다.

간단하게 설명하자면,

git branch test // test라는 이름의 branch 생성
git branch -v  // 현재 존재하는 branch 확인
git switch test // test branch로 이동
git push --set-upstream origin test // 처음 branch를 업로드 할때는 --set-upstream 옵션을 줘야 올라감
= git push -u origin test // 4번코드와 같은 코드
그 이후로는 git push 만 써도 상관없다.

만약 branch를 삭제하고 싶을 때
git branch -d branch명 //컴퓨터에 있는 branch 제거 이를 하기 위해서는 다른 branch로 이동 후 삭제할 것
git push origin --delete branch명 // 서버에 있는 branch 제거

위 코드를 실행하면 github에 branch가 하나 더 생성된 것을 볼 수 있다.