React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다.
Hello World & Common JS
Node.js는 프로그래밍 언어가 아니고 그냥 자바스크립트의 실행환경, Runtime이기 때문에 여태까지 자바스크립트를 사용하던 그대로 사용하면된다.
VSCode를 열고 index.js 파일에 console.log를 찍어보자.
이제 작성한 js 파일을 실행해야한다. js 파일을 Node.js로 실행하려면 터미널이 필요하다.
터미널을 열어보자
터미널은 상단 메뉴 View - Appearance > Show Panel을 클릭하거나 Ctrl+J 단축키를 눌러 열 수 있다.
터미널?
우리가 일반적으로 컴퓨터를 이용할 때 명령을 내리는 방법은 대부분 프로그램 아이콘을 클릭하거나 글자를 클릭하는 등의 행위로 명령을 내린다. 예를 들면 크롬의 아이콘을 클릭해서 크롬을 실행하거나, 윈도우 버튼을 누르고 전원 아이콘을 클릭해 종료를 시키거나한다. 이런 환경을 Graphic User Interface(GUI)라고 한다.
터미널은 위에 생긴것만 봐도 클릭할 수 있는 곳이 없어보인다. 그럼 어떻게 명령을 내릴까? 바로바로 키보드를 이용해 명령을 입력한다. 이러한 환경을 Command Line Interface(CLI)라고한다.
실습을 위해 현재 터미널이 powershell인지 확인하자. powershell이 아니라면 변경해주자.
node index.js
// node 파일명위의 명령어를 터미널에 입력하면 아래 사진처럼 index.js 파일이 실행된 걸 볼 수 있다.
이번에는 index.js말고 다른 js 파일을 만들어 index.js에서 사용해보자. calc.js를 만들고(index.js와 같은 경로) 그 안에 간단한 계산 기능 함수를 만든다.
// 계산 기능을 하는 파일
const add = (a, b) => a+b;
const sub = (a, b) => a-b;위의 코드를 작성했으면 이제 다른 파일에서 사용할 수 있도록 내보내기 작업을 해줘야한다. 무엇을 내보내냐 하면 모듈을 내보내야한다. 모듈은 간단하게 어떤 기능을 담당하는 분리된 파일을 말한다. 모듈로 만들기 위해 calc.js 파일 하단에 모듈 관련 코드를 더 추가한다.
module.exports = {
moduleName : "calc module",
add : add,
sub : sub
}
이제 index.js를 수정해보자. 기존에 있던 코드는 지우고 아래 코드를 새로 입력한다.
const calc = require("./calc");
console.log(calc.add(3,3));
console.log(calc.sub(4,3));require라는 키워드를 이용해 경로를 지정해서 모듈을 불러왔다(파일 안에 모듈이 있으므로 경로는 파일 경로). 저렇게 require로 불러온 모듈은 객체 형채로 calc라는 상수에 담기게 되며 모듈 안에 있는 함수를 사용하려면 객체의 일반적인 사용법을 이용해 사용하면 된다.
참고로 모듈은 Node.js에서 사용가능한 것이지 Vanilla JS에서는 사용 불가능하다.