TIL - .gitignore 와 yarn.lock

haileyself·2019년 12월 15일

노마드코더의 강의를 다시 들으려고 하면서 repository를 새로 만들게 되었다.
공부한 내용을 올리려고 하고 최초 커밋을 했는데
yarn.lock 파일에 보안취약문제가 있다고 alert를 받았다.

serialize-javascript 파일을 수정하는 작업을 진행했다. version을 2.1.1로 수정하고 다시 git에 커밋/푸쉬를 진행했는데도 alert가 사라지지 않았다.
결국, 저 위에 초록색 버튼 Create automated security update 버튼을 누르니 해당 alert가 사라졌다.
아마도 자동으로 github 에서 문제를 해결해주는 무언가를 내가 켰겠지..

2020. 1.28 내용 수정

2020년 1월 28일 !
새로운 공부내용을 repository에 올려서 넣으니 또 똑같은 문제가 발생했다!!
이번에는 serialize-javascript 를 직접 업그레이드 해보기로했다.
아래 사이트를 참고해서,
2.1.1 버전이었던 걸 업그레이드해서 2.1.2로 업그레이드 했고 !
해당 alert가 바로 사라지진 않았지만, 깃에서 준 조언대로 내가 행했기때문에
이게 더 정확한 방법같다

npm i serialize-javascript

참고사이트 : https://www.npmjs.com/package/serialize-javascript

automated security update 란?

repository에 의존성 관리의 취약점에 대한 alert를 받게 됬을 때, 해당 repository에 security update를 able로 해두면, Github에서 자동으로 의존성 취약점을 가진 파일들을 업그레이드하는 PR을 repository에 생성한다. 만약 내가 선택해서 의존성 파일을 업그레이드하고, PR을 생성하려면 해당 기능을 disable하게 만들면 된다. Automated security request가 오면 빠르게 리뷰를 하고, merge를 해야한다.

이 문제를 해결하려고 하다가 serialize가 무엇인가에 대해서 문득 궁금해졌다.

serialize란 무엇인가?

서로 다른 언어나 형태를 가지고 있는 것들을 서로 이해할 수 있도록 형태를 잡아서 묶어주는 것을 Serialization이라고 함.(예를 들어, DB와 프로그래밍 언어형태가 다른데 서로 알아들을 수 있는 형태로 묶어주는 것을 말함)

JS에서 JSON.stringify() 함수를 호출하는 것과 비슷한 역할을 함(객체를 json 으로 만드는 것과 비슷)
serialization은 생각보다 많이 쓰인다.

위의 방법 외에 다른 해결방법을 찾다가, .gitignore에 yarn.lock 파일을 넣으면 해결이 된다는 글을 찾게 되었고, gitignore과 yarn.lock에 대해서 알아보았다.
결론을 말하자면 yarn.lock 파일은 gitignore에 넣지 않고, git에서 관리할 수 있게끔 commit을 하는 것이 좋다.

.gitignore 파일이란?

git 버전관리에서 제외(github에 업로드하지않을 파일 목록)할 파일 목록을 지정하는 파일
.gitignore이 파일명이며, 해당 파일 목록에 들어가는 대표적인 것은 node_modules 가 있음.
node_modules 정보는 이미 package.json에 명시가 되어있기때문에
언제든 쉽게 모듈을 설치할 수 있어서 github에 굳이 올리지않아도 되어, gitignore 파일에 넣는다.
그리고 node_modules는 크기가 크다! 그래서 git에 안올려도되면 안올리는 게 좋음!

.gitignore 파일 설정법

리액트 CRA를 하고 git을 연결하면 자연스럽게 .gitignore 파일이 생김
.gitignore 파일안에 무시할 대상 경로만 넣어주면 됨!
요렇게 파일 안에다가 경로표시하고, 이름을 적으면 된다!

yarn이란?

자바스크립트 패키지 매니저로서, npm과 가장 많이 쓰이는 manager.
yarn을 사용해서 프로젝트에 새로운 패키지를 설치하면, yarn.lock이 자동으로 생성된다.

Yarn.lock이란?

Yarn 패키지 매니저의 패키지 잠금파일!

잠금파일이 왜 필요할까?

설치가 필요한 패키지들이 package.json 파일에 등록되어있으면, 해당 파일을 통해 모두가 npm이나 yarn 설치 명령어로 모든 패키지를 버전에 맞게 설치할 수 있음.
그러나, 설치하는 시점에 따라 패키지버전이 달라짐
(왜? package.json에는 특정버전으로 지정되어있는 것이 아니라, SemVer 규칙에 따라 범위로 지정되어있음)
서로 다른 패키지를 설치해서 사용하면 개발자 간의 혼선이 생길 수 있기때문에, 패키지 잠금파일이 생김!
<yarn.lock>

# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1

"@babel/code-frame@7.5.5", "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.5.5":
  version "7.5.5"
  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.5.5.tgz#bc0782f6d69f7b7d49531219699b988f669a8f9d"
  integrity sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==
  dependencies:
    "@babel/highlight" "^7.0.0"

"@babel/core@7.7.4", "@babel/core@^7.1.0", "@babel/core@^7.4.5":
  version "7.7.4"
  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.7.4.tgz#37e864532200cb6b50ee9a4045f5f817840166ab"
  integrity sha512-+bYbx56j4nYBmpsWtnPUsKW3NdnYxbqyfrP2w9wILBuHzdfIKz9prieZK0DFPyIzkjYVUe4QkusGL07r5pXznQ==
  dependencies:
    "@babel/code-frame" "^7.5.5"
    "@babel/generator" "^7.7.4"
    "@babel/helpers" "^7.7.4"
    "@babel/parser" "^7.7.4"
    "@babel/template" "^7.7.4"
    "@babel/traverse" "^7.7.4"
    "@babel/types" "^7.7.4"
//일부만 발췌

참고 : NPM(Node Packaged Mananger의 약자)
NPM을 실행하면, package-lock.json이 생성됨

<package-lock.json>

{
  "name": "movie-app-2019",
  "version": "0.1.0",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
    "@babel/code-frame": {
      "version": "7.5.5",
      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.5.5.tgz",
      "integrity": "sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==",
      "requires": {
        "@babel/highlight": "^7.0.0"
      }
    },
    "@babel/core": {
      "version": "7.7.4",
      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.7.4.tgz",
      "integrity": "sha512-+bYbx56j4nYBmpsWtnPUsKW3NdnYxbqyfrP2w9wILBuHzdfIKz9prieZK0DFPyIzkjYVUe4QkusGL07r5pXznQ==",
      "requires": {
        "@babel/code-frame": "^7.5.5",
        "@babel/generator": "^7.7.4",
        "@babel/helpers": "^7.7.4",
        "@babel/parser": "^7.7.4",
        "@babel/template": "^7.7.4",
        "@babel/traverse": "^7.7.4",
        "@babel/types": "^7.7.4",
        "convert-source-map": "^1.7.0",
        "debug": "^4.1.0",
        "json5": "^2.1.0",
        "lodash": "^4.17.13",
        "resolve": "^1.3.2",
        "semver": "^5.4.1",
        "source-map": "^0.5.0"
      },
      "dependencies": {
        "debug": {
          "version": "4.1.1",
          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
          "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
          "requires": {
            "ms": "^2.1.1"
          }
        },
        "semver": {
          "version": "5.7.1",
          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
        },
        "source-map": {
          "version": "0.5.7",
          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
        }
      }
    },
  }
  //일부만 발췌