한 입 크기로 잘라먹는 리액트Table Of Contents
앞서 만든 파일은 터미널에서 문자열을 출력하는 아주 간단한 프로그램입니다.
그러나 복잡한 프로그램을 만들기 위해서는 여러 개의 자바스크립트 파일이 필요합니다.
왜 여러 개의 파일이 필요할까요? 옷을 구매할 수 있는 쇼핑몰 프로그램을 만든다고 가정해 봅시다. 이 쇼핑몰 프로그램에는 아마도 구매, 장바구니, 회원 가입 등과 같은 여러 복잡한 기능들이 필요할 겁니다. 이 기능들을 구현하는 코드를 파일 하나에 모두 작성한다면 코드 길이가 너무 길어집니다.
작성할 때는 문제가 되지 않을 수도 있지만, 수정을 위해 다시 파일을 연다면 수정할 부분을 찾아 한참을 스크롤해야 할지 모릅니다.
일반적으로 복잡한 프로그램을 구현할 때는 기능별로 파일을 나누어 작성합니다. 하나의 프로젝트에서 여러 자바스크립트 파일을 Node.js를 이용해 실행할 때는 패키지(Package) 형태로 구성합니다. 패키지는 Node.js에서 여러 개의 자바스크립트 파일을 실행하고 관리하는 일종의 관리 단위입니다.
패키지 만들기
이번에는 Node.js 패키지를 직접 만들겠습니다. 앞서 언급했듯이 패키지는 여러 파일을 마치 하나의 파일처럼 다룰 수 있게 해주는 관리 단위입니다. 그런데 패키지 단위로 여러 파일을 관리하려면 최상위 폴더인 ‘루트 폴더’가 필요합니다. 앞에서 만들었던 chapter3 폴더를 루트 폴더로 이용하겠습니다.
패키지를 생성하려면 npm을 이용해야 합니다. npm은 Node Package Manager의 약자로, Node.js 패키지를 관리하는 도구라고 했습니다. npm에서는 패키지를 관리하기 위한 유용하고 간편한 명령어와 기능들을 제공합니다.
터미널에서 다음 명령어를 입력합니다.
코드를 불러오는 중 입니다 ...npm init는 Node.js 패키지를 초기화하는 명령어입니다. 초기화란 Node.js 패키지를 구성하는 데 필요한 최소한의 구성 요소를 자동으로 생성하는 과정입니다.
npm init를 실행하면 패키지 이름을 입력하라는 프롬프트가 나타납니다.
폴더 이름과 동일하게 chapter3을 입력하고 <엔터> 키를 누릅니다.
패키지 이름을 입력하고 나면 버전, 설명등의 패키지 구성에 필요한 사항을 계속 물어봅니다. 어떤 텍스트도 입력하지 않고 모든 물음에 대해 <엔터> 키를 누릅니다.
구성을 완료하면 Is This OK? 라는 문구와 함께 설정할 패키지의 속성들을 보여줍니다. yes를 입력하고 <엔터> 키를 눌러 패키지 초기화를 완료합니다.
패키지 구성이 완료되면 비주얼 스튜디오코드 탐색기 창 루트 폴더(chapter3)아래에 package.json이라는 파일이 생성됩니다.
초기화된 패키지의 package.json에는 기본적으로 다음 항목들이 존재합니다.
- name: 패키지 이름
- version: 패키지 버전
- description: 패키지 설명(보통 패키지로 구성한 프로그램의 목적을 작성)
- main: 패키지의 소스 코드 파일 중 메인 역할을 담당하는 소스 코드 파일
- scripts: 패키지를 쉽게 다루기 위해 지정한 매크로 명령어
- author: 패키지를 만든 사람
- license: 패키지의 라이선스
이렇듯 package.json은 패키지의 메타 정보를 저장하는 파일입니다. Node.js는 package.json에서 패키지 정보를 확인하여 적절한 방식으로 프로그램을 가동합니다.
패키지 스크립트 사용하기
Node.js 패키지의 package.json에는 scripts라는 항목이 있습니다. 이 scripts 항목은 복잡한 명령어를 간단한 명령어로 변경하는 일종의 매크로 기능을 지원합니다.
scripts 항목을 직접 수정하고 사용해 보겠습니다. 현재 패키지의 루트 폴더 아래에 index.js라는 파일을 생성하고 다음과 같이 코드를 작성합니다. 앞서 비주얼 스튜디오 코드 사용법에서 배운 대로 새 파일 아이콘 (새파일.png)을 클릭해 파일을 생성하면 됩니다.
코드를 불러오는 중 입니다 ...현재 루트 폴더의 파일 구성은 다음과 같아야 합니다.
코드를 불러오는 중 입니다 ...작성한 index.js를 실행하기 위해서는 node 명령어와 함께 경로를 명시해야 합니다. 그러나 package.json의 scripts 항목을 이용하면 아주 간단하게 index.js를 실행할수 있습니다.
package.json의 scripts 항목을 다음과 같이 수정합니다.
코드를 불러오는 중 입니다 ...원래는 앞서 작성한 index.js 파일을 실행하려면 터미널에서 node ./index.js라고 입력해야 합니다. 그러나 간단하게 명령을 내릴 수 있도록 package.json의 scripts 항목에 start를 새롭게 추가하였습니다. 다음 명령어를 터미널에서 입력합니다.
코드를 불러오는 중 입니다 ...npm run 명령은 뒤에 나오는 스크립트를 실행합니다. 즉, npm run start를 입력하면 package.json에 기록한 scripts에서 일치하는 명령어를 찾아 실행합니다. start 항목에 node index.js라고 지정했기 때문에 해당 명령어를 실행합니다
index.js가 실행되어 터미널에 문자열 index run을 출력합니다.