웹개발 복습 정리 26 : 모듈과 NPM

Kimhojin_Zeno·2023년 4월 9일
0

웹개발 복습 정리

목록 보기
26/30

서로 다른 파일 간에 JavaScript 코드를 공유하는 법

node 시스템에서는 하나의 파일이 공유할 수 있는 것과 공유할 수 없는 것을 특정하게 지정할 수 있다

파일 시스템 모듈을 통해 내장된 모듈에서 코드를 불러올 수 있었던 것처럼

node도 다른 파일에서 코드를 불러올 수 있다

어떤 js파일안에 선언해놓은 함수를 다른 곳에서 쓸수 있다

재사용 가능한 코드를 써서 앱을 만들때 넣고 사용할 수 있다.

app.js라는 파일에서

const math = require('./math');  // ./는 현재 이 디렉토리라는 뜻.
console.log(math);

같은 디렉토리에 있는 math.js 파일을 불러온 것이다.

이게 node 모듈이 작동하는 방식

math.js 안에서 무엇을 내보낼지 특정 항목을 내보내라고 명령하지 않으면

console.log(math)를 하면 빈 객체를 내보낸다

math.js 안에서

module.exports.add = add;

라고 해주면. module.exports는 객체이다. 이 객체에 미리 정의한 add라는 함수를 객체안에 add라는 키에 넣어서 내보낸다

이렇게 해두고 다시 app.js에서

const math = require('./math');
console.log(math.add(3,5));

라고 하면 math.js에서 선언된 add 함수가 실행된다.

구조분해도 가능하다.

const { add, square } = require('./math');  // ./는 현재 이 디렉토리라는 뜻.
console.log(add(3,4));

math안에 있는 add와 square를 가져온다.

module.exports 대신에 더 간단한 구문으로 exports 변수를 써도 된다

exports.add = add;

이렇게 작성해도 똑같이 작동한다.

exports는 module.exports 객체를 가리키는 단축어.

디렉토리 통째로 불러오기

파일을 불러오고 스크립트 간에 코드를 공유하는데 있어서 중요한점은 디렉토리 전체를 불러올 수 있다는 것.

앱이나 라이브러리를 만들때 여러 파일들을 한 디렉토리에 만들고 일일이 module.exports할 필요없이

index.js에서

const math = require('./math');
const sadie = require('./sadie');

const all = [math, sadie];

module.exports = all;

라고 하고 다른 파일에서 index.js가 들어있는 디렉토리의 이름이 shelter라고 한다면

다른 파일에서

const cat = require('./shelter');

라고 불러주면 shelter디렉토리 안에 있는 index.js가 exports한 모든 것을 다른 파일에서 사용할수 있게 된다

index.js는 node에서 쓰이는 특정한 이름인데 일종의 진입점이다.

그 디렉토리에서의 메인 파일. 디렉토리 전체를 불러오라고 하면 node가 index 파일을 찾게되고

해당 파일이 내보내는 게 바로 그 디렉토리가 내보내는 항목이 된다

npm

노드 패키지 매니저

두가지 뜻이 있다.

  1. 수 많은 패키지로 된 라이브러리이다.

    패키지는 다른 사람이 쓴 코드. 다른 사람들이 작성해 놓은 도구와 코드들을 가져다 쓸수 있다

    react나 express같은 패키지들. npm은 그런 노드 패키지를 위한 표준화된 저장소.

  2. command line tool. 위 라이브러리에 있는 패키지들을 설치하고 관리할수있게 해준다

노드를 설치했다면 npm도 같이 설치된다

Jokester라는 디렉토리를 만들고, 터미널에서 해당 디렉토리로 이동한 후,

npm install give-me-a-joke

라고 엔터를 누르면 Jokester디렉토리에 node_modules라는 폴더, package-lock.json, package.json이 생긴다.

node_modules 폴더 안에 있는 항목들은 give-me-a-joke라는 하나의 패키지에 대한 디펜던시, 즉 의존성에 해당한다.

npm패키지를 설치할 때마다 많은 요소들에 의존한다. 그렇지 않은 경우라도 설치하려는 패키지의 핵심 코드가 node_modules라는 따로 생성된 디렉토리 안에 들어간다

따라서 이 이름을 가진 폴더는 만들면 안되고 삭제해도 안된다.

packeage-lock.json 이라는 폴더는 node_modules 디렉토리의 콘텐츠에 대한 기록.

작업 디렉토리에 npm을 통해 설치한 패키지를 사용할때는 require로 불러오면 된다

const jokes = require("give-me-a-joke")
const colors = require("colors");
jokes.getRandomDadJoke(function (joke) {
    console.log(joke.rainbow);
})

조크를 만들어주는 패키지와 텍스트를 무지개색으로 바꿔주는 패키지를 require한 다음 사용해서 출력하면 터미널에 무지개색 조크가 나타난다.

글로벌 패키지 설치

패키지의 지역 설치 vs 전역 설치

npm install을 하면 하나의 디렉토리 안에 설치가 되는데

그 폴더 밖에서는 불러오기 어렵다

즉 해당 폴더에 지역 설치(local install)한 것이다

대부분의 경우 지역 설치를 한다

왜냐면 프로젝트에 따라 사용하지 않을수도, 다른 버전이 필요할 수도있다.

react나 express는 버전마다 차이가 상당해서 오래된 코드베이스는 최신버전에서 작동하지 않는경우가 있다

어떤 버전을 쓰는지 잘 관리해야 하는데

그 부분이 바로 package.json이다

패키지를 전역 설치할수도 있는데

npm install 뒤에 -g를 쓰는 것이다

cowsay라는 개그 패키지

npm install -g cowsay

기기의 가장 높은 수준

/local/lib/node_modules

전체 계정 및 전체 사용자에 대한 node_modules 디렉토리이다

프로젝트 디렉토리 같은 단일 하위 디렉토리가 아니다

전역 설치된 패키지를 개별 프로젝트 디렉토리에서 require(”cowsay”)라고 부르면

불러지지 않는다. 이때는

npm link cowsay

로 지역 설치되지 않은 전역 패키지에 엑세스 할 수 있다

package.json 의 중요성

package.json에는 모든 node_modules와 설치한 패키지가 있고

직접 설치하지 않은 디펜던시도 있다

기본적으로 특정 프로젝트나 패키지, 앱에 대한 메타 데이터 즉 정볼르 가지고 있다

description 이나 license 같은게 정보에 해당되고

version

가장 중요한건 dependencies

특정 버전이 있는 것도 있다. “1.1.1”

대략적으로 나타내는 것도 있다 “~1.0.4”

특정 버전 이상을 나타내는 것도 있다 “^2.5”

이것들이 디펜던시들이고 해당 패키지에 필요한 디펜던시 버전 정보이다

디펜던시도 디펜던시를 가진다. npm이 이것들을 알아서 설치해준다

이 package.json은 AJAX JavaScript 객체 표기법에서 배운 JSON파일이다

Json에 직접 추가할수도 있지만

보통 npm명령어를 통해 만들어진다

새 디렉토리를 만들고 터미널에서

npm init

이라고 실행하면 package.json을 만드는 명령어를 통해 package.json을 만들수있다

package.json을 만들고 해당 디렉토리에서 새로운 패키지를 npm install하면

이미 만든 package.json에 해당 패키지가 디펜던시로 추가되는 것을 알수있다

해당 패키지를 사용하려면 package.json에 꼭 기록되어야하는 것은 아니다

이 작업은 그냥 싱크를 맞춰두고 나중에 node_modules이 삭제되거나

해당 프로젝트를 다른 사람에게 보낼때 필요한 디펜던시가 이런게 있다는 것을 기록해두는 용도이다

보통 프로젝트의 루트 디렉토리에 넣어둔다

프로젝트에 대한 모든 종속 요소 설치하기

우리가 작성한 코드를 다른 사람과 공유할때

node_modules를 포함시키지 않는다. 그걸 포함시키면 용량이 너무 커진다

대신 어떤 모듈 패키지가 사용되었는지만 기록해두고 그걸 공유하면

받는 사람이 그걸보고 패키지를 설치해서 코드를 실행시킬 수 있다

깃허브 같은데서 프로젝트 코드를 다운받았을때,

그상태로 Node로 실행시키려고 하면 필요한 디펜던시가 다 없기 때문에 실행되지 않는다.

package.json을 보고 하나씩 일일이 다운받으려면 너무 시간이 많이 걸린다.

그때

	npm install

이라고 하면 package.json을 살펴보고 모든 디펜던시를 내려받는다.

없던 node_modules가 생긴다

franc 언어 감지 패키지 사용해보기

https://github.com/wooorm/franc

깃허브에 있는 franc를 사용하면 텍스트를 넣어서 그것이 어떤 언어인지 감지하는 기능을 구현할 수 있다

https://github.com/adlawson/nodejs-langs

언어 코드를 받아서 langs에 넣으면 언어를 알려준다

두 패키지를 이용해서 터미널에서 node index.js “언어”

를 입력하면 언어가 어떤 언어인지 알려주는 코드를 만든다.

const franc = require("franc");
const langs = require("langs");

const input = process.argv[2];
const langCode = franc(input);

const language = langs.where("3", langCode);
console.log(language.name);
profile
Developer

0개의 댓글