네발로 코딩하는 포메라니안

1. 문제 https://www.acmicpc.net/problem/1765 1765번: 닭싸움 팀 정하기 1번 학생 혼자 팀, 2, 4, 6번 학생 셋이서 팀, 3, 5번 학생 둘이서 팀일 때, 팀의 개수가 최대이다. www.acmicpc.net 2. 풀이 과정 가장 많은 팀이 되는 경우 = 친구는 무조건 같은 팀이어야 하므로, 친구끼리만 같은 팀이고 나머지는 다 다른 팀 따라서, 친구만 찾아서 연결지어주면 된다. 친구인 경우 1) 친구의 친구는 친구 2) 원수의 원수는 친구 조건 1에서는 dfs로 친구의 친구의 친구 ... 까지 다 찾아야 한다. 하지만, 원수의 경우 자신의 원수의 원수만 친구이다. 즉, 나-친구-원수-원수는 친구의 친구지만, 내 친구가 될 수 없다. 실행 과정은 2번 조건인 원수의 ..

1. 문제 https://www.acmicpc.net/problem/11505 11505번: 구간 곱 구하기 첫째 줄에 수의 개수 N(1 ≤ N ≤ 1,000,000)과 M(1 ≤ M ≤ 10,000), K(1 ≤ K ≤ 10,000) 가 주어진다. M은 수의 변경이 일어나는 횟수이고, K는 구간의 곱을 구하는 횟수이다. 그리고 둘째 줄부터 N+1번째 줄 www.acmicpc.net 2. 풀이 과정 - h = Math.ceil(log2(N)) - tree_size = 2^(h+1) *h가 0부터 시작하기 때문에, h+1승 해준다. 1. 세그먼트 트리 생성(초기화) public static long init(int node, int start, int end) { if(start==end) { tree[n..

1. vue-cli 프로젝트 구조 .vue(컴포넌트)가 views 폴더와 components 두 군데에 분리되어 있는 것을 볼 수 있다. views = router의 컴포넌트, components = 컴포넌트의 컴포넌트라고 할 수 있다. 실행할 때는, 여러 파일에 작성된 코드를 webpack으로 index.html이라는 하나의 파일로 만들어 실행한다. 따라서 각 파일의 .vue 파일은 Component 하나당 파일 1개로 구현할 수 있도록 한다. template, js, css 코드를 하나의 파일로 작성하여 Component 하나를 만들 수 있다. 이를 SFC(Single File Component)라고 한다.

* v-on: == @ 1. 이벤트 수식어 1. @click.stop - 클릭 이벤트의 전파(Bubbling)를 막음 - stopPropagation()과 같음 예시) action1은 실행되지만, action2는 실행되지 않음 버블링 막기 +) stopPropagation() 사용 더보기 버블링 막기 2. @click.prevent - "기본" 이벤트의 자동 실행을 막음 ex) a태그 = 페이지 이동, form태그 = submit - preventDefault()와 같음 예시) action 메서드는 실행되지만, 페이지 이동은 일어나지 않는다. 네이버 +) preventDefault() 사용 더보기 네이버 - 두 가지 동시에 사용 가능 이동하기 - 메서드 없이, 수식어만 사용 가능 이동하기 2. 키 수식어..

1. 중첩된 라우터란? 라우터가 Component들을 전환하는 구간 안에, 또 라우터가 전환하는 구간이 있는 구조를 말한다. 아래 그림에서 Router1에서는 Main화면, Board화면을 바꿔주며, Router2에서는 Board안의 List, Detail 등으로 Component를 전환시켜준다. 2. 중첩된 라우터 구현 1. 파일 구성 *app.js = html에서 script코드를 분리한 것으로, router설정이 있음 2. Components 코드 1) test.html 더보기 HOME | 게시판 2) Main.js : 홈 화면 더보기 export default { template:`메인 페이지`, } 3) Board.js 더보기 export default { template: ` 게시판 페이지 `..

이전글 2022.05.13 - [웹프로그래밍/Vue] - [Vue] 10. Vue Router 기초 [Vue] 10. Vue Router 기초 1. Vue Router란? Single Page Application(SPA)를 구현하려면, 한 페이지에서 Component들만 교체해주면 된다. /a => /b로 변환될 때, router를 통해 전체 화면을 구성하는 Component를 바꿈으로써 페이지 이동을.. yerinpy73.tistory.com 이전글의 코드를 보면 테스트를 위해 한 component의 template을 짧게 작성하였다. 하지만 상용소스는 이보다 훨씬 길기 때문에, 한 파일에 모든 component를 작성한다면 복잡해진다. 각 Component마다 하나의 파일로 분리해서 작성해보자. 1..

1. Vue Router란? Single Page Application(SPA)를 구현하려면, 한 페이지에서 Component들만 교체해주면 된다. /a => /b로 변환될 때, router를 통해 전체 화면을 구성하는 Component를 바꿈으로써 페이지 이동을 구현할 수 있다. 2. 라이브러리 불러오기 1. CDN 방식 2. NPM 방식 npm install vue-router 3. 실행 과정 router를 활용한 제일 기본적인 화면을 구성해보았다. STEP 0. component 생성 더보기 const Main = { template:'메인 페이지', }; const Board = { template:'게시판 페이지', }; STEP 1. path & component를 맵핑하는 router ins..

1. Component란? 화면의 구성 요소들을 블록처럼 분리해서 정의한 후, 한 화면을 만들 때 필요한 요소들을 붙여넣기 위해 사용된다. 이때 블럭에 해당하는 것이 Component이다. Vue Component는 Vue Instance이므로 이에 해당하는 속성들과 Life Cycle Hook 모두 사용 가능하다. *단, data는 함수 형식으로 작성해야 한다. data(){ return{ msg:"지역 컴포넌트!", } } Component 명명 방식 1. Component 이름 = 파스칼(MyComp) | 케밥(my-comp) 2. Component 사용할 때, 태그 명 = 케밥(my-comp) *Component이름을 파스칼형식으로 작성할 경우, 대문자를 기준으로 잘라 케밥으로 전환하여 태그명이 ..

1. v-for와 v-bind v-bind:는 : 약식으로 사용함 좋아하는 색상을 선택하세요. {{value.value}} 선택한 색상 : {{checkedList}} 결과 화면

1. v-on 사용하는 방식 1. Inline 방식 클릭한 횟수 = {{cnt}}번 클릭 2. method 방식 v-on은 이벤트 발생 시, 처리해야 하는 method이름을 받아서 처리한다. 클릭한 횟수 = {{cnt}}번 클릭 3. Inline + method 방식 Javascript구문으로 method를 사용하는 방식으로, 위에서 2번보다는 1번에 가까운 방식이다. 이때, 이벤트를 호출한 타겟의 정보를 event라는 객체가 가지고 있다. 클릭한 횟수 = {{cnt}}번 클릭 2. @ 사용하는 방식 v-on: = @이고, 이 방식 또한 위 3가지 방식 모두 적용 가능하다. 예시 클릭