node.js 에 템플렛 엔진은 ejs를 사용하였다.
이런식으로 하게 되면 백 딴에서 일일히 불필요한 코드를 작성해야하는데 이 과정을 다 보고 나면 스프링 부트가 얼마나 편리하고 소중한 프레임워크인지 알 수 있다!
템플렛 엔진을 사용하는 이유?
- 서버 측에서 템플렛 엔진을 사용하면 html 템플렛과 결합하여 동적으로 웹 페이지를 생성할 수 있다.
- 서버에서 클라이언트로 데이터를 효율적으로 바인딩할 수 있다. 동적 데이터를 템플렛에 주입하여 렌더링 횟수를 최소화 할 수 있다.
nodemon?
nodemon은 Node.js 프로젝트에서 변경 사항이 발생했을 때 자동으로 서버를 재시작해주는 프로그램이다. 서버를 종료했다가 재시작하기 불편한데, nodemon을 설치하면 수동으로 재시작하지 않아도 변경사항을 자동 반영할 수 있다.
nodemon 설치
npm i nodemon
(실행) 맥북의 경우
npx nodemon example.js
(실행) 윈도우의 경우
nodemon example.js
[front] html + ejs
add_input.html 화면은 다음과 같다
사용자가 x 와 y 값을 입력하고 더하기 버튼을 클릭하면 add_output.html 화면으로 페이지가 이동된다.
[back] Node.js
통신을 위해 http 모듈을 불러온다.
host 에 내 컴퓨터 ip 주소를 저장하고, port 번호는 4000번으로 지정해주었다.
현재 url pathname을 알아내기 위해 url 모듈을 불러온다.
html 파일을 읽기 위해 fs 모듈을 불러온다.
ejs 엔진을 사용하기 위해 모듈을 불러온다.
객체 배열에 각 path, 실행 함수, method 를 저장한다.
callFunc과 같은 객체 배열을 만들어 안에 path 와 함수를 지정해두면 불필요한 코드 없이 간단하게 함수 호출이 가능하다.
idx 변수에 현재 url 과 경로가 일치하는 객체의 index를 저장한다.
만약 현재 경로와 일치하는 path가 없을 경우 화면에 에러 메세지를 띄운다.
요청된 페이지가 현재 url 과 일치하는 경우 해당 함수를 부른다.
위의 경우 add_input 함수를 호출하게된다.
파일에서 읽은 html 데이터를 ejs 모듈을 사용하여 렌더링한다. 이렇게 하면 서버 측에서 동적으로 html을 생성할 수 있다.
자, 이제 데이터를 보내보자.
x와 y에 각각 3, 4를 입력하고 더하기 버튼을 클릭한다.
그러자 결과를 출력하는 페이지로 넘어갔다.
이때! url을 유심히 보면 사용자가 입력한 x와 y 값이 있는 것을 알 수 있다.
이러한 query parameter들은 url 에 포함되어 서버로 전송된다.
하지만 url 끝에 데이터를 붙여 보내는 GET 방식은 데이터가 외부에 노출되어 보안에 취약할 수 있다. 보내려는 데이터가 개인정보나 보안을 해야 하는 경우는 POST 방식을 사용할 것을 권장한다.
add_output 함수에서 이를 처리하는데, params 변수에 현재 url의 쿼리 값을 받는다.
그 후 params의 각 값들을 정수로 형변환을 해주고 연산한 결과를 ejs 모듈을 사용하여 add_output.html을 렌더링한다.
이렇게 전달 받은 값을 ejs를 이용해 화면에 표시할 수 있다.
