React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다.
프로젝트 & npm
프로젝트를 생성하고 다른 사람들이 올린 외부 모듈을 사용해보자.
npm?
Node Package Manager의 약자로 Node.js의 패키지 관리 도구이다. 다른 사람들이 만들어 놓은 모듈들을 내려받아 사용할 수 있도록 해주거나 개발할 프로젝트를 관리하는데 도움을 주는 도구이다.
Package?
package는 누군가 따로 만들어 놓은 Node.js 모듈을 의미한다. 이 패키지를 npm을 이용하여 모듈들을 내려받을 수 있다.
package 파일을 효율적으로 관리하기 위해 새로운 폴더를 만들어 VSCode에서 오픈한다.
그리고 터미널(Ctrl+J)을 열어 패키지를 생성해보자. 터미널의 경로가 방금 만든 폴더인지 확인 후 npm init을 입력한다.
npm init을 입력하면 갑자기 인터뷰를 당하게 되는데 여기에서 놀라지말고 입력하거나 엔터를 눌러 넘어가면된다.
author는 적어줘도 되고 안 적어줘도 된다. 이렇게 모든 문답을 적어주면 갑자기 새로운 json 파일이 생성된다.
이 package.json 파일은 우리가 만든 패키지의 정보를 기록하는 환경 설정 파일이라 생각하면 된다.
- main 같은 경우는 이 패키지 파일을 실행할 때 어떤 파일을 실행해야 하는지 알려주는 역할을 한다.
- scripts는 패키지를 실행하면서 자주 실행하는 명령어를 사전에 정의해두는 곳이다. scripts 안에
"start" : "node index.js"이 코드를 작성해보자. 참고로 이 명령어를 추가하기 전에 test 부분 맨 끝에 쉼표(,)를 넣어줘야한다.
이 코드는 start를 내가 입력하면 자동으로 node index.js 명령어가 실행된다. 텍스트 대치 기능이라 생각하면 쉽겠다.
이왕 추가해놨으니 사용해보자
에러가 난다. 에러가 나는게 당연하다. 왜냐면 index.js 파일이 없기 때문이다^^. ㅎㅎ index.js 파일을 생성해주자. index.js 파일을 생성하고 consoel.log("hello node.js package");를 입력 후 아까 npm start 명령어를 다시 입력해보자.
다른 사람의 모듈 가져오기
- 구글에 npmjs 검색
- 대부분 무료
- randomcolor 검색
- randomcolor 클릭
우리가 여기서 가져가야 할 건 Install 부분의 명령어이다. 명령어를 클릭하면 자동으로 복사된다.
VSCode 터미널에 명령어를 입력하면 자동으로 다운로드가 된다.
이때 중요한건 package 폴더가 맞는지 경로 확인이 필요하다.
다 설치 후 package.json을 클릭해서 내용을 보면 약간 변경이 되어있다.
패키지를 추가할 때마다 저 부분에 변경이 일어난다. randomcolor의 버전을 보면 '^'이게 하나 붙어있는데 이건 이 패키지를 설치할 때 이 패키지의 버전을 정확히 명시하는 게 아니라 0.6.2 버전 이상으로만 설치가 된다라는 뜻이다.
그리고 또 변경된 게 이 뿐만이 아니다. 기존 폴더에 package.json과 index.js말고 다른 두 개가 더 생겼다.
package-lock.json은 우리가 설치한 패키지의 정확한 버전들이 적혀있는 곳이다.
그럼 이제 randomcolor를 사용해보자. index.js에 코드를 작성하자.
const randomColor = require("randomcolor"); // 외부 모듈은 경로 지정할 필요 없음. 이름만 적어주면 된다.
console.log(randomColor());위 js 파일을 실행하면 헥스코드 값이 나오게 된다.
