전체 글
-
Vue HTTP 통신 라이브러리 - axios개발/Front-end 2021. 9. 3. 15:44
이번 시간에는 http 통신 라이브러리 axios를 이용하여 API를 호출하여 서버 데이터 바인딩을 하는 방법을 알아봅니다. 1. Axios란? axios는 서버와 데이터를 송수신할 수 있는 HTTP 비동기 통신 라이브러리입니다. Vue.js 개발 시 서버와 통신을 위해 가장 많이 사용되는 라이브러리입니다. 이는 Promise 기반의 HTTP 통신 라이브러리입니다. 아래 사이트에서 설치 방법, 사용법 등에 대해서 확인 가능합니니다. GitHub - axios/axios: Promise based HTTP client for the browser and node.js GitHub - axios/axios: Promise based HTTP client for the browser and node.js Pr..
-
Vue 데이터 바인딩개발/Front-end 2021. 8. 25. 15:32
이번 시간에는 HTML 입력 폼 객체에 따른 데이터 바인딩 방법을 알아보겠습니다. 1. 데이터 바인딩이란? Vue는 Angular와 마찬가지로 양방향 데이터 바인딩을 지원합니다. 아래 MVVM 패턴 그림을 봅니다. 뷰 모델에 있는 데이터 바인딩은 양방향 데이터 바인딩이 이뤄집니다. 모델과 뷰 중 어느 한쪽에 변경이 일어나면 다른 한쪽에 반영됩니다. MVVM 패턴: Model-View-ViewModel 약자로 프로그래밍 로직과 화면에 해당하는 View를 분리해서 개발하기 위해 설계된 패턴입니다. 모델: 데이터를 담은 용기. 서버에서 가져온 데이터를 js 객체로 저장 뷰: 사용자 화면 뷰 모델(Vue): 뷰와 모델의 중간 영역으로 돔 리스너와 데이터 바인딩을 제공 돔 리스너: 돔의 변경 내용을 즉각적으로 반..
-
Vue 컴포넌트 Basic개발/Front-end 2021. 8. 24. 23:42
이번 시간에는 vue 컴포넌트 개발을 위한 기본 문법에 대해서 알아봅니다. 컴포넌트에 대한 이해와 Vue 컴포넌트 코드 구조를 이해합니다. 1. 컴포넌트란? 웹 사이트 화면에서 하나하나가 수많은 웹 요소로 구성되어 있습니다. 예를 들어 버튼, input, 이미지 등으로 구성되어 있습니다. 이런 작은 단위의 여러 개 View 중에는 다른 화면에서도 사용됩니다. 이런 단위의 View를 재사용할 수 있는 구조로 개발하는 것을 컴포넌트라고 합니다. Vue로 개발된 파일(.vue)가 모두 컴포넌트입니다. Vue CLI를 이용해서 프로젝트를 최초 생성했을 때 src 폴더 밑에 components와 views(vue-router 설치 시 생성)이 존재합니다. 해당 역할은 아래와 같이 사용됩니다. views 폴더: 페..
-
Vue Lazy Load(비동기 컴포넌트)란?개발/Front-end 2021. 8. 24. 23:12
1. Lazy Load 사용하는 목적 Vue CLI를 통해 빌드하면 소스 코드가 하나의 파일로 합쳐집니다. 이때 큰 프로젝트는 파일 용량이 매우 커집니다. 이 때문에 사용자는 웹 사이트 처음 접속 시 큰 파일을 다운로드하느라 초기 랜더링 시간이 오래 걸리게 되며 랜더링 속도가 너무 늦어지게 됩니다. 즉 현재 보고 있는 화면과 무관한 내용까지 받아서 오래 걸리게됩니다. 따라서 Lazy Load를 이용하여 리소스를 컴포넌트 단위로 분리하여 필요한 것들만 그때그때 라우트 단위 혹은 컴포넌트 단위로 다운로드할 수 있게 하는 방법입니다. Lazy Load는 Lazy '가능한 길게 일을 미루는 행위'란 의미에 Load 단어를 합쳐 페이지 내에서 실제로 필요할 때까지 리소스 로딩을 미루는 것입니다. 2. prefet..
-
Vue Lazy load 적용하기개발/Front-end 2021. 8. 24. 20:45
이번 시간에는 Vue Router 설정 중 Lazy Loading Routes를 사용하는 실습을 진행하겠습니다. 해당 실습은 vuejs 가이드 문서를 참고해서 만들었습니다. 만약 Lazy Load에 대한 개념이 어렵다면 이전 게시물인 Vue Lazy Load(비동기 컴포넌트)란? 에 대한 포스팅을 읽고 오시는 것을 추천합니다. 1. Vue 기본 CLI 세팅 1-1. Vue CLI 설치 아래는 vue cli를 설치하는 명령어입니다. $ npm install -g @vue/cli 1-2. Default 옵션으로 프로젝트 설치하기 해당 옵션으로 프로젝트를 생성하는 경우 기본적으로 설정된 값으로 설치가 됩니다. 1-2-1. vue 프로젝트 생성 vue create [프로젝트 명] 명령어를 실행합니다. 여기서 프..
-
Vue Router개발/Front-end 2021. 8. 24. 19:12
이번 시간에는 Vue Router에 대해 학습합니다. 사용자가 접속한 주소에 따라 페이지가 달라지는 것을 라우팅이라고 합니다. 이번 시간에는 라우팅이 무엇인지 파악하고, Vue에서 라우팅 처리를 위해 사용하는 플러그인 vue-router에 대한 설치 및 사용법에 대해 알아봅니다. 또한 Vue CLI의 prefetch 기능에 대해 이해하고 컴포넌트 로딩 시점을 설계하는 방법도 익혀봅니다. 1. 라우팅이란? 라우팅이란 사용자가 접속한 주소에 따라 페이지(컴포넌트)가 전환되는 것을 의미합니다. 뷰 라우터는 뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리입니다. vue 프로젝트 내부에서는 미리 url를 정의하고, 각 주소마다 vue 페이지를 연결해 놓습니다. Vue는 vue에서..
-
[Python] Programmers 자동완성알고리즘/문제풀이 2021. 8. 20. 22:41
1. 문제 링크 https://programmers.co.kr/learn/courses/30/lessons/17685 코딩테스트 연습 - [3차] 자동완성 자동완성 포털 다음에서 검색어 자동완성 기능을 넣고 싶은 라이언은 한 번 입력된 문자열을 학습해서 다음 입력 때 활용하고 싶어 졌다. 예를 들어, go 가 한 번 입력되었다면, 다음 사용자는 g programmers.co.kr 2. 문제 요약 검색어 자동완성으로 단어 리스트에서 찾을 때 총 몇 글자까지 입력해야 하는지 리턴한다. 3. 아이디어 정리 트라이 구조 생성 word_num = 0 - 현재 문자를 포함하는 단어 수 children = defaultdict(TrieNode) - 자식 노드 (dict 자료형) 트라이 구조에 단어들 넣기 (아래 그럼..
-
[Python] Programmers 124 나라의 숫자알고리즘/문제풀이 2021. 8. 20. 22:37
1. 문제 링크 https://programmers.co.kr/learn/courses/30/lessons/12899 코딩테스트 연습 - 124 나라의 숫자 programmers.co.kr 2. 문제 요약 기존 3진법 012와 다르게 124 나라에서는 124만 사용 가능하다. 10진법을 124 나라 숫자로 변환한다. 3. 아이디어 정리 124 나라 규칙을 찾아서 구현을 아래와 같이하였다. 3으로 나누어 떨어지지 않는 경우 나머지를 리스트에 넣는다. 3으로 나눈 몫을 n에 넣는다. 3으로 나누어 떨어지는 경우 4를 넣는다. 3으로 나눈 몫을 n에 넣는다. 몫은 1 제거해준다. 4. 문제 풀이 4-1. 내 풀이 def solution(n): result = list() while n: if n % 3 != ..