고코몽의 프론트엔드 저장소 고코몽의 프론트엔드 저장소

분류 전체보기

• Vuex 시작하기(3) - Store

  Vue/Vuex 2021. 6. 30. 16:16

  - Store 모든 Vuex 어플리케이션의 중심 어플리케이션 상태를 보유하고 있는 컨테이너 Vuex Store와 일반 전역 객체 차이점 Vuex.store는 반응형 Vue 컴포넌트는 상태를 검색할 때 저장소의 상태가 변경되면 효율적으로 대응하고 업데이트 Store의 상태 직접 변경 불가 저장소의 상태를 변경하는 유일한 방법은 명시적인 커밋을 이용한 변이 이렇게하면 모든 상태에 대한 추적이 가능한 기록이 남을 수 있으며 툴을 사용하여 앱을 더 잘 이해할 수 있음 - 기본 예제: 가장 단순한 저장소 // store/index.js import { createApp } from 'vue' import { createStore } from 'vuex' // Create a new store instance. c..

  Read More
• Vuex 시작하기(2) - 설치

  Vue/Vuex 2021. 6. 30. 15:43

  - 직접 다운로드 https://unpkg.com/vuex@4 - CDN - NPM npm install vuex@next --save - Yarn yarn add vuex@next --save - 모듈 시스템과 함께 사용하면 Vue.use()를 통해 Vuex를 명시적으로 추가해야 한다. (전역 스크립트 태그를 사용할 때는 이 작업을 할 필요가 없다.) import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) - Promise Vuex는 Promise를 필요로 한다. Promise를 지원하지 않는 브라우저일 경우 polyfill 라이브러리 사용 필수 // CDN npm install es6-promise --save // NPM yarn add es6-p..

  Read More
• Vuex 시작하기(1) - Vuex란 ?

  Vue/Vuex 2021. 6. 30. 15:04

  - Vuex란 무엇인가 ? Vue.js 어플리케이션에 대한 상태 관리 패턴 + 라이브러리 모든 컴포넌트에 대한 중앙 집중식 저장소 역할 예측 가능한 방식으로 상태 변경 다른 상태관리 라이브러리와는 달리 Vue.js가 효율적인 업데이트를 위해 세분화된 반응 시스템을 활용하도록 특별히 고안된 라이브러리 - 상태 관리 패턴이란 ? new Vue({ // 상태 data () { return { count: 0 } }, // 뷰 template: ` {{ count }} `, // 액션 methods: { increment () { this.count++ } } }) 상태: 앱을 작동하는 원본 소스 뷰: 상태의 선언적 매핑 액션: 뷰에서 사용자 입력에 대해 반응적으로 상태를 바꾸는 방법 - 한계점: 공통의 상태를..

  Read More
• 자료구조 - 스택(Stack)

  CS/자료구조 2021. 6. 26. 12:25

  - 스택 구조 가장 나중에 쌓은 데이터를 가장 먼저 빼낼 수 있는 데이터 구조 스택은 LIFO(Last In, First Out) 또는 FILO(First In, Last Out) 데이터 관리 방식을 따름 LIFO: 마지막에 넣은 데이터를 가장 먼저 추출하는 데이터 관리 정책 FILO: 처음에 넣은 데이터를 가장 마지막에 추출하는 데이터 관리 정책 대표적인 스택의 활용 컴퓨터 내부의 프로세스 구조의 함수 동작 방식 주요 기능 push(): 데이터를 스택에 넣기 pop(): 데이터를 스택에서 꺼내기 시연: https://visualgo.net/en/list VisuAlgo - Linked List (Single, Doubly), Stack, Queue, Deque VisuAlgo is free of cha..

  Read More
• 자료구조 - 큐(Queue)

  CS/자료구조 2021. 6. 25. 20:56

  - 큐(Queue) 구조 줄을 서는 행위와 유사 가장 먼저 넣은 데이터를 가장 먼저 꺼낼 수 있는 구조 FIFO(First-In, First-Out) 또는 LILO(Last-In, Last-Out) 방식으로 스택과 꺼내는 순서가 반대 Enqueue: 큐에 데이터를 넣는 기능 Dequeue: 큐에서 데이터를 꺼내는 기능 시연 : https://visualgo.net/en/list VisuAlgo - Linked List (Single, Doubly), Stack, Queue, Deque VisuAlgo is free of charge for Computer Science community on earth. If you like VisuAlgo, the only payment that we ask of yo..

  Read More
• 자료구조 - 배열(Array)

  CS/자료구조 2021. 6. 25. 20:15

  - 배열이란 ? 데이터를 나열하고 각 데이터를 인덱스에 대응하도록 구성한 데이터 구조 - 배열이 필요한 이유 같은 종류의 데이터를 효율적으로 관리하기 위해 사용 같은 종류의 데이터를 순차적으로 저장 - 배열의 장단점 장점 빠른 접근 가능 첫 데이터의 위치에서 상대적인 위치로 데이터 접근(인덱스 번호로 접근) 단점 데이터 추가/삭제의 어려움 미리 최대 길이를 지정해야 함 - 자바스크립트와 파이썬의 배열 자바스크립트 // 배열 리터럴 표기법 const array = [1,2,3,4,5]; // 1차원 배열 const array = [[1,2,3],[4,5,6]]; // 2차원 배열 // 배열 생성자 const array1 = new Array(2); // 단일 매개변수 const array2 = new Ar..

  Read More
• 자료구조란 ?

  CS/자료구조 2021. 6. 25. 19:57

  용어: 자료구조, 데이터 구조, data structure 대량의 데이터를 효율적으로 관리할 수 있는 데이터의 구조를 의미 코드상에서 효율적으로 데이터를 처리하기 위해, 데이터 특성에 따라, 체계적으로 데이터를 구조화해야 함 어떤 데이터 구조를 사용하느냐에 따라 코드 효율이 달라짐 - 대표적인 자료구조 배열, 큐, 스택, 링크드 리스트, 해쉬 테이블, 트리, 힙 등

  Read More
• JavaScript - 엄격 모드(strict mode)

  Frontend/JavaScript 2021. 6. 25. 16:54

  ES5에서 기존 기능이 변경되었고, 기존 기능을 변경하였기 때문에 하위 호환성 문제가 발생할 수 있음 변경사항 대부분은 ES5의 기본 모드에선 활성화되지 않도록 설계 'use strict' 라는 특별한 지시자를 사용해 엄격 모드를 활성화 했을 때만 기존 기능의 변경사항이 활성화 - use strict 'use strict' 지시자가 스크립트 최상단에 오면 스크립트 전체가 모던한 방식으로 동작 스크립트 최상단이 아닌 함수 본문 맨 앞에도 가능하며, 해당 함수만 엄격모드로 실행 'use strict'는 반드시 최상단에 위치 use strict의 위에는 주석만 사용 가능 alert("some code"); // 하단에 위치한 "use strict"는 스크립트 상단에 위치하지 않으므로 무시됩니다. "use st..

  Read More