본문 바로가기
반응형

분류 전체보기714

컴포넌트 ( 같은 레벨에서의 통신 ) 같은 레벨에서의 통신은 어떻게 할 수 있을까? Root아래에 있는 자식끼리 서로 통신을 하는 방법은? 바로 1:1의 관계로 할 수 없고ㅡ Root를 통해서 거쳐가야 한다. 이때 앞에서 배운 props와 event를 사용한다. 보내는 쪽(from)은 event를 Root에게 보내면 Root는 받는 쪽(to)에 props를 보낸다. appContent의 component가 appHeader로 데이터를 보낸다고 가정한다. 1. 보내는 쪽에서 Root에 event 보내기 appContent에 정의되어 있는 component 내에는 template을 정의한다. ex) template : 'content pass' v-on을 통해 event를 발생시킨다는 것을 알 수 있으며, 우리는 passNum method를 만.. 2021. 1. 2.
컴포넌트 통신 ( v-bind와 v-on) Vue에서는 상위 컴포넌트, 하위컴포넌트가 존재한다. 어찌보면 당연한 것이다. 컴포넌트를 어렵게 이해할 필요 없이 고유한 데이터의 범위를 갖는다고 생각하면 된다. 특히, html 상에서 요소로 구분되어지는 부분에 해당한다고 할 수 있을 것이다. 상위 컴포넌트는 props를 하위 컴포넌트에 전달하며, 하위 컴포넌트는 event를 상위 컴포넌트에 전달한다. 컴포넌트를 왜 사용해야 할까? 컴포넌트로 캡슐화를 하여 독립성을 유지한다고 생각된다. 자신의 상위 컴포넌트가 아닌 엉뚱한 곳에서 호출이 되는 것을 막을 수 있다. *v-bind props의 경우, v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름"의 형태로 저장된다. ex) v-bind:propsdata="message" 프롭스 속성이름이란, .. 2021. 1. 2.
인스턴스와 컴포넌트 / MVVM Vue는 React에 비해 사용방법이 쉽다고 하여서 강의를 시작하였다. 기존의 Spring의 MVC 패턴과는 다르게 MVVM을 사용한다. View로 보여지는 부분들이 ViewModel 덕분에 Model에서의 수정이 이루어지는 즉시 반영된다. 특히, 인스턴스와 컴포넌트에 대한 개념을 확인한다. new Vue()라는... 일반적으로 우리가 아는 new를 이용한 인스턴스 생성이 있다. 컴포넌트는 프런트를 보다 쉽게 꾸미기 위해서 사용한다. 컴포넌트의 경우, 전역 컴포넌트와 지역 컴포넌트가 있다. 보통은 지역 컴포넌트로 사용을 한다. component는 단일 갯수를 나타낸다. 보통 여러 개를 정의하기 때문에 components를 사용하는 편이다. var vm = new Vue() 처럼 인스터스를 변수에 담지 말.. 2021. 1. 2.
Front-End와 Back-End 연계하기 JAVA, Spring 프로젝트이지만 webpack을 연동하여 Front-End를 적극적으로 활용한다. 또다른 내부의 Directory를 만들고 npm을 통해 webpack을 설치했다. 우리는 이제 보다 자연스럽고 체게적으로 front-end에 관한 코드들을 관리할 수 있다. node.js를 이용하므로 별도의 서버에 업로드 되고, 서버는 tomcat 중심으로 별도의 서버에 업로드 될 것이다. 이제 Front-End와 Back-End는 서로의 통신을 api를 통해서 어떻게 하는지 더 명확하게 구분이 간다. 그 역할은 Controller에서 이루어지기 때문에, @CrossOrigin를 선언해 주어야 한다. javascript 파일에서 async, await, join 등 이해하기 힘든 기술들이 나왔다. 이 .. 2020. 12. 22.
Union-Find(유니온-파인드) 유니온-파인드는 disjoint sets라는 서로소 집합을 구하는 문제입니다. 서로소 집합이 용어는 어렵지만 공통 원소가 없는 집합들을 뜻합니다. 다음 그림을 보면 8개의 원소가 있고 서로소 집합은 3개입니다. 다음과 같은 유형에서 사용하면 됩니다. (물론 DFS/BFS로도 풀이가 가능합니다!) * 연결 정보가 주어졌을 때 2개의 원소는 서로 같은 집합에 속해 있는가? * 연결 정보가 주어졌을 때 독립적인 섬의 갯수는 몇개인가? Union-Find 관련 문제는 해당 원소들의 부모 정보들을 저장, 비교, 업데이트를 통해서 해결합니다. 따라서 각각 원소들의 부모 정보에 대해서 특별히 신경써주시면 됩니다. Union(결합시키다) : 해당 원소들의 parent를 비교하고 하나로 합칩니다. Find(찾다) : 해.. 2020. 11. 25.
1783 : 병든 나이트 ( 백준 / java ) www.acmicpc.net/problem/1783 1783번: 병든 나이트 첫째 줄에 체스판의 세로 길이 N와 가로 길이 M이 주어진다. N과 M은 2,000,000,000보다 작거나 같은 자연수이다. www.acmicpc.net *해결 과정 이 문제는 이동 칸수가 특이합니다. 결론적으로 오른쪽으로만 이동하는 구조입니다. 이 구조를 이용해서 문제를 풀어야합니다. 배열은 최대 각 길이가 20억이 될 수 있기 떄문에 배열을 만들면 터지게 됩니다. 그래서 얼마나 많이 오른쪽으로 잘 이동할 수 있는지 확인합니다. N,M과의 관계를 천천히 살펴봅니다. n=1 : 이동 불가이므로 1을 반환 n=2 : 2,3만 이동 가능하므로 최대 4번 이동 가능 m 2020. 11. 10.
연습문제 : 최고의 집합 ( 프로그래머스 / java ) *해결 과정 처음에는 이 문제를 중복 조합으로 접근하였습니다. 혹시 문제가 해결되지 않은 상태에서 이 글을 보신다면 간단하게 접근하여 다시 생각히시기 바랍니다. 아래 간단한 테스트 케이스도 첨부합니다. 힌트는 최대한 공평하게 수를 분배하는 것입니다!! 저도 갈피를 잡지 못해 다른 글을 참고하였고 다시 풀어서 맞았습니다. 참고로 효율성도 요구하는 문제이기 때문에 O(N)시간에 처리가 가능해야 합니다. *테스트케이스 n = 3 / s = 8 / 답 [2,3,3] n = 3 / s = 7 / 답 [2,2,3] n = 4 / s = 14 / 답 [3,3,4,4] 나머지가 있는 경우, 없는 경우 등등 많은 경우들을 나누어서 풀어보았습니다. 그렇게 조건을 걸어서 풀었더니, 제대로 풀리지 않았고 재귀를 생각하였습니다.. 2020. 11. 10.
Spring Framework란? 기본 핵심 개념 정리 스프링 프레임워크(Spring Framework)란 무엇인가? 1. IOC (Inversion Of Control) Framework code invokes application code during an operation and ask for application specific information instead of application calling the Framework code directly, hence control is inverted. An example of IOC is Template pattern via sub-classing. Spring IOC provides annotations based IOC as well. Inversion of Control is a principl.. 2020. 11. 10.
깊이/너비 우선 탐색(DFS/BFS) : 네트워크 ( 프로그래머스 / java ) programmers.co.kr/learn/courses/30/lessons/43162 코딩테스트 연습 - 네트워크 네트워크란 컴퓨터 상호 간에 정보를 교환할 수 있도록 연결된 형태를 의미합니다. 예를 들어, 컴퓨터 A와 컴퓨터 B가 직접적으로 연결되어있고, 컴퓨터 B와 컴퓨터 C가 직접적으로 연결되어 있 programmers.co.kr *해결 과정 해당 문제는 결론적으로 최적화된 풀이법은 union이라고 합니다. 하지만 저는 문제 유형처럼 DFS나 BFS를 활용하는 방법을 생각했습니다. 그렇게 BFS를 이용하기로 했습니다. 내가 임의로 시작한 0번 노드와 연결되어있는 노드들을 BFS로 쭉 검사하면 됩니다. BFS 함수 한번으로 해결하는 것이 아니라 일단 검사 자체는 주어진 n개를 모두 하는게 핵심입니다.. 2020. 11. 7.
반응형