본문 바로가기

분류 전체보기118

Vue-라우터 사용법 라우터 라우팅: 웹 페이지 간의 이동방법, 주로 SPA에서 주로 사용함 라우팅 사용시 매끄러운 화면 전환 가능 Vue 라우터 관련 특수 태그 URL : 페이지 이동에 사용하는 태그 : URL값에 따라 갱신되는 영역 var view1 = {template:'view1'}; var view2 = {template:'view2'}; var routes = [ {path: '/view1', component:view1}, {path: '/view2', component:view2}, ]; var router = new VueRouter({routes}); var app = new Vue({router}).$mount('#app'); view1 view2 view1 view2 링크를 클릭시 router-view영.. 2022. 10. 6.
Vue- 컴포넌트간의 통신 컴포넌트 기본개념 같은 페이지에 구성되어있는 컴포넌트라도 데이터를 공유하기는 어렵다. 각자의 유효범위가 존재함 컴포넌트간의 통신 방법에는 상.하위 컴포넌트 관계, 같은 레벨의 컴포넌트 간 통신으로 구분 상.하위 컴포넌트간의 데이터 전달 상위 -> 하위 : props 전달 하위 -> 상위: 이벤트 발생 상위->하위 컴포넌트 데이터전달 예제코드 new Vue({ el: '#app', data: { meg: 'hello' } }); Vue.component('child',{ props: ['data'], template: '{{data}}', }); #app 컴포넌트영역의 msg는 hello값을 가진다. child컴포넌트는 #app안에 구성되어있는 전역컴포넌트이다. 또한 하위 컴포넌트이다. child컴포넌트는.. 2022. 10. 6.
Vue- 컴포넌트 컴포넌트: 화면을 구성할 수있는 블록 -> 화면의 구조화, 일괄적인 패턴으로 개발가능 앞서 data, 메소드 등 Vue 를 구성할 수 있는 형식을 미리 만들고 컴포넌트에 추가함으로 코드 재활용 높음 전역 컴포넌트: 어느 범위든 지정한 컴포넌트 태그를 적용하고 싶을 때 사용가능 지역 컴포넌트: 특정 범위 내의 컴포넌트 태그에만 적용하도록 할 때 사용가능하다. 컴포넌트 안에 template, data, method 등 정의 가능하다. 전역 컴포넌트 등록 예시코드 var cmp = { template: '지역 컴포넌트' }; Vue.component('component_name', cmp}); 전역 컴포넌트는 어느 영역이든 모두 적용된다. 지역 컴포넌트 등록 예시코드 var cmp = { template: '.. 2022. 10. 4.
Vue 입문 Vue에 대한 기본문법을 이해할 때는 굳이 Vue 컴포넌트를 생성할 필요없이 html로 실습할 수 있다. new Vue({}); 를 뷰 인스턴스라고 한다. (Vue는 생성자) el속성을 사용해서 뷰 인스턴스와 관계된 부분을 명시한다. (#app를 이해하지 못한다면 CSS 문법 공부부터) data속성에 정의된 값들을 사용하고자 한다면 {{ 데이터이름 }}으로 사용할 수 있다. id=app : {{ message }} id=app2 : {{ message }} 위 코드블럭 실행 상태 (더보기 클릭) 더보기 HTML 삽입 미리보기할 수 없는 소스 2022. 10. 4.
BFS DFS 자바코드 가장 기초적인 BFS,DFS 알고리즘이 빠져있었다. 오랜만에 봤는데 기억이 잘 안나서 설명보단 코드를 기재한다. import java.util.ArrayList; import java.util.LinkedList; import java.util.Queue; public class BFS_DFS { static int[][] map; static boolean[] visit; static int N = 7; static int[] edge(int a,int b) { int[] re = {a,b}; return re; } public static void main(String[] args) { map = new int[7][7]; ArrayList edge = new ArrayList(); edge.add(.. 2022. 9. 30.
벨만 포드, 다익스트라, 프로이드 워샬 알고리즘 벨만 포드 알고리즘 다익스트라 문제처럼 한 지점에서 다른 지점까지의 최단 경로들을 구할 때 사용하는 알고리즘 다익스트라와 차이점은 가중치에 음수가 있는 경우에는 다익스트라를 쓰면 안되므로 벨만 포드 알고리즘을 쓴다. 다익스트라보다 구현은 훨씬 쉽다. 단순하게 (노드수-1)번만큼 반복하는데 반복하는 일은 다음과 같다. 방문한 노드에서 뻗어나오는 간선들을 통해서 최단경로가 갱신되는지 연산 시작하는 노드는 방문한 노드라고 처음에 설정하고 시작한다. 모든 간선을 확인할 필요는 없고 방문했던 노드와 연관된 간선들만 확인하면 되긴 하다. 벨만 포드 알고리즘 자체라고 생각하는 문제는 백준의 타임머신 문제이다. 11657번: 타임머신 첫째 줄에 도시의 개수 N (1 ≤ N ≤ 500), 버스 노선의 개수 M (1 ≤ .. 2022. 9. 28.