Object method shorthand 이제부터는 객체 메서드 축양형을 사용할 것 ! 목차 state getters mutations actions 1. state state 중앙에서 관리하는 모든 상태 정보 $store.state로 접근 가능 store의 state에 message 데이터 정의 component에서 state 사용$store.state로 바로 접근하기 보다 computed에 정의 후 접근하는 것을 권장 Vue 개발자 도구에서의 Vuex 관리 화면을 Vuex로 변경 후 관리 되고 있는 state 확인 가능 2. actions state를 변경할 수 있는 mutations 호출 component에서 dispatch()에 의해 호출됨 dispatch(A, B) A : 호출하고자 하는 a..

목차 State Management Vuex 1. State Management 상태(State)란 ? 현재에 대한 정보(data) 나의 상태가 어때? 라는 질문에 할 수 있는 대답들 배가 고파 졸려 등등.. 따라서 Web Application에서의 상태는 현재 App이 가지고 있는 Data로 표현할 수 있음! 우리는 여러 개의 component를 조합해서 하나의 App을 만들고 있음 각 component는 독립적이기 때문에 각각의 상태(data)를 가짐 하지만 결국 이러한 component들이 모여서 하나의 App을 구성할 예정 즉, 여러 개의 component가 같은 상태(data)를 유지할 필요가 있음 상태 관리(State Management) 필요! Pass Props & Emit Event 지금..

http://www.acmicpc.net/problem/16236 16236번: 아기 상어 N×N 크기의 공간에 물고기 M마리와 아기 상어 1마리가 있다. 공간은 1×1 크기의 정사각형 칸으로 나누어져 있다. 한 칸에는 물고기가 최대 1마리 존재한다. 아기 상어와 물고기는 모두 크기를 가 www.acmicpc.net # 조건 N x N 크기의 공간에 물고기 M마리와 아기 상어 1마리 한 칸에는 물고기가 최대 1마리 존재 아기 상어와 물고기는 모두 크기를 가지고 있고, 크기는 자연수이다. 최초의 아기 상어 크기 = 2, 1초에 상하좌우로 인접한 한 칸씩 이동 아기 상어는 자신의 크기보다 큰 물고기가 있는 칸은 못 지나가고, 나머지 칸은 모두 지나간다. 이 때, 크기가 같은 물고기는 먹을 수 없지만, 있는 ..

http://www.acmicpc.net/problem/2407 2407번: 조합 n과 m이 주어진다. (5 ≤ n ≤ 100, 5 ≤ m ≤ 100, m ≤ n) www.acmicpc.net 조건 nCm 을 구하여라 접근 방법 입력이 크지 않기 때문에 dp 이용해주지 않아도 될 것 같다. def fac(n): num = 1 for i in range(2,n+1): num*=i return num n,m = map(int,input().split()) print(fac(n) // (fac(m)*fac(n-m)))

목차 emit event emit with data emit with dynamic data 1. emit event 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때는 이벤트를 발생 시킴 이벤트를 발생시키는 게 어떻게 데이터를 전달하는 것이냐? 데이터를 이벤트 리스트나 콜백함수의 인자로 전달 상위 컴포넌트는 해당 이벤트를 통해 데이터를 받음 $emit$emit 메서드를 통해 부모 컴포넌트에 이벤트를 발생 $emit('event-name') 형식으로 사용하며 부모 컴포넌트에 event-name 이라는 이벤트가 발생했다는 것을 알림 마치 사용자가 마우스 클릭을 하면 click 이벤트가 발생하는 것처럼$emit('event-name')가 실행되면 event-name 이벤트가 발생하는 것 참고 - $ ..

목차 Data in components Pass Props 1. Data in components 우리는 정적 웹페이지가 아닌, 동적 웹페이지를 만들고 있음 즉, 웹페이지에서 다뤄야 할 데이터가 등장 User data, 게시글 data, 등등... 한 페이지 내에서 같은 데이터를 공유 해야함 하지만 페이지들은 component로 구분이 되어있음 MyComponent에 정의된 data를 MyChild에 사용하려면 어떻게 해야 할까? MyChild에도 똑같은 data를 정의 MyComponent의 data와 MyChild의 데이터가 동일한 data가 맞는가? MyComponent의 data가 변경된다면 MyChild도 같이 변경이 될까? 아니다. 각 Component는 독립적이므로 서로 다른 data를 갖게..

목차 Component SFC Vue component 실습 1. Component UI를 독립적이고 재사용 가능한 조각들로 나눈 것 즉, 기능별로 분화한 코드 조각 CS에서는 다시 사용할 수 있는 범용성을 위해 개발된 소프트웨어 구성 요소를 의미 하나의 app을 구성할 때 중첩된 컴포넌트들의 tree로 구성하는 것이 보편적임 Web 시간에 배운 HTML 요소들의 중첩을 떠올려 보자! Body tag를 root node로 하는 tree의 구조이다. 마찬가지로, Vue에서는 src/App.vue를 root node로 하는 tree의 구조를 가짐 컴포넌트는 유지보수를 쉽게 만들어 줄 뿐만 아니라 재사용성의 측면에서도 매우 강력한 기능을 제공 우리가 사용하는 웹 서비스는 여러 개의 컴포넌트로 이루어져 있음 하..

목차 Node.js Vue CLI Vue CLI 프로젝트 구조1 - node_modules Vue CLI 프로젝트 구조2 1. Node.js 자바스크립트는 브라우저를 조작하는 유일한 언어 하지만 브라우저 밖에서는 구동할 수 없엇음 자바스크립트를 구동하기 위한 런타임 환경인 Node.js로 인해 브라우저가 아닌 환경에서도 구동할 수 있게 됨 Chrome V8 엔진을 제공하여 여러 OS환경에서 실행할 수 있는 환경을 제공 Browser만 조작 가능했으나, Server-Side-Programming 또한 가능해짐 NPM (Node Package Manage) 자바스크립트 패키지 관리자 Python에 pip가 있다면 Node.js에는 npm pip와 마찬가지로 다양한 의존성 패키지를 관리 Node.js의 기본 ..

Vue Style Guide Vue의 스타일 가이드 규칙은 우선순위를 기준으로 4가지 범주를 설정 우선순위 A : 필수 (Essential) 오류를 방지하는 데 도움이 되므로 어떤 경우에도 규칙을 학습하고 준수 B : 적극 권장 (Strongly Recommended) 규칙을 어겨도 코드는 여전히 실행되겠지만, 규칙 위반은 드물어야 함 C : 권장 (Recommended) 일관성을 보장하도록 임의의 선택을 할 수 있음 D : 주의 필요 (Use with Caution) 잠재적 위험 특성을 고려함 이번 글에서 학습하고 지켜야 할 스타일 가이드 2개 우선순위 A 1 . v-for는 항상 key와 함께 사용하기 내부 컴포넌트의 상태를 일관되게 유지하기 위해 v-for에 항상 key를 사용하기 데이터의 예측 가..