Do it! Vue.js 입문을 읽고 정리한 내용입니다. 뷰 라우터 기본 라우터 라우팅이란 웹 페이지 간의 이동 방법을 말하는 것으로 SPA에서 주로 사용하고 있다. 뷰 라우터는 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리이다. 뷰 라우터를 이용하여 뷰로 만든 페이지 간에 자유롭게 이동할 수 있다. : 페이지 이동 태그 : 페이지 표시 태그, 변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역 뷰 라우터 예제 Main 컴포넌트로 이동 Login 컴포넌트로 이동 url에 따라 페이지 깜빡임 없이 해당 컴포넌트로 이동하여 표시한다. 실제 웹 앱에서는 화면이 여러 개의 컴포넌트로 분할된 경우가 많기 때문에 여러 개의 컴포넌트들을 동시에 표시할 수 있는 라우터인 네스티드 라우터와 네임드 뷰..

싸피/SSAFY 8기 전공자 합격 후기 8기 전형은 아래 순서로 진행되었다. 2022.05.17(화)~21(토) : 에세이 접수 2022.05.29(일) : SW적성진단-코딩테스트(전공자) 2022.06.10(금) : 적성진단 결과 발표 2022.06.20(월)~24(금) : 인터뷰 2022.06.29(수) 최종 결과 발표 에세이 삼성 청년 sw 아카데미에 지원하신 동기와 향후 어떤 sw개발자로 성장하고 싶은지에 대해서 sw관련 경험을 토대로 작성 바랍니다.(500자 내외) 나는 에세이에 다음 내용을 담았다. 싸피에서 어떤 sw 개발자로 성장하고 싶은지 SW 관련 경험 (동아리/프로젝트/인턴) 겪었던 어려움 왜 싸피인지, 싸피에서 어떤 것을 얻고 싶은지 기업 자소서가 아니기 때문에 내가 교육이 필요한 상..

Do it! Vue.js 입문을 읽고 정리한 내용입니다. 뷰 컴포넌트 컴포넌트란 컴포넌트란 조합하여 화면을 구성할 수 있는 블록을 의미한다. 컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있기 때문에 코드의 재사용성이 높아진다. 다른 사람이 작성한 코드를 직관적으로 이해할 수 있다. 컴포넌트 등록하기 컴포넌트를 등록하는 방법은 두 가지가 있다. Local : 특정 인스턴스에서만 유효한 범위를 갖는다. Global : 여러 인스턴스에서 공통으로 사용할 수 있다. 전역 컴포넌트 등록 전역 컴포넌트는 뷰 라이브러리를 로딩하고 나면 접근 가능한 Vue 변수를 이용하여 등록한다. 전역 컴포넌트를 모든 인스턴스에 등록하려면 Vue 생성자에서 .component()를 호출하여 수행한다. V..

Do it! Vue.js 입문을 읽고 정리한 내용입니다. 뷰 인스턴스 뷰로 화면을 개발하기 위해 필수로 생성해야하는 기본 단위 뷰 인스턴스 생성 {{message}} Vue 생성자를 이용하여 인스턴스를 생성한다. 아래와 같은 미리 정의되어 있는 속성을 사용할 수 있다. 뷰 인스턴스 옵션 속성 el : 뷰로 만든 화면이 그려지는 시작점 data : 전달할 데이터 template : 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성 method : 화면 로직 제어와 관계된 메서드를 정의하는 속성, 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가할 수 있다. created : 뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성. 뷰 인스턴스 유효 범위 뷰 인스턴스를 생성하면..

Do it! Vue.js 입문을 읽고 정리한 내용입니다. Vue.js vue.js란 뷰 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원하지만 프레임워크의 기능인 라우터, 상태 관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공된다. 따라서 점진적인 프레임워크라고 불린다. 앵귤러의 데이터 바인딩 특성과 리액트의 가상 돔 기반 렌더링 특징을 모두 가지고 있다. 특징 UI 화면단 라이브러리 뷰는 MVVM 패턴의 뷰 모델에 해당하는 화면단 라이브러리이다. MVVM패턴이란 Model - View - ViewModel로 화면을 구조화하여 개발하는 방식으로 DOM 리스너 : 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치 데이터 바인딩 : view에 표시되는 내용과 모..

https://vuejs.org/guide/typescript/overview.html#typescript-in-templates 읽고 필요한 부분만 정리한 내용 Using Vue with TypeScript General Usage Notes defineComponent() TypeScript가 component option들의 타입을 제대로 추론하기 위해서 컴포넌트를 선언할 때 defineComponent를 사용한다. import { defineComponent } from 'vue' export default defineComponent({ // type inference enabled props: { name: String, msg: { type: String, required: true } },..

https://vuejs.org/tutorial/#step-1 읽고 정리한 내용 Vue.js tutorial Getting Started SFC(Vue Single File Component)는 HTML, CSS, JS가 함께 캡슐화된 재사용 가능한 코드블럭으로서 .vue 안에 쓰인다. Vue의 가장큰 특징은 declarative rendering으로 template 태그를 이용해 HTML를 확장하여 js state에 따라 HTML이 자동으로 업데이트 되도록 할 수 있다는 점이다. {{msg}} {{}} 를 이용해 dynamic text를 렌더링할 수 있고 state명이 아니라 자바스크립트 표현식을 써도 된다. Attribute Bindings {{}}는 단순히 텍스트를 삽입하기 위함이고 dynamic ..

그래프 이론 서로소 집합 공통 원소가 없는, 상호 배타적인 부분 집합들로 나눠진 원소들에 대한 정보를 저장하고 조작하는 자료 구조가 바로 유니온- 파인드 자료구조이다. 서로소 집합 자료구조 union 2개의 원소가 포함된 집합을 하나의 집합으로 합치는 연산 find 특정 한 원소가 속한 집합이 어떤 집합인지 알려주는 연산 서로소 집합 정보가 주어졌을때 트리 자료 구조를 이용해서 집합을 표현한다. 서로소 집합 알고리즘 각 노드는 자기 자신을 부모 노드로 갖도록 초기화 한다. union을 확인하여, 서로 연결된 두 노드 A,B를 확인한다. A와 B의 루트 노트 A'와 B'를 각각 찾는다. A'를 B'의 부모 노드로 설정한다. (B'가 A'를 가르키도록 한다.) 트리가 한쪽으로 기울어지는 것을 방지하기 위해서..