지금까지 배운 내용들을 종합하여 Django에서 만들었던 게시판 만들어보자 구현기능 Index Create Detail Delete 404 컴포넌트 구성 목차 Index Create Detail Delete 404 Not Found 사전 준비 프로젝트 시작 vue create articles cd articles vue add vuex vue add router App.vue는 아래 코드만 남김 (CSS 코드 유지) 1. Index 구현 state 게시글의 필드는 id, 제목, 내용, 생성일자 DB의 AUTO INCREMENT를 표현하기 위해 article_id를 추가로 정의해줌 (다음 article의 id로 사용 예정) IndexView 컴포넌트 및 라우터 작성 state에서 불러온 articles 출..

목차 전역 가드 라우터 가드 컴포넌트 가드 404 Not Found 네비게이션 가드 Vue router를 통해 특정 URL에 접근할 때 다른 url로 redirect를 하거나 해당 URL로의 접근을 막는 방법 ex) 사용자의 인증 정보가 없으면 특정 페이지에 접근하지 못하게 함 https://v3.router.vuejs.org/guide/acvanced/navigation-guards.html 종류 전역 가드 애플리케이션 전역에서 동작 라우터 가드 특정 URL에서만 동작 컴포넌트 가드 라우터 컴포넌트 안에 정의 1. 전역 가드 Global Before Guard 다른 url 주소로 이동할 때 항상 실행 router/index.js에 router.beforeEach()를 사용하여 설정 콜백 함수의 값으로 ..

목차 Routing Router 실습 1. Routing 네트워크에서 경로를 선택하는 프로세스 웹 서비스에서의 라우팅 유저가 방문한 URL에 대해 적절한 결과를 응답하는 것 예시 /articles/index/ 에 접근하면 articles의 index에 대한 결과를 보내줌 Routing in SSR Server가 모든 라우팅을 통제 URL로 요청이 들어오면 응답으로 완성된 HTML 제공 Django로 보낸 요청의 응답 HTML은 완성본인 상태였음 결론적으로, Routing(URL)에 대한 결정권을 서버가 가짐 Routing in SPA / CSR 서버는 하나의 HTML(index.html) 만을 제공 이후에 모든 동작은 하나의 HTML 문서 위에서 JavaScript 코드를 활용 DOM을 그리는데 필요한 ..

http://www.acmicpc.net/problem/15654 15654번: N과 M (5) N개의 자연수와 자연수 M이 주어졌을 때, 아래 조건을 만족하는 길이가 M인 수열을 모두 구하는 프로그램을 작성하시오. N개의 자연수는 모두 다른 수이다. N개의 자연수 중에서 M개를 고른 수열 www.acmicpc.net # 조건 N개의 자연수와 자연수 M이 주어질 때, 아래 조건 만족하는 길이가 M인 수열을 모두 가하라 N개의 자연수 중에서 M개를 고른 수열 # 접근 방법 중복되는 수열 여러 번 출력하면 안되지만 순서가 뒤바뀐 것은 다른 수열이므로 순열을 이용해준다. 사전 순 출력이므로 오름차순 from itertools import permutations N, M = map(int, input().spl..

CDN - Content Delivery(Distribution) Network 컨텐츠(CSS, JS, Image, Text 등)을 효율적으로 전달하기 위해 여러 노드에 가진 네트워크에 데이터를 제공하는 시스템. 개별 end-user의 가까운 서버를 통해 빠르게 전달 가능(지리적 이점) 외부 서버를 활용함으로써 본인 서버의 부하가 적어짐 $$ 기본 원리 1. spacing (Margin and padding) {property}{sides}-{size} m t - 3 bootstrap-spacing property m - for classes that set margin p - for classes that set padding sides t - for classes that set margin-top ..

http://www.acmicpc.net/problem/15652 15652번: N과 M (4) 한 줄에 하나씩 문제의 조건을 만족하는 수열을 출력한다. 중복되는 수열을 여러 번 출력하면 안되며, 각 수열은 공백으로 구분해서 출력해야 한다. 수열은 사전 순으로 증가하는 순서로 출력해 www.acmicpc.net # 조건 자연수 N과 M이 주어졌을 때, 아래 조건을 만족하는 길이가 M인 수열을 모두 구하라 1부터 N까지 자연수 중에서 M개를 고른 수열 같은 수를 여러 번 골라도 된다. 고른 수열은 비내림차순이어야 한다. 길이가 K인 수열 A가 A1

목차 상태별 todo 개수 계산 Local Storage 1. 상태별 todo 개수 계산 전체 todo 개수 allTodosCount getters 작성 state에 있는 todos 배열의 길이 계산 getters에 계산된 값을 각 컴포넌트의 computed에서 사용하기 완료된 todo 개수 completedTodosCount getters 작성 isCompleted가 true인 todo들만 필터링한 배열을 만들고 길이 계싼 filter를 활용하여 완료 여부에 따른 새로운 객체 목록을 작성 후 길이 반환 getters에 계산된 값을 각 컴포넌트의 computed에서 사용하기 미완료된 todo 개수 미완료된 todo 개수 === 전체 개수 - 완료된 개수 getters가 두번째 인자로 getters를 받는..

위와 같은 컴포넌트 구성을 이루는 Todo 프로젝트를 만들어보자. 목차 사전준비 Read Todo Create Todo Delete Todo Update Todo 1. 사전준비 Init Project 프로젝트 생성 및 vuex 플러그인 추가 HelloWorld 컴포넌트 및 관련 코드 삭제 App.vue의 CSS 코드는 남김 컴포넌트 작성 TodoListItem.vue TodoList.vue TodoForm.vue App.vue 2. Read Todo State 세팅 출력을 위한 기본 todo 작성 Vue 개발자 도구에서 state 데이터 확인 state 데이터 가져오기 컴포넌트에서 Vuex Store의 state에 접근($store.state) computed로 계산된 todo 목록을 가져올 수 있도록 ..

목차 Lifecycle Hooks created, mounted, updated 특징 1. Lifecycle Hooks 각 Vue 인스턴스는 생성과 소멸의 과정 중 단계별 초기화 과정을 거침 Vue 인스턴스가 생성된 경우, 인스턴스를 DOM에 마운트하는 경우, 데이터가 변경되어 DOM를 업데이트하는 경우 등 각 단계가 트리거가 되어 특정 로직을 실행할 수 있음 이를 Lifecycle Hooks이라고 함 아래 빨간 부분들이 Lifecycle Hooks Lifecycle Hooks 간단히 알아보기 ChildComponents.vue에 작성해주기 mounted 까지가 Lifecycle Hook 중 1개 change value 버튼 클릭스 2개의 값이 log에 더 들어온다. Lifecycle Hook 중 1개 ..