캡틴 판교(장기효) 님의  [Vue로 구현하는 PWA] 강의를 듣고 중요 내용을 요약하여 정리합니다.

아래 깃헙 블로그에서 가독성 좋게 보실 수 있습니다.

https://nuatmochoi.github.io/notesite/05.html

Render with life cycle

1. created, 데이터 초기화 (반응성-reactivity 주입)
2. befroeMount, 'template' 속성을 render 함수로 변환

render: function(creteElement) {
    // return createElement('태그 이름', '태그 속성값', '하위 태그 정보')
    return createElement('p', this.str) // reactivity를 반영
}

• render 구현 방식

1. tag에 있었을 때 (outerHTML)
2. template 속성
3. render 함수

참고

life cycle에서는 create, beforeMount, Mounted (window.addEventListener / bus.$on) 이 세 개를 많이 쓰고,
이벤트 해제 할 때에 beforeDestory를 사용 (window.removeEventListener / bus.$off)

Webpack

웹팩 설명 유튜브 영상

여러 파일(모듈)을 묶어서 들고 오는 시간을 절약하는 것이 webpack의 목적

Gulp는 코드를 다 써서 구현하는 반면에

Webpack은 자체적으로 지원해주는 기능이 많고, Gulp보다 생태계가 훨씬 크다는 장점이 있다.
따라서 새로운 프로젝트라면 Webpack을 쓰는 것이 좋다.

Webpack을 쓰지 않았을 때와 썼을 때의 차이를 비교해볼 수 있다.

웹페이지의 필요한 파일들을 static assets으로 바꾼다.

번들링(bundling)이란 합치는 것. Build와 같은 의미로 보아도 좋다.

Webpack 실습

lodash 라는 라이브러리를 웹팩으로 번들링하는 실습이다.

순서 참고

1. npm init -y

2. npm i webpack webpack-cli

3. npm i lodash

   <script src="dist/main.js"></script>

4. import _ from "lodash"; // 상대경로 없이 이름만 쓰면 library

   lodash는 배열을 객체로 변환해주는 라이브러리이다.
   _ === lodash
5. package.json에 아래와 같이 추가

   "scripts": {
    "build": "webpack --mode=none"
   }

6. npm run build

Webpack Basic Concepts

• entry는 시작 field를 의미

• output은 기본으로 ./dist/main.js로 잡혀 있다.

• loader는 비js 파일을 js 파일로 변환시켜준다.

  • module은 돌릴 때에 필요한 속성, rule은 변환할 때 규칙을 정의하는 것

• plugins은 기본으로 지원하지 않는 부가적인 기능을 설정할 수 있다.

• webpack의 추가 옵션들이 많아질 때 -> webpack.config.js로 관리

  • mode는 none / production / deveplopment로, webpack이 업데이트 되기 전에는 plugins으로 설정했으나 최신버전은 해당사항 없음, build를 위해 아래와 같이 설정

    "scripts": {
    "build" : "npm run bundle -- --mode=production"
    }

• webpack 주요 속성

entry, loader, output, plugin

web 주요 속성

Webpack Loader

exports.push([module.i, "p {\r\n\tcolor: blue;\r\n}\r\n", ""]);

• js파일 안에 text로 기존에 들어올 수 없는 것을 추가시켜주는 것이 loader이다.

• 즉, 비js 파일(css, images, fonts...)을 js파일로 변환시켜준다.

• entry (index.js) -> (중간에 loader가 개입) -> output (dist/bundle.js)

• IE 등 ES6 문법이 필요하다면 babel이 필요한데 babel CLI를 설치하면 복잡해지니까 webpack이 해당 작업을 해줄 수 있음.

  {
      test: /\.js$/,
      use: 'babel-loader'
  },
  {
      test: /\.vue$/,
      use: 'vue-loader'
  }

  module -> rule에 위와 같이 추가하면 된다.

• loader는 적용이 오른쪽에서 왼쪽으로 된다.

  use: ['style-loader','css-loader'], // css -> style 순서로 적용이 된다.

Entrypoint main = bundle.js

[0] ./index.js 22 bytes {0} [built]

[1] ./base.css 261 bytes {0} [built]

위처럼 연관 관계 있는 것들을 하나씩 불러온다. dependency graph라고도 부른다.

브라우저의 개발자도구에 network 패널을 보면 DOMContentLoaded와 Load라는 것을 확인할 수 있는데, webpack을 사용하기 전후를 비교해보면 확연하게 시간차이가 나는 것을 알 수 있다.

• DOMContentLoaded : 기본적인 DOM 들만 들고오는 시간
• Load : css 등 다 불러오는 시간

Webpack Plugin

플러그인을 썼을 때 결과물에 추가적인 작업을 할 수 있다. (output뿐만 아니라, loader와 entry 단계에서도 적용 가능하다.)

• html webpack plugin

해당 plugin github

chunk를 모두 html로 script 추가

new HtmlWebpackPlugin({
            // index.html 템플릿을 기반으로 빌드 결과물을 추가해줌
            template: 'index.html',
        }),

• MiniCssExtractPlugin

css 파일을 별도의 파일로 분리 (css를 추출하는 플러그인)

개발용 라이브러리와 배포용 라이브러리 구분

• 개발용 (devDependencies)

  npm i webpack webpack-cli --save-dev 

• 배포용 (devDependencies)

  npm I lodash –save 

최종 애플리케이션에 포함되어야하는 라이브러리는 -D로 설치하면 안 된다. eslint, webpack등이 개발용 라이브러리이다.

라이브러리 지울 때는 npm uninstall 명령어를 사용한다.

Webpack Dev Server

• 매번 수정하고 npm run build 하는 것은 굉장히 비효율적인 반복 작업이다. 이 문제를 해결하기 위해, webpack dev server를 사용한다.
• webpack dev server : 파일 입출력을 하지 않고, 해당 dist/bundle.js를 memory 위에만 올려놓고 사용 (local에서 확인할 수 없다)
• npm run serve로 해당 작업을 수행할 수 있다.
• 추가적으로, webpack dev server를 이용하면 html, css, js 파일 뿐만 아니라, vue파일도 코드만 고쳤을 때 live server처럼 동일하게 화면을 갱신시켜줄 수 있다. webpack dev server에서 내부적으로 webpack 빌드를 하고 있다는 차이점이 존재하긴 한다.

Vuex

• component와 달리 트리구조가 아니라 container(store)가 하나 존재하고, 거기에 값을 같이 접근하는 방식 -> 정확하게는 단일 상태 트리를 이용 Vuex State

단방향으로만 흐르는 것을 알 수 있다.

State

• vue에서의 상태 (state) : 여러 컴포넌트간 공유되는 data
• 데이터가 많으면 한 곳에서 관리해야 한다. 상태 또한 component의 event처럼 규칙이 있다.

1.  

   npm i vuex

2. // main.js에서
   import Vuex from 'vuex';
   
   
   Vue.use(Vuex);
   
   const store = new Vuex.Store({
   state: {
   str: 'hi',
   },
   });
   
   

3.  

// app.js에서
<p>{{ $store.state.str }}</p>

Mutations

• state는 data와 비슷하고, mutations는 method와 비슷하다.

• 차이점은 data는 Vue 개발자도구에서 최종 값만 확인할 수 있고, state는 data의 각 시점의 변화(logging)를 볼 수 있다.

  mutations: {
    addStr(state) {
      state.str += '!';
    }

• 다른 컴포넌트에 아래 코드처럼 입력하면, 같은 data를 바라보기 때문에, 한 번의 mutation으로 두 개의 component가 변경된다.

  <div>
    <h1>HelloWorld의 뷰엑스 코드</h1>
    <button @click="$store.commit('addStr')">Vuex버튼</button>
    <p>{{ $store.state.str }}</p>
  </div>

• main.js : 전반적인 library, 프로젝트에 어떤 기능이 있는지 포함이 되어 있어야 한다. store나 router가 많아지면 한 눈에 보기 힘들기 때문에
  src 폴더 밑에 store 폴더를 만들고 index.js에 store와 router를 포함시켜야 한다.

Actions

    fetch('https://jsonplaceholder.typicode.com/users/1')
        .then(response => response.json())
        .then(json => this.user = json); // json 결과를 this.user에 담아 둔다.

위는 브라우저에서 사용되는 HTML request 방식이다.

• 데이터 호출은 vuex에서 mutations이 아닌 actions으로 한다!

• actions에 작성하는 함수는 전부 대문자로 작성 (ex> FETCH_USER)

• mutations와 달리, actions에서 state로 갈 수 있는 길이 없다. mutations을 거쳐야만 가능하다.

• mutations은 devtool로 확인할 수 있기 때문에 debugging도 용이하다.

    setUser(state, user) {
        // 두 번째 인자는 payload로도 많이 씀
        state.user = user;
    },
  },

• context 객체 안에 commit이 포함되어 있다. 참고

  actions: {
        FETCH_USER(context) {
            fetch('https://jsonplaceholder.typicode.com/users/1')
                .then(response => response.json())
                .then(json => {
                    console.log(json);
                    context.commit('setUser', json); // context.commit('mutation name', json)
                });
        },
    },

• actions을 호출할 때는 dispatch를 이용한다. mutations이 commit을 사용하는 것과 구별할 것.

      <button @click="$store.dispatch('FETCH_USER')">get user</button>
      <p>{{ $store.state.user }}</p>

• Vue core library는 화면단의 데이터에 관한 기능을 중점 지원하지만, 프레임워크의 기능인 router, state, testing을 쉽게 할 수 있는 형태로 제공. Vue를 단지 library뿐만이 아닌, progressive framework라고 부르는 이유이다.

웹팩은 여러 파일(모듈)을 묶어서 들고 오는 시간을 절약하는 것이 목적이다.

main.bundle.js 파일은 0, 1, 2... 의 숫자로 시작하는 여러 모듈을 합친 파일이다.

Gulp는 코드를 직접 다 써서 구현하는 반면에

Webpack은 자체적으로 지원해주는 기능이 많고, 생태계도 Gulp에 비해 훨씬 크다는 장점이 있다.

따라서 새로운 프로젝트라면 Webpack을 쓰는 것이 좋다.

번들링(bundling) : 합치는 것 (build === bundling === module)

백 트래킹 (bakctracking)

• 제약 조건 만족 문제에서 해를 찾기 위한 전략
  • 해를 찾기 위해, 후보군에 제약 조건을 점진적으로 체크하다가, 해당 후보군이 제약 조건을 만족할 수 없다고 판단한 즉시 backtrack (다시는 이 후보군을 체크하지 않을 것을 표기)하고, 바로 다음 후보군으로 넘어가, 최적의 해를 찾는 방법
• 실제 구현시, 고려할 수 있는 모든 경우의 수(후보군)을 상태공간트리(State Space Tree)를 통해 표현
  • 각 후보군을 DFS 방식으로 확인
  • 상태 공간 트리를 탐색하면서, 제약 조건에 맞지 않으면 해의 후보가 될만한 곳으로 바로 넘어가서 탐색
    • Promising : 해당 루트가 조건에 맞는지를 검사하는 기법
    • Pruning (가지치기) : 조건에 맞지 않으면 포기하고 다른 루트로 돌아가서, 탐색의 시간을 절약하는 기법

즉, 백트래킹은 트리 구조를 기반으로 DFS로 깊이 탐색을 진행하며, 각 루트에 대해 조건에 부합하는지 체크(Promising)하고, 만약 해당 서브트리에서 조건에 맞지 않는 노드는 더 이상 DFS로 깊이 탐색을 진행하지 않고, 가지를 치는 것(Pruning)

상태 공간 트리(State Space Tree)

문제 해결 과정의 중간 상태를 각각의 노드로 나타낸 트리

N Queen

• 대표적인 백트래킹 문제
• NxN 크기의 체스판에 N개의 퀸을 서로 공격할 수 없도록 배치하는 문제
• 퀸은 수직, 수평, 대각선 이동(공격) 가능, 따라서 다음과 같이 배치해야 한다
  

Pruning for N Queen

• 한 행에는 하나의 퀸만 위치 가능
• 맨 위 행부터 퀸 배치, 그리고 다음 행에 퀸이 위치 가능한 곳 찾아 퀸 배치
• 만약, 앞선 행의 퀸으로 인해, 다음 행에 퀸이 가능한 위치가 없을 경우, 이전 행의 퀸 배치를 바꿈
  • 맨 위 행부터 퀸 배치가 가능한 경우의 수를 상태 공간 트리로 만든 후, 맨 위 행부터 DFS로 접근

Promising for N Queen

• 수직 체크 cur_col-queen_col==0
• 대각선 체크 abs(queen_col-cur_col)==cur_row-queen_row

def is_available(candidate, cur_col):
    cur_row = len(candidate)
    for queen_row in range(cur_row):
        if candidate[queen_row] == cur_col or abs(candidate[queen_row]-cur_col) == cur_row - queen_row:
            return False
    return True

def DFS(N, cur_row, cur_queens, final_result): # cur_queens : 지금까지 배치된 퀸의 정보
    if cur_row == N:
        final_result.append(cur_queens[:]) # [:] == shallow copy
        return 
    for checking_col in range(N):
        if is_available(cur_queens, checking_col):
            cur_queens.append(checking_col)
            DFS(N, cur_row+1, cur_queens, final_result)
            cur_queens.pop()

def solve_n_queens(N):
    final_result = []
    DFS(N, 0, [],final_result)
    return final_result

캡틴 판교(장기효) 님의  [Vue로 구현하는 PWA] 강의를 듣고 중요 내용을 요약하여 정리합니다.

아래 깃헙 블로그에서 가독성 좋게 보실 수 있습니다.

https://nuatmochoi.github.io/notesite/04.html

component / instance option 순서

권고되는 순서이다.

https://vuejs.org/v2/style-guide/#Component-instance-options-order-recommended

다른 component로 값을 보내는 방법

이벤트 명이 같으면 안된다.

1. event + props

일반적으로는 다른 컴포넌트에 값을 보내줄 때

-> 위쪽 컴포넌트(ex> root)에 값을 올린 후에 다시 내려줘야함

2. event bus

src 밑에 utils 폴더 -> bus.js 생성

export var bus = new Vue(); // export : 다른 곳에서 쓰기 위함

import { bus } from '../utils/bus' // ctrl 클릭하면 그 파일로 갈 수 있다

- this.$emit('...') : 밑에서 위로 올려보낼 때 사용 (이벤트 트리거)

removeAll: function() {
            localStorage.clear();
            this.$emit('remove-all'); // event bus -> 컴포넌트간 data 전달 가능 
            bus.$emit('remove-all');
        },

beforeMount: function() {
        bus.$on('remove-all'); //이벤트를 받기 위함
}

위 방식은 기본 최상위 컴포넌트인 root로 가는 것이 아니라 외부의 root라는 bus를 통해서 data를 전달하는 방식이다.

- 복잡해질수록 나중에 tracking하기가 어렵다. (규칙에 의한 방식이 아니라, 일종의 편법이기 때문)

- 따라서 위 방식을 팀 프로젝트 내에서 쓰려면 코딩 컨벤션을 따라야 한다. 

- 대개는 event로 올리고, props로 내리는 방법을 채택하고, 이 계층이 깊어지면 Vuex를 채택한다.

beforeDestroy: function() { // event를 제거할 때 
        bus.$off('remove-all', this.removeItems)
}

- $on으로 event를 생성한 이후에, event queue에 쌓이기 때문에, $off로 제거하는 것이 필요하다.

vue project 디버깅

1. 디버깅 할때 어떤 컴포넌트인지 확인한다.

(ex>

found in

---> <TodoList> at src/components/TodoList.vue

       <App> at src/App.vue

         <Root>

)

2. 큰따옴표 "" 안에 어떤 item인지 확인한다. (ex> "todoItems")

props 작성 방식

vue의 event bus를 사용할 때에 app에서 data를 내려 보내기 위해 props 사용

1. 

props: ['list']

2.

props: {
    list: Array
}

v-on 이벤트 작성 방식

<todo-footer v-on:clear="todoItems = []"></todo-footer>

이것도 가능하지만, 유지보수를 위해 method로

this.todoItems = [];
localStorage.clear();

이렇게 작성해주는 것이 좋음

vue.js Event Bus에 대해 잘 정리된 글이 있어 공유합니다. https://jsdev.kr/t/vue-js-event-bus/2926

- 리스트의 값이 바뀌고 화면이 바로 바뀌는 것을 reactivity라고 말한다.

자바스크립트 for문 문법

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

https://medium.com/@js_tut/map-filter-and-reduce-animated-7fe391a35a47

1.

for (var i =0 ; i < arr.length ; i ++){
	console.log(arr[i]);
}

2.

arr.forEach(function(value,index){
	console.log(value, indexedDB);
});

3.

for (var key in arr) {
	console.log(key, arr[key]);
}

+ Vue에서는 이렇게 쓴다.

<li v-for="(item, index) in list" :key="index">

- key는 unique한 값 (key는 id나 index값을 주로 사용함)

event, emit, payload

1.

this.$emit('add:todo', value); // 동작: 대상

2.

payload : 인자

this.$emit('remove-each', item, index); // payload의 순서대로 들어감

vue 파일에서 style 적용

<template>
  <h1>Todo App</h1>
</template>

<style scoped>
h1 {
  color: blue;
}
</style>

- style에 scoped 속성 추가하면 그 component의 file에만 적용되는 스타일이 된다.

Mounted

template이 string에서 tag로 변경되는 시점이다.

export default {
  //vcrea
  created() { // document 생성 x
    var h1 = document.querySelector('h1');
    console.log('created', h1);
  },
  //vbm
  beforeMount() { // document 생성 x 
    var h1 = document.querySelector('h1');
    console.log('before mount', h1);
  },
  //vm
  mounted() { // template가 실제 dom에 있지 않고 string 상태에서, mounted가 되어야 tag로 변환된다.
    var h1 = document.querySelector('h1');
    console.log('mounted', h1);
  },
};
</script>

form tag

form 태그는 submit 되면 새로고침이 되는 특징이 있다.

-> 이것을 막기 위해서

event.preventDefault();

혹은

<form v-on:submit.prevent="submitForm">

이런 처리들을 해줘야한다.

이와 비슷한 event modifiers에는 prevent를 포함해 6가지 종류가 있다.

https://vuejs.org/v2/guide/events.html#Event-Modifiers

Babel

최신 JS 문법(ES6 이상)이 여러 브라우저에서 돌아갈 수 있게 해주는 것이 Babel이다.

https://babeljs.io/

자바스크립트 최신문법 (ES6)

1. destructuring

var {name, id} = data;

2. 변수 선언

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures

let a = 2 // 한 번 선언한 것은 다시 선언 할 수 없다.

const c = 20 // const도 마찬가지

3. for문

JS는 ES6 이전에 var 선언으로 마지막 값에 접근이 가능한 타 언어 개발자들이 기겁할만한 문제가 있었지만,

let을 통해서 해당 문제를 해결하였음.

화살표 함수

arr.forEach((value, index) => {
    console.log(value, index);
});

만약에 인자가 하나라면 괄호를 없애도 된다.

var sum = (a, b) => {
    return a + b;
};

 var vm = this;
    return axios
      .get('https://jsonplaceholder.typicode.com/posts/1')
      .then(data => {
        this.post = data.post; // 화살표 함수를 쓰면 vm이 아닌 this를 사용해도 된다.
      })

인스턴스 option 속성에는 화살표를 쓰면 안된다. 

-> 왜냐하면 바로 위의 this의 범위가 달라지기 때문이다.

fetchItems() { 
	… 
} 

-> 대신에 이런 식으로 작성이 가능하다.

Enhanced Object Literal

향상된 객체 리터럴(표기법): key와 value가 같아질 때 사용한다.

var obj = {
    num, // num: num,
};

-> vue의 component 정의에서도 예를 들어 TodoInput이 html에서는 todo-input으로 바뀌기 때문에 사용 가능하다. (대소문자 구별을 하지 않기 때문임)

import, export

- 값이나 변수가 나가는 곳에서 export var a

- 받는 곳에서 import {값 or 함수} from '가져오는 위치'

export default

-> 해당 파일에서 무조건 하나만 들고 오겠다면 default를 붙인다.

-> 이때는 무조건 하나만 들고 오기 때문에, import sum from '...' 처럼 { } 없이 들고 올 수 있다.

캡틴 판교(장기효) 님의  [Vue로 구현하는 PWA] 강의를 듣고 중요 내용을 요약하여 정리합니다.

아래 깃헙 블로그에서 가독성 좋게 보실 수 있습니다.

https://nuatmochoi.github.io/notesite/03.html

디렉티브

디렉티브(v- 로 시작하는 것) 는 화면에 뿌려주는 과정을 편하게 하기 위함.

v-bind : 값을 연결할 때

v-on : 이벤트를 연결할 때 

v-if (조건) : false, true로 변경함에 따라 tag의 보이는 유무 제어 (false일 때 element tag에서 아예 제외된다)

v-show : v-if와 같이 화면에 보이는 유무 제어 (다른 점은, v-show는 css의 display 속성이 none으로 바뀌는 것이기 때문에, DOM으로는 남아 있다)

npm

- https://joshua1988.github.io/webpack-guide/build/npm-module-install.html#npm-%EC%84%A4%EC%B9%98-%EB%AA%85%EB%A0%B9%EC%96%B4

- http://jeonghwan-kim.github.io/series/2019/12/09/frontend-dev-env-npm.html

npm

- https://www.npmjs.com/package/vue

- 버전 관리를 용이하게 하기 위함

- 버전이 다르다면 가져온 라이브러리가 호환이 안될 수도 있기 때문에, 그것을 해결하기 위해 npm이 필요함

npm i @vue/cli -g로 설치한다 ( === npm install @vue/cli -global)

npm init -y (모든 option을 yes로 처리) -> package.json 생성

package-lock.json : 특정 라이브러리를 설치할 때 또다른 라이브러리를 설치해야 할 수도 있기 때문에 생기는 것

npm i jquery와 같이 라이브러리를 install 하면

"dependencies": {
	    "jquery": "^3.4.1"
}

node_modules 폴더 밑에 jquery 폴더가 생기고, 가져다 쓸 수 있음

ES6 에서는 CDN 방식(script)로 접근하지 않고, import로 라이브러리에 접근한다.

npm i jquery-ui@1.10.5 처럼 @+ (버전) 으로 특정 버전을 설치할 수 있다.

package.json에 필요한 모든 패키지가 명시가 되어 있으므로, node_modules를 제외하고 새로운 폴더로 옮긴 후에, npm i 명령어를 통해 옮긴 후에 node_modules를 생성하는 식으로 프로젝트 위치 변경 용이하다. 따라서 git으로 올릴 때에도 package.json과 package-lock.json을 같이 올리는 것이 좋다.

Vue CLI

CDN은 인터넷 연결이 되지 않으면 사용 불가

setup된 project에서 개발하기 위해 Vue CLI를 쓰는 것임 (명령어로 프로젝트 구성하는 도구)

1. vue create todo-app (프로젝트 생성, 생성 option은 사전 설정 없으면 defalut로 하면 된다)

2. cd todo-app

3. npm run serve (프로젝트 실행)

vue! : vscode에서 .vue 파일로 개발할 때 single file component(html+css+js) 자동 생성 단축키

vue cli가 live server로 열리지 않는 이유 : HTML, CSS, JS는 브라우저가 인식 가능하지만, Vue 파일은 인식할 수 없기 때문이다.

vue cli에서 서버 명칭 : webpack-dev-server

로딩해주는 것 : vue-loader

-> 이러한 잡다한 부분을 vue-cli의 최신 버전들은 @vue-cli 폴더 등에 넣어놓음

eslint error overlay 해제

VS Code에서 eslint 관련 에러를 뜨지 않게 하려면

project에 vue.config.js 파일 생성한 후에 아래와 같이 타이핑하고 저장

module.exports = {
    devServer: {
        overlay: false,
    }
}

Javascript 모듈화

(function(){
...
})(); 

즉시 실행함수 : function 전체를 ()로 감싸고 끝날 때 ()를 붙여준다.

Component

component는 components 폴더 안에 작성할 것으로 권고됨

app.vue에서 component를 들고 오기 위해

app.vue에서

import TodoHeader from "./components/TodoHeader.vue";

(vim + tab으로 자동완성 쉽게 가능) 

export default {
  components: {
    "todo-header": TodoHeader
  }
};

이렇게 컴포넌트 등록할 수 있음 

component가 data를 참조하지 않게 하기 위해

//data : {} 객체로 만들면 에러가 난다.
    //컴포넌트에 data를 선언할 때는 function 형태여야 한다.
    data() {
        return {
            inputText: '',
        };
    },

v-model

v-model : 양방향 데이터 바인딩

<input type="text" v-model="inputText" />
<button v-on:click="addItem">add</button>

addItem: function() {
            var value = this.inputText;
            localStorage.setItem(value, value);
            this.clearInput();
        },

localStorage.setItem(‘1’, ‘item 1’) 

: 껐다가 다시 켜도 local storage에 저장되어 있음

v-for

<li v-for="(item, index) in todoItems" :key="index">
                {{ item }}
</li>

v-for를 돌 때에 key값은 idx 혹은 id로 구별한다.

created (in 라이프사이클)

component가 생성되자마자 호출된다.

Container presentational component

- https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

DFS, BFS with Python

• N X M 의 배열에서 N,M이 대개 10000~100000 사이의 범위

• 여러 개의 정점이 연결되어 있는 형태로 나올 때 활용

• 간선 개수가 작을 때는 DFS로 재귀함수 활용 가능 (or sys.setrecursionlimit() 설정)

• 간선 개수가 많을 떄는 BFS. 그래도 느리다면 백준 알고리즘 같은 경우 Pypy3 로 채점 시도 해볼 것

해당 문제

https://www.acmicpc.net/problem/1260

https://www.acmicpc.net/problem/1012

https://www.acmicpc.net/problem/1325

https://www.acmicpc.net/problem/2606

https://www.acmicpc.net/problem/1697