본문 바로가기
Study/Frontend_study

패스트캠퍼스 환급챌린지 36일차 미션 (3월 7일) : 프론트엔드개발 강의 후기

by ramiiiiii 2024. 3. 7.

오늘의 목표

남은 노드 시리즈를 끝내보자~!! 2탄!!ㅎㅎ 진짜 오늘은 끝내보자아아

 

07. NPM 프로젝트의 버전 관리

08. NPM 프로젝트의 패키지 버전 일치시키기

 

 

후하 으아 너무 힘들다

끄어 퇴근하고 와서 침대에 앉아서 강의를 듣고 개발공부를 시작합니다..!! 똬..!

어제 내용 좀 복습 좀 하고, 그리고 오늘강의를 시작해봤다 오늘은

 

07-

 

테스트 프로젝트를 깃헙 저장소에 push 해보자!

 

npm install 을 통해서 여러 패키지(pacel bundler, lodash)를 설치하는데 모두 node.modules 라는 폴더 안으로 들어가고,

그것의 내역은 package.jason 에 devDependencies , dependancies 라는 옵션에 버전과 함께 명시가 됨.

그리고 파슬 번들러 , 로데시가 내부적으로 사용하는 또 다른 패키지들은 패키지-rock.jason 에 명시가 됨

 

그리고 cache, dist, node modules 라는 각각의 폴더들은 터미널에서 npm install을 통하거나 혹은 npm run bundler 라는 파슬 번들러를 통해서 실제로 프로젝트를 제품으로 만들어주는 명령을 통해서 알아서 자동으로 만들어지는 폴더들이다.

그래서 굳이 우리가 후작업을 통해서 만들어낼 수 있는 폴더들은 따로 버전 관리를 해줄 필요가 없다. 즉, 버전 관리를 할 필요가 없는 파일들과 폴더들은 우리가 github 의 저장소에 따로 푸쉬를 하지 않아도 된다는 이야기다.

 

*node modules 파일은 굳이 버전 관리를 해주는 것이 오히려 효율을 떨어뜨리는 방법이다. 왜냐하면 후작업을 통해서 npm run build 혹은 npm run dev 라는 명령으로 언제든 똑같은 구조로 생성할 수 있기 때문이다.

 

 

08-

예제에서 설치한 외부 모듈이라는 건 그 모듈을 만든 제 3자가 관리하는 것이고, 그에 의해 버전이 바뀔 수도 있다는 의미다.

그리고 그렇게 바뀌면 그 모듈의 내용이랑 사용법도 같이 달라지게 된다. 

 

그래서 지금까지 배운 내용대로 모듈의 이름만 가지고 설치(ex. npm install axious) 하게 되면 모듈의 버전이 실제 예제에서 설치한 모듈의 버전과 달라지는 문제가 발생한다.

 

>> 그랬을 때 근본적으로 이 문제를 해결할 수 있는 방법 <<

1) 모든 버전의 외부 모듈을 설치하기!

package-lock.json 에는 현재 설치된, 모든 외부 모듈의 버전이 트리 구조로 명시되어 있음.

즉, 예제를 완성했을 당시와 같은 모듈버전으로 프로젝트를 시작할 수 있다는 거다.

 

2) package.json 과 lock.json 파일을 동시에 같이 하나의 묶음으로 강의 예제 저장소에서 가지고 와서 사용하기!

 

>>>>그러면 실제 강의 예제와 완벽하게 똑같은 모듈의 버전으로 예제를 시작할 수 있다는 거다.

 

 

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
#패스트캠퍼스 #직장인자기계발 #직장인공부 #환급챌린지 #패스트캠퍼스후기 #오공완 #프론트엔드

 

https://bit.ly/48sS29N

 

패스트캠퍼스 [직장인 실무교육]

프로그래밍, 영상편집, UX/UI, 마케팅, 데이터 분석, 엑셀강의, The RED, 국비지원, 기업교육, 서비스 제공.

fastcampus.co.kr