Half Road

들어가며 어느 날 vue의 구현 원리에 대한 글을 읽다가 getter & setter 관련 내용을 보게 되었다. 해당 내용에 대해서 살펴보다가 Object Property의 종류들과 descriptor를 알게 되었고 관련한 내용을 정리해본다. 종류 2가지 종류로 나뉜다. Data Property, Accessor Property 이다. 관련 개념으로 Descriptor가 있다. Data Property 우리가 흔히 사용하고 있는 property로 getter, setter를 정의하지 않은 property 이다. let obj = { firstName: "Half", lastName: "Road" } Accessor Property getter or setter를 정의한 property이다. let obj..

Nullish coalescing operator 등장 배경 Null과 유사한 값에 대해서 기본 값을 설정하고 싶을 때가 많다. 가령 DBMS에서 지원하는 ifnull, NVL같은 기능 말이다. 이런 경우 과거에는 아래와 같이 코드를 작성하였다. // name이 falsy인 경우 기본 값 설정 const a = name || "ban" Logical OR 연산자를 사용해 falsy(false 유사 값) 값인 경우 다음 값을 할당하는 방식이다. 그런데 이 코드는 문제점이 있다. 바로 falsy에 범위이다. falsy로 분류되는 대표적인 몇 개의 값은 아래와 같다. falsy values false, 0, null, undefined, “”, … 보통 우리가 기본 값을 설정하고자 하는 경우는 “” or 0인..

User Snippet 파일 생성 생성 순서☝️ 커맨드 팔레트 > Configure User Snippets > New Global Snippets file Project 별 Snippet 설정도 가능하다! Snippet 만들기 { "Console Log": { // 설명 "scope": "javascript,typescript", "prefix": "clg", // 단축키 "body": [ "console.log('$1');", // snippet 코드 "$2" ], "description": "Log output to console" }, } 기능 시연🏃

실행원리 pacakge.json에 scripts에 기술된 명령을 실행해줍니다. 여기서 중요한건 node_modules/.bin이 PATH 환경변수에 추가됩니다. 그래서 vite와 같이 명령어만 명시해도 PATH에서 찿아서 바로 실행이 되는 것입니다. npm run vs 직접 실행 npm run npm run dev 직접 실행 node_modules/.bin/vite 참고자료 https://docs.npmjs.com/cli/v8/commands/npm-run-script https://stackoverflow.com/questions/72273204/can-i-run-an-npm-package-without-the-npm-run-command

function keyword 없이 함수를 정의하는 케이스 들을 정리해 보았습니다. 1.Arrow Function const fn = n => console.log(n) 2.Object Method const obj = { name: 'Half', greet() { console.log(`${name} 안녕하세요`) } // function greet() {...} 축약 표현 } 3.Class Method class Person { constructor(name) { this.name = name; } greet() { console.log(`hi ${this.name}`) } } 참고 https://levelup.gitconnected.com/why-we-dont-need-the-function-key..

공부하다보니 분해구조할당(Destructuring Assign)이 ES modules와 관련이 있어 정리합니다. Destructuring Assign Object 각 속성을 개별 할당하는 syntax입니다. 바로 예시를 보시죠. const obj = { a: '1', b: '2' }; const { a, b } = obj; console.log(a, b); // output // 1 2 const obj = { a: '1', b: '2' }; const item = []; // 좌변 '{}'을 block 처리되게 하지 않기위해서는 '()'로 묶어야함. ({a:item[0], b:item[1]} = obj); console.log('item:', item); // output // item: [1, 2] ..

vue2에서 model속성에 prop, event 정의해서 구현했던 Component 2-way-binding 방식이 vue3에서 Component v-model로 편리하게 구현 가능하게 되었습니다. Child 컴포넌트와 Parent 컴포넌트 정의를 각각 보겠습니다. Options API로 설명하겠습니다. Child 컴포넌트 정의된 prop과 emit을 구현하면 되는데 바로 'modelValue' prop & 'update:modelValue' emit 입니다. Child : :value, @input을 정의하여 지정한 prop과 emit을 연결시킵니다. data의 in - out을 결정했습니다. 여기서는 부모 컴포넌트가 input 값을 받아야하기 때문에 emit함수 2번째 인자에 input 값을 넘겨주..

Vue를 공부하다 보니 Proxy 객체를 종종 보게 되더라구요. 그래서 찿아본김에 간단한 예제를 만들어 보았습니다. Label 요소에 Data를 바인딩해보는 예제입니다. Data 변경시 Label도 같이 바뀌도록 하겠습니다. 기본원리 객체에 어떤 작업을 가할 때 javascript에 내부 메서드(internal method)가 관여합니다. proxy는 이 내부 메서드에 대응하는 트랩이 있으며, 트랩을 구현하면 해당 내부 메서드 동작시 트랩이 가로채서 별도의 처리를 할 수 있게됩니다. 거꾸로 가정하여 어떠한 트랩도 구현되지 않으면 투명한 wrapper로 동작하여 proxy target에 가하는 작업은 있는 그대로 처리될 것입니다. let obj = {say:'hello'} obj = new Proxy(ob..