sec02. 프로젝트 관리하기

sngmin·2024년 1월 7일

습관부터 바꿔주는 Node.js & Express 기초

목록 보기

2/8

1. npm 사용법

npm - Node Package Manager. 노드로 이루어진 패키지(누군가 작성해놓은 소스코드들의 모음)들을 관리하는 관리자

2. yarn 사용법

yarn - 패키지 다운받고 설치하고 지우고,, 관리하는 매니저. npm보다 속도가 빠름

// yarn 설치
npm install -global yarn

🗣️ npm보다 yarn이 빠르기 때문에 yarn 사용을 추천

3. package.json 이란?

node_modules: 다운받은 코드 저장해놓는 폴더. 다른 사람들이 원격 저장소에 저장한 코드들 그대로 복사해서 폴더 안에 저장
package.json: 저장된 소스코드들, 코드의 이름들 명세해주는 일종의 영수증. 프로젝트의 이름, 다운받은 프로젝트 이름들, 버전 등등 명시되어 있음

yarn으로 package.json 파일 생성하기

vscode 실행. example 파일 생성하기

터미널 실행

모든 설정이 끝나면 다음과 같이 package.json 파일이 생성된다

yarn으로 express 다운로드

yarn add express

node_modules 폴더 생성됨 -> express를 설치하면서 express가 사용한 폴더들 들어있음. yarn add 통해서 다운받은 패키지들 저장됨

npm으로 package.json

터미널 실행

npm init

설정 끝나면 다음과 같이 package.json 파일 생성됨

scripts

scripts 안에 작성되는 키워드들은 npm이나 yarn 뒤에 입력하면 우측에 적힌 명령어 자동으로 실행

  "scripts": {
    "test": "node index.js"
  }

-> node index.js 실행(index.js 파일 실행됨)

4. Transpiling과 Babel

Transpile: 어떤 특정 언어로 작성된 소스 코드를 다른 소스 코드로 변환하는 것
Babel: 자바스크립트에서 transpiling 하는 도구

Babel 사용하기 위해 필요한 라이브러리

$yarn add -D @babel/cli @babel/core @babel/node @babel/preset-env

@babel/core: 바벨 사용하기 위해 필수
@babel/cli: command line 통해 코드 transpile
@babel/node: ES6로 작성된 노드 코드 실행(성능 저하가 있어 개발 및 테스트 시에만 사용)
📌-D: 성능 저하 방지하기 위함. 개발 환경에서만 사용하겠다는 의미
@babel/parse-env: 프리셋을 통해 간단히 바벨 트랜스 파일링 설정

package.json에 추가

// node가 아닌 babel-node로 파일 실행
"scripts": {
	"dev": "babel-node src/index.js"
},
// babel 사용하는 preset 등록
"babel": {
	"presets" : [
    	"@babel/preset-env"
    ]
}

babel 설치하고 폴더 import 하기

// package.json에 추가
"scripts": {
    "dev":"babel-node src/index.js"
  },
  "babel": {
    "presets" : [
        "@babel/preset-env" 
      ]
  },

src/user/index.js

export {users} from "./user"

src/user/user.js

export const users = [
    {
        id : 1,
        name : "sngmin"
    }
]

src/index.js

import { users } from "./user";

console.log("Users : ", users);

결과

5. Github 개념 설명 및 리포 생성

$brew install git

📌 Github에 레포지토리 생성하기 ✔️

📌 https://github.com/maybteam/nodejs-prisma 주소에 있는 코드 clone하기 ✔️

git clone https://github.com/maybteam/nodejs-prisma

6. Git cli 사용 및 코드 업로드

Working Directory(작업 공간)
Staging Area(임시 저장소)
Local Repository(로컬 저장소) // 여기까지 내 컴퓨터
Remote Repository(원격 저장소) // Github

✔️ 자주 사용하는 명령어

git add. / git add[폴더 경로]

현재 폴더 혹은 입력한 경로에 있는 폴더를 스테이징 영역에 추가. 작업 공간에서 임시 저장소로 옮겨주는 명령어. '.'은 현재 폴더를 의미, 작업하고 있는 현재 폴더를 다 반영하겠다는 의미.
git commit -m "커밋할 메세지"
저장할 메세지(중요)와 함께 스테이징 영역에 있는 코드를 로컬 저장소에 저장
git push
로컬 저장소에서 레포지토리로 변경사항 밀기. 코드를 원격 저장소에 올림.
git clone
서버 저장소의 데이터를 로컬 컴퓨터로 복사

git branch [브랜치 이름]

새로운 브랜치 생성
git checkout [브랜치 이름]
해당 브랜치로의 이동
git merge [브랜치 이름]
[브랜치 이름]의 브랜치를 현재 브랜치로 병합
git fetch
깃 변경사항 최신화

터미널 창에 git clone <내 레포 주소> 하면 폴더 생김 !! (강의에서는 탐색기에 바로 보였는데 나는 안 보여서 직접 불러와야 했음... 뭐가 문제일까? 연동은 제대로 됨)

index.js 파일 생성해서 작성하면

이렇게 수정됨을 확인할 수 있다.(수정되었다는 뜻)