1. 조건부 렌더링 1) v-if, v-else-if, v-else : 해당 블록을 조건부로 렌더링하는 데 사용 Vue is awesome! Oh no 😢 - v-else는 v-else-if나 v-if 다음 블록에 와야 인식이 된다. ✅ template - template는 요소들을 래핑해주는 역할로 template 자체는 dom에 보이지 않는다. Title Paragraph 1 Paragraph 2 - v-if가 ok면 내부 요소만 렌더링 된다. 2) v-show - 요소를 조건부로 표시하는 다른 옵션 Hello! 📌 v-show와 v-if 비교 v-show는 요소가 항상 렌더링 되고, dom에 남아있다. 👉 초기렌더링 비용 ↑, 화면 전환 비용 ↓ v-if 문은 조건이 만족하지 않을 경우 요소가 렌더..

1. Computed : 계산된 데이터 - Vue 내부에서 캐싱 기능을 제공하기 때문에 반복된 계산은 한번만 일어난다. - 계산된 데이터는 의존성을 가지고 있다. 1) 사용 방법 {{count}} {{double}} {{double}} // 한번만 계산된다. 2) getter, setter 사용하기 data() { return { firstName: "Leon", lastName: "Miller", }; }, computed: { fullName: { get() { return `${this.firstName} ${this.lastName}`; }, set(newValue) { const names = newValue.split(" "); this.firstName = names[0]; this.last..

01장 - 프로그래밍 프로그래밍은 요구사항의 집합을 분석해 적절한 자료구조를 이용하여 흐름을 제어하는 것 02장 - 자바스크립트란? 1. 역사 넷스케이프 커뮤니케이션즈의 모카 👉 라이브스크립트 👉 자바스크립트 2. 표준화 ECMA 인터내셔널(컴퓨터 시스템 표준화 관리)에서 ES1 ~ ES6까지 발전해옴 3. 성장 초창기 자바스크립트는 웹페이지의 보조적 역할 Ajax : 서버와 브라우저가 비동기방식으로 데이터 교환 jQuery : DOM을 더욱 쉽게 제어 V8 자바스크립트 엔진 : 더욱 빠른 성능 Node.js : 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경 SPA 프레임워크 : CBD방법론을 기반한 SPA가 대중화 되면서 여러 프레임워크/라이브러리 등장 4. ECMAScript 자바스크립트 표준..

📘 Vue 란? : 사용자 인터페이스를 구축하기 위한 JavaScript 프레임워크 중 하나 선언적 렌더링(Declarative Rendering): Vue는 표준 HTML에서 JavaScript 상태(State)를 기반으로 화면에 출력될 HTML을 선언적으로 작성 가능 반응성(Reactivity): 상태가 변경되면 DOM(화면)을 가상 DOM을 이용하여 효율적으로 업데이트함 1. 시작하기 - 본 강의에서는 CDN을 사용하였다. 1) 기본 문법 {{ message }} ✅ createApp() - data는 Vue의 인스턴스가 사용할 정보를 담고있는 속성으로 객체/함수 형태이다. - 위 예제에서는 message라는 변수를 선언했다. ✅ mount() - 앱 인스턴스를 렌더링한다. - mount()가 실행..

SCSS - 재활용 1. @mixin 과 @include : CSS 스타일 시트에서 재사용할 CSS스타일 그룹 선언을 정의하는 기능 1) 기본 형태 - @mixin 으로 스타일 정의하고, @include를 이용하여 불러옴 * sass에서는 @mixin이 =, @include는 + 형태이다. @mixin { ... } @mixin 이름() { ... } @include () ex) 매개변수 없는 형태 ex) 매개변수 있는 형태 - 매개변수가 있는 형태면 include로 불러올 때 매개변수 있어야 한다. - mixin 선언 시 매개변수에 기본 값 지정 가능하다. 2) 응용 형태 ① 가변 인수를 사용하는 형태 - 가변 인수 : ... (전개)연산자 이용 @mixin bg($w, $h, $b...) { widt..

CSS 변수 1. CSS 변수 선언 방법 : 2개의 -를 앞에 붙인 속성의 이름과 함께 선언 element { --main-bg-color: brown; } - 선택자는 사용자 속성을 사용할 수있는 범위를 뜻한다. * root(html) : 최상위 요소를 선택하는 가상 선택자 * 명시도 : 해당 요소에 가장 연관된 속성을 찾는 수단 (스타일 우선순위) 👉 !important >> inline style >> id >> class >> tag(요소) - 유효범위 안에서만 속성을 오버라이딩 할 수 있다. CSS @supports 1. @supports : css 기능을 브라우저가 지원하는지 따라 다른 스타일 선언을 할 수 있는 방법 (기능 쿼리) @supports (기능) and (기능) and (기능) {..

history API 1. history API : 브라우저의 세션 기록을 조작할 수 있는 메소드를 담고 있는 객체 브라우저에서 페이지 로딩 시, 세션 히스토리를 가짐 세션 히스토리는 페이지 이동할 때마다 쌓인다. pushState, replaceState 의 함수로 화면 이동 없이 현재 url를 업데이트 할 수 있음 👉 이러한 특성으로 싱글 페이지 애플리케이션(SPA) 가 가능해진다. hashbang url 형식에서 벗어날 수있다. ( / => HomePage, /detail => DetailPage) 일반 url형식을 따르기 때문에 쿼리스트링도 자유롭게 붙일 수 있다. * hashbang이란 ? : 말그대로 해시(#)와 뱅(!)이 합쳐진 단어로 단일 페이지 애플리케이션(SPA)를 구현하기 위해서 사용..

Module 1. import - export 키워드로 내보내진 변수, 함수 등등을 불러올 수 있는 키워드 import name from "module-name"; // module-name 내 export default로 내보내진 것을 가져옴 import * as allname form "module-name"; // allname 이름으로 지정하여 export 된 것을 가져옴 export const NAME = 'EUNA' export const AGE = '24' // 함수 export export default function 함수이름 () { } import { loadItem } from "module-name" // 모듈내 export된 것 중 특정 값만 가져옴 import loadItem ..

컴포넌트 방식으로 생각하기(w. To do list) 1. To-do 리스트를 추상화 하기 - UI를 선언적으로 표현하기 위해 TO-DO 리스트를 Header, TodoFrom, TodoList, App의 4가지로 추상화 👉 컴포넌트의 재사용 가능, 기능 추가시 간편 1) TodoList 컴포넌트 만들기 ◼ 명령형 코드 방식 function TodoList(params) { const $todoList = document.createElement('div'); const $target = params.$target; $target.appendChild($todoList); this.state = params.initialState; this.render = () => { ..