Input + Output = True

😎Javascript] 'use strict' ✅ 엄격모드 (use strict) 'use strict'는 자바스크립트에서 엄격모드를 실행한다 엄격모드란 선언하지 않은 변수를 사용할 수 없게 되는 등 자바스크립트 엔진에 엄격한 기준이 적용되는 것을 말한다 엄격모드의 사용 여부에 따른 차이점을 살펴보자 function test() { x = 5 } test() console.log(x) // 5 선언되지 않은 변수 x를 사용했기 때문에 에러가 출력될 것 같지만 실행해보면 정상 작동한다 자바스크립트 엔진이 암묵적으로 전역 변수를 생성하기 때문에 정상 작동하게 된다그렇기 때문에 아래의 코드는 true가 된다 function test() { x = 5 } test() console.log(x) // 5 cons..

😎Javascript] 자바스크립트 메모리 구조 - 콜 스택, 메모리 힙 메모리 (RAM) - Random Access Memory 기본적으로 컴퓨터의 데이터를 저장하고 처리하는 역할을 하며 데이터 처리 속도가 빠르지만 컴퓨터 또는 해당 프로그램이 종료되면 저장된 데이터가 모두 사라진다 ✅ 콜 스택, 메모리 힙이란? 1. 콜스택(Call Stack) 원시타입 데이터가 저장된다(string, number, boolean, null, undefined, bigint, symbol) 실행컨텍스트(Execution Context)를 통해 아래 작업들을 제어한다 변수 식별자(이름) 저장 스코프 체인 및 this 관리 코드 실행 순서 관리 등을 수행 2. 메모리 힙(Memory Heap) 참조타입 데이터가 저장된다..

😎 vue 3 - 이벤트 핸들링 composition API를 기준으로 합니다 ✅ 이벤트 핸들링 v-on 디렉티브를 통해 이벤트를 사용할 수 있으며 일반적으로 단축해서 @ 기호를 사용한다 v-on:click="handler" 또는 줄여서 @click="handler"와 같이 사용 가능하다 사용 방식은 다음과 같다 인라인 핸들러: 이벤트가 트리거될 때 실행되는 인라인 JavaScript 메서드 핸들러: 컴포넌트에 정의된 메서드 숫자 값은: {{ count }} // 인라인 1 추가 // 메서드 1 추가 const count = ref(0) const countIncrement = () => { count.value++ } ✅ 이벤트 객체 접근 특수 키워드 $event를 사용하여 메서드에 전달하거나 인라인 ..

😎 vue 3 - v-for 반복문 composition API를 기준으로 합니다 ✅ v-for v-for을 사용하여 배열을 리스트로 렌더링할 수 있다 v-for 사용 시엔 각 엘리먼트를 추적해서 재사용 및 재정렬이 가능하도록 하기 위해 각 항목에 대한 고유 key 속성이 있어야 한다 즉, 리스트의 순서를 변경하거나 데이터의 추가, 삭제 등 재정렬이 필요할 경우 해당 엘리먼트의 상태를 유지하기 위해 고유한 key 값이 필요하다 // v-bind:key는 :key로 축약 사용이 가능하다 {{ index }} - {{ item.message }} const items = ref([ { id: 1, message: 'itemA' }, { id: 2, message: 'itemB' } ]) 결과는 아래와 같다 ..

😎 vue 3 - v-if, v-show composition API를 기준으로 합니다 ✅ v-if v-if, v-else-if, v-else를 통해 조건부 렌더링이 가능하며 디렉티브 별로 형제 블럭이면서 인접해야 한다 A B C A/B/C 모두 아님 const text = ref("D") // 아래와 같이 렌더링된다 A/B/C 모두 아님 ✅ v-show 엘리먼트를 조건부로 표시하는 다른 옵션이며 사용법은 v-if와 대체로 동일하다 v-show! const show = ref(false) // 아래와 같이 랜더링된다 v-show! v-show의 엘리먼트는 항상 렌더링 되면서 DOM에 남아 있고 display CSS 속성으로 전환한다 ✅ v-if vs v-show v-if v-if는 실제 조건부 렌더링으로..

😎 vue 3 - class & style composition API를 기준으로 합니다 ✅ 클래스 바인딩 객체 바인딩 아래 코드 isActive의 Boolean값에 의해 active 클래스가 결정된다 const isActive = ref(true) // 다음과 같이 랜더링 된다 computed 일반적으로는 가독성 및 재사용성을 위해 계산된 값을 반환하는 방식으로 사용한다 classObject const isActive = ref(true) const error = ref(null) const classObject = computed(() => ({ active: isActive.value && !error.value, 'text-error': error.value })) component 컴포넌트에 c..

😎 vue 3 - computed (computed vs method) composition API를 기준으로 합니다 ✅ computed vue의 함수형 속성으로, 어떠한 값을 계산하여 리턴하는 함수로 사용되며 연결된 data가 변경되면 값을 다시 계산하여 바인딩한다 즉, 옵저버의 역할을 한다 기본적인 문법은 아래와 같다 sumC: {{ sumC }} const text = ref(1) const sumC = computed(()=>{ return text.value * 1 }) // sumC: 1 기본적으로 getter를 제공하며, 필요에 따라 setter를 설정해서 사용할 수 있다 getter와 setter를 통해 읽기, 쓰기가 가능하며 setter를 정의하지 않고 값을 업데이트 할 경우 에러가 출력..

😎 vue 3 반응형 - reactive and ref composition API를 기준으로 합니다 반응형 vue에서는 데이터의 실시간 업데이트가 가능한 것을 반응형이라고 한다 ✅ reactive reactive() 함수를 사용하여 객체 또는 배열을 반응형으로 만들 수 있다 반환 값은 원본 객체와 같지 않고 원본 객체를 재정의한 객체이다 const raw = {} const proxy = reactive(raw) // 반응형으로 재정의 된 것은 원본과 같지 않다 console.log(proxy === raw) // false 객체, 배열 또는 Map이나 Set과 같은 컬렉션 유형에만 사용 가능하다 reactive 예제 숫자가 증가하며 화면에 실시간 바인딩을 하는 예제이다 reactive 사용 여부에 따..

😎 vue 3 기본 문법 composition API를 기준으로 합니다 ✅ 문법 텍스트 보간법 데이터 바인딩 기본 형태 - 일반 텍스트로 해석 메세지: {{ msg }} 디렉티브 vue 디렉티브 v- 접두사가 있는 속성을 의미한다 v-html 디렉티브 실제 HTML 출력 텍스트 보간법 사용: {{ rawHtml }} v-html 디렉티브 사용: 텍스트 보간법 사용: 이것은 빨간색이어야 합니다. v-html 디렉티브 사용: 이것은 빨간색이어야 합니다. 임의의 html 동작으로 인해 보안 취약점이 생길 수 있으니 사용자 조작 컨텐츠에는 사용하지 않는 것을 권장한다 v-html은 사용을 자제하고 반드시 이유가 있을 경우에만 사용하도록 해야한다 ✅ 입력 바인딩 input event v-model 이슈 : 현재 ..

😎Javascript] 스코프, 스코프체인, 렉시컬 스코프 ✅ 스코프 Scope 스코프 (Scope) - 범위 Javascript에서 스코프란 ‘식별자(변수)에 접근할 수 있는 유효범위’를 뜻한다. 자바스크립트 스코프는 2가지 타입이 있다. 1. Global (전역) 2. Local (지역) 전역 스코프(Global Scope)는 전역에 선언되어 있어 어느 곳에서나 해당 변수에 접근할 수 있고 지역 스코프(Local Scope)는 해당 지역에서만 접근할 수 있다. let a = "global" function aPrint() { let a = "local" console.log(`aPrint : ${a}`) } aPrint() //aPrint : local console.log(`global : ${a}..