초코레

뷰는 컴포넌트로 화면을 구성하고 있기 때문에 같은 웹 페이지라도 데이터를 공유할 수 없다. 컴포넌트마다 자체적으로 고유한 유효 범위(scope)를 갖기 때문이다. 따라서 각 컴포넌트의 유효 범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수 없다. 뷰 프레임워크 자체에서 정의한 컴포넌트 데이터 전달 방법을 따라야 한다. 상위(부모) - 하위(자식) 컴포넌트 간의 데이터 전달 방법 지역 또는 전역 컴포넌트를 등록하면 등록된 컴포넌트는 하위 컴포넌트가 되고 하위 컴포넌트를 등록한 인스턴스는 상위 컴포넌트가 된다. 인스턴스에 새로운 컴포넌트를 등록하면 기존에 있는 컴포넌트는 상위 컴포넌트가 되고, 새로 등록된 컴포넌트는 하위 컴포넌트가 된다. 이렇게 새 컴포넌트를 등록한 인스턴스를 최상위 컴포..

지역(Local) 컴포넌트는 특정 인스턴스에서만 유효한 범위를 갖고, 전역(Global) 컴포넌트는 여러 인스턴스에서 공통으로 사용할 수 있다. 전역 컴포넌트 등록 전역 컴포넌트를 모든 인스턴스에 등록하려면 Vue 생성자에서 .component()를 호출하여 수행한다. 1 2 3 Vue.component('컴포넌트 이름', { //컴포넌트 내용 }); cs 컴포넌트 이름 : HTML에서 사용할 사용자 정의 태그 이름을 작성한다. 컴포넌트 내용 : 컴포넌트 태그가 실제 화면의 HTML 요소로 변환될 때 표시될 속성들을 작성한다. template, data, methods 등 인스턴스 옵션 속성을 정의할 수 있다. 뷰 라이브러리 파일 로딩 → 뷰 생성자로 컴포넌트 등록 Vue.component() → 인스턴..

뷰 인스턴스는 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위이다. new Vue()로 뷰 인스턴스를 생성한다. 이때 Vue를 생성자라고 하며, 뷰 라이브러리를 로딩하고 나면 접근할 수 있다. 뷰의 필요한 기능들을 미리 정의해 놓고 그 기능들을 재정의하여 편리하게 사용하기 위해 생성자를 사용한다. 뷰 인스턴스 옵션 속성은 인스턴스를 생성할 때 재정의할 data, el, template 등의 속성을 의미한다. 인스턴스의 유효 범위는 el 속성으로 지정한 HTML의 범위 안에서만 옵션 속성들이 적용된다. 뷰 라이브러리 파일 로딩 → 인스턴스 객체 생성(옵션 속성 포함) → 특정 화면 요소에 인스턴스를 붙임 → 인스턴스 내용이 화면 요소로 변환 → 변환된 화면 요소를 사용자가 최종 확인 뷰 인스..

웹 페이지 화면을 개발하기 위한 프런트엔드 프레임워크 화면단 라이브러리이자 프레임워크라고도 볼 수 있다. 프레임워크 : 개발 생산성을 높이기 위해 일정한 틀과 규칙에 따라 개발하도록 미리 구조를 정의해 놓은 도구 라이브러리 : 자주 사용되는 기능들을 모아 재활용할 수 있도록 정리한 기술 모음집 뷰 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원하지만 프레임워크의 기능인 라우터, 상태 관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공된다. 즉, 라이브러리 역할 뿐만 아니라 프레임워크 역할도 할 수 있다. Vue.js의 장점 리액트와 앵귤러에 비해 배우기 쉽고 성능이 우수하고 빠르다. 앵귤러의 데이터 바인딩 특성과 리액트의 가상 돔(Virtual DOM) 기반 렌더링 특징을 모두 ..

Do it! 자료구조와 함께 배우는 알고리즘 입문 자바 편 IT 기업, 모든 시험에서 기초가 되는 자료구조와 알고리즘의 개념을 한 권에 모두 담았다!국내 IT 기업의 면접, 코딩 시험에서 중요하게 생각하는 역량 가운데 하나는 자료구조와 알고리즘이다. 자료구조와 알고리즘은 머리로 개념만 이해한다고 바로 실전에 사용할 수는 없다. 하나씩 자신의 손으로 코딩하고 결과를 확인하며 컴퓨터가 어떻게 데... www.yes24.com 준마는 하루에 천리를 가지만 둔마도 열흘 동안 부지런히 가면 천리를 갈 수 있다. - 순자 책을 펼치면 맨 앞에 나오는 글귀다. 내가 좋아하는 말과 비슷해서 머리에 콕 박혔다. 자료구조와 알고리즘에 대해 자바로 공부하고 싶다면 입문용으로 읽기에 좋다. 코드에 대한 꼼꼼한 설명과 그에 대..

Hello Coding 그림으로 개념을 이해하는 알고리즘 알고리즘은 쉽게 말해 어떤 문제를 해결하기 위한 명령을 모아 놓은 것이다. 이 책에서 다루는 알고리즘은 다른 코드보다 속도를 빠르게 하거나 아주 흥미로운 문제를 풀기 위한 것이다. 정렬 및 탐색과 같은 작업부터 시작해서 동적 프로그래밍 및 추천 시스템과 같은 훨씬 복잡한 문제를 해결할 수 있는 방법을 배울 수 있다. www.yes24.com 제목에 이 책의 주제를 다 함축하고 있다. 말그대로 알고리즘의 흐름을 그림으로 친절하게 설명하고 있어 술술 읽힌다. 글 읽기 싫어하는 나 조차도 빠른 시간 안에 완독할 정도 다만 알고리즘의 감을 어느 정도 알게 해주고 더 자세하고 추가적인 알고리즘은 마지막에 설명만 해준다. 알고리즘의 가이드라인을 잡아주는 정도..

검색과 데이터의 추가와 삭제도 효율적으로 수행할 수 있는 방법 키 값을 해시 값으로 만드는 과정을 해시 함수(hash function)라고 한다. 해시 값(hash value)은 데이터에 접근하기 위한 인덱스 해시 값이 인덱스가 되도록 원래의 키 값을 저장한 배열이 해시 테이블(hash table) 해시 테이블의 각 요소를 버킷(bucket)이라고 한다. 키 값과 해시 값은 반드시 1 대 1로 대응되지 않는다. 저장할 버킷이 중복되는 현상을 충돌(collision)이라고 한다. 해시 함수는 가능하면 해시 값이 치우치지 않도록 고르게 분포된 값을 만들어야 한다. 충돌이 발생할 경우 체인법과 오픈 주소법으로 대처할 수 있다. 체인법(chaining) 같은 해시 값을 같는 데이터들을 사슬(chain) 모양으로..

트리란? 데이터 사이의 계층 관계를 나타내는 자료구조 모든 노드가 가지는 자식 노드 수가 n 이하인 트리를 n진 트리라고 한다. 모든 노드의 자식 수가 2개 이하인 경우는 특별히 이진 트리라고 한다. 형제 노드의 순서를 따지면 순서 트리(ordered tree), 따지지 않으면 무순서 트리(unordered tree)라고 한다. 순서 트리의 노드를 스캔하는 방법은 너비 우선 탐색과 깊이 우선 탐색이 있다. 너비 우선 탐색 낮은 레벨에서 시작해 왼쪽에서 오른쪽 방향으로 검색하고 한 레벨에서의 검색이 끝나면 다음 레벨로 내려가는 탐색 방법 깊이 우선 탐색 리프까지 내려가면서 검색하는 것은 우선순위로 하는 탐색 방법 언제 노드를 방문할지에 따라 세 종류로 구분한다. 전위 순회(Preorder) : 노드 방문 ..

원형 리스트 : 연결 리스트의 꼬리 노드가 머리 노드를 가리키는 자료구조. 고리 모양으로 나열된 데이터를 저장할 때 알맞은 자료구조이다. 이중 연결 리스트 : 각 노드가 다음 노드에 대한 포인터와 앞쪽 노드에 대한 포인터를 가지고 있는 자료구조. 양방향 리스트라고도 한다. 원형 이중 연결 리스트는 이 두가지의 개념이 합해진 구조이다. 원형 이중 연결 리스트에서는 노드의 삽입과 삭제 처리를 원활하게 하도록 리스트의 머리에 계속 존재하는 더미 노드를 가진다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 ..

포인터로 만든 연결 리스트는 노드의 삽입과 삭제를 데이터 이동 없이 수행한다는 특징이 있지만 삽입과 삭제를 수행할 때마다 노드용 객체를 위한 메모리 영역을 만들고 해제하는 과정이 필요했다. 만약 데이터 수가 크게 바뀌지 않고 데이터 수의 최댓값을 미리 알 수 있다고 한다면 배열을 사용해 연결 리스트를 만들 수 있다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 7..