코드존 코드존

1. 단일 파일 컴포넌트에서 스타일 사용 2. 동적 컴포넌트 적용 3. provide와 inject 4. 비동기 컴포넌트 전역 스타일 : 다른 컴포넌트에서 동일한 CSS 클래스명을 사용한다면 충돌 발생 가능 태그 안에 작성한 스타일 main.js에서 import한 css 스타일 => 앱 전체의 공통 스타일 적용에 편리 동일한 CSS 클래스 이름이 여러 컴포넌트에서 사용되면 마지막 import된 컴포넌트의 스타일 또는 css 파일 속성 적용 범위 CSS 사용 클래스 이름을 기반으로 스타일 적용 => 클래스명이 내부의 $style 옵션에 객체로 등록되었고 객체의 속성은 작성한 CSS 클래스명 Child 등록해야 할 CSS 클래스가 여러 개라면 배열로 바인딩 동적 컴포넌트 : 화면의 동일한 위치에 여러 컴포넌..

Vue 인스턴스와 다양한 옵션 📌 Vue (애플리케이션) 인스턴스 - Vue.createApp 메서드를 호출하여 만들어진 객체 - 전체 컴포넌트 트리는 애플리케이션 인스턴스를 마운트할 때 렌더링 - 루트 인스턴스(애플리케이션 인스턴스의 최상위 컴포넌트)는 DOM 트리에 마운트되어야 화면으로 렌더링 => mount('id') 메서드 사용 const vm = Vue.createApp({ name: 'App', data () { return {} } }).mount('#app') 📌 옵션(options) 객체 - Vue 인스턴스를 생성할 때 전달하는 속성들을 담은 객체 data 옵션 컴포넌트가 관리하고 추적해야 할 데이터를 등록할 때 사용 반드시 객체를 리턴하는 함수로 부여 data에 대한 Proxy 직접 접..

ES5와 달라진 ES6 문법 📌 기본 파라미터와 가변 파라미터 - 기본 파라미터 function addContact( name, mobile, home = "없음", address = "없음", email = "없음" ) { let str = `name = ${name}, mobile = ${mobile}, home = ${home}, address = ${address}, email = ${email}`; console.log(str); } addContact("홍길동", "010-1234-5678") // name = 홍길동, mobile = 010-1234-5678, home = 없음, address = 없음, email = 없음 addContact("이몽룡", "010-1234-5678", "03..

var, let, const 변수란 ? 호이스팅이란 ? 📌 var 변수 - ES6(ECMAScript6) 등장 이전 주로 사용하던 변수 - 호이스팅(Hoisting)에 의한 Javascript 이해 난이도 상승 📌 호이스팅(Hoisting) - " 변수의 선언을 스코프(범위) 최상단으로 옮기는 행위 " - 코드의 실행을 호이스팅 단계 -> 실행 단계 로 구분 // 호이스팅 단계 1. JS 코드를 파싱(구문 분석) 2. var 키워드로 선언된 변수의 메모리 할당(변수 미리 선언) 3. Javascript 에서는 변수만 선언되면 undefined로 초기화 // 실행 단계 1. 호이스팅 단계에서 메모리가 할당되면 코드 실행 // 예제 console.log(A1); var A1 = "hello"; -> 결과 :..

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..

새로 생성한 react 프로젝트를 그대로 git에 올려보자 1. create-react-app을 사용하여 손쉽게 react 프로젝트를 생성할 수 있다. npx create-react-app을 하면 자동 git init이 실행되어 .git 폴더가 생성된다. .git 폴더는 안보일 수 있음! 폴더 -> 보기 -> 숨긴 항목 체크 되어있는지 확인~ npx create-react-app first-react-app 2. 깃 저장소를 생성한다. git init이 자동으로 되어있기 때문에, Add a README file은 선택하지 않았고 Add .gitignore도 none으로 진행했다. 만약 git init이 안되어 있다면 둘다 체크해주자! 3. main 브랜치를 생성해주자 -M main : main 브랜치 생..