본문 바로가기
  • 살짝 구운 김 유나

분류 전체보기146

Vuex State management 상태란 ? => "현재에 대한 정보" web Application에서의 상태는 어떻게 표현할 수 있을까? => 현재 App이 가지고 있는 Data로 표현할 수 있음! 우리는 여러 개의 component를 조합해서 하나의 App을 만드는데, 각 component는 독립적이기 때문에 각각의 상태를 가짐 즉, 여러 개의 component가 같은 상태를 유지할 필요가 있음 (상태 관리의 필요성) Component의 중첩이 깊어지면 데이터 전달이 쉽지 X -> 중앙 저장소를 두자!! Centralized Store : 중앙 저장소에 데이터를 모아서 상태 관리 각 component는 중앙 저장소의 데이터를 사용 계층에 상관없이 중앙 저장소의 데이터에 접근 가능 중앙 저장소의 데이터가 .. 2022. 11. 10.
Navigation Guard 네비게이션 가드 : Vue router를 통해 특정 URL에 접근할 때 다른 url로 redirect를 하거나 해당 URL로의 접근을 막는 방법 [공식문서] Navigation Guards | Vue Router Navigation Guards As the name suggests, the navigation guards provided by vue-router are primarily used to guard navigations either by redirecting it or canceling it. There are a number of ways to hook into the route navigation process: globally, per-route v3.router.vuejs.org 네비.. 2022. 11. 9.
Vue Router Routing : 네트워크에서 경로를 선택하는 프로세스 웹 서비스에서의 라우팅 ? => 유저가 방문한 URL에 대해 적절한 결과를 응답하는 것 Routing in SSR - Server가 모든 라우팅을 통제 - URL로 요청이 들어오면 응답으로 완성된 HTML 제공 => 결론적으로, Routing에 대한 결정권을 서버가 가짐 Routing in SPA/CSR - 서버는 하나의 HTML만을 제공 - 이후에 모든 동작은 하나의 HTML 문서 위에서 Javascript 코드를 활용 => 즉, 하나의 URL만 가질 수 있음 Routing 이 없다면, 유저가 URL을 통한 페이지의 변화를 감지할 수 X 페이지가 무엇을 렌더링 중인지에 대한 상태를 알 수 X (새로고침하면 처음 페이지로, 링크를 공유하면 처음페이지.. 2022. 11. 9.
Vue Component Component : UI를 독립적이고 재사용 가능한 조각들로 나눈 것, 기능별로 분화한 코드 조각 하나의 app을 구성할 때 중첩된 컴포넌트들의 tree로 구성하는 것이 보편적 유지보수가 편해지고 재사용성 커짐 하나의 컴포넌트를 만들어서 반복되는 UI를 쉽게 처리 Component Based architexture 특징 관리가 용이 재사용성 확장 가능 캡슐화 독립적 SFC (Single File Component) 그렇다면, Vue에서 말하는 Component는?? " 이름이 있는 재사용 가능한 Vue instance ( new Vue()로 만든 인스턴스 ) " SFC : 확장자가 .vue인 파일 template + script + style = .vue 이 파일을 Vue instance 또는 Vue .. 2022. 11. 2.
Vue CLI NPM (자바스크립트 패키지 관리자) => python에 pip가 있다면 Node.js에는 npm pip와 마찬가지로 다양한 의존성 패키지 관리 Node.js 설치 시 함께 설치됨 Vue CLI Vue 개발을 위한 표준 도구 프로젝트의 구성을 도와주는 역할 확장 플러그인, GUI, Bable등 다양한 tool 제공 Vue CLI Quick Start 설치 $ npm install -g @vue/cli 프로젝트 생성 폴더 생성 후 vscode terminal에서 진행 $ vue create vue-cli $ vue create (프로젝트명) Vue 버전 선택 (vue 2) 프로젝트 생성 성공 프로젝트 디렉토리로 이동 $ cd vue-cli/ 프로젝트 실행 $ npm run serve 서버 켜기 - ctrl.. 2022. 11. 2.
Template Syntax Template Syntax 렌더링 된 DOM을 기본 Vue instance의 data에 선언적으로 바인딩 할 수 있는 HTML 기반 template syntax를 사용 렌더링 된 DOM - 브라우저에 의해 보기좋게 그려질 HTML 코드 HTML 기반 template syntax - HTML 코드에 직접 작성할 수 있는 문법 제공 선언적으로 바인딩 - Vue instance와 DOM을 연결 1. 보간법 (Interpolation) 2. 디렉티브 (Directive) Interpolation (보간법) - 문자열 메시지 : {{ msg }} // 일회성 보간 다시는 변경하지 않아 : {{ msg }} 데이터 바인딩의 가장 기본 형태 "Mustache" 구문(이중 중괄호)을 사용한 텍스트 보간 Mustach.. 2022. 11. 1.
Vue instance MVVM Pattern : 마크업 언어로 구현하는 GUI의 개발을 Back-end 로부터 분리시켜 view가 어느 특정한 모델 플랫폼에 종속되지 않도록 함 View : 우리 눈에 보이는 부분 = DOM Model : 실제 데이터 = JSON View Model (Vue) "서로가 서로를 모름 == 독립성 증가, 적은 의존성" View Model - View를 위한 Model - View와 연결되어 Action을 주고받음 - Model이 변경되면 View Model도 변경되고 바인딩된 View도 변경됨 - View에서 사용자가 데이터를 변경하면 View Model의 데이터가 변경되고 바인딩된 다른 View도 변경됨 View Instance === 1개의 객체 -> 아주 많은 속성과 메서드를 이미 가지고 있.. 2022. 11. 1.
JavaScript - 동기와 비동기 동기 (Synchronous) " 모든 일을 순서대로 하나씩 처리하는 것" 순서대로 처리한다 == 이전 작업이 끝나야 다음 작업 시작 요청과 응답을 동기식으로 처리한다면? -> 요청을 보내고 응답이 올 때까지 기다렸다가 다음 로직 처리 비동기 (Asynchronous) " 작업을 시작한 후 결과를 기다리지 않고 다음 작업을 처리하는 것 (병렬적) " 시간이 필요한 작업들은 요청을 보낸 뒤 응답이 빨리 오는 작업부터 처리 ex) 메일 전송 버튼을 눌러 놓고 다른 작업을 수행할 수 있음 비동기를 사용하는 이유 == 사용자 경험 "동기식 처리는 특정 로직이 실행되는 동안 다른 로직 실행을 차단하기 때문에 마치 프로그램이 응답하지 않는 듯한 사용자 경험을 만들게 됨" => 비동기로 처리한다면 먼처 처리되는 부분.. 2022. 10. 26.
Baekjoon_15683_감시 15683번: 감시 스타트링크의 사무실은 1×1크기의 정사각형으로 나누어져 있는 N×M 크기의 직사각형으로 나타낼 수 있다. 사무실에는 총 K개의 CCTV가 설치되어져 있는데, CCTV는 5가지 종류가 있다. 각 CCTV가 감 www.acmicpc.net 코드 from copy import deepcopy from collections import deque N, M = map(int, input().split()) arr = [list(map(int, input().split())) for _ in range(N)] # 동, 남, 북, 서 D = [(), (0, 1), (1, 0), (-1, 0), (0, -1)] # 카메라 타입에 따라서 각각 회전할 수 있는 방향 계산해 놓기 mode = [ [], .. 2022. 10. 25.
Baekjoon_16236_아기상어 16236번: 아기 상어 N×N 크기의 공간에 물고기 M마리와 아기 상어 1마리가 있다. 공간은 1×1 크기의 정사각형 칸으로 나누어져 있다. 한 칸에는 물고기가 최대 1마리 존재한다. 아기 상어와 물고기는 모두 크기를 가 www.acmicpc.net 문제 N×N 크기의 공간에 물고기 M마리와 아기 상어 1마리가 있다. 공간은 1×1 크기의 정사각형 칸으로 나누어져 있다. 한 칸에는 물고기가 최대 1마리 존재한다. 아기 상어와 물고기는 모두 크기를 가지고 있고, 이 크기는 자연수이다. 가장 처음에 아기 상어의 크기는 2이고, 아기 상어는 1초에 상하좌우로 인접한 한 칸씩 이동한다. 아기 상어는 자신의 크기보다 큰 물고기가 있는 칸은 지나갈 수 없고, 나머지 칸은 모두 지나갈 수 있다. 아기 상어는 자신의.. 2022. 10. 25.

티스토리툴바