[Node.js]nodemon
·
Language/JavaScript
nodemon이란nodemon은 Node.js 개발 시 파일이 변경될 때마다 자동으로 서버를 재시작해주는 도구이다. 기본적으로 Node.js 서버를 실행하면 파일을 수정할 때마다 직접 서버를 껐다가 다시 실행해야 변경 사항이 적용된다. 하지만 이 과정이 반복되면 너무 불편하기 때문에 nodemon을 사용하는 것이다.설치 방법전역 설치(여러 프로젝트에서 사용하고 싶을 때)npm install nodemon -g전역 설치하면 터미널 어디서든 nodemon 명령어를 사용할 수 있다.로컬 설치(해당 프로젝트 안에서만 사용하고 싶을 때)npm install nodemon --save-dev--save-dev: 개발용 의존성으로 설치package.json의 "devDependencies"에 등록된다.사용 방법pac..
[Node.js]로그인 페이지에 JS 연결하기
·
Language/JavaScript
프론트에 JS 파일을 따로 만들고 연결하는 이유HTML만으로는 동적인 동작이 불가능하다.HTML은 구조를 정의하는 마크업 언어일 뿐,버튼 클릭, 폼 전송, 입력 값 처리 같은 동작은 할 수 없다.이런 동적인 동작은 JavaScript로 처리해야 한다.파일이 지저분해지기 때문이다.EJS 안에 app.js에서 정적 파일 설정express 서버가 브라우저에게 js 파일 같은 정적 파일을 전달할 수 있도록 설정해야 한다.왜냐하면 express는 기본적으로 보안을 위해서 아무 파일도 외부 공개하지 않는다.즉 클라이언트(브라우저)는 서버에 있는 js 파일이나 css 파일을 그냥 url로 요청해서 가져올 수 없다.그래서 아래 코드를 통해 정적 폴더로 등록해주면 이 안에 있는 파일들은 브라우저가 url로 직접 요청할 ..
[Node.js]app.listen() 분리하기
·
Language/JavaScript
app.listen() 분리하는 이유app.listen()은 서버를 시작시키는 역할이다.앱 설정과 서버 실행은 역할이 다르기 때문에 유지보수성과 확장성을 위해 파일을 분리하는 것이 좋다.분리하기 전 코드"use strict";const express = require("express");const app = express();const home = require("./routes/home");app.set("views", "./views");app.set("view engine", "ejs");app.use("/", home);const PORT = 3000;// 서버 실행app.listen(PORT, () => { console.log("서버 가동");});app.listen() 분리하기서버 실행 담..
[Node.js]컨트롤러 분리하기
·
Language/JavaScript
컨트롤러란컨트롤러는 사용자 요청(request)에 대한 응답(response)을 처리하는 역할을 한다.쉽게 말해서 사용자가 어떤 URL로 접속하면라우터가 그 요청을 받아서컨트롤러에 정의된 함수를 실행시키고그 함수가 어떤 응답을 보낼지 결정한다.MVC컨트롤러는 MVC에서 사용자 요청과 로직 처리를 담당해,Model에서 데이터를 가져와 View를 통해 사용자에게 보여준다.M(Model): 데이터와 관련된 모든 작업을 담당(DB 처리 등)V(View): 사용자에게 보여지는 화면(HTML, 템플릿)C(Controller): 사용자 요청을 받고, Model과 View를 연결해 주는 역할컨트롤러 분리하는 이유express로 서버를 만들 때 보통 URL 경로 별로 라우팅을 먼저 분리한다.이렇게 하면 URL 요청 정리..
[Node.js]라우팅 분리하기
·
Language/JavaScript
라우터 분리 없이 작성한 기본 코드라우터를 분리하지 않고 app.js 안에서 모든 요청을 처리하면 다음과 같은 코드가 된다.const express = require("express");const app = express();// 템플릿 엔진 설정app.set("views", "./views");app.set("view engine", "ejs");// 라우팅 처리app.get("/", (req, res) => { res.render("home/index"); // views/home/index.ejs 렌더링});app.get("/login", (req, res) => { res.render("home/login"); // views/home/login.ejs 렌더링});app.listen(3000,..
[Node.js]EJS로 HTML 파일 분리하기
·
Language/JavaScript
HTML을 직접 작성하는 방식의 한계Node.js와 express를 사용해 서버를 만들다 보면 다음과 같이 화면에 HTML을 보여줘야 하는 경우가 많다.가장 기본적인 방식은 res.send() 안에 HTML을 직접 문자열로 작성하는 것이다.const express = require("express");const app = express();app.get("/", (req, res) => { res.send(` 여기는 루트입니다. `);});app.get("/login", (req, res) => { res.send(` 로그인 `);});app.listen(30..