전체 글
[Vue] 차근차근 Todo List 만들기 with typescript - (2) List Component
TODO LIST 만들어보기 Vue with Typescript (뷰 + 타입스크립트) (2) List Component (Vuex 적용 전) 우선 기본적인 틀 (편리함을 위해 CLASS API 방식을 사용하겠습니다. 또한 Bootstrap 4를 사용하겠습니다.) ※ BootStrap 4를 적용시키는 방법은 nuxt.config.js 파일의 head 내 link 부분에 아래 코드를 추가해주시면 됩니다. { rel: 'stylesheet', href: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'} components/List.vue X ☞ Vuex를 적용해서 Store를 만들기 전에 미리 리스트로 보여줘야 하기 때문에 임시..
[Vue] 차근차근 Todo List 만들기 with typescript - (1) 구조 설계
TODO LIST 만들어보기 Vue with Typescript (뷰 + 타입스크립트) (1) ☞ 구조 설계 VueJS는 기본적으로 컴포넌트들을 만들어 애플리케이션을 만들기 때문에 어떤 컴포넌트들을 만들어야 할지 개발 전에 미리 설계를 해줘야 하기 때문에 이 글에서는 컴포넌트들을 어떻게 설계할지 PowerPoint로 만들어보겠습니다. ☞ Todo List의 기본 구조 : List Component : 우선 기본적으로 Todo List의 기본적인 기능인 아이템들을 리스트 형태로 보일 수 있도록 하는 컴포넌트 Create Component : Todo List의 List에 삽입을 하기 위한 컴포넌트 Header Component : 라우터 기능을 이용하여 Todo List의 아이템의 상태에 맞춰, 완료한 리..
[Vue] 차근차근 Todo List 만들기 with typescript - (0) 클래스 스타일 Vue 컴포넌트
TODO LIST 만들어보기 Vue with Typescript (뷰 + 타입스크립트) (0) ☞ 클래스 스타일 Vue 컴포넌트 Typescript는 JavaScript의 객체 지향적으로 개발할 수 있도록 보완해서 만든 Javascript Superset 언어입니다. 그렇기 때문에 이번 Todo List만들기는 Typescript를 이용할 것이기 때문에 컴포넌트를 선언할 때 클래스 기반 API를 사용해 클래스 스타일(Class Style) 로 구현을 해보겠습니다. (참고: https://kr.vuejs.org/v2/guide/typescript.html) TypeScript 지원 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 우선 클래스 스타일을 위해 vue-..
[React] 차근차근 Todo List 만들기 with Typescript- (1) 프로젝트 생성
TODO LIST 만들어보기 React with Typescript (리액트 + 타입스크립트) (1) ☞ 프로젝트 만들기 참고 영상 : https://www.youtube.com/watch?v=ODvirqIC09A 프로젝트 만들기 - CRA (create-react-app) 이용 yarn create react-app [프로젝트 명] --typescript or npx create-react-app [프로젝트 명] --template typescript yarn start or npm start 를 하면 아래와 같은 초기 페이지를 볼 수 있다. ☞ 기본적인 페이지를 없애고 새로운 페이지를 만들어보자 rm App.css App.test.tsx index.css logo.svg serviceWorker.ts..
[Vue] 상품 필터 구현하기 (feat. Typescript, ToastUI Chart)
☞ NuxtJS로 Typescript로 작성이 가능한 VueJS 애플리케이션을 만든 후 프로젝트를 진행하였습니다. ☞ 쇼핑몰에 상품이 많아 필터를 사용해서 효과적으로 상품을 찾아주는 기능을 구현해보았습니다. - 상품 목록 헤더를 클릭 해 정렬 가능 - 페이지네이션 - 한 테이블에 나올 수 있는 테이블 갯수 - 필터 기능 (판매가, 판매원가, 이름, 상품 등록일) - 필터에 맞게 만들어주는 Chart 기능 ( Toast UI Chart 사용) - 모바일 화면에 맞춘, 반응형 css ☞ 먼저, TypeScript를 이용해 VueJS 애플리케이션을 만들어본 적이 처음이었기 때문에 TypeScript에 대한 공부가 필요했었습니다. 그래서 Youtube와 인프런 강의를 참조하며 기본적인 기능들을 다뤄봤습니다. 또..
Union-Find, Disjoint Set (유니온-파인드, 상호 배타적 집합)
☞ Union-Find 란? 상호 배타적인 부분 집합(Disjoint Set)들로 나눠진 원소들에 대한 정보를 저장하고 조작하는 자료 구조 Union-Find에는 자료 구조에 명칭에 맞게 연산이 초기화(init), 합치기(union) 그리고 찾기(find)로 이루어져 있습니다. 초기화 : n개의 원소가 각각의 집합에 포함되어 있도록 초기화 합치기 연산 : 두 원소가 주어질 때 이들이 속한 두 집합을 하나로 합치는 연산 찾기 연산 : 어떤 원소가 주어질 때 이 원소가 속한 집합을 반환하는 연산 ☞ 상호 배타적 집합을 표현하는 방법은 2가지가 있는데, 첫번째는 배열입니다. 하지만 배열로 표현을 하면 합치기 연산에 드는 시간이 많이 걸리기 때문에 Union-Find 자료 구조 특성 상 효율적이지 못합니다. 그..