코드존 코드존

VUE3 와 Typescript를 사용하여 토이 프로젝트 만들기 회사에서 2년 넘게 Vue2와 Javascript로 개발하다가 자기 개발 겸.. 공부 겸.. Vue3와 Typescript로 해보려고 하니 Vue3에 추가된 기능도 많아보이고.. Typescript는 또 나름대로 낯설고 하니.. 블로그에 정리를 해봐야 겟다..! 1. npm을 사용하여 Vue3 + Typescript 세팅하기 // cmd 창 P:\> npm init vue@latest 2. 원하는 옵션 선택 Project name - 폴더 이름 Package name - 프로젝트 생성 후 package.json 파일에서 name 3. 그 이후는 그냥 하라는 대로 진행 끗-!

$router.push() 를 사용하여 페이지를 이동, params 데이터를 함께 전달하자! 특정 버튼 클릭 시, 특정 페이지로 이동하는 로직을 적용하는 도중, 해당 페이지에 탭이 생겨버렸고... 1번 버튼 클릭 -> A 페이지 A-1 탭으로 이동 2번 버튼 클릭 -> A 페이지 A-2 탭으로 이동 을 적용하기 위해, 현재 적용한 로직 $router.push에 params로 type값(A-1, A-2)을 넣어주기로 했다. switch (key) { case '1번': { this.$router.push({ path: '/page/A', params: { type: 'A' } }) break; } case '2번': { this.$router.push({ path: '/page/A', params: { t..

Javascript의 Class를 알아보자. Javascript에서 Class는 잘 안쓰이긴 하지만, Typescript를 공부하다보니 자연스럽게 Javascript의 Class에 대해서 찾아보게 되었다. Class란? 객체(Object) 생성을 위한 템플릿. 다양한 개별 인스턴스를 생성. Typescript의 인터페이스나 타입 별칭(alias)과 다른 개념. Constructor (생성자) 인스턴스로 생성된 객체를 초기화 하기 위한 특수 함수. new로 생성한 인스턴스에 파라미터로 넣어준 값들을 초기화 하며 저장. class TempClass { constructor () { ... } } class TempClass { constructor (first, last) { this.first = firs..

Spread 연산자(...) 란 ? 구조분해할당이란 ? 📌 Spread 연산자 const fruits = [ 'apple', 'banana', 'watermelon' ] const newFruits = [ ...fruits, 'mango' ] // newFruits = [ 'apple', 'banana', 'watermelon', 'mango' ] - ... 을 사용하여 해당 변수의 데이터를 복사한다. const fnc = (...args) => args const arr = fnc(1, 2, 3) // arr = [ 1, 2, 3 ] - 함수의 parameter로 spread 연산자를 사용하면 입력된 매개변수들이 배열로 합쳐진다. 📌 구조분해할당 const fruits = [ 'apple', 'bana..

차세대 Javascript의 모듈식 코드 작성법 Export & Import 📌Javascript module 가져오기 // person.js const person = { name: 'Max' } export default person - default 구문을 사용하여 person 객체를 기본 내보내기 - 기본 내보내기(default)는 어떤 이름으로도 Import 해올 수 있다. // utility.js export const clean = () => {...} export const baseData = 10 - 각각에 export를 달아 각 모듈을 이름 내보내기 - 정의한 이름으로 Import 해올 수 있다. // app.js import person from './person.js' import ..

프로젝트 구축 환경 세팅 개발을 시작하기에 앞서, 원활한 진행을 위해 필요한 라이브러리, 프레임워크 등을 세팅한다.

React + Typescript를 사용하여 프로젝트를 만들어보자. 1. 명령 프롬포트(cmd)를 사용해도 되고, 사용하는 개발 툴의 터미널을 사용해도 됨. npx create-react-app my-app --template typescript my-app : 프로젝트 명. 원하는 이름으로 수정 node version >= 14 (nvm 사용 권장) 2. 시작 npm start http://localhost:3000 으로 실행 3. 폴더 구조 my-app/ node_modules public/ favicon.ico index.html logo192.png logo512.png manifest.json robots.txt src/ App.css App.test.tsx App.tsx index.css in..

Bootstrap Table에 Filter 기능 추가 - 테이블에서 원하는 리스트만 조회 - write 기능이 있는 select box - selected된 조건이 중복 filter가 아니라 각각 filter