3일차

2130 단어 expresshtmlnodecss

요구 사항


  • NodeJS 설치됨

  • 할 것



    Workspace 폴더 내 폴더 생성 3일차
    mkdir day3
    day3 폴더 입력
    cd day3

    러닝 익스프레스



    Express를 설치하려면 터미널 내에서 명령을 실행하십시오.

    1. npm init -y

    2. npm i express

    3. touch app.js

    4. copy and paste Hello World Example
      inside app.js file



    const express = require('express')
    const app = express()
    const port = 3000
    
    app.get('/', (req, res) => {
      res.send('Hello World!')
    })
    
    app.listen(port, () => {
      console.log(`Example app listening on port ${port}`)
    })
    


    터미널 유형 내부
    node app.js
    브라우저에서 localhost:3000으로 이동합니다.

    정적 파일 HTML, CSS 및 자바스크립트



    day3 폴더 내부 - 새 폴더 만들기 - 공개
    mkdir public
    2일차의 내부 공개 붙여넣기 프로젝트 파일.

    파일

    • index.html
    • style.css
    • script.js


    내부 app.js 제거

    app.get('/', (req, res) => {
      res.send('Hello World!')
    })
    


    추가

    const path = require('path')
    app.use('/', express.static(path.join(__dirname, 'public')))
    
    


    express.static에 대해 자세히 알아보기

    코드는 다음과 같아야 합니다.

    const express = require('express')
    const path = require('path')
    
    const app = express()
    const port = 3000
    
    app.use('/', express.static(path.join(__dirname, 'public')))
    
    app.listen(port, () => {
      console.log(`Example app listening on port ${port}`)
    })
    


    다시 확인 localhost:3000

    좋은 웹페이지 즐겨찾기