🔧프로젝트 생성 : NPM&yarn(yarn-berry)

 Nodejs는 개발 환경을 커스텀 할 수 있다. 개발 환경이 자동으로 설정되지 않는 경우에는 직접 커스텀을 해야하기 때문에 Nodejs를 알아야 한다. 따라서 커스텀을 하기 위해서는 Nodejs가 기본으로 설치 되어 있어야 한다. (본인은 Nodejs를 설치와 관리리를 NVM으로 관리하고 있다.) 참고로 개발 환경이 주목적이라면 최신 버전을 사용하고 그렇지 않고 서버를 위함이라면 Nodejs LTS버전을 사용하면 된다. 수업에서는 nodejs 13.7.0버전을 사용하고 있다. 하지만 우리는 최신 버전을 사용할 것이며 22.3.0버전을 사용할 것이다. 따라서 NVM으로 최신버전을 맞춰 놓자.

NVM

//CMD
//실행 순서
//NVM 설치 가능 버전 확인
nvm list available

//원하는 버전 설치
nvm install 22.3.0

//현재 적용 버전 확인
nvm ls

//원하는 버전 교체
nvm use 22.3.0

NPM &  yarn(yarn-berry)

수업에서는 NPM으로 진행하지만 본인은 yarn-berry를 상용해서 패키지 메니저를 관리 할 것이다.

//CMD
//npm으로 yarn 설치
npm install -g yarn

//yarn 버전을 berry버전으로 설치
yarn set version berry

이렇게 설치를 하게되면 .yarn 파일이 생성이되면서 기본적인 package.json파일이 생성이 된다. 여기서 우리는 npm init이 아닌 yarn에 맞는 설치를 할 것이다.

//CMD
//init으로 새로운 프로젝트 기본 설정
yarn init

그렇게 package.json을 보게 되면 덩그러니 name과 packageManager만 덩그러니 놓여 있는 코드를 볼 수 있을 것이다. yarn은 우리가 직접 하나 하나 설정하고 종속되어야 하는 부분들을 작성 해야한다. 이것이 번거롭고 어렵게 느껴진다면 기본적인 npm을 사용하라.

//package.json
{
  "name": "Frontend-Development-Environment",
  "packageManager": "yarn@4.3.0",
}

이러한 코드를 우리는 직접 작성해야한다. 따라서 아래와 같이 작성하면 된다.

//package.json
{
  "name": "Frontend-Development-Environment",
  "version": "1.0.0",
  "packageManager": "yarn@4.3.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

위의 각 설정 설명은 아래와 같다.

• name: 프로젝트의 이름을 "Frontend-Development-Environment"로 정의하고 있습니다. 이는 프로젝트를 식별하는 데 사용됩니다.
• version: 프로젝트의 버전을 "1.0.0"로 설정하고 있습니다. 이는 초기 릴리스를 의미합니다.
• packageManager: "yarn@4.3.0"을 사용하고 있음을 명시합니다. 이는 프로젝트가 Yarn Berry를 패키지 매니저로 사용하고 있음을 나타냅니다.
• main: 프로젝트의 메인 진입 파일을 "index.js"로 설정하고 있습니다. 이 파일은 프로젝트가 실행될 때 가장 먼저 로드되는 파일입니다.
• scripts: "test" 스크립트가 정의되어 있으며, 테스트가 정의되지 않았을 때 오류 메시지를 출력하고 비정상 종료를 시도하는 명령을 포함합니다.
  • "test" 스크립트의 역할:
    • 명령 실행: "echo \"Error: no test specified\" && exit 1" 이 명령은 두 부분으로 구성됩니다.
      • echo 명령: "Error: no test specified" 라는 메시지를 콘솔에 출력합니다. 이는 테스트가 아직 구현되지 않았음을 사용자에게 알리는 용도로 사용됩니다.
      • exit 명령: && 연산자는 첫 번째 명령(echo)이 성공적으로 실행된 후에 두 번째 명령을 실행하게 합니다. exit 1은 스크립트를 상태 코드 1로 종료시킵니다. 상태 코드 1은 일반적으로 오류를 나타내며, 이는 테스트 스크립트가 실패했음을 의미합니다.
• author: 작성자 정보는 비어 있습니다.
• license: 라이선스는 "ISC"로 설정되어 있습니다. 이는 오픈소스 라이선스 중 하나입니다.

참고로 package.json 파일의 scripts 섹션에서 정의하는 스크립트는 Yarn이나 npm에서 동일하게 작동한다.

//command npm 중에서...

All commands:

    access, adduser, audit, bugs, cache, ci, completion,
    config, dedupe, deprecate, diff, dist-tag, docs, doctor,
    edit, exec, explain, explore, find-dupes, fund, get, help,
    help-search, hook, init, install, install-ci-test,
    install-test, link, ll, login, logout, ls, org, outdated,
    owner, pack, ping, pkg, prefix, profile, prune, publish,
    query, rebuild, repo, restart, root, run-script, sbom,
    search, set, shrinkwrap, star, stars, start, stop, team,
    test, token, uninstall, unpublish, unstar, update, version,
    view, whoami

추가적으로 package.json파일을 수정을 하면 아래와 같다.

//package.json

{
  "name": "Frontend-Development-Environment",
  "version": "1.0.0",
  "packageManager": "yarn@4.3.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "echo \"여기에 빌드 스크립트를 추가합니다.\"",
    "start": "echo \"여기에 스타트 스크립트를 추가합니다.\""
  },
  "author": "",
  "license": "ISC"
}

이 scripts를 실행하려면 아래와 같이 작성을 하면 된다.

//CMD

yarn run build
여기에 빌드 스크립트를 추가합니다.

yarn run start
여기에 스타트 스크립트를 추가합니다.

 

이렇게 npm이 아닌 yarn을 통해서 package.json의 기본적인 패키지 관리와 설정을 해 보았다. 마지막 참고한 블로그는 리액트를 기반으로 yarn을 통해서 패키지 종속 관계를 설정하는 방법이다. 리액트를 기반으로 패키지를 설정하기 위해 아래 링크를 참고하면 좋을 듯 하다. 추후에 시간이 된다면 yarn에 대한 포스팅을 작성해 볼 것이다.

•  REFERENCE
  • https://jin2rang.tistory.com/entry/Window-Nodejs-%EC%84%A4%EC%B9%982
  • https://enjoydev.life/blog/frontend/7-yarn-npm
  • https://velog.io/@haru/yarn-berry-settings
  • https://velog.io/@seokunee/Yarn-Berry%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EC%9E%90