Vue.js Study#1 - 사전준비

작년 부터 유독 Vue나 React 프로젝트들이 많이 보이기 시작했다. 개인적인 생각으로는 굳이 그런 것들로 할 필요가 없다고 생각이 들긴하지만… jQuery만 봐도 얼마나 훌륭한가…

각설하고, 주변 개발자들의 Vue에 대한 열화와 같은 Study 욕구를 해소하기 위해 그동안 몇 번 진행했던 Study의 내용을 간단하게나마 정리해보고자 한다.

이 글은 기존의 웹 개발을 했던 분들을 대상으로 작성해서 어느정도 웹에 대한 이해가 있어야 한다.

목표

개발환경 세팅
게시판 만들어 보기

SPA란

Single Page Application의 약자인데, 단일 페이지? Vue나 React는 SPA Framework라고들 하는데, 이전에 웹을 개발하던 방식과는 패러다임이 다르다.

SPA 이전의 개발은 한 페이지를 표시하기 위해 브라우저에서 서버에게 요청을 하면 요청한 페이지에 대한 결과물(HTML)을 서버에서 보내주는 방식이였다. 그리고 이런 방식을 SSR¹이라고 한다. SPA가 나와서 이런 용어가 있지 SPA 이전의 웹개발 시절엔 들어본적이 없는 용어이다.

SPA는 CSR²이라고 하여 클라이언트에서 렌더링을 하는 방식인데 최초 접속시 한번 페이지를 렌더링하기 위한 리소스(html, javascript, css…)를 서버로부터 받는다. 그리고 받은 리소스를 가지고 첫 화면을 생성한다. 여기까지는 별 다를게 없어보이는데, 만약 다른 페이지로 이동을 한다면 여기서부터 차이가 난다.

기존의 웹은 다른 페이지로 이동할때 서버에게 이동하고자하는 페이지에 대한 결과물을 다시 요청하고 결과물을 받아 화면에 출력한다. 이와는 다르게 SPA는 페이지 이동시 서버에 요청을 하지 않는다. 이미 다음 페이지를 렌더링할 리소스를 가지고 있기 때문이다. 단 데이터를 출력하기 위한 요청을 하긴 한다.

개인적인 생각이지만, SPA이전의 웹은 페이지를 렌더링하기 위한 요청을 여러번 하기 때문에 SPA와 비교해서 MPA³라고 굳이 이름을 붙인게 아닌가 싶고, SPA는 페이지를 렌더링하기 위한 요청을 한번만 하기 때문에 Single Page 라고 하는게 아닌가 싶다.

ES6에 익숙해지기

SPA개발을 위해 ES6는 필수다. 꼭 알아야한다. ECMAScript라고 하며 JavaScript와 헷갈릴 수 있는데 ECMAScript는 일종의 스크립트에 대한 표준을 정의한 문서이고, 이 표준을 준수한 언어가 JavaScript라고 보면 될거 같다. 여기서 6은 표준 문서가 여섯번째 개정되었음을 말한다. 이전에 우리가 많이 사용하던 JavaScript는 ES5 기준이였고, Vue 개발에 필요한 ES6는 많은 함수들이 추가 되었고 문법 자체도 생소한 것들이 많다.

ES6에서 내가 자주 쓰는것들 위주로 몇 가지 정리해 보면,

변수선언: var대신 const, let을 사용한다.

  
// 이전의 JavaScript
var name = "devobba";

// ES6이후
const name = "devobba"; // 상수 재할당 X
let name = "devobba"; // 변수 재할당 O

화살표 함수(arrow function): 화살표를 사용한 함수의 표현식

  
// 이전의 JavaScript
function plus(a, b) {
  return a + b;
}
console.log(plus(5, 6)); // 11

var list = ["apple", "banana", "orange"];
console.log(
  list.map(function (item) {
    return item.length;
  })
); // [5, 6, 5]

// ES6이후
const plus = (a, b) => {
  return a + b;
};
console.log(plus(5, 6)); // 11

const list = ["apple", "banana", "orange"];
console.log(list.map((item) => item.length)); // [5, 6, 5]

매개변수 기본값 설정: 함수에 넘기는 매개변수의 값이 ‘’, null, undefined일 경우 기본값을 대신 사용 할 수 있다.

  
const plus = (a, b = 10) => {
  return a + b;
};

console.log(plus(5, 6)); // 11
console.log(plus(5)); // 15

Template Literal: 문자열 템플릿을 이용하여 표현할 수 있다. java의 String.format() 메소드와 유사하다.

  
// 이전의 JavaScript
var name = "devobba";
console.log("hi " + name + "! nice meet you."); // hi devobba! nice meet you.

// ES6이후
const name = "devobba";
console.log(`hi ${name}! nice meet you.`); // hi devobba! nice meet you.

spread operator: 전개 연산자라고 하여 Object나 Array의 항목을 나열한다.

  
const list1 = ["a", "b", "c"];
const list2 = ["d", "e"];
const list3 = [...list1, ...list2];
console.log(list3); // ["a", "b", "c", "d", "e"]

const devobba = { name: "devobba", age: 28 };
const devunni = { name: "devunni", age: 26, sex: "woman" };
const devFamily = { ...devobba, ...devunni };
console.log(devFamily);
/*
Ojbect같은 경우는 병합하는 Object의 키가 이미 있을 경우 덮어 씌우게 되어 맨 마지막 인자의 값이
최종적으로 남게 된다.
{
  age: 26,
  name: "devunni",
  sex: "woman"
}
*/

Destructuring assignment (구조분해할당?): 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.

  
// Array
let first, second, other;
const [first, second, ...other] = ["a", "b", "c", "d", "e"];
console.log(first); // a
console.log(second); // b
console.log(other); // ["c", "d", "e"];

// Object
const userInfo = { name: "devobba", age: 28 };
const { name } = userInfo;
console.log(name); // devobba

const printAge = ({ age }) => {
  console.log(age);
};
printAge(userInfo); // 28

import, export: 다른 js파일에서 작성된 코드를 java처럼 import하여 사용할 수 있다. 단, 다른 js파일에서 export를 해줘야한다. 예제를 보면 그냥 export와 default export의 차이점이 있다.

  
// util.mjs
const plus = (a, b) => a + b;
export const minus = (a, b) => a - b;
export default plus;

// main.mjs
import plus, { minus } from "./util.mjs";
console.log(plus(1, 2)); // 3
console.log(minus(2, 1)); // 1

  
// util.mjs
export const plus = (a, b) => a + b;
export const minus = (a, b) => a - b;

// main.mjs
import { plus, minus } from "./util.mjs";

// or
import * as util from "./util.mjs";
console.log(util.plus(1, 2));
console.log(util.minus(2, 1));

그 밖에 자주쓰는 것들

===, ==: 둘의 차이는 ===는 type까지 비교한다는것

  
console.log(1 == "1"); // true
console.log(1 === "1"); // false

Array.map(callback function): 배열을 for문을 돌려 같은 크기가 같고 다른 형태의 배열을 생성할 수 있다.

  
const list = ["apple", "banana", "orange"];
console.log(list.map((item) => `like ${item}`)); // ["like apple", "like banana", "like orange"]
console.log(list.map((item) => item.length)); // [5, 6, 6]
console.log(
  list.map((item, index) => {
    return {
      name: item,
      order: index,
    };
  })
);
/*
[{
  name: "apple",
  order: 0
}, {
  name: "banana",
  order: 1
}, {
  name: "orange",
  order: 2
}]
*/

Array.find(callback function), Array.findIndex(callback function): 배열에서 특정 조건의 요소를 찾는다. callback function에서 특정 요소를 찾으면 for문을 중단한다. 찾지 못하면 defined, -1을 반환

  
const list = [1, 2, 3, 1];
console.log(list.find((item) => item === 1)); // 1
console.log(list.findIndex((item) => item === 1)); // 0

변수명을 Object의 Key로 사용: 변수명과 Key가 같다면 Key를 생략해도 된다.

  
const name = "devobba";
const obj = { name }; // => const obj = { name: name }
console.log(obj.name); // devobba

nullish operator: 널처리를 위한 연산자

  
// case1
const name = null;
console.log(name ?? "devobba"); // devobba

// case2
const name = "";
console.log(name ?? "devobba"); // ''

// case3
const name = null;
console.log(name || "devobba"); // devobba

// case4
const name = "";
console.log(name || "devobba"); // devobba

// case5
const a = null;
const b = null;
const c = "c";
console.log(a ?? b ?? c ?? "devobba"); // c

// case6
const obj = null;
console.log(obj?.name); // undefined

// case7
const obj = {
  name: "devobba",
};
console.log(obj?.name); // devobba

Promise

async/await

Vue Study 에서 전체 글을 확인 할 수 있습니다.

각주

Server Side Rendering 이라고 하며, 서버측에서 동적인 데이터를 이용하여 html을 만드는 방식으로 jsp, php, asp 등이 있다. ↩
Client Side Rendering 이라고 하며, 클라이언트(브라우저)에서 html을 만드는 방식이다. ↩
Multi Page Application ↩

Vue.js Study#1 - 사전준비

목표

SPA란

ES6에 익숙해지기

그 밖에 자주쓰는 것들

각주

Further Reading

Vue.js Study#2 - Vue익숙해지기

window.open으로 팝업 띄우기(Vue2)

공통 Modal 만들기(with bootstrap)