Front-End Dev.
-
[Vue.js] Vuex - (1) Vuex 기본Front-End(Web)/Vue 2021. 6. 10. 01:28
드디어, Vuex 라고 하는 Vue.js의 상태관리 라이브러리를 학습하는 단계에 돌입했다! 다행인 점은, Context나 Redux를 사용해 보았기에 Vuex를 처음 접하는데 위화감은 덜 할 것 같다. 심지어, Redux의 Flux 패턴과 어느 정도 유사하면서도, 좀 더 간소화된 절차를 가진다는 것으로 선임 개발자님께 대략적으로 들었다. Redux와는 또 다른, Vuex만의 특징과 장점은 어느 것이 있을지 한 번 학습하면서 정리해보겠다! (분량이 길 시 포스팅 분리하겠다.) * 이 글은 캡틴판교님의 Vue.js 강의 및 블로그를 기반으로 학습한 내용을 정리하고 있습니다. 💚 Vuex 란? 공식문서에서는, Vue.js 애플리케이션의 복잡한 컴포넌트들을 관리하는 상태관리 패턴 + 라이브러리로 정의한다. 컴포..
-
[CodeKata] 프로그래머스 : 6.5(토), 셔틀버스Algorithm 2021. 6. 6. 17:50
🥋 Oooth More!! (Level 3) * 해설링크 : https://tech.kakao.com/2017/09/27/kakao-blind-recruitment-round-1/ 🧮 풀이 해당풀이로 풀었으나, 정답률이 87.5로 나왔다. (몇 가지 예외처리가 잘 안된듯) function toMinute(time) { time = time.split(":"); return time[0] * 60 + Number(time[1]) } function toTime(m) { return String(Math.floor(m/60)).padStart(2,'0') + ":" + String(m%60).padStart(2,'0') } function solution(n, t, m, timetable) { let kor..
-
[Vue.js] Template 문법Front-End(Web)/Vue 2021. 6. 3. 01:37
Vue에서도 React 처럼 state, props 등의 데이터를 HTML 요소에 바인딩할 수 있다. (이러한 연관성을 Reactivity 라고 칭한다.) 이러한 방법을 data를 활용한 선언적 바인딩이라고 한다. 이렇게 화면을 조작하기 위한 Vue의 문법들에 대해 학습해보았다. * 이 글은 캡틴판교님의 Vue.js 강의 및 블로그를 기반으로 학습한 내용을 정리하고 있습니다. 💚 Vue Template 위에서 언급한 선언적 바인딩을 포함해서 Vue로 화면을 조작하는 문법들을 "Vue Template" 이라고 한다. Template 문법은, 1) Vue 인스턴스에서 관리하는 데이터를 화면에 연결하는 데이터 바인딩, 2) 화면조작을 편하게 하게 해주는 Vue 디렉티브 2가지가 있다. 1. 데이터 바인딩 //..
-
[Vue.js] Vue RouterFront-End(Web)/Vue 2021. 6. 2. 15:04
이번엔 Vue에서 공식으로 라우팅을 담당하는 Vue Router에 대해 공부해보았다. Vue 역시 SPA 웹 어플리케이션 제작을 위한 프레임워크로, URL에 따른 페이지 컴포넌트 간의 라우팅을 지원할 것으로 예상된다. 또한, React 경우엔 필요한 기능을 수동적으로 추가했지만, Vue Router는 공식 라이브러리인 만큼 params, query 나 페이지 인터렉션 등 다양한 기능을 지원한다고 한다. * 이 글은 캡틴판교님의 Vue.js 강의 및 블로그를 기반으로 학습한 내용을 정리하고 있습니다. 💚 Vue Router 위에서 언급했듯, Vue Router는 Vue.js 공식 라우터 라이브러리다. SPA를 쉽게 구현하기 위해 코어와 긴밀하게 통합되어있다. - 기능 Vue 라우터 공식문서에서 소개하는 V..
-
[CodeKata] 프로그래머스 : 5.30(일), 순위 & 불량 사용자Algorithm 2021. 6. 1. 01:40
🥋 Oooth More!! (Level 3) : 순위 * 출처 : http://contest.usaco.org/JAN08.htm 🧮 풀이 그래프와 DFS를 통해 풀어보려 했으나 오답률이 높아, 모범답안을 보고 해석리뷰를 하였다. 🖇 리뷰 function solution(n, results) { var answer = 0; const graph = Array.from({ length: n+1 },() => Array(n+1).fill(false)); results.map((item) => { const [win,lose]=item; graph[win][lose]=1; //이긴 경우 1 graph[lose][win]=-1; //졌을 경우 -1 graph[win][win]=0;//자기자신 graph[lose]..
-
[Vue.js] 컴포넌트(Component), Props & EventFront-End(Web)/Vue 2021. 5. 26. 21:04
이번에는 비교적 친숙한! 뷰의 컴포넌트 개념에 대해 알아보고자 한다. React와 마찬가지로 화면을 구성하는 요소이다. 현대의 모던 프레임워크들은 대부분 컴포넌트 개념을 차용하고 있기 때문에 뷰 역시 이를 기반으로 하고 있는 것 같다. 컴포넌트와 관련된 개념과 영상이 많기 때문에 포스팅 분량이 길어지고 몇 부분으로 나눠질 것 같다. * 이 글은 캡틴판교님의 Vue.js 강의 및 블로그를 기반으로 학습한 내용을 정리하고 있습니다. 💚 Vue 컴포넌트 React와 마찬가지로 화면을 영역 단위로 쪼개서, 재사용 가능한 코드로 캡슐화하는 개념이다. 뷰에서 컴포넌트를 등록하는 방법은 2가지가 있다. 전역 등록, 지역 등록이 바로 그것들이다. - 전역 컴포넌트 // 전역 컴포넌트 Vue.component('컴포넌트..
-
[Vue.js] 인스턴스 (Instance), 라이프사이클(LifeCycle)Front-End(Web)/Vue 2021. 5. 26. 02:09
React는 파일(혹은 모듈) 자체를 클래스형, 함수형의 컴포넌트로 제작하는 방식이었다. 이와는 달리, Vue는 컴포넌트를 포함한 다양한 정보가 담긴 인스턴스(new Vue)에 정보를 담는 것으로 보인다. 이에 해당하는 Vue 인스턴스에 대해 학습 및 포스팅할 예정이다. * 이 글은 캡틴판교님의 Vue.js 강의 및 블로그를 기반으로 학습한 내용을 정리하고 있습니다. 💚 Vue 인스턴스 인스턴스는 뷰로 개발할 떄 필수로 생성해야 하는 코드라고 소개된다. Vue.js로 화면을 구성하기 위해 꼭 생성해야 하는 필수 단위인 것이다. new Vue() // 변수할당 var vm = new Vue({ // options... }); Vue 앱은 Root Vue 인스턴스를 기점으로, 선택적으로 중첩이 가능하고 재사..
-
[CodeKata] 프로그래머스 : 5.21(금), 디스크 컨트롤러Algorithm 2021. 5. 21. 18:30
🥋 Oooth More!! (Level 3) 🧮 풀이 확실히 3단계에 들어오면서 알아야 할 자료구조도 많다. 이번 우선순위 큐 문제도 그리하여, 모범답안과 함께 개념을 공부하였다. 🖇 리뷰 - 풀이 function solution(jobs) { var answer = 0; jobs.sort((a,b)=>a[0]-b[0]);// 첫 작업은 가장 먼저오는 걸로 const pq=[];//우선 순위 큐 (시작이 가능한 일들이 들어가며 작업시간 오름차순정렬됨) let i=0, time=0; while(i 자식노드가 부모 노드보다 무조건 크거나 작다. 하지만, 전체트리에서 가장 아래노드가 가장 크거나 작은 값은 아니라는 의미 * 최대 힙(Max Heap) : 부모 노드는 항상 자식 노드보다 크거나 같다. * 최소 ..