Half Road

실습을 위한 글입니다. 진행 과정중에 상세 내용들은 없으니 참고바랍니다. 현재 device 목록 확인 fdisk(fixed Disk) fdisk -l partition 진행 command fdisk /dev/sdb 결과 관련 명령어 확인을 할려면 ‘m partition partion은 2개를 생성할 것이다. 10G, 10G partition을 생성한다. partition1 값을 입력하지 않고 Enter를 하면 Default 값으로 설정됨. setor크기를 설정할 수 있으며 20G를 2개의 파티션으로 나눌 계획이므로 Last sector: 10G로 지정 partition2 partition 확인 partition type 설정 partition type을 설정 할 수 있다. 기본적으로는 Linux type..

공통점 두 가지 모두 Javascript Code를 모듈화 해주는 format이다. 역사 javascript는 code를 모듈화 하는 방법이 없었다. 그렇기에 코드를 재사용 하기 위해서는 해당 코드를 global scope에 설정을 해야 했다. 그러다 보니 메모리 문제가 대두 되었고, 이로서 필요한 곳에서만 코드를 가져올 수 있는 방법이 필요했다. 그렇게 나온 것이 CommonJS이다. CommonJS가 나온 이후 현재 javascript 표준 module format인 ES Module이 나왔다. 차이 Common JS node.js 에서 기본적으로 사용되는 포멧이다. 그러나 현재는 node.js에서도 안정적으로 ES Modules를 지원한다. 사용 예제 // import const {add, subt..

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

공통점 Reactive Data 변경 시점에 처리를 담당 차이점 Program State 변경 Logic 존재 여부 존재 : Watch 사용 미 존재 : Computed 사용 Computed는 Program state를 바꾸지 않는 Pure Function이다. 예시 computed data() { return { name: "half" } } computed:{ welcome() { return "hi" + this.name } } watch data() { return { isLoading: false, data1: 1, data2: 2, } } methods: { // someProcess1, someProcess2 : change Program State someProcess1() { ... th..

Component 내에 전반적으로 사용될 상수를 어떻게 선언해서 사용해야 할까? 해당 상수를 Component 상수라고 칭하겠다. 현재 프로젝트에서는 다음의 방법을 쓰고 있다. data() { // 상수 this.name = "Half" return {} } data 속성에 return value로 넣지 않고 vue instnace에 바로 할당하는 방법이다. 이렇게 하면 vue data 선언 영역에서 어떤 데이터가 상수로 사용하는지 알 수 있다. 하지만 여기에는 2가지 문제점이 있다. 문제점 해당 데이터가 상수인지는 data 선언 영역에서만 확인이 가능 상수를 보장할 수 없음 methods: { someFn() { const result = `hi ${this.name}` ... } } 해당 코드에서 t..

들어가며 어느 날 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" }, } 기능 시연🏃