백앤드/Node.js

[포스코x코딩온] 웹개발자 입문 과정 3주차 회고-04 | 백앤드 기초

영최 2023. 3. 17. 21:36
728x90

1. Back-End
   뒷단에서 데이터 다루는 역할
   웹 백앤드 언어 종류로는 node.js, jsp, Django(python) 가 있음
   우리나라에서는 아직까지 jsp를 많이 사용 중이나
   세계적으로는 node.js 점유율이 계속 증가하는 추세임
   MERN Stack이라고 해서 React + Node.js + Express + MongoDB 로 보통 웹사이트 만듦

   미래를 위해서 node.js사용 권장함

* MongoDB: 웹 애플리케이션과 인터넷 기반을 위해 설계된 데이터베이스 관리 시스템 
* Node.js: 구글 크롬의 자바스크립트 엔진(V8Engine)에 기반해 만들어진 Javascript 런타임, 이벤트 기반, 비동기 입출력 모델을 사용해서 가볍고 효율적임, npm 패키지는 가장 큰 오픈소스 라이브러리임

 

2. node.js 특징
   * 어느 환경에서도 동작
   * 성능이 빠르고 좋음
   * 배우기 쉬움

   * 자바스크립트 쓰는 개발자가 많음
   * 그러나 오류가 발생하면 종료해야한다는 단점이 있음

   1) 설치하기

    https://nodejs.org/ko/

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

에서  왼쪽 버튼 클릭 및 다운로드, 이후 커맨드 창에서 'node -v' 입력하여 버전이 출력되면 완료!

3. npm 이란?
   : node package manager, 노드 패키지(npm에 업로드 된 노드 모듈, 패키지들 간 의존 관계가 존재함)를 관리하는 틀
   , 설치하면 json파일 저장됨
   1) 설치하기

 
npm init —yes


4. express 모듈 ( ⊂ Node.js)
   :Node.js를 위한 웹 프레임워크의 하나,  보안 관련하여 필수적이다.

웹을 만들기 위한 각종 메소드와 미들웨어 등이 내장되어 있다. 
   express 대신 http 사용하면 코드의 가독성과 확장성이 떨어진다. 
   express가 설치되면 package.json의 dependency 안에 들어감

1) 설치

npm install express

그런데 문제가 아래 두 파일이 너무 커서 만약 깃에 업로드하거나 서버에 업로드할 때 불편하므로

2) gitignore 작성

< .gitignore > 파일을 만들어 아래처럼 입력해준다.

/node_modules
package-lock.json

이 다음 폴더에  app.js 파일을 만들어서 express를 써보도록 하자

폴더 구조

3) app.js 작성

< app.js > 파일 안에 이렇게 작성해보았다.

const express = require("express");
const app = express();

이를 통해 app을 통해 express()를 호출할 수 있다.

* express() : Express 모듈이 export 하는 최상위 함수로 express application을 만듦

* app 객체 : Express() 함수를 호출함으로써 만들어진 express application


5. ejs - 템플릿 엔진 모듈( ⊂ Node.js)

* 템플릿 엔진이란? - 문법과 설정에 따라 파일을 html형식으로 변환시키는 모튤 
* ejs란? - embedded javascript 의 약자로, 자바스크립트가 내장되어 있는 html파일임,

즉, html에서 별도의 script 태그 안에 자바스크립트를 작성하지 않고 ejs를 통해 html에 자바스크립트를 작성할 수 있다. 

확장자는 .ejs이다.

1) 설치

npm install ejs

2) 템플릿 엔진 설정 및 ejs 넣을 폴더 설정

< app.js > 파일 안에 이렇게 작성

app.set("view engine", "ejs");
app.set("/views", "views");
 
app.get("/", function (request, response) {
// response.send("hellow express");
// response.send("<h1>.hellow express<h1>");
response.render("test.ejs");
});
 
app.listen(port, () => {
console.log(port + "is open!");
});
 

- app.set('view engine', 'ejs');

   app.js에 view engine을 ejs로 적용시킨다는 의미이다.

   (view engine은 템플릿 엔진이라고 약속되어있고, ejs라는 템플릿 엔진을 세팅하겠다는 의미이다.)

- app.set('/views', 'views');
  템플릿이 있는 디렉토리를 express에게 알려주는 코드
   views라는 디렉토리에 ejs파일을 넣어야 한다.

   만약 두번째 인자를 'template' 으로 바꾸게 되면 디렉터리 이름이 template로 지정한다.
   관습적으로 views로 디렉토리명을 작성한다.

3) ejs 작성
   - %% : 무조건 자바스크립트 코드가 들어가야하고, 줄바꿈을 할 경우에는  새로운 <%%>를 이용해야한다.

  - <%= %>: 값을 템플릿에 출력할 때 사용한다.

 - <%- include('view의 상대주소')%> : 다른 view 파일을 불러올 때 사용

<test.ejs>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>안녕하세요</title>
</head>
<body>
<%- include('./includes/header')%>
<h1>안녕하세요!!!</h1>
<% for(let i=0; i< 5; i++){%>
<div>안녕하세요..</div>
<div>hi<%=i%></div>
<img width="30%" src="/static/img/cat.jpeg" />
<%}%>
<a href="/login">로그인</a>
</body>
</html>

4)실행

node app.js

이후 크롬 들어가서 localhost:8000으로 접속하여 확인

 

6. 미들웨어

* 요청이 들어옴에 따라 응답까지의 중간과정을 함수로 분리한다.

* 서버와 클라이언트를 이어주는 중간 작업이다.

* use()를 이용해 등록한다. 

< app.js > 파일 안에 이렇게 작성

app.use("/static", express.static(__dirname + "/static"));

정적 파일들을 접근할 수 있도록하는 미들웨어

 

 

 

7. 기타 예제 

<views/app.js>

const express = require("express");
const app = express();

const port = 8000; // mac 5000 x 포트 설정

app.set("view engine", "ejs");
app.set("/views", "views");
app.use("/static", express.static(__dirname + "/static"));

app.get("/", function (request, response) {
// response.send("hellow express");
// response.send("<h1>.hellow express<h1>");
response.render("test.ejs");
});
/*
request: 클라이언트가 서버에게 본는 요청
response: 서버가 클라이언트에게 보내는 응답
*/
app.get("/login", (req, res) => {
res.render("login");
});

app.get("/login/register", (req, res) => {
//path
res.render("register"); //file name
});

app.listen(port, () => {
console.log(port + "is open!");
});

<views/test.ejs>

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>안녕하세요</title>
</head>
<body>
<%- include('./includes/header')%>
<h1>안녕하세요!!!</h1>
<% for(let i=0; i< 5; i++){%>
<div>안녕하세요..</div>
<div>hi<%=i%></div>
<!-- <img src='static/img/pooh.jpg' -->
<img width="30%" src="/static/img/cat.jpeg" />

<%}%>
<a href="/login">로그인</a>
</body>
</html>

<views/login.ejs>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>로그인</h1>
<a href="login/register">회원가입</a>
</body>
</html>

<views/register.ejs>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>회원가입</h1>
</body>
</html>

<views/includes/header.ejs>

<header>
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ul>
</header>

 

 

app.set("/views", "views");
app.use("/static", express.static(__dirname + "/static")); 차이를 잘 모르겠다.
728x90
저작자표시 비영리 변경금지

'백앤드 > Node.js' 카테고리의 다른 글

[포스코x코딩온] 웹개발자 입문 과정 5주차 | 비동기 HTTP 통신 종류 (ajax, axios, fetch)  (0) 2023.04.01
[포스코x코딩온] 웹개발자 입문 과정 5주차 | form 전송(get/post)  (0) 2023.03.31
[포스코x코딩온] 웹개발자 입문 과정 5주차 | 노드 프로젝트 생성  (0) 2023.03.31
[포스코x코딩온] 웹개발자 입문 과정 5주차 | async await  (0) 2023.03.29
[포스코x코딩온] 웹개발자 입문 과정 5주차 | 콜백함수, Promise  (0) 2023.03.28

'백앤드/Node.js'의 다른글

  • 현재글[포스코x코딩온] 웹개발자 입문 과정 3주차 회고-04 | 백앤드 기초

관련글

티스토리툴바