node.js for front-end

Node.js를 현재까지는 back-end를 위해서만 이용했지만 front-end 위해서도 이용할 수 있습니다.

index.html 및 css 폴더 생성

스크린샷 2023-11-19 오후 10.39.23.png

body {
  font: 14px Arial, sans-serif;
}

img {
  width: 300px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/style.css" />
    <title>Document</title>
  </head>
  <body>
    <h1>It is a profile</h1>
    <img src="images/profile.png" alt="profile" />
  </body>
</html>

Untitled

express.static()

이미지, CSS 파일 및 JavaScript 파일과 같은 정적 파일을 제공하려면 Express의 express.static 내장 미들웨어 기능을 사용할 수 있습니다.

사용법

다음 코드를 사용하여 public이라는 디렉토리에서 이미지, CSS 파일 및 JavaScript 파일을 제공합니다.

Untitled

http://localhost:8080/images/kitten.jpg

http://localhost:8080/css/style.css

http://localhost:8080/js/app.js

http://localhost:8080/images/bg.png

http://localhost:8080/hello.html

가상 경로 지정

그러나 express.static 함수에 제공하는 경로는 노드 프로세스를 시작하는 디렉토리에 상대적입니다. 다른 디렉터리에서 익스프레스 앱을 실행하는 경우 제공하려는 디렉터리의 절대 경로를 사용하는 것이 더 안전합니다.

Untitled