공부(2018~2019) - 스킨변경전

Vue.js 컴포넌트(1) 1. 컴포넌트 사용하기 컴포넌트 는 HTML 마크업, 자바스크립트 로직을 포함한 하나의 덩어리이다. 이를 통해 캡슐화 가 가능해지고 재사용성 이 증가한다. 컴포넌트는 Vue 오브젝트를 확장한 오브젝트이다. 1.1 글로벌 컴포넌트 Vue.component 는 컴포넌트를 글로벌 하게 등록하는 메서드이다. 주의할점은 컴포넌트에서 data를 정의할때 반드시 함수로 정의 해야 한다. 컴포넌트이름은 하이픈과 소문자로만 구성할 수 있다. 1.2 로컬컴포넌트 컴포넌트를 Vue 인스턴스 or 컴포넌트 옵션으로 등록해 컴포넌트 내부에서만 사용 하도록 지정할 수 있다. 1.3 제한사항 ul,table, select 등 일부 요소 내부에서는 컴포넌트를 사용할 수 없다. 이중 table에서 사용하려면..

1. 2631번 줄세우기(BOJ) 사용 알고리즘 : LIS 이 문제는 처음에 문제를 잘못 이해해서 더 어렵게 느껴졌다. 아이가 서로 swap 되는 정렬이 아닌 단순히 이동시키는 것이었다.LIS라는 힌트를 보고 이미 순서대로 서있는 아이들을 제외한 아이들 모두 움직이는 것이 최소라는 것을 통해 풀 수 있었다. 문제에 대한 접근&생각아이들의 순서를 오름차순, 이동 시킬 아이의 최소 -> 정렬? -> 최대 500명 -> DP!아이를 이동시킴 -> 이 뒤에 아이들은 밀림 -> 포함되지 않는 조건!이미 순서대로 있는 아이들 제외 한 나머지 아이들 이동 -> LIS! 코드 1234567891011121314151617181920212223242526272829303132333435363738394041424344i..

1. 11066번 파일합치기(BOJ) 사용 알고리즘 : 구간합, DP 1차원을 2차원 DP로 생각해야하는 문제 , 정답률이 50퍼센트여서 쉬울 줄 알았는데 되게 어렵게 느껴졌다, 다른 블로그를 보면서도 이해가 잘 되지 않았는데 3중 for문 구간합이 섞여있어서 더 그랬던 것 같다. 문제에 대한 접근&생각파일의 개수는 500개, 2개씩 처리 ( 순서상관없이) -> 경우의 수가 너무 많음 -> DP!DP[j][i] = min(DP[j][i], DP[j][k] + DP[k+1][i])-> j와 i 구간의 최솟값!지정한 곳 사이의 값들의 합이 필요 -> 구간합! 코드 123456789101112131415161718192021222324252627282930313233343536import java.util.S..

Javascript Closer 1. 클로저란 변수의 유효 범위를 확장하는 기능이다. 간단하게 외부에서 계속 필요로 하는 지역변수를 파괴하지 않고 남겨두는 것이다. 1.1 예시 function f(){ let k=10; } f(); console.log(k); 위의 실행결과는 k는 정의되지 않은 함수가 나온다. 그 이유는 k의 스코프는 함수 f내에 있기 때문이다. function f(){ let k = 10; function inner(){ k = 5; console.log(k); } return inner; } f(); // 1 var clr= f(); clr(); // 2 1번은 실행 되지 않는다. 왜냐하면 inner함수는 f함수에 속해 있기때문에 return 하면 이미 f함수는 종료되기 떄문이다. ..

1. 6359번 만취한 상범(BOJ) 사용 알고리즘 : DP 배수 규칙을 이용하는 기초 DP 문제, 다른사람 코드들도 방식만 다르고 같은 원리를 이용했다.i*j 는 i의 배수가 여러 부분에서 활용이 가능한 것 같다. 문제에 대한 접근&생각매라운드 마다 K번째 배수로 방문의 상태가 변함 -> DP! (i*j는 i배수) -> 마지막에 결과값이 누적! 코드 1234567891011121314151617181920212223242526272829import java.util.Arrays;import java.util.Scanner; public class Main { public static void main(String[] args) { Scanner sc = new Scanner(System.in); int..

1. 11048번 이동하기(BOJ) 사용 알고리즘 : DP 2019/05/27 - [공부/Algorithm] - 206. 보행자천국(Programmers) 단순히 DP문제를 풀려고 했는데 신기하게 어제푼 문제랑 비슷했다. 어제 푼 문제의 기초 버전 느낌이 든다... 무엇보다 경로느낌이 들면 DFS, BFS로 접근하려고 하는데 이제는 DP 먼저 생각을 해야겠다. 문제에 대한 접근&생각(1,1) 부터 (n,m) 까지 최댓값 -> DFS, BFS? -> n과 m이 최대 1000 -> DP!대각선으로 내려오는 경우, 왼쪽에서 오는 경우, 위에서 내려오는 경우 중 최댓값-> DP(i,j) = Max[DP(i-1,j-1),DP(i-1,j),DP(i,j-1)! 코드 1234567891011121314151617181..

Javascript Promise 1. Promise 란 javascript는 비동기형태 이므로 이전 함수가 실행이 끝나지 않아도 다음 함수가 실행된다. 이런 함수의 콜백을 제어하는 객체가 Promise 이다. 1.1 예시(1) 영화진흥원의 Open REST API 예시를 요청해서 boxofficeType만 추출해서 화면에 나타내는 코드이다. 비동기 형태로 실행되므로 화면에는 아무것도 출력되지 않는다. 이를 해결하기 위해 콜백함수를 이용한다. function getData(callbackFn) { $.get(url, function(response){ console.log(response.boxOfficeResult.boxofficeType); callbackFn(response.boxOfficeResu..

1. 보행자천국(Programmers) 사용 알고리즘 : DP 예전에 많이 풀어봤던 경우의 수 누적 문제인 것 같아서 같은 방식으로 접근했지만 시간초과가 발생한 문제 단순히 2차원 배열 두개로 흐름을 나눠서 누적 방식도 이중포문만으로 구성해서 O(N^2)로 할 수 있는 것을 보고 놀라웠다. 문제에 대한 접근&생각m, n의 최대 크기 500 -> 한번 방문했던 곳은 재방문 없이 경우의 수만 처리 -> DP!DFS 형태로 구현 -> 시간초과! -> 2차원 배열 누적형태 ! 코드 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697..

Vue.js 템플릿 문법(2) 1. 이벤트 핸들링 1.1 v-on v-on은 v-on:이벤트="스크립트" 형태로 사용하고 메서드도 바인딩이 가능하다. v-on 대신에 @ 를 써써 생략할 수 있다. {{num}} 1.2 이벤트 수식어 상황에 맞는 간단한 이벤트 수식어를 제공한다. 자식태크 -> 부모태크은 캡쳐링, 부모태그 -> 자식태그는 버블링 (HTML DOM 이벤트전파) 2. 모델 폼 입력을 편리하게 도와주는 v-model이라는 디렉티브를 제공한다. v-model은 폼과 데이터를 바인딩하는 디렉티브이고 양방향 형태 를 가진다. 초기에 요소 속성에 정의된 값은 무시하고 데이터값이 우선시 된다. 한글 입력시 한글자가 완성될때만 반영되므로 이때는 v-on:input 을 사용해야한다. {{msg}} // He..

1. 캠핑(Programmers) 사용 알고리즘 : 좌표압축, 구간합 다른 블로그를 보면서 힘겹게 이해한 문제, 일반적인 알고리즘보다 확실히 어렵다는 느낌이 들었다.이문제를 풀면서 좌표압축하는 방법을 확실하게 알 수 있었다.(배열의 인덱스가 아닌 상대적 위치만 필요로 할때 사용) 문제에 대한 접근&생각좌표의 범위가 2^31-1 이고 대각선으로 떨어져 있으면 텐트를 만들 수 있음 -> 좌표압축!내부에 쐐기가 있는 경우 제외, 경계에 있는 쐐기는 허용 -> 결과조건!내부에 쐐기가 있는 경우에 대한 예외처리 -> 구간합! 코드 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556..

Vue.js 템플릿 문법(1) 1. 템플릿 문법이란? 템플릿은 실제 화면에 보일 HTML 틀 이라고 할 수 있다. 일정한 규칙 에 의해 해석되는 HTML 문서를 템플릿이라고 한다. 템플릿 문법을 사용하면 만들어진 데이터를 이용해 템플릿 블럭내에 DOM 조작이 가능하다. 템플릿 문법은 주로 디렉티브로 이루어져 DOM 엘리먼트에 속성을 추가하는 것을 의미한다. 2. 데이터 바인딩 Vue인스턴스의 데이터를 연결하는 것을 의미한다. Mustache, v-text, v-html, v-bind가 주로 사용된다. 2.1 Mustache 두개의 중괄호{{}} 로 자바스크립트 표현식을 감싸면 Vue.js가 템플릿을 컴파일하면서 데이터 값을 바인딩한다. 값이 변경되면 변경된 값으로 다시 렌더링을 진행한다. 2.2 v-te..

Vue.js 인스턴스 1. 소개 Vue.js는 웹애플리케이션 제작을 쉽게 하도록 도와주는 자바스크립트 프레임워크 이다. view 부분에만 초점을 맞춰 DOM의 데이터를 관리해주거나 템플릿 문법을 통해 DOM을 조작 할 수 있다. 가장 큰 장점은 단일 파일 컴포넌트 이다. 각각의 컴포넌트 조합으로 view를 구성 할 수 있다. 2.1 Vue 인스턴스란? 오브젝트는 추상적으로 대상을 표현하고 인스턴스는 지정된 오브젝트 하나 를 의미한다. Vue 인스턴스는 Vue 오브젝트 하나를 의미하고 Vue 앱의 진입점이 된다. 간단한 템플릿 렌더링 부터 데이터바인딩,컴포넌트 등 많은 동작을 한다. 2.2 인스턴스 생성 Vue 인스턴스를 생성할떄 데이터, 템플릿 메서드 등 옵션값을 전달할 수 있다. el은 Vue 인스턴스..