[SeSSAC] 웹 풀스택 영등포 5기 과정_nodejs 미들웨어, 구조분해, 클래스

안녕하세요

이번 시간에는 제목에서 알 수 있듯이 다양한 분야를 배워서,

따로 적을까 하다가, 수업 별로 적는게 좋을 것같아서 일단 정리를 해봅니다..

 

먼저, 지난 시간에 이어 node.js에 대해 배웠습니다.

 

• render 뒤의 값

저번 시간에 render에 대해서 배웠을 땐, 그냥 render안에 index라는 ejs를 보내서

그저 경로에 ejs로 된 html문서를 추가하는 방식으로 배웠었는데요

이번 시간엔 변수값을 전송할 수 있는 방법도 배웠습니다.

  res.render('index', {
    // 뒤에 값을 보낼 수 있음
    userId: idFromDB,
    userPw: pwFromDB,
    btns: ['사과', '오렌지', '키위'],
    me: {
      name: 'jihyung',
      msg: '안녕하세요',
    },
    isLogin: true,
  });

예를 들어 index라는 ejs를 경로에 추가 할건데,

그 index.ejs에 userId, userPw, btns, me, isLogin 등 다양한 변수들을 전송할 수 있습니다.

 

이렇게 보낸 변수를 index.ejs에서는

    <p>안녕하세요~ <%= userId%> 님! 환영합니다</p>
    <p>당신의 패스워드는? <%=userPw%></p>
        
    <% for (let btn of btns) { %>
        <button type="button" class="btn btn-primary"><%= btn %></button>
    <% } %>
    <span><%= me.name %></span>   
    <span><%= me.msg %></span>   
    <br/>
    <% if (!isLogin) { %>
    <h4>아직 로그인을 하지 않으셨군요!</h4>
    <% } else { %>
        <h4>로그인을 하셨군요!</h4>
        <% } %>

이런 식으로 활용해서 사용할 수 있습니다. 상기 코드에서 알 수 있듯이,

ejs에서 js의 변수를 불러오는 방법은 이렇습니다.

<%= 변수이름 %>

그리고 파일 자체를 불러 올 수도 있습니다.

<%- include('./includes/head', {title: '홈'})%>

보시면 include()라는 함수를 사용해서 includes라는 디렉토리를 찾아가 head.ejs를 참고 하고 있습니다.

또한 그 head.ejs안에 있는 title이란 변수에 값도 직접 넣어서 사용할 수가 있죠

<%- include('참고할 파일 경로', {변수: 값}) %>

이런 방식을 쓴다면 홈페이지마다 같은 head에 이름만 다른 대단한 헤더를 만들 수가 있겠죠! ^^

 

• static 미들웨어

미들웨어는 보통 소프트웨어나 시스템 사이에서 연결하고

통신, 상호작용하는 역할을 하는 소프트웨어를 말하는데,

이 node.js에서 미들웨어는 요청이 들어옴에 따라 응답까지의 중간 과정을 함수로 분리한 것 입니다.

use()함수를 이용하여 등록할 수 있습니다.

 

use()함수의 형태는 다양하지만, 저희가 오늘 배운 use 함수는 이렇게 생겼습니다.

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

여기서 express.static()함수는 express에서 제공하는 정적 파일 제공 미들웨어 입니다.

__dirname은 현재 실행 중인 스크립트 파일의 디렉토리 경로를 나타냅니다. (dir이 디렉토리의 딜 인가봄,,,)

여기에 './views'를 더해서 정적파일의 경로를 제시해주고 있습니다.

 

그래서 이 미들웨어로 정적파일을 등록하니,

head영역에 static파일 루트가 설정이 가능하게 되어,

홈페이지를 유지보수할 때 hear영역의 파일을 하나하나 찾지 않아도 되게 되겠죠?

    <!-- index.ejs에서만 적용하고픈 home.css -->
    <link rel="stylesheet" href="/public/css/home.css">

이 코드는 이제 하나의 페이지에 있는 head영역의 link태그를 가져온 것 입니다.

이 링크 태그의 href에 미들웨어 경로를 추가함으로서 home.css에 있는 스타일을

이 태그가 있는 ejs페이지에서 사용할 수 있습니다.

 

아직은 크게 홈페이지를 구축해본 게 아니라서 잘 와닿진 않지만 유지보수 측면에서 좋은 효과가 날 것같고,

이해는 했지만 체화를 못하는 전,,,뭘까요..? 아무래도 프로젝트 할 때 부딪혀봐야할 것 같습니다..

 

• 구조 분해 할당

그 다음 배운 것은 구조 분해 할당입니다.

 

1. 배열 구조 분해 할당

 

말그대로 있던 배열을 변수로 쪼개는 작업입니다.

const arr1 = [1, 2, 3, 4, 5];
const [one, two, three, four, five] = arr1;

console.log(one, two, three, four, five);
// 1 2 3 4 5 출력

배열의 요소를 one, two, three, four, five라는 변수에 하나하나 매칭을 해서 하나하나 들어가게 하는 것입니다.

 

처음에는 메모리 낭비하고 이게 뭐지? 라고 생각했는데

하긴 다른 언어에서 저 배열 하나 뽑아내려고 while문 돌리거나 인덱싱하는 난리를 치는 것보다

이 방면이 훨씬 편리하겠다고 생각했습니다..

 

이 배열 구조 분해 할당에서 중요한 것은 "순서" 입니다.

1이 저절로 one에 들어가는 것이 아니라, 둘다 0번째라서 1이 one에 들어간 셈이죠!

 

2. 객체 구조 분해 할당

 

말 그대로 객체 구조를 분해하고 다시 어딘가에 할당하는 작업입니다.

const obj = {
    title: '엘리멘탈',
    content: '재밌어요',
    num: 5,
};

const {title, content, num} = obj;
console.log(title, content, num);
// 엘리멘탈 재밌어요 5 출력

obj라는 객체에서 key값이 같은 걸 일치 시켜서 value값을 key값처럼 보이는 변수에 넣습니다.

뭔가 말로 하니까 좀 복잡한데 여기서 중요한 점은 key값이 같아야한다는 점입니다.

만약 일치하지 않으면 undefined로 나와버리게 됩니다.

title이라는 const로 선언한 아이가 obj에 key값이 title이 있는 지 보고, 그 value값을 const title에 넣는 겁니다!

 

+ spread 연산자

spread는 반복이 가능한 객체에 대해서 단일 요소로 압축을 해제하는 역할입니다.

그니까 그냥 한마디로 뭉쳐있는 그러한 것들 (배열, 객체, 문자열 등)을 하나하나 펼친다는 말입니다.

const c = [...'hello'];
const d = 'hello'.split('');// 같은 의미
console.log(c);
// 'h', 'e', 'l', 'l', 'o' 출력

출력 결과를 보시면, 'hello'라고 뭉쳐 있는 문자열을 char 문자 하나하나 띄어놓아 줍니다.

 

+ rest 연산자

rest 연산자는 느낌 그대로 나머지를 다 갖는 파라미터 입니다.

const values = [10, 20, 30, 40, 50, 60, 70];
function get(a,b, ...rest){
    console.log('a = ', a);
    console.log('b = ', b);
    console.log('rest = ', rest);
};
get (...values);

//a = 10
//b = 20
//rest = [30, 40, 50, 60, 70] 출력

 

• 클래스

제가 객체지향 배우면서 대체 이딴게 뭐야? 라고 했던 클래스는 정식으로 배웠습니다.

사실 배우고 나서 보니까 별거 아닌 것같은데 정처기에서 저를 힘들게 했던 개념입니다 ㅠ

class House {

    // 하우스 클래스로 집을 만들 때 마다 year,name,window 정보를 받는다
    constructor(year, name, window) { 
        // 생성자 함수
        // : 클래스를 이용해 객체를 생성할 때 마다 속성을 초기화
        this.year = year;
        this.name = name;
        this.window = window;
    }
    
    // 메서드 1: 집의 나이를 출력
    getAge() {
        console.log(`${this.name}는 건축한지 ${2023 - this.year}년 되었어요!`);
    }
    // 메서드 2: 집의 창문 갯수를 출력
    getWindow() {
        console.log(`${this.name}의 창문은 ${this.window}개 입니다!`);
    }
};

House라는 클래스를 생성하였습니다.

밑에 constructor라는 것으로 이 house라는 클래스에 대한 생성자를 받습니다. 

그냥 함수로 치면 매개변수와 같은 개념인 듯 합니다.

그리고 그 안에 관련 메서드도 선언합니다.

 

이렇게 집을 만드는 class를 생성하였다면 당신은 집을 생성한 것이 아닙니다!

집을 생산할 수 있는 틀(?)을 생성한 것이기에

집을 진짜 생산하려면 재료(생성자, 매개변수)를 부어서 생성해주어야합니다.

const house1 = new House(1990, '롯데캐슬', 1);

이러면 house1이라는 진짜 집을 생산한 것입니다.

 

• 상속

이 상속의 개념도 막상 배우니까 별거 아닌 것 같은데 정처기에서 저를 힘들게 하였습니다..

class 자식클래스 extends 부모클래스{}

이렇게 하여 상속의 개념을 만들 수 있습니다.

class Apartment extends House {
    constructor(year, name, window, floor, windowMaker) {
        // super = House(부모객체)에서 상속 받아옴 => 상속한 부모 클래스의 생성자를 호출
        super(year, name, window);
        this.floor = floor;
        this.windowMaker = windowMaker;
    }
    getAptInfo() {
        return `${this.name} 아파트의 층수는 ${this.floor}층이며, 창문의 개수는 ${this.window}개입니다.`
    }
    // 오버라이딩(overriding)
    // 부모 클래스에 정의되어 있는 메서드 이름을 동일하게 쓰되, 부모 클래스의 생성자를 호출
    getWindow() {
        return `${this.name}아파트의 창문은 ${this.windowMaker}회사에서 생산되었습니다.`
    }
};

위는 앞에 만들었던 House라는 클래스의 자식 클래스인 Apartment를 만든 것입니다.

보면 부모의 생성자를 그대로 가지고 오는 super() 함수도 사용하였고,

getAptInfo라는 새로운 메서드도 생성하였으며,

getWindow()라는 함수를 오버라이딩 하여 재정의하였습니다.

 

---

상속에 관한 실습 결과

class Shape {
    constructor(width, height){
        this.width = width;
        this.height = height;
    }
    getBoxWidth() {
        console.log(`이 박스의 넓이는 ${this.width*this.height} 입니다.`)
    }
};

class Rectangle extends Shape {
    constructor(width, height){
        super(width,height);
    }
    getArea(){
        return `대각선 길이는 ${Math.floor(Math.sqrt(this.width**2 + this.height**2))}입니다!`;
    }
};
class Triangle {
    constructor(width, height){
        this.width = width;
        this.height = height;
    }
    getArea(){
        return `삼각형의 넓이는 ${(this.width * this.height) / 2} 입니다.`;
    }
};

class Circle extends Shape {
    constructor(width, height, radius){
        super(width,height);
        this.radius = radius;
    }
    getArea(){
        return `원의 넓이는 ${Math.floor(Math.PI * (this.radius**2))} 입니다.`;
    }
};

const box2 = new Rectangle(4, 5);
console.log(box2.getArea());

const triangle = new Triangle(3,8);
console.log(triangle.getArea());

const circle = new Circle(4, 4, 2);
console.log(circle.getArea());