192cm.html

[React] useReducer Hook

Fri, 16 Dec 2022 13:52:13 GMT

useReducer는 단일 상태를 관리하는 useState보다 더 복잡한 state를 관리할 때 유용하게 사용할 수 있는 React Hook이다.

useState와 useReducer의 비교

간단한 카운트 앱으로 useState와 useReducer의 차이를 알아보자.

useState의 카운트 앱

import { useState } from "react";

const App = () => {
  const [age, setAge] = useState(42);

  // 이전의 state 값을 기반하여 증가/감소
  const plusAge = () => {
    setState(prevState => prevState + 1)
  };

  const minusAge = () => {
    setState(prevState => prevState - 1)
  };

  return (
    <>
      {age}
      
      
    
  );
};

export default App;

이렇게 useState를 이용하여 카운트 앱을 만들었다. 여기서 useState의 두번째 set 함수에 인자로 콜백 함수를 사용하여 현재 state의 값(화면에 출력된 값)을 기반하여 1씩 증가/감소하게 구현하였다.

useReducer의 카운트 앱

그럼 이제 useReducer를 이용한 카운트 앱을 보자.

import { useReducer } from "react";

const reducer = (state, action) => {
  switch (action.type) {
    case "PLUS_AGE":
      return { ...state, age: state.age + 1 };
    case "MINUS_AGE":
      return { ...state, age: state.age - 1 };
    default:
      return state;
  }
};

const App = () => {
  const [age, dispatch] = useReducer(reducer, { age: 42 });

  const plusAge = () => {
    dispatch({ type: "PLUS_AGE" });
  };

  const minusAge = () => {
    dispatch({ type: "MINUS_AGE" });
  };

  return (
    <>
      {age.age}
      
      
    
  );
};

export default App;

모두 아래 결과처럼 동일한 기능을 한다.

근데 useState의 카운트 앱보다 훨씬 복잡해보인다.

하지만 useReducer는 이런 간단한 앱보단 다수의 복합적인 state를 다루는 앱(예를 들면, 회원가입 폼 등)에 더 효과적으로 사용될 수 있다. 나는 useReducer를 개인적으로 사용해보고 정리를 하기 위해 간단한 카운트 앱을 했지만 복잡한 상태 관리가 필요하다면 직접 사용해보길 바란다.

useReducer 단계별로 살펴보기

useReducer 호출

우선 하나씩 보도록 하자. Hook을 사용하기 위해 import가 필요하다.

import { useReducer } from "react";

import 후 사용하기 위해 아래처럼 작성한다.

const [state, dispatchFunc] = useReducer(ReducerFunc, initialState);

여기서 하나씩 살펴보면, useReducer도 useState처럼 반환값이 배열인데 첫번째 요소가 state, 두번째 요소가 dispatchFunc이다.

이것은 위의 useReducer의 카운트 앱에 사용된 예시이다.

const [age, dispatch] = useReducer(reducer, { age: 42 });

state

여기서 state는 말 그대로 useState와 동일한 역할의 현재의 state 변수이다. useReducer의 두번째 인자인 initialState가 최초로 할당된다.

dispatchFunc

dispatchFunc는 '상호작용에 따라 변경할 수 있는 디스패치 함수'이다. 쉽게 말하자면 화면에 있는 state를 업데이트하기 위한 함수이다.

중요한 점은 dispatchFunc가 호출이 되면 state를 다른 값으로 업데이트하고 사용된 컴포넌트의 렌더링을 발생시킨다.

useReducer(ReducerFunc, initialState)

ReducerFunc

useReducer의 첫번째 인자 ReducerFunc는 "dispatchFunc가 전달한 action 객체 의 type 프로퍼티에 따라 state를 어떻게 업데이트할지 결정하는 함수이다.

type 프로퍼티가 아닌 다른 것으로도 업데이트 작업을 결정할 수 있다. 단, 보편적으로 어떻게 업데이트를 할지 식별하기 위해 type 프로퍼티를 포함한 action 객체를 사용한다.

initialState

useReducer의 두번째 인자 initialState는 반환하는 배열의 첫번째 요소인 state의 초기값을 설정하는 인자이다. 물론 useState처럼 해당 컴포넌트가 처음 렌더링되었을 때 최초로 state에 할당되며 이후의 렌더링에는 무시되는 값이다.

dispatchFunc 호출

카운트 앱의 dispatchFunc를 보도록 하자.

// age의 증가를 위한 함수
const plusAge = () => {
    dispatch({ type: "PLUS_AGE" });
};

// age의 감소를 위한 함수
const minusAge = () => {
    dispatch({ type: "MINUS_AGE" });
};

dispatchFunc를 보면 뭔가 당황스러울 것이다. 왜냐하면 dispatchFunc는 state를 업데이트하는 함수인데 왜 useState처럼 증가/감소하는 로직이 없기 때문이다. 또한 반환값도 없다.

useReducer는 useState와 달리 복잡한 state를 관리하기 때문에 인자로 ReducerFunc에 전달되는 action 객체의 type 프로퍼티에 따라 state 업데이트 동작(action)을 결정하게 된다.

쉽게 말하자면 dispatchFunc는 그저 state를 어떻게 업데이트할 것인지 결정하기 위해 조건을 ReducerFunc에 전달한다고 생각하면 된다.

그래서 위처럼 { type: "PLUS_AGE" }와 { type: "PLUS_AGE" }인 action 객체를 ReducerFunc에 전달한다.

여기서 type의 값이 모두 대문자인 것을 볼 수 있는데 이것은 관례라고 하니 만약 다른 컨벤션을 원한다면 변경해도 된다.

React Docs Beta 공식 문서에는 소문자로 표기되어 있다.

ReducerFunc 실행(state 업데이트)

// ReducerFunc
const reducer = (state, action) => {
  switch (action.type) {
    case "PLUS_AGE":
      return { ...state, age: state.age + 1 };
    case "MINUS_AGE":
      return { ...state, age: state.age - 1 };
    default:
      return state;
  }
};

const App = () => {
  // ...

  const plusAge = () => {
    dispatch({ type: "PLUS_AGE" });
  };

  const minusAge = () => {
    dispatch({ type: "MINUS_AGE" });
  };

  // ...
}

ReducerFunc는 대체적으로 컴포넌트 외부에 위치한다. 왜냐하면 컴포넌트가 재렌더링이 되면서 새로 생성될 필요가 없기 때문이다.

이제 dispatchFunc 호출로 인해 type 프로퍼티가 있는 action 객체를 전달 받았다고 가정해보자.

예를 들어 plusAge 함수가 버튼 클릭으로 호출이 되어 dispatchFunc가 호출되어 action 객체가 ReducerFunc에 전달되었다.

그럼 ReducerFunc의 내부의 switch문에 의해 해당되는 action.type에 따라 state의 업데이트 방식이 결정된다.

여기서 궁금한 점이 있다면 ReducerFunc의 매개변수 state와 action일 것이다.

state는 화면에 있는 기존의 값을 가리키며
action는 dispatchFunc로 부터 전달받은 action 객체이다.

이것을 로그로 출력해보면 아래와 같다.

// plusAge 함수를 클릭 이벤트로 호출했을 때

const reducer = (state, action) => {
  console.log(state, action) // { age : 42 }, { type : "PLUS_AGE" }
  switch (action.type) {
    case "PLUS_AGE":
      return { ...state, age: state.age + 1 };
    case "MINUS_AGE":
      return { ...state, age: state.age - 1 };
    default:
      return state;
  }
};

처음 클릭 이벤트로 인해 호출되었기 때문에 첫번째 매개변수 state에는 useReducer 호출 단계에서 설정했던 initialState가 출력되었다.

                                                👇
const [age, dispatch] = useReducer(reducer, { age: 42 });

그리고 두번째 매개변수 action은 dispatchFunc로부터 전달받은 action 객체가 출력되었다.

const plusAge = () => {
    dispatch({ type: "PLUS_AGE" });
                        👆
};

여기선 action 객체의 type이 "PLUS_AGE"이기 때문에 switch문의 첫번째 case의 반환값이 새로운 state 값으로 업데이트된다.

스프레드 연산자(...)를 사용해서 기존의 state을 전개한 이유는? 🤔

이 카운트 앱에는 굳이 필요가 없어보인다. 왜냐하면 기존에 initialState로 설정한 값의 프로퍼티는 age만 존재하기 때문에 굳이 스프레드 연산자를 사용할 필요없이 { age : state.age + 1 }만 해주면 된다.
다만, 만약 age 말고도 다른 프로퍼티가 존재할 때 그냥 { age : state.age + 1 }만 작성한다면 "age와 다른 프로퍼티를 포함한 객체"를 "age 프로퍼티만 가진 객체"로 완전히 교체해버리는 문제가 생긴다.
그래서 이를 방지하기 위해 기존의 state를 전개하고 이후에 업데이트할 값을 작성해서 기존의 state에 오버라이드 해주는 것이다.

기존의 state의 age 값에 1을 더하는 것을 알 수 있다.

useReducer 주의할 점

useReducer 호출은 반드시 사용할 컴포넌트의 최상위 레벨에서 해야한다. 절대 루프나 조건문에서 호출해서는 안된다.

객체(state, action)의 불변성을 유지해야한다.

// React의 불변성을 위해 아래처럼 직접 업데이트해서는 안된다.
case "PLUS_AGE":
return state.age++;
case "MINUS_AGE":
return state.age--;

[React] useState Hook

Tue, 13 Dec 2022 06:10:55 GMT

React Docs Beta API를 보고 학습한 내용입니다.

useState는 컴포넌트에 상태 변수를 생성할 수 있는 React Hook이다.

사용법

React로부터 useState를 가져온 후 컴포넌트의 최상위 레벨에서 선언하여 컴포넌트에 state를 추가한다. useState는 배열을 반환하는데 그것을 구조 분해를 해서 주로 사용한다.

import { useState } from 'react';

const App = () => {
  // 컴포넌트의 최상위 레벨에 위치
  const [state, setState] = useState(initialState)
  // ...
}

배열의 구조분해할당(Array Destructuring)이란?

Array의 값 또는 Object의 속성을 개별 변수로 압축을 해제할 수 있게 해주는 JavaScript 표현식

const [a, b] = [10, 20];
console.log(a) // 10
console.log(b) // 20

state : '현재' 상태의 값, 컴포넌트가 최초로 렌더링될 때 initialState가 할당되며 이후 업데이트 시 initialState를 무시하고 업데이트된 값이 할당된다.
setState : state의 값을 변경하는 set 함수이다.

[state, setState]는 컨벤션으로 관습적으로 state의 이름에 set을 붙여 useState를 사용한다.
initialState : 컴포넌트가 최초 렌더링시 state에 자동으로 할당되는 초기 값이다. 초기 값으로 어떤 타입이든 들어올 수 있다.

set 함수 호출 시 컴포넌트는 다시 렌더링된다.

set 함수를 호출하면 state의 값을 업데이트를 해서 반영하기 위해 컴포넌트가 다시 렌더링된다.

아래의 예시는 버튼을 클릭하면 state의 값이 업데이트되면서 App 컴포넌트가 다시 렌더링하는지 보기 위한 예제이다.

import { useState } from 'react';

const App = () => {
  const [state, setState] = useState('상태');
  const onClick = () => {
    setState('업데이트된 상태');
  };
  console.log('App 컴포넌트 렌더링');

  return ;
};

export default App;

결과는 아래처럼 작성한 로그가 2번 출력되는 것을 볼 수 있다. 첫번째는 최초 렌더링 시에 출력되었고 두번째는 state가 업데이트된 후에 출력된 것이다.

객체를 업데이트하자

만약 객체를 state로 한다고 가정해보자.

const [obj, setObj] = useState({ name : "현우", age : 30, gender : "male" });

여기서 객체를 업데이트하려면 업데이트할 프로퍼티만 작성하면 안된다. 만약 업데이트할 프로퍼티만 작성하면 아래처럼 기존의 객체를 업데이트할 객체로 완전히 오버라이드 되기 때문에 반드시 업데이트를 하지 않는 프로퍼티도 작성을 해줘야한다.

const [obj, setObj] = useState({ name : "현우", age : 30, gender : "male" });

setObj({ name: "철수" });
console.log(obj); // { name : "철수" }

그래서 기존의 객체를 업데이트를 편하게 하기 위해 스프레드 연산자(전개 연산자)를 사용하면 된다.

const [obj, setObj] = useState({ name : "현우", age : 30, gender : "male" });

setObj({ ...obj, name: "철수" });
console.log(obj); // { name : "철수", age : 30, gender : "male" }

스프레드 연산자를 반드시 앞에 작성해야 업데이트할 프로퍼티의 값을 새로운 값으로 업데이트할 수 있다. 만약 뒤에 작성하면 기존의 상태와 동일한 상태를 가지게 된다. 업데이트할 새로운 상태 값인 name : "철수"를 기존의 상태 값인 name : "현우"가 덮어버리기 때문이다.

setObj({ name: "철수", ...obj });
console.log(obj); // { name : "현우", age : 30, gender : "male" }

이전 상태를 기반으로 상태를 업데이트하기

useState의 set 함수를 이용해서 이전 상태를 기반으로 상태를 업데이트 할 수 있다.

function handleClick() {
  setAge(age + 1); // setAge(42 + 1)
  setAge(age + 1); // setAge(42 + 1)
  setAge(age + 1); // setAge(42 + 1)
}

위의 예시를 보면 상태인 컴포넌트 내부의 상태인 age는 초기값이 42라고 가정할 때 hanleClick 함수를 호출 시 42에 1이 세 번 더해져 45가 되는 것이 아닌 1이 한번만 더해진 43이 된다. 이것은 set 함수를 호출했을때 React가 '다음 렌더링'에 state를 업데이트를 하려고 준비하기 때문이다.

즉, 위의 함수의 순서는 이렇다.

첫번째 setAge가 호출되면 age의 값은 42이므로 setAge(42+1)이며 React가 '다음 렌더링'에 새로운 state의 값으로 업데이트를 준비한다.
두번째 setAge가 호출되면 여전히 age는 42이므로 setAge(42+1)이며 React가 '다음 렌더링'에 새로운 state의 값으로 업데이트를 준비한다.
세번째 setAge가 호출되면 여전히 age는 42이므로 setAge(42+1)이며 React가 '다음 렌더링'에 새로운 state의 값으로 업데이트를 준비한다.

그래서 이전 상태를 기반으로 업데이트해야하는 경우라면 set 함수의 콜백 함수를 인자로 해서 사용하면 이전 상태를 기반으로 상태를 업데이트할 수 있다. 위의 코드를 이렇게 고치면 handleClick 함수 호출 시 3이 더해진다.

function handleClick() {
  setAge(prevState => prevState + 1); // setAge(42 => 42 + 1)
  setAge(prevState => prevState + 1); // setAge(43 => 43 + 1)
  setAge(prevState => prevState + 1); // setAge(44 => 44 + 1)
}

업데이트를 했는데 왜 업데이트가 안된 값이 나올까?

set 함수를 호출해서 state를 업데이트했는데 로그를 출력해보면 왜 여전히 이전의 값만 출력이 될까? 내가 React에서 useState를 사용해보면서 가장 많이 겪었던 문제였다.

아래의 코드는 Docs의 예제인데 결과를 자세히 보면 setCount를 실행한 이후에도 로그에는 0이 찍히고 있다.

function handleClick() {
  console.log(count);  // 0

  setCount(count + 1); // Request a re-render with 1
  console.log(count);  // Still 0!

  setTimeout(() => {
    console.log(count); // Also 0!
  }, 5000);
}

이것은 상태가 snapshot처럼 작동하기 때문이다. 상태를 업데이트하면 새로운 상태 값으로 렌더링이 요청이 되지만 이미 실행 중인 이벤트 핸들러의 JavaScript 변수인 count에는 영향을 주지 못하기 때문이다.

만약 해당 함수에서 다음 상태의 값이 필요하다면 set 함수에 전달하기 전에 JavaScript 변수에 저장하면 된다.

function handleClick() {
  const nextCount = count + 1;

  setCount(nextCount);

  console.log(count); // 0
  console.log(nexCount); // 1
}

[React] React-router-dom@5 버전에서 발생한 에러

Thu, 08 Dec 2022 13:19:04 GMT

발생 상황

React에서 Router를 설정하고 있었는데 에러가 발생했다.

Failed prop type: Invalid prop 'component' supplied to 'Route': the prop is not a valid React component 잘못된 props인 'component'가 Route에 제공되었다. 이 props는 유효한 React 컴포넌트가 아니다.

에러가 발생한 코드는 아래와 같다.

import { BrowserRouter as Router, Route } from "react-router-dom";
import Users from "./user/pages/Users";

const App = () => {
  return (
    
      {/* Route에 접속하려면 도메인 뒤에 path에 적용한 것을 입력해야함 */}
      {/* 
        
       */}
      } />
    
  );
};

export default App;

물론 아래처럼 'component' props를 사용하지 않고 Route의 오프닝 태그와 클로징 태그 사이에 넣어줘도 정상적으로 동작하지만 다른 방법을 확실히 알아가는 것이 중요하니 이 방법으로 해보려 했다.

에러 원인

에러 메세지에서 힌트를 준 것처럼 Route에 올바르지 않은 props를 전달했거나 props에 올바른 값을 전달하지 못해서 발생한 에러이다.

문제 해결

우선 React-router-dom 공식 문서에서 올바른 props인지 확인해봤다. 내 React-router-dom은 @5.3.4 버전이기 때문에 @5.x의 공식문서를 확인했다.

component

A React component to render only when the location matches. It will be rendered with route props. location이 일치할 때만 이 React 컴포넌트를 렌더한다. 이것은 Route props로 렌더할 것이다.

우선 component라는 props는 있기 때문에 사용할 수 있다. 그러면 props에 넣는 값이 잘못된 것이니 공식 문서에서 사용한 예시를 봤다.

내가 한 Route의 component porps의 값은 이다.

} />

하지만 React-router-dom의 component 사용 예시는 아래와 같다.

// import한 객체를 사용하고 있다...?

나는 User라는 컴포넌트를 JSX 구문으로 넣었고 React-router-dom의 예시는 컴포넌트를 import한 User 객체 자체를 값으로 적용했다.

이유를 몰랐는데 다른 에러 메세지에 완전 직접적인 힌트를 주고 있었다...

type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: . Did you accidentally export a JSX literal instead of a component? 타입이 유효하지 않습니다. -- 문자열 또는 클래스/함수가 필요하지만 를 얻었습니다. 컴포넌트 대신 JSX 리터럴을 실수로 보냈습니까?

나는 JSX 구문을 값으로 넣었는데 component props의 값으로는 문자열이나 클래스/함수가 필요하다고 한다.

그래서 아래처럼 고쳐주면 해결!

import { BrowserRouter as Router, Route } from "react-router-dom";
import Users from "./user/pages/Users";

const App = () => {
  return (
    
      
    
  );
};

export default App;

앞으로 에러 메세지를 자세히 살펴보는 습관을 길러야겠다... 😅

[Express] Express의 정적 Assets 사용하기

Mon, 05 Dec 2022 14:55:21 GMT

Express 정적 파일 사용하기 Guide

정적 Assets 사용

정적 Assets을 사용하기 전에 정적(Static) 파일은 무엇일까?

정적 파일을 제공한다는 것은 대표적인 예로 클라이언트 요청에 따라 이미지나 CSS나 JavaScript와 같은 파일을 제공하는 것이다.

정적 Assets 사용하기

Express에서 정적 Assets 파일을 사용하려면 아래의 express 객체의 메서드를 사용해야한다.

express.static()은 미들웨어로 요청이 들어오면 응답을 내보내는 식으로 동작한다. 그래서 모든 요청이 들어올 때마다 인자를 호출하는 app.use() 메서드와 같이 사용한다.

app.use(express.static())

이 static() 메서드에 우리가 제공하고 싶은 Assets 폴더를 인수로 전달한다. 아래의 코드는 app.css 파일이 있는 public 디렉토리의 콘텐츠 전체를 제공해서 접근할 수 있게 한다. 여기서 / 같은 Path를 붙일 필요없이 디렉토리의 이름만 입력을 하면 된다.

/* app.css */
body{
  background-color : sandy;
}

app.use(express.static('public'))

그리고 템플릿 파일에 app.css를 적용했다.



  
    
    
    
    <%= name %>
    
    
    
  
  
    Browsing The <%= name %> subreddit
    <%= description %>
    <%= subscribers %> Total Subscribers
    
    <% for(let post of posts) { %>
    
      <%= post.title %> - <%= post.author %>
      <% if(post.img){ %>
      " alt="<%= post.title %>" />
      <% } %>
    
    <% } %>

static()에 public 디렉토리의 콘텐츠를 모두 제공했기 때문에 app.css에 접근이 가능해져 사용할 수 있었다.

정적 파일에 접근이 가능해져서 아래처럼 localhost:3000/app.css 같은 방식으로 정적 파일에도 접근할 수 있다.

경로 문제 해결

하지만 이전의 views 디렉토리의 경로 문제처럼 한 단계 상위 폴더로 더 나가서 실행할 경우 경로 문제가 생긴다.

한 단계 상위 폴더로 나가서 실행하면,

경로 문제가 발생해서 아래의 background-color 속성이 적용되지 않은 것을 확인할 수 있다. 또한 콘솔에도 app.css 파일을 찾을 수 없다고 한다.

그 이유도 이전 views 디렉토리와 동일하게 한 단계 상위 폴더에서 app.css 파일을 찾기 때문에 없는 것이다.

그래서 실행하는 index.js 파일이 있는 경로를 아래처럼 절대 경로로 설정해야한다. __dirname가 index.js 파일의 절대 경로가 되고 public을 추가하면 public 디렉토리의 절대 경로가 된다.

app.use(express.static(path.join(__dirname, "public")));

그럼 다시 스타일 시트가 적용된 화면을 볼 수 있다.

[Express] EJS의 조건문과 반복문

Mon, 05 Dec 2022 13:39:14 GMT

EJS 조건문



  
    
    
    
    Random
  
  
    Your random number is <%= num %>

이 템플릿은 라우터로부터 랜덤한 숫자 Num을 res.render() 메서드의 두번째 인자인 객체의 형태로 전달받고 있다. 그 후 <%= 구문으로 HTML에 출력되고 있다.

EJS if문 조건부 렌더링

근데 만약 이 랜덤한 값이 짝수일 때 h2태그로 짝수인지 홀수인지 출력하려면 어떻게 해야할까?

우선 ejs의 <%=안에는 숫자를 연산도 했었고 지금처럼 변수까지 넣었었다. 그럼 if문을 넣으면 어떨까? 조금 지저분한 코드이긴 하지만 이렇게 넣어보면...



  
    
    
    
    Random
  
  
    Your random number is <%= num %>
    
    <%= if(num % 2 === 0){ %>

    <%= } %>

문법 에러가 난다. 즉 if문은 저렇게 사용할 수 없다는 것이다.

그래서 HTML에 출력하지 않고 로직만 통제하는 방식으로는 가능하다. <%=는 출력하는 구문이지만 <%는 출력하지 않고 로직만 다룰 수가 있다.



  
    
    
    
    Random
  
  
    Your random number is <%= num %>
    <% if(num % 2 === 0){ %>
    That is an even number.
    <% } else { %>
    That is an odd number.
    <% } %>

이렇게 작성하면 정상적으로 동작한다!

여기서 더 간단하게 작성하려면 "삼항 연산자"를 사용하여 조건부로 렌더링하면 동일한 결과를 얻을 수 있다.



  
    
    
    
    Random
  
  
    Your random number is <%= num %>
    
    
    <%= num%2 === 0 ? "That is an even number." :"That is an odd number." %>

EJS 반복문

이제 반복문을 알아보자. 우선 /cats 라우터를 생성하고 cats라는 상수에 데이터 베이스에서 가져오는 데이터라고 생각하고 임의의 배열을 할당했다.

app.get("/cats", (req, res) => {
  // 이 임의의 배열은 데이터 베이스에서 가져온다고 가정한다.
  const cats = ["Blue", "Rocket", "Monty", "Stephanie", "Winston"];
  res.render("cats", { cats })
});

그리고 템플릿인 cats.ejs 파일을 생성하고 기본 구조의 HTML을 작성하고 cats 데이터를 사용할 수 있도록 <%= 구문을 사용하였다.



  
    
    
    
    All Cats
  
  
    All The Cats
    
    <%= cats %>

우리가 전달한 배열 데이터는 잘 나오고 있다.

이것은 리스트 형식으로 출력되게 하고 싶다면 반복문을 사용해야한다. 반복문 또한 조건문과 다르지 않게 출력되지 않는 <% 구문을 사용하여 로직은 출력하지 않고 결과만 출력이 되게 할 수 있다.



  
    
    
    
    All Cats
  
  
    All The Cats
    
    
    
      <% for (let cat of cats){%>
      
      <%= cat %>
      <% } %>

반복문을 이용하는데 예시로 든 for...of만 가능한게 아닌 모든 반복문을 위와 같이 사용할 수 있다.

[Express] EJS 보간(interpolation) 구문을 이용한 템플릿에 데이터 전달하기

Mon, 05 Dec 2022 12:53:34 GMT

EJS 같은 템플레이팅 엔진을 사용하는 이유는 로직을 더하고 데이터를 보충해서 구성하기 위함이다. 쉽게 말하자면 템플레이팅 엔진은 반복이나 조건이 있는 여러 값이 들어가는 HTML의 성능을 올리는 것이 목적이다.

그러기 위해서 EJS 구문을 확실히 익히는 것 또한 중요하다고 할 수 있다.

EJS 구문을 공부하기 전에 VSCode Extension인 EJS language support을 설치하면 EJS 구문을 하이라이팅을 해줘서 기본 HTML 태그와 구분이 쉬워진다.

EJS 공식 문서를 참조하면 Tags라는 것이 있는데 이것은 HTML이 아니니 HTML로 취급하지 말라고 지시하기 위해 사용하는 구문이다.

예를 들면 <%= %> 안에 4 + 5 + 1인 연산을 넣으면 JavaScript가 연산하듯이 결과값을 출력해준다. 즉 이 구문이 HTML이 아니니 HTML이 아니라 JavaScript의 구문이라고 인식을 하는 것이다.

하지만 템플릿에서 로직을 더하는 것은 좋지 않은 방법이다. 왜냐하면 템플릿은 결과를 출력할 때에 집중하는 것이 더 효율적이기 때문이다. 그래서 템플릿에서 로직을 실행하는 것보다 더 나은 방법으로 결과값을 만든 후 템플릿에게 전달하는 방식을 권장한다.

예를 들자면 현재 localhost:3000/rand를 요청하면 random.ejs가 렌더링된다.

app.get("/rand", (req, res) => {
  res.render("random");
});

random.ejs에는 1 ~ 10까지의 숫자 중 무작위로 렌더링해주는 로직이 작성되어있다.



  
    
    
    
    Random
  
  
      
    Your random number is <%= Math.floor(Math.random() * 10) + 1 %>

하지만 템플릿에 로직을 더하는 것을 좋지 않기 때문에 무작위 숫자를 먼저 생성 후 템플릿에 전달하는 방식으로 수정을 하면 된다. 여기서 res.render() 메서드의 두번째 인자에 객체 형식으로 프로퍼티를 작성해주면 이 객체가 첫번째 인자인 템플릿에 전달되게 된다.

app.get("/rand", (req, res) => {
  // 먼저 무작위 숫자를 생성하고
  const num = Math.floor(Math.random() * 10) + 1;
  // render의 두번째 인자로 적용한다.
  res.render("random", { num : num });
});

템플릿에서 전달된 객체를 사용할 때는 key 값으로 사용하면 된다.



  
    
    
    
    Random
  
  
      
    Your random number is <%= num %>

req.params와 EJS <%= 구문 사용

우선 subreddit.ejs 템플릿을 생성하고 라우팅을 했다.



  
    
    
    
    <%= subreddit %>
  
  
    Browsing The <%= subreddit %> subreddit

app.get("/r/:subreddit", (req, res) => {
  const { subreddit } = req.params;
  res.render("subreddit", { subreddit });
});

이 방식은 /r/:subreddit의 요청을 받으면 입력한 매개변수를 req.params 프로퍼티를 이용하여 가져와서 렌더링하는 'subreddit.ejs' 템플릿 파일에 객체형식으로 전달하여 템플릿에 <%= 구문으로 데이터를 전달했다. 이렇게 작성하면 매개변수의 값에 따라 페이지의 title과 h1태그의 콘텐츠가 변경될 것이다.

'hello'을 매개변수로 했을 때
'goodbye'를 매개변수로 했을 때

이것을 실제 데이터베이스에서 데이터를 가져와서 사용한다고 하면 아주 유용할 것이다.

[Express] EJS views 디렉토리 설정

Mon, 05 Dec 2022 10:44:42 GMT

EJS 패키지를 설치하고 app.set()으로 Express에게 EJS를 사용할 것이라고 알려줬다.

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

app.set("view engine", "ejs");

app.get("/", (req, res) => {
  res.render("home");
});

app.listen(port, () => {
  console.log(`Starting server : localhost:${port}`);
});

그런데 여기서 views 디렉토리에 문제가 있다.

views의 상위 디렉토리 내에서 서버를 실행하고 요청을 하면 정상적으로 페이지가 렌더링이 된다.

하지만 views의 상위 디렉토리보다 한번 더 올라간다면 서버를 실행하는 액세스는 가능하지만

localhost:3000을 보면 "views 디렉토리 안의 view인 'home'을 찾는데 실패했다."라는 에러가 난다.

어디서 찾고 있는지 보면 우리가 생각하는 경로에서 찾고 있지 않고 있다.

Error: Failed to lookup view "home" in views directory "/Users/hyunwoo-air/Desktop/views"

그래서 이것을 어디서든 views의 디렉토리를 참조해서 정상적으로 작동하게 하려면 Node의 내장된 path 모듈을 사용해서 해결할 수 있다.

path 모듈을 가져와서 경로 세그먼트(join의 문자열 인자)를 합쳐서 정규화하여 하나의 경로로 만드는 메서드인 join()을 통해 현재 실행 중인 파일(index.js)의 있는 현재 디렉토리 __dirname와 home.ejs에 도달하기 위한 나머지 경로인 /views를 붙여준다.

const path = require("path");

// ...

// /Users/hyunwoo-air/Desktop/Dynamic-html-template- + /views가 된다.
app.set("views", path.join(__dirname, "/views"));

이제 다시 서버를 실행을 하고 localhost:3000이 제대로 렌더링되는지 살펴보자.

드디어 localhost:3000이 정상적으로 동작하고 있다.

이 views 디렉토리의 문제의 경우 자주 발생하는 문제라고 하니 반드시 기억해두는 것이 좋을 것 같다!

[Express] EJS용 Express 구성하기

Mon, 05 Dec 2022 09:48:38 GMT

기본 세팅

npm init -y
npm i express

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

app.get("/", (req, res) => {
  res.send("Root routing");
});

app.listen(port, () => {
  console.log(`Starting server : localhost:${port}`);
});

템플레이팅 시작

템플레이팅을 위해 EJS를 사용하는데 Express에게 알려줘야한다.

EJS란? Embedded JavaScript templating. JavaScript로 HTML 마크업을 생성할 수 있는 간단한 템플릿 언어이다.

먼저 EJS를 설치를 하고,

npm i ejs

app.set() 메서드로 view engine을 ejs로 설정을 한다.

app.set("view engine", "ejs");

이 설정을 마치고 나면 새 Express 앱을 만들고 view engine을 사용할 때 Express는 views나 템플릿이 views 디렉토리 안에 있다고 가정한다. 왜냐하면 현재 작업 중인 디렉토리(process.cwd())에서 /views 디렉토리도 기본 설정이 되어있기 때문이다.

기본 Path를 일치시키기 위해 현재 디렉토리 위치에서 /views 디렉토리를 생성하고 디렉토리 내에 EJS 파일을 생성한다.

mkdir views
touch views/.ejs

그리고 생성한 EJS 파일에 HTML 콘텐츠를 추가한다. EJS 파일에서 표준 HTML을 사용할 수 있기 때문에 원하는대로 HTML을 구성하면 된다.

이렇게 하면 간단한 템플릿이 완성이 된다.



  
    
    
    
    Home
  
  
    The Home Page
    
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam nostrum
      deserunt, eos, debitis sequi vel saepe at aut quos non esse adipisci
      dolorem nihil error. Nostrum accusantium molestiae nesciunt. Maxime!
    
    
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Id expedita,
      illum cum ex culpa officia vel adipisci ut neque saepe voluptate
      similique, amet exercitationem, molestias cupiditate minus explicabo
      itaque unde!

이제 이 템플릿을 라우트 안의 res.send()대신 res.render()을 이용하면 문자열이 아닌 파일이나 템플릿을 보낼 수 있다. res.render() 메서드는 첫번째 인자인 view(렌더링할 view 파일의 파일 경로인 문자열)를 렌더링하고 렌더링된 HTML 문자열을 클라이언트에 보내는 메서드이다.

또한 Path로 views/를 파일명에 적어주지 않아도 되는데 그 이유는 render() 메서드가 이미 views 디렉토리에 이미 존재한다고 가정하기 때문이다.

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

app.set("view engine", "ejs");

app.get("/", (req, res) => {
  res.render("")
});
app.listen(port, () => {
  console.log(`Starting server : localhost:${port}`);
});

이렇게 작성하고 서버를 실행 후에 localhost:3000을 보면 렌더된 것을 볼 수 있다.

[npm] Nodemon

Mon, 05 Dec 2022 08:17:06 GMT

Express를 공부하면서 가장 불편했던 것이 파일을 수정하면 실행한 서버를 종료했다가 다시 실행시키고 '수동'으로 계속 반복해야했던 것이다. 이것을 자동으로 서버를 재시작해주는 방법이 있는데 그것이 'Nodemon'이라는 패키지이다.

Nodemon 설치하기

npm install -g nodemon

-g를 빼고 전역으로 설치하지 않아도 된다.

Nodemon으로 서버 시작하기

설치를 해서 nodemon으로 서버를 시작하는 방법은 아래처럼 입력하면 된다.

nodemon

index.js를 실행하고 수정 후 저장을 하면 아래처럼 서버를 자동으로 재시작시켜준다. nodemon은 참고로 경로를 관찰하고 폴더의 js, json 확장자로 시작하는 모든 것을 관찰한다.

[Express] 1도 모르는 Express - 쿼리 문자열

Mon, 05 Dec 2022 08:04:16 GMT

쿼리(Query) 문자열란?

URL의 일부로 물음표 뒤에 위치하며 쿼리 문자열의 한 부분으로 key-value 쌍으로 정보를 담는 문자열이다.

쿼리 문자열을 파싱하고 Express 앱에서 액세스하는 것은 매우 중요하다.

쿼리 문자열에 액세스하기

req.params처럼 req.query 프로퍼티로 액세스가 가능하다. 쿼리 문자열 또한 key와 value로 이루어져있는 객체이다.

localhost:3000/search?q=cards 입력 시 나오는 결과는 아래와 같다.

// localhost:3000/search?q=cards 입력 시 
app.get("/search", (req, res) => {
  console.log(req.query);
  res.send("Query String")
})

로그에는 {q : 'cards'}가 출력되어있다. 즉, localhost:3000/search?=가 되는 것이다.

복수의 쿼리 문자열 입력하기

쿼리 문자열 또한 &를 사용하여 여러 개의 쿼리 문자열을 입력할 수 있다.

똑같은 라우팅을 사용하여 여러 개의 쿼리 문자열을 사용해보자.

// localhost:3000/search?q=cards&color=red 입력 시 
app.get("/search", (req, res) => {
  console.log(req.query);
  res.send("Query String");
})

당연히 접근할 때도 깔끔한 코드를 위해 구조 분해를 하면 더 좋다.

// localhost:3000/search?q=cards&color=red 입력 시 
app.get("/search", (req, res) => {
  const { q, color } = req.query;
  res.send(`${q}=${color}`);
})

하지만 사용자들은 이렇게 주소창에 바로 입력하지 않은 GET 요청 form에 입력을 통해 쿼리 문자열을 생성한다. 이 방법은 차차 배워보도록 하겠다 😅

[Express] 1도 모르는 Express - Path 매개변수 :

Mon, 05 Dec 2022 07:28:31 GMT

Path의 매개변수란?

라우트를 생성해서 그 안에 경로 문자열에 콜론을 이용해서 변수나 경로 변수로 지정하게 끔 하는 것이다.

// 경로에 콜론(:)을 사용해서 사용할 수 있다.
app.get("/r/:params", (req, res)=>{
    res.send("THIS IS A /r/:params")
})

Path의 매개변수를 설정해서 경로에 맞춰서 입력을 해보면 아래와 같은 결과가 나온다. :뒤에 아무거나 입력을 해도 설정한 텍스트가 똑같이 출력되고 있다.

여기서 :params는 무엇어야하는지 정한 것이 아니다. 유효한 건지 혹은 영어인지 등 확인하는 작업이 없다. 말 그대로 일치시키는 패턴인 것이다. 우리가 설정한 r/의 패턴만 맞춰주면 모두 우리가 설정한 텍스트를 볼 수 있다. 물론 다른 패턴이라면 아래처럼 'Cannot GET /~'를 볼 수 있다.

매개변수로 입력한 값은 아래처럼 req 객체의 메서드인 params 프로퍼티로 값을 사용할 수 있다.

app.get("/r/:params", (req, res) => {
  console.log(req.params);
  res.send(`THIS IS A /r/:params`);
});

여기서 req.params는 객체인데 Path의 매개변수의 이름이 객체의 프로퍼티의 key가 되고 입력한 값이 value가 된다. localhost:3000/r/hello를 입력해서 아래의 코드를 실행하면 로그에 출력된 것은 객체이며, params라는 key와 hello라는 value를 가진다.

// localhost:3000/r/hello 입력 시
app.get("/r/:params", (req, res) => {
    console.log(req.params); // { params : 'hello'}
    res.send(`THIS IS A /r/:${req.params.params}`);
});

더욱 깔끔한 코드를 사용을 위해 객체 구조 분해로 params를 사용한다.

app.get("/r/:params", (req, res) => {
  // 객체 구조 분해
  const { params } = req.params; 
  res.send(`THIS IS A /r/:${params}`);
});

복수의 매개변수도 가능!

Path의 매개변수는 꼭 하나가 아니여도 된다. /와 :을 이용하여 복수로 추가할 수 있다.

// localhost:3000/r/about/1을 입력 시
app.get("/r/:params/:postId", (req, res) => {
  const { params, postId } = req.params;
  res.send(`THIS IS A /r/:${params}/:${postId}`);
});

로그로 출력해보면 req.params의 하나의 객체에 각각의 프로퍼티로 나열되어 있다.

[Express] 1도 모르는 Express - Routing

Mon, 05 Dec 2022 05:24:31 GMT

Routing이란?

Express Guide - Routing

요청과 요청된 경로를 가져와서 응답을 갖는 어떠한 코드에 맞추는 것을 말한다. 예를 들어 경로가 /about이라면 그 경로에 맞는 응답할 콘텐츠를 출력한다.

app.get()

Express Docs - app.get()

Routing을 사용하기 위해 get() 메서드를 사용하는데 get() 메서드의 설명이다.

Routes HTTP GET requests to the specified path with the specified callback functions.
지정된 콜백 함수를 사용하여 HTTP GET 요청을 지정된 경로로 라우팅합니다.

아래의 코드처럼 작성할 경우 설정한 경로로 HTTP GET 요청을 라우팅하여 실행된 콜백 함수로 인해 응답을 출력한다.

라우팅을 설정할 때 아무것도 작성하지 않는 /는 "루트 라우트"라고 불린다.

// 들어오는 요청을 나가는 응답에 라우팅하는 것

app.get("/", (req, res)=>{
    res.send("HOME ROUTING")
})

app.get("/about", (req, res)=>{
    res.send("ABOUT ROUTING")
})

app.get("/portfolio", (req, res)=>{
    res.send("PORTFOLIO ROUTING")
})

res 객체의 send() 메서드로 h1태그를 인자로 한 결과 localhost:3000/about에는 아래와 같이 h1태그가 출력되어있는 것을 볼 수 있다.

⚠️ 라우팅되지 않은 경로가 입력되었을 때

라우팅되지 않은 경로가 입력되었을 때 "Cannot get /"과 같은 텍스트를 볼 수 있다. 이것을 라우팅되지 않는 경로가 입력되면 다른 텍스트로 변경할 수 있는데 경로에 *을 사용하면 설정할 수 있다.

app.get("*", (req, res)=>{
    res.send("I DON'T KNOW THAT PATH...")
})

입력한 /hello 경로는 라우팅되지 않았기 때문에 위에서 설정한 h1태그가 출력되었다.

여기서 중요한 점은 *을 사용한 라우팅을 다른 라우팅들의 위로 올리면 모든 경로를 입력해도 가장 첫번째에 있는 * 라우팅이 항상 맞기 때문에 다음 코드로 넘어가지 않는다.

// *를 가장 위로 보내면... 아래와 같은 상황이 발생한다.
app.get("*", (req, res) => {
  res.send("I DON'T KNOW THAT PATH...");
});

app.get("/", (req, res) => {
  res.send("HOME ROUTING");
});

app.get("/about", (req, res) => {
  res.send("ABOUT ROUTING");
});

app.get("/portfolio", (req, res) => {
  res.send("PORTFOLIO ROUTING");
});

app.post()

Express Docs - app.post()

이제 post() 메서드를 사용해보자. 공식 Docs의 설명이다.

Routes HTTP POST requests to the specified path with the specified callback functions
지정된 콜백 함수를 사용하여 HTTP POST 요청을 지정된 경로로 라우팅합니다.

이전에 생성했던 라우팅인 /about에 post() 메서드를 사용해보자.

app.post("/about", (req, res) => {
    res.send("ABOUT POST REQUEST")
})

화면에는 그대로 h1태그인 "ABOUT ROUTING"이 되어있다. "/about" 경로로 브라우저는 기본적으로 GET 메서드로 응답을 받기 때문이다.

get() 메서드가 아닌 post() 메서드를 보려면 포스트맨을 사용해서 보면 된다. HTTP 메서드를 POST로 변경하고 /about 경로로 라우팅을 하면 설정했던 h1태그가 출력된다.

[Express] 1도 모르는 Express - Express 기초와 req, res 객체

Mon, 05 Dec 2022 05:23:01 GMT

Express 설치

npm init 후 package.json 파일이 생성된 상태에서 npm install express 명령어를 실행해서 express를 설치한다.

## 신버전 npm
npm install express

## 구버전 npm
npm install express --save

Express 사용하기

새로 js파일을 생성하고 express를 사용하기 위해 require로 불러온다.

const express = require("express");

그 후에 express를 실행한다.

const app = express();

Express로 요청 받기

listen()을 사용하여 요청을 받을 포트를 설정하고 요청을 받으면 실행할 콜백 함수를 작성한다.

// app.listen(port, callback)
const express = require("express");
const app = express();
const port = 3000;

app.listen(port, () => {
  console.log(`Listening on port ${port}.`);
})

실행하면 정상적으로 터미널에 방금 입력한 로그가 출력된다.

현재 요청이 내 컴퓨터의 로컬 서버로만 동작한다. 그래서 나는 포트를 3000번으로 설정을 했기 때문에 로컬 기기인 localhost:3000로 이동해야한다.

localhost:3000으로 이동하면 아래의 화면이 보일텐데 이것은 '서버는 있지만 응답을 못 받았다'라는 의미이다.

개발자 도구의 네트워크 탭에도 localhost가 상태 코드 404(Not found)가 떠있는 것을 볼 수 있다. 'Cannot GET /'과 동일하게 '실행할 서버는 있지만 응답할 콘텐츠가 없는 상태'를 의미한다.

app.use로 요청 받을 시 콜백 함수 실행하기

Express API 어디에서 오든지, get이든 post든 상관없이 요청이 오면 콜백을 실행하는 메서드이다.

어떠한 요청이 들어오면 아래의 로그가 출력이 된다.

app.use(()=>{
    console.log("app.use() Run!")
})

여기서 들어오는 모든 요청은 콜백 함수에서 자동으로 전달되는 두 개의 매개변수에 액세스한다. 하나는 하나는 요청을 의미하는 req 객체, 또 다른 하나는 응답을 의미하는 res 객체이다.

app.use((req, res)=>{
    console.log("app.use() Run!")
})

req 객체는 Express로 만들어져서 콜백 함수에 첫번째 인자로 전달이 된다. HTTP 요청은 JavaScript의 객체가 아닌 텍스트 정보이기 때문에 Express는 HTTP 요청 정보를 파싱해서 전달할 JavaScript 객체 데이터로 변환한다.

res 객체는 응답 객체로 요청을 한 누군가에게 보내질 응답을 생성하는데 사용된다.

req와 res 객체는 많은 메서드를 사용할 수 있는데 res의 send()를 살펴보면 인자로는 Buffer object, String, object, Boolean, Array가 가능하다고 한다.

Buffer Object란? Node.js 에서 제공하는 Binary data를 담을 수 있는 Object이다. Binary data란 0과 1로 표현되는 데이터를 의미한다.

인자가 String일 때

아래처럼 String을 인자로 넣으면 요청을 받았을 때 app.use()의 콜백 함수가 실행이 되면서 res.send() 메서드가 실행이 된다.

app.use((req, res) => {
  console.log("app.use() Run!");
  res.send("HELLO WORLD!");
});

res.send("HELLO WORLD!")가 실행되면 아래처럼 화면에 text태그로 문자열을 담아 출력한 것을 볼 수 있다. 그리고 자동으로 콘텐츠 타입이 text/html로 설정된 것을 알 수 있다.

text/html로 변경되었다는 것은 즉, HTML 태그를 넣어도 적용이 된다는 의미이기도 하다.

res.send("THIS IS HTML TAG.
")

인자가 Object일 때

res.send({color: "red"})로 객체인 인자를 설정했을 때 콘텐츠 타입이 application/json으로 변경되었다.

[npm] Bcrypt를 사용하여 비밀번호 암호화하기

Fri, 02 Dec 2022 06:15:41 GMT

DB에 사용자가 입력한 정보를 아래와 같이 POST했었다.

{
    "name": "email1234",
    "email": "email1234@naver.com",
    "password": "1234567"
}

근데 저장된 DB를 보면 아래처럼 저장되어 있다.

누가봐도 보안에 매우 취약해보인다. 특히 password는 관리자조차도 알 수 없게 해야하는데 사용자가 입력한 그대로 입력되어있다.

그래서 password를 관리자도 password가 무엇인지 읽을 수 없게 변환해야한다. 이때 유용한 것이 'Bcrypt'이다.

Bcrypt 설치

우선 아래 명령어를 실행하여 'Bcrypt'를 설치한다.

npm i bcrypt --save

Bcrypt 사용

MongoDB의 Schema를 설정한 User.js로 가서 bcrypt를 require한다.

const bcrypt = require('bcrypt');

우선 npm 홈페이지의 Bcrypt 사용법은 아래처럼 작성되어 있다.

나는 salt와 hash를 자동으로 생성하지 않기 때문에 salt를 우선 생성하고 생성된 salt로 password를 암호화 하는 Technique 1로 진행했다.

bcrypt.genSalt(saltRounds, function(err, salt) {
    bcrypt.hash(myPlaintextPassword, salt, function(err, hash){
        // Store hash in your password DB.
    });
})

여기서 genSalt()는 bcrypt가 password를 암호화하기 위해 필요한 'salt'라는 것을 생성할 때 사용하는 메서드이다. 인자로는 saltRound와 err의 정보와 salt를 담은 콜백함수이다.

genSalt()의 첫번째 인자인saltRounds는 기존에 salting된 password를 몇 번 더 salting을 해서 해시를 도출할 것인가를 결정하는 인자라고 생각하면 된다.

여기서 사용되는 salt란 명칭은 음식에 소금을 치면 사방으로 흩어지듯이 설정한 password에 난수를 무작위로 추가하는 역할을 한다. 이 salt라는 것이 설정한 password를 복잡하게 변경시키는 것이다.

그래서 saltRound를 설정하고 다음으로 넘어간다.

// saltRounds를 10번 실행한다.
const saltRounds = 10;

그리고 salt를 생성하기 전에 작성했던 register 라우터를 보면 순서를 잘 생각해야한다.

app.post("/register", (req, res) => {
  const user = new User(req.body);

  // 암호화 실행 후...

  // DB에 데이터 저장
  user.save((err, userInfo) => {
    if (err) return res.json({ success: false, err });
    return res.status(200).json({
      success: true,
    });
  });
});

여기서 user.save()는 사용자가 입력한 데이터가 DB에 저장되는 것을 말하는데 이 메서드가 실행되기 전에 암호화가 진행되어야하는게 순서상 가장 맞다. 그러므로 salt를 생성하는 genSalt 부분을 pre() 메서드를 사용해서 감싸서 진행한다. pre()는 mongoose에서 온 메서드이다.

userSchema.pre("save", function (next) {
    const user = this;

    bcrypt.genSalt(saltRounds, function(err, salt) {
        bcrypt.hash(myPlaintextPassword, salt, function(err, hash){
            // Store hash in your password DB.
        });
    })
  next();
});

pre() 메서드를 사용해서 User모델(schema)에 사용자 정보를 save하기 전에 두번째 인자인 콜백함수를 실행한다.

콜백함수의 파라미터인 next는 pre() 함수가 끝이나면 실행하는 함수로 index.js의 user.save로 결과를 전송한다.

이제 pre() 메서드로 감싼 후 내부 함수를 작성한다.

bcrypt.genSalt(saltRounds, function(err, salt) {
      // salt 생성 시 에러가 발생할 경우 user.save에 err 정보를 전송하고 아니면 다음 단계로 넘어간다.
    if(err) return next(err);
      // 
    bcrypt.hash(user.password, salt, function(err, hash){
        if (err) return next(err);
        user.password = hash;
        next();
    });
})

hash() 메서드는 입력받은 password를 salting하여 암호화된 hash로 생성한다. 이 hash를 생성하는 도중 에러가 발생하면 에러를 user.save으로 전송하고 아니라면 현재 model에 저장된 password에 hash를 오버라이드해주고 다음 단계인 user.save 부분으로 DB에 저장한다.

결과

그럼 아래의 데이터를 입력했을 때 데이터의 결과는 어떤지 보자.

{
    "name": "test1",
    "email": "test1@naver.com",
    "password": "1234567"
}

"1234567"으로 설정했던 password가 암호화되어 복잡한 문자열로 변한 것을 볼 수 있다.

느낀점

요즘 공부를 하면서 가장 느끼는 점이 '공식 문서'의 중요성이다. 강의를 그냥 들으면서 공부하거나 혼자 공부하면서 모르는 부분을 공식 문서를 이해하지 못하더라도 보기라도 하면 에러가 발생했을 때 어느 정도의 예측이 가능한 것 같은 느낌이 든다. 앞으로 공식문서를 참고하면서 공부를 해나가야겠다.

출처 : bbanderson님 티스토리 블로그 Bcrypt API Mongoose Docs

[MongoDB] bad auth : Authentication failed

Fri, 02 Dec 2022 02:23:11 GMT

오늘도 강의를 따라하다 에러를 마주쳤다.

발생 상황

Github에 commit할 경우 mongoose와 연결할 때 사용하는 URI가 아이디와 패스워드를 담고 있어 보안이 취약하다. 그래서 비밀 정보를 보호하기 위해 개발 로컬 환경과 배포 환경마다 해당되는 부분을 따로 받을 수 있게 설정하기 위해 파일을 분기하는 과정에서 발생했다.

그 과정에서 발생한 에러가 아래의 에러이다.

MongoServerError: bad auth : Authentication failed.

라는 에러인데 "몽고DB 서버 에러 : 잘못된 인증 : 인증에 실패했다."라는 것이다.

음.. 개인적으로 경고 메세지가 너무 포괄적이고 강사님과 나의 환경(node와 mongoDB의 버전 차이)이 다르기 때문에 걱정부터 했지만 일단 침착하게 구글링했다 ㅎㅎㅎ..

I think you're confused with the mongodb account password and user password. You should use user password, not account password. That was the reason of my case. 출처 : stackoverflow

stackoverflow에서 다른 분이 올린 질문에 이와 같은 답변이 채택되어 있었다. mongoDB의 계정 비밀번호와 사용자 비밀번호를 혼동한게 아니냐라는 것이다. 하지만 나는 mongoDB 계정 비밀번호와 사용자 비밀번호를 혼동하지 않았지만 우선 '계정 문제'이겠구나 하며 코드에서 수정했던 부분을 되짚어봤다.

우선 분기한 파일은 아래와 같다.

index.js에서 연결한 username과 password가 연결할 URI에 노출되어 있었다.

// index.js
const express = require("express");
const app = express();
const port = 3000;
const bodyParser = require("body-parser");

const { User } = require("./models/User");


app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

// 아래처럼 username과 password가 노출되어있었다.
const username = encodeURIComponent();
const password = encodeURIComponent();

const mongoose = require("mongoose");

// 노출된 username과 password을 사용한다.
mongoose  .connect(`mongodb+srv://${username}:${password}@cluster0.3rt3shc.mongodb.net/?retryWrites=true&w=majority`,)
  .then(() => console.log("MongoDB connected"))
  .catch((err) => console.log(err));

app.get("/", (req, res) => {
  res.send("Hello Word! 안녕하세요~ 저는 신현우입니다.");
});

app.post("/register", (req, res) => {
  const user = new User(req.body);
  user.save((err, userInfo) => {
    if (err) return res.json({ success: false, err });
    return res.status(200).json({
      success: true,
    });
  });
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

그래서 이것을 개발/배포 환경에 따라 다르게 위해 파일을 아래처럼 분기하였다.

// dev.js - 개발 환경에서 사용할 URI
module.exports = {
  mongoURI: `mongodb+srv://${username}:${password}@cluster0.3rt3shc.mongodb.net/?retryWrites=true&w=majority`,
};

// prod.js - 배포 한 후 환경에서 사용할 URI
module.exports = {
  mongoURI: process.env.MONGO_URL,
};

// key.js - production 환경인지 아닌지에 따라 모듈을 export하여 해당 모듈을 사용한다. 
if (process.env.NODE_ENV === "production") {
  module.exports = require("./prod");
} else {
  module.exports = require("./dev");
}

그리고 조건을 만족하는 export된 모듈을 사용해서 index.js에 URI를 적용시킨다.

const express = require("express");
const app = express();
const port = 3000;
const bodyParser = require("body-parser");
// 상수 config에 export된 모듈을 담아서 사용한다. 이 모듈을 mongoURI가 property로 존재하는 객체이다.
const config = require("./config/key");
const { User } = require("./models/User");

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

const username = encodeURIComponent();
const password = encodeURIComponent();

const mongoose = require("mongoose");
// 여기서 config가 사용된다.
mongoose
  .connect(config.mongoURI)
  .then(() => console.log("MongoDB connected"))
  .catch((err) => console.log(err));

app.get("/", (req, res) => {
  res.send("Hello Word! 안녕하세요~ 저는 신현우입니다.");
});

app.post("/register", (req, res) => {
  const user = new User(req.body);
  user.save((err, userInfo) => {
    if (err) return res.json({ success: false, err });
    return res.status(200).json({
      success: true,
    });
  });
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

이렇게 했을 때 아래의 에러가 발생한 것..!

문제 해결

우선 username과 password를 우선적으로 살펴보았다. 여기서 아.. 내가 dev.js에 username과 password값을 옮겨주지 않았구나.. 에러가 발생한 이유가 username과 password가 정의되지 않았기 때문에 인증에 실패했구나..😓

그래서 아래처럼 username과 password를 dev.js로 옮겨주었더니 정상적으로 동작했다.

const express = require("express");
const app = express();
const port = 3000;
const bodyParser = require("body-parser");

const config = require("./config/key");
const { User } = require("./models/User");

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

// username / password 상수 dev.js로 옮김

const mongoose = require("mongoose");
mongoose
  .connect(config.mongoURI)
  .then(() => console.log("MongoDB connected"))
  .catch((err) => console.log(err));

app.get("/", (req, res) => {
  res.send("Hello Word! 안녕하세요~ 저는 신현우입니다.");
});

app.post("/register", (req, res) => {
  const user = new User(req.body);
  user.save((err, userInfo) => {
    if (err) return res.json({ success: false, err });
    return res.status(200).json({
      success: true,
    });
  });
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

const username = encodeURIComponent();
const password = encodeURIComponent();

module.exports = {
  mongoURI: `mongodb+srv://${username}:${password}@cluster0.3rt3shc.mongodb.net/?retryWrites=true&w=majority`,
};

에러가 나면 덜컥 겁먹곤 했는데 별거 아니였다..ㅎㅎㅎ 코드를 꼼꼼히 보는 것도 중요하지만 모를 땐 역시 구글링이 최고..👍

[MongoDB] Model과 Schema가 뭐죠..? 🤔

Thu, 01 Dec 2022 13:07:56 GMT

John ahn님의 강의를 보고 node를 처음 배우기도 하고 mongoDB나 mongoos의 기초도 모르기 때문에 어느정도 스스로 이해해보고자 게시물을 쓴다.

강의에서 Mongoose의 model과 schema를 다루는데 model이란 schema가 무엇인지 몰라서 강의가 조금 어렵게 느껴졌다. 그래서 역시 구글링을 통해 해결해보고자 한다.

Model

강의에서는 model은 'schema'를 감싸기 위한 역할을 하는 것이라고 한다. 강의 자료에서는 '레코드 생성, 쿼리, 업데이트, 삭제 등을 위한 데이터베이스에 대한 인터페이스를 제공한다'고 한다.

Schema

강의 자료를 보면 'Schema는 문서의 구조, 기본값, 유효성 검사 등을 정의한다'고 한다. 또한 John ahn님의 예시로 상품에 관련된 글을 작성한다고 가정하면 글을 작성한 사람이 누구인지, 작성한 게시글의 제목은 무엇인지, 설명은 무엇인지에 대한 값의 타입이나 제한(유효성 검사) 같은 것을 지정을 해주는 것이 Schema라고 한다. 조금 더 알아보고 싶어서 공식문서와 여러 게시물을 구글링해서 개념을 정리해보았다.

A schema is a JSON object that defines the the structure and contents of your data. ... Schemas represent types of data rather than specific values. App Services supports many built-in schema types. These include primitives, like strings and numbers, as well as structural types, like objects and arrays, which you can combine to create schemas that represent custom object types.

출처 : MongoDB Documentation

공식문서에서는 데이터의 구조와 콘텐츠(내용)을 정의하는 JSON 객체라고 설명한다. Schema는 특정한 값이 아닌 데이터 타입을 나타내고, 문자열, 숫자열 같은 원시 타입의 자료형과 객체, 배열과 같은 구조적 유형(Structural types)가 포함이 되고, 이것들을 결합하여 사용자 정의 객체 유형을 나타내는 Schema를 생성할 수 있다.

Zerocho님의 블로그에서는 아래처럼 설명하고 있다.

Mongoose의 Schema는 사용자가 작성한 스키마를 기준으로 데이터를 DB에 넣기 전에 먼저 검사한다. 그리고 작성한 스키마에 어긋나는 데이터가 있다면 에러를 발생시킨다. 또한 스키마를 설정할 때 인덱스까지 설정할 수 있고 기본값 또한 설정할 수도 있다.

즉, 데이터 구조에 대한 편의 기능들을 하나로 모아두었다고 생각하면 된다.

강의에서 Schema는 위의 코드처럼 만든다.

const mongoose = require("mongoose");

const userSchema = mongoose.Schema({
  name: {
    type: String,
    maxlength: 50,
  },
  email: {
    type: String,
    trim: true,
    unique: 1,
  },
  password: {
    type: String,
    minlength: 5,
  },
  lastname: {
    type: String,
    maxlength: 50,
  },
  role: {
    type: Number,
    default: 0,
  },
  image: String,
  token: {
    type: String,
  },
  tokenExp: {
    type: Number,
  },
});

코드 내에서 객체 안의 속성명(property)이 필드의 이름이 된다.

이 코드를 풀어서 보자면, email의 자료형은 String이고 유일해야하고, 데이터의 공백을 없앤다. password의 자료형은 String이고 최소 5글자여야한다. role의 자료형은 Number이고 기본값으로 0을 지정한다. (role의 자료형이 Number인 이유는 1일때 관리자, 0일때 일반 유저로 하기 위함이다.) 만약 필수 값을 원한다면 require 속성명을 추가해서 boolean값을 받아주면 true일 때 해당 필드의 데이터가 반드시 존재해야한다고 설정할 수 있다.

Schema를 정리하자면 데이터의 구조와 내용을 정의하는 JSON 객체이며, 데이터 구조에 대한 편의 기능을 모아둔 Mongoose의 기능이라고 생각하면 될 것 같다.

Schema 등록

작성한 Schema를 등록하려면 model() 함수를 호출해서 인자로 사용하면 된다.

const User = mongoose.model("User", userSchema);

model()의 첫번째 인자는 '컬렉션의 이름'이며, 컬렉션에 이름에 대문자가 있다면 강제로 소문자로 변환 후 등록이 된다고 한다. 두번째 인자로 작성했던 schema를 넣으면 User라는 모델에 작성한 userSchema를 적용시키는 거라고 생각하면 되는거 같다. 만약 컬렉션 이름이 강제로 변환되는 것이 맘에 들지 않으면 세번째 인자로 문자열을 넣어 설정하면 된다.

const User = mongoose.model("User", userSchema, "myfreename");

[MongoDB] MongoDB Mongoose에 연결하면서 발생한 에러

Thu, 01 Dec 2022 10:49:34 GMT

John-Ahn님 강의인 '따라하며 배우는 노드, 리액트 시리즈 - 기본 강의'를 들으면서 발생했던 에러이다.

파일에 아래의 코드처럼 작성하였다.

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

const mongoose = require("mongoose");
mongoose
  .connect(
    "mongodb+srv://:@cluster0.3rt3shc.mongodb.net/?retryWrites=true&w=majority",
    {
      useNewUrlParser: true,
      useUnifiedTopology: true,
      useCreateIndex: true,
      useFindAndModify: false,
    }
  )
  .then(() => console.log("MongoDB connected"))
  .catch((err) => console.log(err));

app.get("/", (req, res) => {
  res.send("Hello World! 안녕하세요!");
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

발생상황

몽고DB 세팅을 마치고 mongoose에 연결하기 위해 위의 코드를 작성했으나 아래의 에러 발생

MongoParseError: options usecreateindex, usefindandmodify are not supported

에러문을 보면 options인 usecreateindex, usefindandmodify는 지원하지 않는다라는 에러!

문제 해결

어떻게 해결하면 되는지 찾아보니 이런 문제를 겪은 사람이 꽤 있었다보다.

useNewUrlParser, useUnifiedTopology, useFindAndModify, and useCreateIndex are no longer supported options. Mongoose 6 always behaves as if useNewUrlParser, useUnifiedTopology, and useCreateIndex are true, and useFindAndModify is false. Please remove these options from your code. 출처 : stackoverflow

Mongoose 버전이 6.0 이상이면 useNewUrlParser, useUnifiedTopology, useFindAndModify 및 useCreateIndex는 더 이상 지원되지 않는 옵션이기 때문에 제거하라는 해결방법이다.

왜냐하면 Mongoose 버전 6.0 이상부터는 기본적으로 useNewUrlParser, useUnifiedTopology, useFindAndModify가 true, useCreateIndex가 false로 동작하기 때문이다.

현재 내가 설치한 Mongoose는 6.7.5 버전이기 때문에 위의 코드를 제거하면 이 에러를 해결할 수 있다.

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

const mongoose = require("mongoose");
mongoose
  .connect(
    "mongodb+srv://username:@cluster0.3rt3shc.mongodb.net/?retryWrites=true&w=majority"
  )
  .then(() => console.log("MongoDB connected"))
  .catch((err) => console.log(err));

app.get("/", (req, res) => {
  res.send("Hello World! 안녕하세요!");
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

도움받은 링크 : lee951109님 Velog게시글

+ 이어서 발생한 문제...

발생 상황

Mongoose에 연결하기 위해 몽고DB의 URI를 했지만 에러가 지속적으로 발생했다... 몽고DB URI에 password에 특수문자를 이용해서 인코딩이 되면서 발생한 문제이다.

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

const mongoose = require("mongoose");
// password 부분에 특수문자인 '@'를 이용해서 발생했다.
mongoose
  .connect(
    "mongodb+srv://username:@cluster0.3rt3shc.mongodb.net/?retryWrites=true&w=majority"
  )
  .then(() => console.log("MongoDB connected"))
  .catch((err) => console.log(err));

app.get("/", (req, res) => {
  res.send("Hello World! 안녕하세요!");
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

MongoParseError: URI does not have hostname, domain name and tld

URL에 hostname과 domain name과 tld가 없다라는 의미인데... 아직 아무것도 모르고 따라쳐보는 수준이기 때문에 또 구글링..!

문제 해결

Solution-1: If you are using any special character in your password you need to encode the particular character as %+ASCII_code_of_the_character below link explains everything. 공식 홈페이지 참고 링크

Solution-2: Click on auto-generate password and paste it into the connection string, it will work. 출처 : stackoverflow

첫번째 해결 방안

만약 password에 특수문자를 사용하는 경우 특수문자를 인코딩이 필요하다. 공식 홈페이지 링크를 참고하여 수정하는 방법이다.

위에서 username과 password를 인코딩하기위해 encodeURIComponent 함수를 사용하여 인코딩해준 후 몽고DB URI에 백틱을 이용한 '템플릿 리터럴'을 사용하여 작성해주도록 하자!

const username = encodeURIComponent("")
const password = encodeURIComponent("")

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

// 특수문자가 있다면 encodeURIComponent 함수로 인코딩 후..
const username = encodeURIComponent("")
const password = encodeURIComponent("")

const mongoose = require("mongoose");

// 템플릿 리터럴로 값을 문자열에 넣는다.
mongoose
  .connect(
    `mongodb+srv://${username}:${password}@cluster0.3rt3shc.mongodb.net/?retryWrites=true&w=majority`
  )
  .then(() => console.log("MongoDB connected"))
  .catch((err) => console.log(err));

app.get("/", (req, res) => {
  res.send("Hello World! 안녕하세요!");
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

성공적으로 URI 연결하는 부분의 then 메서드에 작성한 'MongoDB connected' 로그가 출력이 되었다! 👍

두번째 해결 방안

첫번째 해결방안으로 해결했다고 안해보면 손해!

두번째 방법은 몽고DB에서 비밀번호를 직접 수정하거나 자동으로 생성하면 된다.

아래의 SECURITY 탭에서 Database Access로 접속하고,

Database Users 탭의 User 리스트에서 EDIT 버튼을 클릭하면

새로운 창이 뜨면서 Password Authentication 메뉴에 Edit Password 탭을 눌려서 password를 특수문자 없이 수정하면 된다.

만약 다시 생성하는 것이 번거롭다면 아래의 Autogenerate Secure Password 버튼을 눌려 자동 생성해주고 password를 기억해두면 된다.

도움받은 링크 : stackoverflow

[JS] Prototype과 Prototype chain 👬🏼

Sun, 29 May 2022 17:50:28 GMT

지금은 자바스크립트의 마지막 알고리즘과 자료구조에 대해 배우고 있지만, 내가 이해가 안되는 부분이 많아서 가장 주춤했던 부분이 Prototype이 다가왔을 때 부터 인 것 같다.

그래서 시간이 있을 때 꼭 Prototype을 조금이라도 이해하도록 해보자라는 마인드로 오늘 정리를 한다.

현재 참여하는 강의에서도 다루었지만 강의 자료를 바탕으로 여러 가지 정보를 참고했는데 아래에 작성했다.

생활코딩 Prototype/Prototype Chain
Modern Javascript Deep Dive 19장. 프로토타입
인프런 "코어 자바스크립트"
NomadCoder 객체지향 프로그래밍 영상

그리고 너무 깊게 다룬다면 끝도 없기 때문에 현재로선 이해할 수 있는 "Prototype"의 개념과 "Prototype Chain"에 대해서 스스로 정리해보고자 한다.

Prototype이란?

영어인 "Prototype"을 해석하면 어떤 말인가?

"원형"이라는 뜻이다. 여기서 원형은 "객체의 원형"을 의미한다.

자바스크립트를 이루고 있는 것은 원시 타입인 number, string 등을 제외한 거의 모든 것이 객체이다.

여기서 객체는 우리가 알고 있듯이 아래처럼 key와 value의 쌍으로 이루어진 Property를 가질 수 있다.

위의 객체 obj를 console.dir()을 통해 출력해보면 아래와 같은 결과가 나온다.

우리가 설정했던 프로퍼티인 name과 age가 보이고, 아래에 우리가 설정하지도 않은 프로퍼티가 여러 개도 함께 출력이 된다.

여기서 우리는 Prototype이라는 단어를 처음 볼 수 있게 된 것이다.

본론으로 들어가자면 Prototype이라는 프로퍼티 내의 속성들은 "생성자"를 통해서 객체가 만들어질 때 그 객체에 연결된다.

아래를 보도록 하자. 우리는 객체인 변수 obj를 생성했는데 "객체 리터럴" 방식으로 선언을 했다. 하지만 "객체 리터럴" 방식으로 선언한 것은 사실 "생성자 함수"를 통해 생성된 것이라 볼 수 있다.

그래서 위와 똑같이 console.dir()로 출력했을 때 생성자 함수를 뜻하는 Prototpye의 프로퍼티인 constructor는 함수인 function Object(name, age)를 가리키게 된다.

여기서 Prototype을 이해하려면 생성자 함수를 이해해야 할 것 같다.

생성자 함수

생성자는 "함수"인데 앞에 new 키워드가 붙어서 새로운 객체인 instance를 생성한 후 반환하는 "생성자 함수"가 된다. 위에서 new Object()처럼 말이다.

그런데 우리는 누가봐도 생성자 함수를 통한 객체의 생성은 매우 불편해보인다. 그냥 객체 리터럴을 통해 var obj = { name:"hyunwoo", age:30}처럼 적으면 훨씬 간단하게 객체를 생성할 수 있는데 말이다.

이 부분에서는 "객체지향 프로그래밍(OOP)"가 대답이 될 수 있겠다.

만약 우리가 게임에서 캐릭터를 만든다면 어떻게 만들 수 있을까?

위처럼 유저 하나 하나의 name, hp, mp, skill 등의 프로퍼티를 생성해줘야한다는 번거로움이 있다. 일일이 생성해야한다면 그만큼 시간과 같이 리소스의 소모도 크고, 실수의 가능성도 커진다.

그래서 위의 예제를 보면 데이터의 xp : 0라는 key와 value가 동일하게 반복되는 것을 볼 수 있다. 이것을 하나의 설계도를 두고 데이터 값만 따로 작성을 한다면 어떨까?

아래의 예제는 아직은 정리를 하지 않은 클래스(Class)를 사용한다. 간단히 말하자면 클래스는 하나의 객체를 만드는 "설계도"이며 "템플릿" 같은 개념이다.

다음 게시글로 클래스를 이해하고 정리해보도록 하겠다. 😄

위처럼 작성 시 이전 예제와 같은 값이 출력이 된다. 훨씬 가독성이 쉬워지고 값을 넣기에도 편리해지고 재사용성이 높아진 것을 볼 수 있다.

이것과 똑같이 Prototype을 통해서 코드의 재사용성을 높일 수 있다.

위처럼 생성자함수의 Prototype를 통해 프로퍼티 xp를 생성했다. 그리고 user1을 console.log()로 확인을 했을 때 아래처럼 출력이 된다.

근데 우리가 생성한 프로퍼티 xp는 보이지 않는데 어디에 있는 것일까?

xp는 바로 Prototype 안에 존재한다.

그래서 만약 xp의 값을 필요할 때 객체 내에 출력되는 프로퍼티는 아니지만 문제없이 접근이 가능하다.

Prototype을 쉽게 생각하자면 조상으로부터 물려받은 "유전자"라고 할 수 있다.

조상 중 운동선수가 있을 때 내가 운동에 대한 재능을 가지고 있다는 것은 모르지만 운동종목에서 나도 모르게 능력을 발휘할 수 있는 그런 개념으로 이해하면 될 것 같다. 😅

여기서 물려받는 개념을 Prototype Chain이라고 할 수 있을 것 같다!

Prototype Chain

나는 강의를 들으면서 "체이닝"이라는 말을 많이 들었다. 체인은 내가 생각하는 🔗 사슬을 말하는 것이니 연결된다는 뜻으로 이해했었는데 체이닝 개념이 정확히 일치한다.

"연쇄적으로 이어지는 동작 방식"이라고 생각을 하면 될 것 같다.

실용적인 예제는 아니지만 개념을 이해를 위해 생활코딩에서 가져온 예제를 살펴보도록 하자.

console.log(o.ultraProp)을 출력하면 어떤 값이 나올까?

나는 처음에 변수 o는 생성자 함수 new Sub()를 통해 생성된 인스턴스이고 function Sub(){}를 보아하니 아무런 프로퍼티를 생성하지 않았으니까 undefined가 나오지 않을까? 라고 생각했다.

하지만 나오는 값은 true가 나온다.

코드를 하니씩 설명을 하자면 이렇다.

보면 "이게 무슨 코드지?"라는 생각을 가질 수 있다. 솔직히 나도 처음 봤을 때 이걸 어떻게 해석해야하는 건지 몰랐다.

근데 보면 공통적인 부분이 많다. 각 인스턴스인 prototype은 각각의 생성자 함수로 순차적으로 생성되고 있는 것을 볼 수 있다.

여기서 Prototype은 "유전자"라고 했다.

보이지는 않지만 현재 생성자 함수 Ultra가 가진 protoype.ultraProp는 아래의 생성자 함수에 영향을 주고 있다. 각각 생성된 인스턴스들을 console.log()를 통해 살펴보도록 하자.

점차 내려가면서 Prototype가 늘어나면서 ultraProp가 존재하는 것을 볼 수 있다. 이것은 Prototype의 상속때문인데 그림으로 쉽게 표현해겠다.

Ultra에서 Prototype을 통해 생성한 ultraProp = true는 내가 설명한 "유전자화"가 되었다.

그래서 상위 객체(인스턴스)인 Ultra로부터 Super가 ultraProp = true를 물려받게 되고

아래의 인스턴스 또한 모두 상속을 받게 된다.

그래서 당사자는 모르지만 가지고 있는 프로퍼티에 접근할 수 있는 것이다.

접근을 통해 나온 결과를 Prototype Chain에 의해 이루어졌다라고 할 수 있을 것 같다.

Prototype을 통해 데이터에 접근할 때 어떤 과정이 일어나는가?

현재 코드를 다시 보자면 ultraProp를 생성한 곳은 Ultra이다. 하지만 변수 o에서 ultraProp에 접근을 했을 때 true가 반환이 되었다.

과정이 어떻게 된 것인지 보도록 하자.

이런 식으로 자신에게서 찾다가 찾지 못하면 상위 객체로 올라가면서 찾아서 결과를 반환하는 것이 Prototype Chain이다.

그리고 중요한 점은 상위 객체로 순차적으로 올라가면서 검색을 했을 때 먼저 나오는 값을 출력한다는 것이다.

정리를 마치며 ⛳️

오늘은 진짜 공부한 느낌이 들어서 뿌듯한 것 같다.

내가 몰랐던 부분을 깨닫고 이것을 공부해야지라고 계획을 했는데 열심히 준비를 하면서 정리를 하고 나니 더욱 그런 것 같다.

물론 위에 있는 정보를 여러 곳에서 참고를 했고 나의 이해를 바탕으로 작성이 되었기 때문에 잘못된 부분도 있을 것이라고 생각한다.

그래서 다른 분들께 확인을 받고 수정을 해볼 예정이다.

오랜만에 나의 공부한 기록을 적는데 재미있었다. 다음은 클래스를 정리를 할 건데 기대가 된다. 😄

[JS] Array의 핵심 메서드, forEach/filter/map ⭐️

Sat, 28 May 2022 07:20:39 GMT

오늘은 배열의 메서드 중 가장 핵심적으로 자주 사용하게 될 메서드 3개인

forEach, filter, map을 다룰 것이다.

강사님께서도 가장 많이 사용하는 메서드니 다른 메서드는 검색해서 사용하더라도 이 메서드들은 꼭 알아두라고 당부하셨다.

이 게시물도 마찬가지로 원본 배열에 영향이 간다면 🔄 표시를 할 것이다.

Array.prototype.forEach()

Array.prototype.forEach()는 주어진 함수(콜백 함수)를 각 요소에 대해 실행하는 메서드이다.

arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])

매개변수로는 각 요소에 실행될 callback와 이 callback 함수에 들어갈 수 있는 매개변수 currentvalue과 생략이 가능한 index, array가 있고 thisArg가 있다.

callback : 각 요소에 실행될 callback을 의미하는 매개변수이다.
- currentvalue : 각 요소를 하나의 매개변수로 가리키는 매개변수이다.
- index : 각 요소의 index의 정보를 가지는 매개변수이다.
- array : forEach 메서드를 호출하는 배열을 가리키는 변수이다. 자주 사용하지 않는다.

❓ 콜백 함수의 매개변수는 매개변수 명을 변경할 수 있다.

각각의 요소마다 console.log()가 적용이 되었고, 메서드를 호출한 array를 출력하고 있는 것을 볼 수 있다.

forEach()는 중요한 점이 원본 배열을 변형하지 않고 메서드가 항상 반환하는 값이 undefined 이다. 그래서 메서드를 체이닝해서 사용할 수 없다.

매개변수 array를 사용하면 원본 배열 변형 가능하다. 🔄

메서드가 자체가 직접적으로 원본 배열을 변형하지 않지만 콜백함수의 매개변수인 array를 통해 변경할 원본 배열을 변형할 수 있다.

array를 사용해서 원본 배열이 변형할 것을 알 수 있다.

for문을 forEach()로 변환하기 ⭐️

forEach는 각 요소마다 함수를 실행하는 메서드이다. 이것은 요소를 반복하여 연산하는 for문과 비슷하다. 그렇기 때문에 for문을 forEach()로 변환이 가능하다.

우선 for문의 예제를 만들어보도록 하자. 아래의 for문은 각 요소를 변수 i를 통해 실행문을 반복한다.

이것을 forEach()로 변환하면 아래처럼 작성할 수 있다.

Array.prototype.filter()

Array.prototype.filter()는 주어진 함수의 테스트를 통과하는 요소(조건에 true를 반환하는 요소)만을 반환하여 새로운 배열로 생성하는 메서드이다.

말그대로 우리가 쇼핑몰에 들어갔을 때 옵션을 선택해서 보고 싶은 상품만 보는 기능을 가능하게 해주는 메서드라고 생각하면 이해가 쉽다.

arr.filter(callback(element[, index[, array]])[, thisArg])

이 메서드가 사용하는 매개변수는 위에서 봤던 forEach와 같다.

callback : 각 요소를 테스트하는 콜백함수를 가리키는 매개변수이다. 이 콜백함수의 매개변수로 currentValue, index, array, thisArg가 있다.
- currentValue : 콜백 함수를 실행할 각 요소를 가리키는 매개변수이다.
- index : 각 요소의 인덱스를 가리키는 매개변수이다.
- array : 해당 콜백 함수를 호출하는 배열을 가리키는 매개변수이다.
- thisArg : 콜백 함수를 실행할 때 this가 되는 값을 설정하는 매개변수이다.

❓ 콜백 함수의 매개변수는 매개변수 명을 변경할 수 있다.

우선 원본 배열에 영향을 주는지 먼저 살펴보도록 하자.

filter()를 사용하면 줄에서는 추출한 데이터를 반환할 수 있지만 원본 배열은 변하지 않는 것을 확인할 수 있다.

만약 추출한 데이터를 사용하고 싶다면 아래처럼 변수에 할당을 해서 사용할 수 있다.

실무에서는 보통 조건에 맞는 데이터를 뽑아내는데 사용한다고 한다. 아래의 배열 안에 객체가 있는 형태의 데이터는 아직 정리하지 않는 fetch와 Promise에서 자주 사용하는 데이터 포멧인 JSON이다.

이 JSON을 한번 filter를 통해 데이터를 추출해보도록 하자.

위의 이미지를 확인해보면 객체의 key인 city의 value가 "NewYork"인 user는 2명인 것을 알 수 있다.

Array.prototype.map()

Array.prototype.map()은 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환하는 메서드이다.

arr.map(callback(currentValue[, index[, array]])[, thisArg])

매개변수로는 forEach()와 filter()와 동일한 매개변수를 가지고 있다.

callback : 각 요소에 대해 실행하는 콜백함수를 가리키는 매개변수이다. 이 콜백함수의 매개변수로 currentValue, index, array, thisArg가 있다.
- currentValue : 콜백 함수를 실행할 각 요소를 가리키는 매개변수이다.
- index : 각 요소의 인덱스를 가리키는 매개변수이다.
- array : map()를 호출하는 배열을 가리키는 매개변수이다. 보통 자주 사용하지 않는다.
- thisArg : 콜백 함수를 실행할 때 this가 되는 값을 설정하는 매개변수이다.

❓ 콜백 함수의 매개변수는 매개변수 명을 변경할 수 있다.

매개변수를 console.log()를 통해서 매개변수의 결과를 한번 살펴보도록 하자.

그럼 map()의 기능인 모든 요소에 함수를 실행하는 것과 새로운 배열을 반환하는 것을 보도록 하자.

정리를 마치며 ⛳️

배열의 메서드의 정리가 끝났다.

배열의 메서드에서 가장 중요한 forEach(), filter(), map()을 정리를 했는데 filter와 map을 사용하는 것을 정말 열심히 해봐야겠다.

특히 filter()에서 JSON을 통해서 데이터를 불러오는게 아직은 헷갈리는게 많아서 많은 에러를 콘솔창에 띄우곤 했다..

개념은 이해했지만 사용에는 아직 미숙한 것 같아 연습을 더 해보고 게시글에 예제를 추가할 예정이다.

또한 다른 메서드도 잊을 수 있으니 전체적으로 한번 더 복습해야겠다! 🔥

[모던자바스크립트 Deep Dive] 10장. 객체 리터럴 🦎

Sun, 15 May 2022 14:25:19 GMT

함수로 넘어갔는데 함수를 제대로 이해하려면 '객체'를 제대로 알아야한다고 해서 이번 Deep Dive 공부를 "객체"로 선정했다.

객체란?

자바스크립트는 객체(Object) 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 거의 모든 것이 객체이다.

number, string, boolean 등 원시 타입(Primitive type)을 제외한 function, Array, RegExp 등은 모두 객체이다.

원시 타입(Primitive type) : 단 하나의 값만 나타냄

객체 타입(Object/Reference type) : 다양한 타입의 값(객체 타입)을 하나의 단위로 구성한 복합적인 자료구조

객체의 구조

객체는 내부에 다양한 타입의 값을 넣을 수 있다.

내부 구조는 아래처럼 구성되어 있다.

프로퍼티(Property) : key와 value로 구성되는 객체의 상태를 나타내는 값(data)
메서드(Method) : Property를 참조하고 조작할 수 있는 동작

메서드는 key에 함수가 value로 사용되는 것을 말한다. 여기서 함수가 value로 사용될 수 있는 이유는 일급객체이기 때문이다.

❓ 일급객체란 다음 조건을 만족하는 객체를 말한다.

일단 함수는 객체라는 것을 알아야한다. 아래 이미지에서 객체를 console.dir()를 통해 살펴보면 아래처럼 객체 안의 Property로 구성되어 있다.

무명의 리터럴(익명함수?)로 생성할 수 있다. 즉, 런타임(할당 단계)에 생성이 가능하다.

아래의 이미지는 함수를 생성하지만 익명으로 생성하는 것이다. 여기서 변수에 함수를 할당하는 것이기 때문에 런타임에 생성하는 것이라고 할 수 있다.

변수나 자료구조(객체, 배열 등)에 저장할 수 있다.

함수의 매개변수에 전달할 수 있다.
함수의 반환값으로 사용할 수 있다.

객체 리터럴에 의한 객체 생성(그 외 생성방법)

자바스크립트는 다양한 객체 생성 방법을 지원하고 있다.

객체 리터럴 : const obj = {}, 객체를 생성하는데 가장 일반적이고 간단한 방법

Object 생성자 함수 : new Object()를 통해 빈 객체를 생성하는 방법

생성자 함수 : 함수를 통해 객체를 생성하는 방법

Object.create 메서드

클래스(ES6) : class 키워드를 사용하여 정의하는 방법

Property

객체는 프로퍼티의 집합이며, 프로퍼티는 key, value의 값으로 구성한다.

프로퍼티와 식별자 네이밍 규칙

프로퍼티에서 key는 식별자 네이밍 규칙을 따르지 않아도 된다. 하지만 이 경우에는 반드시 따옴표''나 ""를 사용하여 묶어야 한다.

따옴표로 묶지 않으면 Uncaugth SyntaxError가 발생한다.

또한 프로퍼티의 value에 접근할 때 대괄호[]를 사용하는 대괄호 표기법만으로 가능하다. 마침표 표기법으로는 에러 발생은 하지 않지만 접근 할 수 없다.

위의 마침표 표기법으로 할 경우 first와 name 사이의 -를 연산자 -로 인식하기 때문에 String - String = NaN으로 연산 결과가 나온다.

또 주의해야하는 점은 대괄호 표기법을 통해서 접근할 경우 [] 내부에 들어가는 값은 반드시 따옴표""로 묶어야 한다. 묶지 않으면 에러가 발생한다.

key는 네이밍 컨벤션을 따르지 않아도 되기 때문에 ''와 숫자가 앞에 오는 경우, 예약어 등을 사용해도 에러가 발생하지 않는다. 물론 에러가 발생하지 않는다고 해서 사용하는 것을 절대 권장하지 않는다.

프로퍼티 중복

프로퍼티가 중복 선언 시에 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다.

프로퍼티 값 갱신

프로퍼티 동적 생성

만약 객체 내에 프로퍼티가 없는데 값을 할당하면 프로퍼티가 동적으로 생성되어 추가되고 그 프로퍼티에 대한 값이 할당된다.

프로퍼티 삭제

프로퍼티를 삭제하고 싶을 때는 delete 연산자를 사용하여 프로퍼티를 삭제할 수 있다.

만약 없는 프로퍼티를 삭제하더라도 오류가 발생하지 않기 때문에 확인을 잘 하는 것이 좋다.

Method

메서드는 객체에 묶여 있는 함수를 의미한다.

메서드 축약 표현

보통 메서드를 정의할 때 function 키워드를 사용하지만, 축약형으로 사용할 수 있다.

function 키워드와 :을 생략해서 축약형으로 만들면 된다.