Half Road

⚠️ watch의 위험성vue를 처음 시작했을 떄는 watch의 편리성 때문에, watch를 빈번하게 사용했었다.그러나 프로젝트가 규모가 커져감에 따라 watch가 많으면 다음과 같은 문제가 발생하였다.⚠️ 코드 가독성/유지보수성 저하문제점 설명로직이 분산됨상태 변화에 따라 여러 watch가 동작하면, 전체 동작 흐름을 파악하기 어려움사이드이펙트 위치 불명확로직이 watch 내부에 숨어 있어서 디버깅/추적이 어려움중복된 감시 로직여러 상태가 유사한 방식으로 감시될 경우, 중복 로직이 반복됨아래의 Bad Case를 통해서 문제점을 파악해보자❌ watch간 상호 의존성const category = ref('general') // 기본 카테고리const subCategory = ref(null)..

HTTP Method에서 PUT PATCH는 수정에 사용되는데 명확하게 이해하고 있지 않은듯하여정리해본다. 간단한 개념을 살펴보고 예제로 명확히 알아보자.간단히 살펴보기공식 RFC 문서 에서 PATCH에 대한 정보를 확인해보자.PUT: 전체 필드가 제공되어야 한다. 전체 필드를 수정한다.해당 Entity의 결과 값은 요청값과 항상 같다. (멱등성)PATCH: 부분 필드만 제공한다. 부분 필드를 수정한다.해당 Entity의 결과 값은 다를 수 있다.멱등-성 冪等性 명사 수학 연산을 여러 번 적용하더라도 결괏값이 달라지지 않는 성질.✔️ 여기서 Entity는 조회 대상 테이블에 대한 한 건의 row 데이터를 칭하는 것이다.예제특정 사용자의 나이를 바꾸는 예제를 PUT과 PATCH로 구분해서 알아보자.PUTP..

용도데이터베이스를 통해 Typescript interface를 생성하기 위해 사용한다.패키지 명은 @rmp135/sql-ts 이다.NPM 주소 : https://www.npmjs.com/package/@rmp135/sql-ts나는 node js 프로젝트에 있는 sequelize model에 타입을 적용하기 위해서 interface가 필요하여적용하였다.실습cli를 통해서 실행할 수 도 있지만, 관리 용이성을 위해 js를 통해서 작업을 진행 하였다.https://rmp135.github.io/sql-ts/#/?id=node-module사전 설치mariadb인 경우에 mysql2 패키지를 설치해준다.npm install mysql2참조: https://knexjs.org/guide/#node-jsgenerat..

Javascript 는 Event Loop을 기반으로 한 Runtime Model을 가지고 있다. 현재 브라우저들은 해당 개념을 기반으로 최적화를 하여 보다 정교하게 구현하였지만, 그 기반의 원리에 대해서는 알아두고 있으면 동작방식을 이해하는데 유용할 것이다. Runtime 구현 원리에 대해서 알아보자. 데이터 처리 영역 Javascript Run Time에서는 다음과 같은 3가지 영역을 통해 데이터를 처리한다. 1. Heap Object 들이 위치하는 메모리 영역 2. Stack function이 Call 될 때 마다 Frame이 Stack에 쌓이게 된다. Stack은 Function Call의 집합, 즉 Frame의 집합이다. Frame 실행 도중에 Frame이 쌓일 수 있으며 종료 후에 다시 Fra..

들어가며 어느 날 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인..

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