node.js 기초(node.js, dirname, static 파일)

https://nodejs.org/en

Node.js — Run JavaScript Everywhere

 

- node.js 를 LTS 버전으로 설치 한 후에, 터미널에 접속한다.

$ npm init -y

 

- 위 명령어를 이용하여, package.json 파일을 생성 해준다. (명령어를 쓰면 파일이 자동으로 생성됨)

$ npm i express

 

- 위 명령어를 통해 express 라는 라이브러리를 설치 해 준다.

 

- index.js 파일을 하나 만들어준다 (ex. app.js 든 뭐든 이름은 상관없다.)

 

소위 말하는 express가 이것을 말한다. 보통 이 라이브러리를 사용하여 서버를 만든다.

 

https://www.npmjs.com/

npm | Home

 

- 위 사이트로 가서 express 기본 코드를 가져와준다.

 

이렇게 코드가 나오는데, 외우고 작용하는 원리를 이해 할 필요는 전혀 없다. 간단하게 말하면 이렇다.

const express = require('express')   // 라이브러리 불러오는 코드
const app = express() // 라이브러리 불러오는 코드

app.get('/', function (req, res) {        // 서버를 요청하는 코드
  res.send('Hello World')
})

app.listen(3000)  // 서버를 띄우는 코드

 

1. express 라이브러리를 불러오고

2.서버 요청을 보내면 'Hello World' 라는 응답을 보내준뒤,

3.3000포트에 서버를 띄워주라는 말이다.

 

- 이 전에 만든 index.js 파일에 위 코드를 입력해주고. 터미널 창에 

$ node index.js 

 

- 위 명령어를 입력하여 서버를 실행시켜주고, 인터넷에 주소창에 'http://localhost:3000/' 를 입력해주자. 참고로 이 3000은 port 라고 하는데 app.listen(3000)의 3000이다. port는 대략 6만개 정도가 있고 4000, 8000, 8080 을 써도 상관없다.

 

그렇다면 홈페이지에 "Hello World" 라는 글자가 쓰여져 있을 것 이다. 그러면 이 글자가 어디에서 온 것일까?

 

app.get('/', function (req, res) {        // 서버를 요청하는 코드
  res.send('Hello World')
})

 

여기에서 왔다. 그러면 res.send()를 통해 뭘 표현을 할 수 있구나를 알게되었다. 여기까지 하면 서버를 만드는 초석은 끝났다.

 

더 알아보자면,

res.send("Hello World")

 

에서 문자열만 받아올 수 있는 것이 아닌,

 

파일 또한 불러올 수 있다.  

 

예를들어, html 파일을 만들었을때, 다음과 같은 형식으로 폴더 경로만 지정해 주면 불러오는게 가능하다.

res.sendFile(__dirname + '/index.html')

 

__dirname(언더바 2개)는 Node.js에서 사용되는 특별한 전역 변수로, 현재 모듈의 디렉토리 경로를 나타낸다. 이 변수는 파일 시스템 경로를 나타내며, 현재 모듈이 위치한 디렉토리의 전체 경로를 포함한다. 코드 내에서 __dirname을 사용하면 현재 파일이 위치한 디렉토리의 경로를 동적으로 참조할 수 있다. 즉, 파일을 불러오기 위한 경로를 생성해주는 역할을 한다고 생각하면 된다.

 

__dirname 이라고 써주면 /index.html (파일 디렉토리)를 res.sendFile의 대상 디렉토리로 "지정" 할 수 있다는 것. 다시말해서 절대경로를 지정 해 준다는 것이다.

 

더 쉽게 말하자면  현재 js 파일의 위치를 불러온다고 생각하면 된다. console.log로 __dirname을 한번 찍어보자.

console.log(__dirname)      // '/Desktop/Node.js/server'

 

그렇다면 res.sendFile('Desktop/Node.js/server' + '/index.html') 이 되는 것이다. 경로를 매번 써줄 수 없으니 __dirname을 사용하는것.

그러면 문자열 조합이니 res.sendFile로 해당 파일을 불러오는 것이 되겠다.

 

그냥 __dirname 이란게 있다고 생각하고, 파일을 불러올땐 __dirname + '파일의 경로.확장자' 로 생각하자.

 

그러면 html도 넣을 수 있고... 그렇다면 css도 한번 넣어보고 싶지 않나? 

 

css 파일을 넣는 방법은 간단하다. css 파일같은 파일이나 이미지는 'public' 폴더에 넣어두는 것이 일반적이다. 먼저 다음과 같이 만들어놓은 css 파일을 public 폴더 안에 넣어보자.

 

 

참고로 저기 'public' 폴더에 들어가는 파일을 정적인 파일 즉, static 파일이라고 한다 static 파일에는 css, 이미지, js 파일이 포함된다. 

 

이 후 작업이 중요하다! 파일만 폴더에 넣는다고 해서 css가 적용되는것이 아니다. 이 'public' 폴더 안의 파일을 쓰고 싶으면 index.js 파일에 다음과 같이 입력해 주자.

app.use(express.static(__dirname + '/public'));

 

즉 위에서 봤던 res.sendFile(__dirname + '/파일명.html') 명령어 처럼, express에 내장되어 있는 함수(express.static)를 통해 경로를 등록해 주는 것이다.

 

경로를 등록해주면 평소에 html에 css를 적용하던 것 처럼 <link> 태그를 통해 css를 적용할 수 있다.

    <link rel="stylesheet" href="/index.css">

 

위와 같이 작성해주면 되는데 주의할 점은.

    <link rel="stylesheet" href="/public/index.css">

 

위 처럼 /public 경로를 써줄 필요가 없다. 단, public 하위폴더를 만들었을때는 하위폴더 경로를 써 주어야 한다.

    <link rel="stylesheet" href="/public2/index.css">