바닐라js 와 Spring을 axios 방식으로 연결하려면 nodejs 로 서버를 만들어야 한다.
이번 프로젝트에서는 express를 사용했다.
일단 nodejs를 다운받고 ,터미널에서 express를 다운받아준다.
const express = require("express");
const app = express();
app.use(express.static("./"));
app.listen(3000, () => {
console.log("server running...");
});이 코드를 순서대로 설명하자면
express를 불러온다.(nodejs는 기본적으로 commonjs 모듈 방식을 따르기 때문에 require을 이용해준다.)
app이라는 변수에 express를 할당해준다.
app.use는 express에 미들웨어를 등록하는 메서드이며, 애플리케이션에서 모든 요청에 대해 실행되도록 만들 수 있다. express.static("./") 에서 ./ 는 현재 디렉토리의 모든 폴더들을 의미하며 express.static은 이 폴더에 있는 정적파일(js,css,html...)을 찾아 제공해주는것을 뜻함.
마지막으로 app.listen은 express를 실행하며, 3000포트에서 서버가 열리면 해당 메시지를 출력해주는 코드이다.
추가로 app.js 와 같은 위치에 있는 html파일이 가장 처음 페이지가 되며 (http://localhost:3000/ 일때 나타나는 페이지.) html 파일을 index.html 로 저장하면 url 뒤에 .html 을 붙이지 않아도 된다. 또한 서버를 열기 위해서는 터미널에 node app.js 를 입력해주면 된다.
이렇게 코드를 작성하면 기본적인 정적파일을 이용한 서버를 만들 수 있고, 바닐라js 에서 동적 파일을 추가하고 싶다면 템플릿 엔진을 사용해야 한다.
