lee-yun-pyo.log

Blob 객체

Sat, 10 Aug 2024 08:04:07 GMT

Blob

JavaScript에서 대용량의 이진 데이터를 다루기 위해 사용된다. 파일, 이미지, 텍스트 등의 데이터를 이진 형식으로 표현할 수 있으며, 특히 파일 업로드나 다운로드, 그리고 데이터 송수신 작업 등에 사용된다.

주요 특징:

데이터의 크기와 형식: Blob 객체는 임의의 바이트 배열로 데이터를 저장한다. 텍스트, 이미지, 비디오, 오디오 등 다양한 데이터를 포함할 수 있다.
MIME 타입: Blob 객체를 생성할 때 MIME 타입을 지정할 수 있다. 이 MIME 타입은 해당 데이터가 어떤 형식인지를 나타내며, 예를 들어 application/json, image/png, text/plain 등이 있다.

Blob 생성

Blob 생성자는 새로운 Blob 객체를 반환한다.

생성 시 인수로 array와 options을 받습니다.

const newBlob = new Blob(array, options?)

array : ArrayBuffer, ArrayBufferView, Blob, USVString 또는 이 값들을 혼합해 구성한 Array 이다. Blob의 데이터를 구성하게 된다

option

type : Blob에 저장할 데이터의 MIME 유형. 기본 값은 빈 문자열('').

const array = ['hey!']; // 하나의 DOMString을 포함한 배열
const blob = new Blob(array, { type: "text/html" }); // 생성한 블롭

프로젝트에 적용한 사례

위와 같은 형식으로 POST 요청을 보낼 때 이미지를 담는 photos 와 사용자 입력값을 받는 JSON 형태의 postRequest 를 body 로 보내야했다.

formData에 postRequest 키 값을 가진 데이터를 담아서 보냈다.

const postRequestData = new Blob(
  [
    JSON.stringify({
      kakaoId: "12345",
      title: "제목",
      content: "설명",
      category: "카테고리",
      hashtags: ["태그"],
    }),
  ],
  { type: "application/json" }
);

const response = await fetch(API_PATH.createPost(), {
  method: "POST",
  headers: {
    Authorization: `Bearer ${accessToken}`,
  },
  body: formData,
});

요약

Blob은 JavaScript에서 대용량의 이진 데이터를 효율적으로 처리하고 다루기 위한 객체다. 이 객체는 데이터를 전송하거나 저장할 때 사용되며, 특히 파일 처리와 네트워크 통신에서 유용하다.

JS 공부 - var, let, const 과 호이스팅

Fri, 09 Aug 2024 11:55:39 GMT

스코프

모든 식별자는 자신이 선언된 위치에 따라 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. (식별자가 유효한 범위)

스코프 체인

스코프가 계층적으로 연결된 것
변수를 참조할 때 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하여 선언된 변수를 검색한다.

함수 레벨 스코프와 블록 레벨 스코프

블록 레벨 스코프
- 함수 몸체만이 아니라 모든 코드 블록이 지역 스코프를 만든다
함수 레벨 스코프
- 함수의 코드 블록만이 지역 스코프를 만든다.
  ### 렉시컬 스코프

var x = 1;

function foo() {
    var x = 10;
    bar();
}

function bar() {
    console.log(x);
}

foo(); // ?
bar(); // ?

위 코드의 실행 결과는 bar 함수의 상위 스코프가 무엇인지에 따라 결정된다.

함수를 어디서 호출했는지에 따라 함수의 상위 스코프를 결정
1. 함수를 어디서 정의했는지에 따라 함수의 상위 스코프를 결정

1번 방식은 동적 스코프라고 한다. 함수가 호출되는 시점에 동적으로 상위 스코프를 결정한다.

동적 스코프를 따를 경우 bar 함수의 상위 스코프는 foo 함수의 지역 스코프와 전역 스코프가 된다.

// 동적 스코프를 따를 경우 결과
10
1

2번 방식은 렉시컬 스코프 또는 정적 스코프라 한다. 함수 정의가 평가되는 시점에 상위 스코프를 결정한다.

렉시컬 스코프를 따를 경우 bar 함수의 상위 스코프는 전역 스코프가 된다.

// 렉시컬 스코프를 따를 경우 결과
1
1

자바스크립트는 렉시컬 스코프를 따른다. 따라서 함수가 호출된 위치는 상위 스코프 결정에 어떠한 영향을 주지 않으며 함수의 상위 스코프는 언제나 자신이 정의된 스코프이다.

var 키워드의 문제점

같은 스코프 내 중복 선언이 허용된다.

 function foo() {
     var x = 1;
     var x = 2;
     console.log(x); // 2
 }
 foo();

 function bar() {
     let x = 1;
     let y = 2; // SyntaxError
 }
 bar();

함수 레벨 스코프를 따른다.

var 키워드로 선언한 변수는 함수 코드 불록만을 지역스코프로 인정한다. 따라서 함수 외부에서 선언한 변수는 코드 블록 내 선언해도 모두 전역 변수가 된다.

 var x = 1;

 if (true) {
     // var 은 함수 레벨 스코프를 따르므로 코드 블록 내에서 선언되었다해도 전역변수다.
     // 따라서 x 는 전역 변수다. 이미 선언된 전역 변수 x가 있으므로 x 변수는 중복 선언된다. 
     var x = 10;
 }

 console.log(x); // 10

변수 호이스팅

var 키워드로 변수를 선언하면 변수 호이스팅에 의해 스코프 선두로 끌어 올려진 것 처럼 동작한다. 따라서, 변수 호이스팅에 의해 var 키워드로 선언한 변수는 변수 선언문 이전에 참조할 수 있다.

 // 이 시점에 변수 호이스팅에 의해 이미 x 변수가 선언되었다. (1. 선언단계)
 // 변수 x 는 undefined로 초기화된다 (2. 초기화 단계)
 console.log(x); // undefined

 // 변수의 값 할당 (3. 할당 단계)
 x = 100;

 console.log(x); // 100

 var x;

var 와 전역객체

var 키워드로 선언한 전역 변수와 전역함수는 전역 개체 window 의 프로퍼티가 된다.

 var x = 1;
 console.log(window.x); // 1

 let y = 1; // let 으로 선언한 전역 변수는 전역 객체 프로퍼티가 아니다.
 console.log(window.y); // undefined

let 키워드 특징

변수 중복 선언 금지
블록 레벨 스코프
변수 호이스팅

const 키워드 특징

선언과 초기화 const 로 선언한 변수는 반드시 선언과 동시에 초기화해야 한다.
```
 const x; // SyntaxError
```
블록 레벨 스코프
호이스팅이 발생하지 않는 것처럼 동작
재할당 금지
상수
- const 로 선언된 변수에 원시 값을 할당한 경우 할당된 값을 변경할 수 없다. 단, 객체를 할당한 경우 값을 변경할 수 있다. 객체는 재할당 없이도 직접 변경이 가능하기 때문이다.
- const 키워드는 재할당을 금지할 뿐 불변을 의미하지 않는다.*
```
const person = {
     name: 'lee'
 }
// 재할당 없이도 변경 가능
person.name = 'kim';
```

호이스팅

console.log(score); // undefined
var score;

JS 는 인터프리터에 의해 위에서 부터 순차적으로 코드를 실행하기 때문에 console.log 시점에 score 변수가 선언되기 전이므로 참조 에러가 발생할 것 처럼 보인다. 하지만 참조 에러가 발생하지 않고 undefined 가 출력된다.

그 이유는 변수 선언이 소스코드가 한 줄씩 실행되는 시점, 즉 런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문이다.

자바스크립트 엔진을 코드를 실행시킬 때 다음과 같은 과정을 거친다.

소스코드 평가 과정

변수 선언을 포함한 모든 선언문(변수 및 함수 선언문 등)을 찾아내 먼저 실행한다.

소스 코드 평가 과정이 끝나면 모든 선언문을 제외하고 코드를 한 줄씩 실행한다.

즉, JS 엔진은 변수 선언이 코드 어디에 있든 상관없이 다른 코드보다 먼저 실행된다. 따라서 변수 선언이 코드 어디에 있든지 어디서든 변수를 참조할 수 있다.

이처럼 변수 선언문이 코드 선두로 끌어 올려진 것처럼 동작하는 특징을 호이스팅이라 한다. 변수 선언 뿐만 아니라 var let const function class 키워드를 사용해서 선언하는 모든 식별자는 호이스팅 된다.

`var` 변수 호이스팅

// 코드 이 시점에는 변수 호이스팅에 의해 foo 변수가 선언된다. (1. 선언단계)
// 변수 foo 가 undefined 로 초기화 (2. 초기화 단계)
console.log(foo); // undefined

// 값 할당 (3. 할당 단계)
foo = 123;

console.log(foo); // 123

// 변수 선언
var foo;

var 키워드로 선언한 변수는 런타임 이전에 암묵적으로 선언단계와 초기화 단계가 함께 진행된다. 이후 할당문을 만나면 할당 단계가 진행된다.
가독성 저하 및 오류 발생 가능성

`let` 변수 호이스팅

console.log(foo); // ReferenceError
let foo;

let 키워드로 선언한 변수는 호이스팅이 발생하지 않는 것처럼 보인다.

let 키워드로 선언한 변수는 선언단계와 초기화 단계가 분리되어 진행된다. 즉, 런타임 이전에 JS 엔진에 의해 암묵적으로 선언단계가 먼저 실행되고 초기화 단계는 변수 선언문에 도달했을 때 실행된다.

let 키워드로 선언한 변수는 스코프 시작 지점 부터 변수 선언문까지 변수를 참조할 수 없는데 변수를 참조할 수 없는 구간을 일시적 사각지대라고 부른다.

// 선언 단계 실행
// 초기화 이전 일시적 사각지대
console.log(foo); // ReferenceError

let foo; // 변수 선언문: 초기화 단계 실행
console.log(foo);

foo = 1; // 할당 단계
console.log(foo); // 1

비동기 처리 - 1. 콜백 패턴

Mon, 29 Jul 2024 11:37:33 GMT

동기 vs 비동기 동기는 현재 실행 중인 작업이 끝날 때까지 다음 작업은 대기하고 작업이 끝나면 다음 작업이 실행되는 것을 의미한다. 반대로 비동기는 현재 실행 중인 작업을 기다리지 않고 다음 작업을 수행하는 것을 의미한다.
동기는 작업 실행의 순서를 보장한다는 장점이 있지만 블로킹이 발생한다는 단점이 있다. 비동기는 작업의 블로킹이 발생하지 않는다는 장점이 있지만 작업 실행의 순서를 보장하지 못한다는 단점이 있다.

비동기 처리의 필요성

function plus() {
  let a = 1;
  setTimeout(()=>console.log(++a), 1000);
  return a;
}

const result = plus();
console.log('result :', result);

result: 1
// 1초 뒤
2

위 코드에서 plus 함수는 비동기 함수다. 비동기 함수란 함수 내부에 비동기로 동작하는 코드를 포함한 함수를 말한다.

비동기 함수를 호출하면 함수 내부의 비동기로 동작하는 코드가 완료되지 않았다 해도 기다리지 않고 즉시 종료된다. 즉, 비동기 함수 내부의 비동기로 동작하는 코드는 비동기 함수가 종료된 이후에 왼료된다. 따라서 비동기 함수 내부의 비동기로 동작하는 코드에서 처리결과를 외부로 반환하거나 상위 스코프의 변수에 할당하면 기대대로 동작하지 않는다.

plus 함수가 비동기 함수인 이유는 plus 함수 내부의 setTimeout 함수가 비동기로 동작하기 때문이다. plus 함수를 호출하면 a 를 반환하고 즉시 종료된다. 즉, plus 함수 내부의 setTimeout 의 콜백 함수 () => console.log(++a) 는 plus 함수가 종료된 이후에 실행된다.

plus 함수의 기대하는 기능(1초 뒤 1 더해진 값 출력) 을 수행하기 위해 상위 스코프에 변수를 할당하면 어떨까?

let a = 1;
function plus() {
  setTimeout(()=>console.log(++a), 1000);
    return a;
}

const result = plus();
console.log('result :', result); 1️⃣
console.log("a:", a); // 2️⃣

result : 1
a: 1
// 1초 뒤
2

여전히 plus 함수의 반환값으로 여전히 1 이 출력되는 문제가 발생한다. setTimeout 함수의 콜백함수는 언제나 2️⃣ 의 console.log 가 종료된 이후에 호출된다. 따라서 2️⃣ 의 시점에는 아직 전역변수 a 에 +1 한 결과가 할당되기 이전이다.

이런 현상이 발생하는 이유는 함수 실행 과정에 의해 설명된다.

plus 함수가 호출되면 plus 실행 컨텍스트가 콜스택에 푸시된다.
1. 이후 함수 코드 실행과정에서 setTimeout 함수의 실행 컨텍스트가 콜 스택에 push 되어 실행되고 즉시 pop 된다.
이후 브라우저는 타이머 설정 및 만료를 기다리고 타이머가 만료되면 setTimout 함수의 콜백 함수를 태스크 큐에 푸시한다.
plus 함수가 종료하면 plus 실행 컨텍스트가 콜 스택에서 팝 되고, 곧바로 1️⃣과 2️⃣의 console.log 가 호출된다.
이후 1️⃣ 과 2️⃣ 가 종료되어 콜스택에서 제거되면 이벤트 루프에 의해 태스크 큐에 있던 setTimeout 의 콜백함수를 콜스택에 푸시되어 실행된다.

이처럼 비동기 함수는 비동기 처리 결과를 외부에 반환할 수 없고, 상위 스코프 변수에 할당할 수도 없다. 따라서 비동기 함수의 처리 결과에 대한 후속 처리는 비동기 함수 내부에서 수행해야 한다. 이 때, 비동기 함수를 범용적으로 사용하기 위해 비동기 함수에 비동기 처리 결과에 대한 후속처리를 수행하는 콜백함수를 전달하는 것이 일반적이다.

비동기 처리 방법 1: 콜백 패턴

콜백 패턴 사용

function plus(callback) {
  let a = 1;
  setTimeout(() => callback(++a), 1000);
}

plus((result) => {
  console.log('Async result:', result);
});

// 1초 뒤
Async result: 2

콜백 패턴을 사용하여 비동기 함수의 문제를 해결하려면, 함수가 비동기 작업을 완료한 후 콜백 함수를 호출하도록 수정해야 합니다. 위 코드는 plus 함수가 콜백을 인수로 받아서 비동기 작업이 완료된 후 콜백을 호출하는 방식으로 수정했다.

콜백 패턴의 단점

콜백 지옥 발생

이처럼 비동기 함수가 콜백 함수를 통해 후속 처리를 수행하고, 그 결과로 또 다른 비동기 함수를 호출해야 할 때 콜백 호출이 중첩되어 복잡도가 높아지는 현상을 콜백 지옥이라고 한다.

function plus(num, callback) {
  setTimeout(() => callback(++num), 1000);
}

// 콜백 지옥 예시
plus(1, (result1) => {
  plus(result1, (result2) => {
    plus(result2, (result3) => {
      plus(result3, (result4) => {
          console.log('result 4', result4);
      });
    });
  });
});

// 4초 후
// result 4: 5 출력

각 plus 함수 호출은 이전 호출의 결과를 받아서 다시 plus 함수를 호출한다.

이와 같이 콜백 패턴을 이용하면 코드의 가독성과 유지보수성이 떨어진다. 이를 해결하기 위해 Promise나 async/await를 사용한다.

function plus(num) {
  return new Promise((resolve) => {
    setTimeout(() => resolve(++num), 1000);
  });
}

// 프로미스 패턴을 사용한 비동기 처리
plus(1)
  .then((result1) => {
    return plus(result1);
  })
  .then((result2) => {
    return plus(result2);
  })
  .then((result3) => {
    return plus(result3);
  })
  .then((result4) => {
    console.log('result 4', result4);
  })
  .catch((error) => {
    console.error('Error:', error);
  });

에러 처리 어려움

JS 공부 - 생성자 함수에 의한 객체 생성

Mon, 22 Jul 2024 11:50:48 GMT

생성자 함수란?

new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수

자바스크립트는 여러 빌트인 생성자 함수를 제공한다. Object String Number Fuction Array 등등

객체 리터럴 사용 vs 생성자 함수 사용

객체 리터럴 사용의 문제점

단 하나의 객체만 생성한다.

const circle1 = {
    r: 5,
    getDiameter() {
        return 2 * r;
    }
};

console.log(circle1.getDiameter()); // 10

const circle2 = {
    r: 10,
    getDiameter() {
        return 2 * r;
    }
};

console.log(circle2.getDiameter()); // 20

보통 상태를 표현하는 프로퍼티는 객체마다 값이 다를 수 있지만 메서드는 내용이 동일하다. 하지만 객체 리터럴에 의해 객체를 생성하는 경우 프로퍼티 구조가 동일함에도 불구하고 매번 같은 프로퍼티와 메서드를 기술해야 한다.

생성자 함수 사용의 장점

생성자 함수에 의한 객체 생성 방식은 생성자 함수를 사용하여 프로퍼티 구조가 동일한 여러 객체를 간편하게 생성할 수 있다.

function Circle(r) {
    this.r = r;
    this.getDiameter = function () {
        return 2 * r;
    }
}

// 객체 생성
const circle1 = new Circle(5);

console.log(circle1.getDiameter()); // 10

생성자 함수는 객체를 반환하는데 왜 생성자함수에는 객체를 생성하고 반환하는 코드가 없는걸까?

→ 암묵적 처리를 통해 인스턴스를 생성하고 반환하기 때문!

생성자 함수 인스턴스 생성 과정

1. 인스턴스 생성과 this 바인딩 암묵적으로 빈 객체가 생성되고 this에 바인딩 된다.

💡 이것이 생성자 함수 내에 this 가 생성자 함수가 생성할 인스턴스를 가리키는 이유이다. this 블로그 참고

    function Circle(r) {
        // 1. 암묵적으로 인스턴스 생성 후 this 바인딩
        console.log(this); // Circle {}

        this.r = r;
        this.getDiameter = function () {
            return 2 * r;
        }
    }

2. 인스턴스 초기화 생성자 함수의 코드가 한 줄씩 실행되어 this 에 바인딩되어있는 인스턴스를 초기화 한다.

    function Circle(r) {
        // 1. 암묵적으로 인스턴스 생성 후 this 바인딩

        // 2. this에 바인딩되어 있는 인스턴스 초기화
        this.r = r;
        this.getDiameter = function () {
            return 2 * r;
        }
    }

3. 인스턴스 반환 생성자 함수 내부에서 모든 처리가 끝나면 암묵적으로 인스턴스가 바인된된 this 를 반환한다.

    function Circle(r) {
        // 1. 암묵적으로 인스턴스 생성 후 this 바인딩

        // 2. this에 바인딩되어 있는 인스턴스 초기화
        this.r = r;
        this.getDiameter = function () {
            return 2 * r;
        }
        // 3. 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환
    }

    // 인스턴스 생성
    const circle = new Circle(5);

만약 this 아닌 다른 객체를 명시적으로 반환한다면?

→ this가 반환되지 못하고 return 문에 명시된 객체가 반환된다.

function Circle(r) {
    this.r = r;
    this.getDiameter = function () {
        return 2 * r;
    }

    // 명시적으로 객체 반환
    return {};
}

// 인스턴스 생성. 명시적으로 객체를 반환하면 암묵적인 this 반환이 무시되고
// 명시적으로 반환한 객체를 반환한다.
const circle = new Circle(5); // {}

하지만 명시적으로 원시값을 반환하면 원시 값 반환은 무시되고 암묵적으로 this가 반환된다.

내부 메서드 [[Call]] 과 [[Constructor]]

함수는 객체다. 즉, 일반 객체가 가지고 있는 내부 슬롯과 내부 메서드를 모두 가지고 있다.

함수는 일반 객체와 다른 점은 호출할 수 있다는 것이다. 따라서 함수는 일반 객체가 가지는 내부 슬롯과 내부 메서드는 물론 함수로서 함수객체를 위한 내부 슬롯과 내부 메서드 [[Call]], [[Constructor]] 도 가지고 있다.

함수를 생성자함수로서 사용되기 위해서는 new 연산자와 함께 호출되어야 한다. 하지만 모든 함수가 new 연산자를 사용하여 생성자 함수로 사용될 수 있는 것은 아니다.

내부 메서드 [[Call]] 을 갖는 함수 객체를 callable 이라 하며, 내부 메서드 [[Construct]]를 갖는 함수 객체를 constructor, [[Constructor]] 를 갖지 않는 함수 객체를 non-constructor 라고 한다.

모든 함수는 callable 이자만 callable 이면서 생성자 함수로서 호출될 수 있는 함수인 constructor 와 생성자 함수로서 호출될 수 없는 함수인 non-constructor 로 구분된다.

이에 자바스크립트 엔진은 함수 정의 방식에 따라서 이 둘을 구분한다.

constructor - 함수 표현식, 함수 선언문, 클래스 non-constructor - 메서드(축약 표현), 화살표 함수

// 일반 함수 정의: 함수 선언문, 함수 표현식
function foo() {}
const bar = function () {};

// 일반함수로 정의된 함수만이 constructor 이다. 
new foo(); // {}
new bar(); // {}

// 화살표 함수 정의
const arrow = () => {};

new arrow(); // TypeError

new 연산자

new 연산자와 함수를 호출하면 해당 함수는 생성자 함수로 동작한다. 즉, 함수 내부 객체 메서드가 [[Call]] 이 아닌 [[Constructor]] 가 호출된다.

반대로 new 연산자 없이 함수를 호출하면 해당함수는 일반함수로 동작한다. 즉, 함수 내부 객체 메서드가 [[Constructor]] 이 아닌 [[Call]] 이 호출된다.

두 호출 방식에 따라 함수 내부의 this 에 바인딩된 값이 다르다.

new 연산자로 호출한 함수의 this 는 생성자 함수가 생성할 인스턴스를 가리킨다.

일반 함수로서 호출한 함수의 this 는 전역객체를 가리킨다.

일반 함수와 생성자 함수의 형식적 차이는 없다. 따라서 이를 구분하기 위해 생성자 함수를 선언할 때 일반적으로 파스칼 케이스(첫문자를 대문자로 기술)로 명명한다.

참고

모던 자바스크립트 Deep Dive

History API 로 SPA 구현

Fri, 28 Jun 2024 17:39:22 GMT

자바스크립트로 URL 라우팅을 구현하려고 한다. 바닐라 자바스크립트를 사용중이고 클라이언트 단 라우팅을 지원하는 라이브러리를 사용할 수 없기 때문에 자바스크립트의 Histroy API 를 사용하였다.

요구사항

로그인 버튼이나 회원가입 버튼, 홈 버튼 등을 클릭할 때 URL를 변경시키고 동시에 UI도 변경시킨다.

JS로 클라이언트 단에서 라우팅 처리

navigate() 함수 생성

이 navigate() 함수는 상태 객체를 인자로 받고, 상태 객체 안에 담겨있는 url 속성을 읽어서 url 에 맞는 UI를 화면에 보여준다. 따라서 이 함수를 호출하면 HTML에서 페이지의 내용이 바뀐다.

/**
 * 주어진 상태에 따라 해당 URL에 맞는 뷰를 표시.
 * @param {Object} state - 상태 객체.
 */
function navigate(state) {
  const { url } = state;
  const views = {
    chatting: document.querySelector("#chattingView"),
    login: document.querySelector("#loginView"),
  };

  switch (url) {
    case ROUTES.HOME:
      updateView(views, views.chatting);
      break;
    case ROUTES.LOGIN:
      updateView(views, views.login);
      break;
    default:
      break;
  }
}

/**
 * 업데이트할 뷰를 표시하고 다른 뷰를 숨긴다.
 * @param {Object} views - 모든 뷰를 담고 있는 객체.
 * @param {HTMLElement} viewToShow - 표시할 뷰의 DOM 요소.
 */
function updateView(views, viewToShow) {
  Object.values(views).forEach((view) => view.classList.add("hidden"));
  viewToShow.classList.remove("hidden");
}

updateRoute 핸들러 생성

이제 헤더 버튼에 클릭 이벤트 핸들러를 설정한다.

사용자가 각 버튼을 클릭하면 브라우저의 주소 표시줄의 URL이 바뀔 수 있도록 history.pushState() 메서드를 호출한다. 첫 번째 인자에는 경로 정보가 담겨있는 상태 객체를 넘기고, 세 번째 인자로는 브라우저의 주소 표시줄에 표시할 경로를 문자열로 넘김니다. 마지막으로 위에서 작성한 navigate() 함수에 동일한 상태 객체를 넘겨서 페이지 내용이 바뀌게한다.

/**
 * 주어진 URL로 브라우저의 히스토리 상태를 업데이트 및 해당 상태로 navigate.
 * @param {string} url - 새로 업데이트할 대상 URL
 */
export function updateRoute(url) {
  const state = { url };
  if (url === window.location.pathname) {
    history.replaceState(state, "", url);
  } else {
    history.pushState(state, "", url);
  }
  navigate(state);
}

// 핸들러 등록
$headerTitle.addEventListener("click", () => updateRoute(ROUTES.HOME));

이 때, 동일한 버튼을 연속적으로 클릭하면 동일한 history가 history stack 에 쌓이기 때문에 이를 방지하기 위해 replaceState() 메서드를 사용한다.

PopStateEvent 이벤트 핸들러 등록

여기까지만 하면 URL 변경에 따라 UI가 적절하게 변경된다. 하지만 ‘뒤로가기’ 또는 ‘앞으로 가기’를 클릭하면 주소표시창에 URL만 변경될 뿐 페이지의 UI는 그대로다.

이 문제를 해결하기 위해 윈도우에서 발생하는 popstate 이벤트를 감지해서 라우팅 처리해준다. 위에서 pushState() 와 replaceState() 메서드의 첫 번째 인자로 상태 객체를 넘겨주었기 때문에, 해당 페이지로 뒤로 가기나 앞으로 가기가 되면, 이벤트 핸들러에 매개 변수로 해당 상태 객체가 넘어오게 된다. 따라서 이 상태 객체를 그대로 navigate() 함수에 인자로 넘겨준다.

/**
 * popstate 이벤트가 발생할 때 호출되어, 이벤트 상태를 가지고 navigate 한다.
 * @param {PopStateEvent} event - popstate 이벤트 객체.
 */
function popStateHandler(event) {
  const { state } = event;
  navigate(state);
}

window.addEventListener("popstate", popStateHandler);

데모

해당 코드 깃허브 주소 https://github.com/lee-yun-pyo/Login-Practice

Histroy API

Fri, 28 Jun 2024 16:48:14 GMT

history 전역 객체를 통해 브라우저 세션 히스토리에 대한 접근할 수 있다. 사용자의 방문 기록을 앞뒤로 탐색하고, 방문 기록 스택의 내용을 조작할 수 있는 유용한 메서드와 속성을 제공한다.

세션 히스토리란?

브라우저에서 페이지를 이동하면 위 사진처럼 페이지 이동 이력이 나타나는 데 이것을 history 스택이라고 한다. History API 를 이용하면 이 history 스택을 조작할 수 있다.

History 객체는 브라우저의 세션 기록(현재 페이지를 불러온 탭 혹은 프레임이 방문했던 페이지)을 조작할 때 사용합니다.

사용법

사용자 방문 기록을 앞 뒤로 이동하기

back() , forward() , go() 사용

histroy.back(); // 뒤로 이동
histroy.forward(); // 앞으로 이동

// 특정 지점으로 이동 
histroy.go(-1); // 뒤로 가기
history.go(1); // 한 페이지 앞으로 이동
history.go(2); // 두 페이지 앞으로 이동

// 새로고침
history.go();
history.go(0);

console.log(histroy.length); // 방문 기록 스택 페이지 수

이 세 메서드를 호출하면 브라우저는 해당 페이지를 reload 하기 때문에 SPA 에서 잘 사용되지 않는다.

주소창 URL 조작

History API는 브라우저의 현재 URL 조작할 수 있도록 pushState()와 replaceState() 메서드를 제공한다. 위에서 다룬 실제로 페이지가 이동하는 메서드와 다르게 이 2개의 메서드는 브라우저 주소 표시줄의 URL만 갱신되고 실제로 해당 페이지가 다시 불러오지는 않는다.

pushState(state, unused, url)
replaceState(state, unused, url)

두 메서드 모두 3개의 매개변수를 받는다.

첫 번째 인자는 이 URL에 연관된 상태 객체를 의미한다. pushState()와 replaceState() 가 호출되면 필수적으로 histrory 스택이 변경이 된다. 이 때, 스택에 들어가는 아이템의 정보로 이 상태 객체가 들어간다. url 정보 뿐만 아니라 다른 정보를 넣고 싶을 때 이 매개변수를 이용하면 된다.

두 번째 인자는 하위 호환성 때문에 존재하는 것으로 그냥 빈 문자열 "" 을 넘긴다.

세 번째 인자는 새로 변경할 URL 을 넘긴다. (상대 경로, 절대 경로 둘 다 가능). 새 URL은 현재 URL과 같은 출처여야 한다.

pushState() 메서드와 replaceState() 메서드 모두 현재 세션 히스토리를 변경하여 url을 변경시킨다. 하지만 세션 히스토리를 변경시키는 방식에 차이가 있다.

`pushState()`

인자로 넘어온 URL을 현재 페이지의 바로 다음 방문 기록으로 추가하고, 그 이후의 방문 이력을 있다면 모두 지운다.

// a -> b -> c -> d -> e
//      ⬆ 현재 페이지 
history.pushState({}, "", "x");
// a -> b -> x
//           ⬆ 현재 페이지
history.pushState({}, "", "y");
// a -> b -> x -> y
//                ⬆ 현재 페이지
history.back();
// a -> b -> x -> y
//           ⬆ 현재 페이지

따라서 pushState() 메서드를 호출한 이후 브라우저에서 ‘뒤로가기’ 버튼을 클릭해 원래 페이지로 돌아가는 것이 가능하지만 ‘앞으로 가기’ 버튼은 비활성화 된다.

`replaceState()`

인자로 넘어온 URL이 현재 페이지를 대체한다.

현재 페이지 다음에 있는 방문이력은 그대로 둔다.

// a -> b -> c -> d -> e
//      ⬆ 현재 페이지
history.replaceState({}, "", "x");
// a -> x -> c -> d -> e
//      ⬆ 현재 페이지
history.back();
// a -> x -> c -> d -> e
// ⬆ 현재 페이지

따라서 replaceState() 메서드를 호출한 이후 ‘뒤로 가기’ 버튼을 누르면 원래 페이지의 이전 페이지로 이동하고 ‘앞으로 가기’ 버튼을 누르면 다음 페이지로 이동할 수 있다.

`PopStateEvent`

PopStateEvent 는 브라우저에서 뒤로 가기나 앞으로 가기를 할 때 window 전역 객체에서 발생한다. 그러므로 이벤트 핸들러로 해당 URL에 부합하는 내용을 클라이언트에 보여줄 수 있다.

이 때 사용하는 것이 pushState() 메서드와 replaceState() 메서드의 첫 번째 매개변수인 상태 객체이다. 상태 객체를 읽어서 적절한 처리를 할 수 있다.

window.addEventListener("popstate", (event) => {
    const { state } = event;
});

이 PopStateEvent 는 SPA 구성할 때 페이지 이동 처리를 하기 위해 필수적으로 사용하는 이벤트이다. 실제 웹사이트 자체가 바뀌지 않는데 클라이언트 화면을 변경해주려면 해당 히스토리 이벤트를 프로그래머가 알아야 하는 데 PopStateEvent 가 이를 해결한다.

package.json 의존성 관리

Tue, 25 Jun 2024 12:23:10 GMT

package.json

package.json은 Node.js 프로젝트에서 사용되는 설정 파일로 프로젝트의 메타데이터와 함께 프로젝트에 필요한 의존성 패키지들을 정의하는 역할을 한다. 주로 프로젝트 루트 디렉토리에 위치하며, JSON 형식으로 작성된다.

dependencies

package.json 파일에서 dependencies는 프로젝트가 정상적으로 동작하는 데 필요한 패키지와 모듈들을 정의하는 부분이다. 이 섹션에 나열된 패키지들은 npm install 명령어를 실행하면 자동으로 설치된다. 각 패키지는 이름과 버전으로 지정된다.

dependencies 에 존재하는 패키지들은 프로젝트가 실행될 때 반드시 필요한 패키지들이다.

"dependencies": {
  "express": "^4.17.1",
  "mongoose": "^5.10.7"
}.

💡 Please do not put test harnesses or transpilers or other "development" time tools in your dependencies object.
dependencies 에 테스트 하네스, 트랜스필러 또는 기타 "개발" 시간 도구를 넣지 마세요.
npm 공식 문서

devDependencies

devDependencies는 package.json 파일에서 프로젝트의 개발 환경에서만 필요한 패키지와 모듈들을 정의하는 섹션이다. 이 패키지들은 애플리케이션의 실제 실행에는 필요하지 않지만, 개발 및 테스트, 빌드 과정에서 필요하다.

보통 테스팅 프레임워크(jest), 빌드 도구(webpack), 린팅 도구(eslint), 개발 서버(nodemon) 등에 사용된다.

"devDependencies": {
  "jest": "^26.6.3",
  "eslint": "^7.10.0"
}

이 섹션에 있는 jest와 eslint 패키지는 개발 중에만 필요하고 실제 애플리케이션이 배포되고 실행될 때는 이 패키지들이 필요하지 않다.

devDependencies에 있는 패키지들이 설치되지 않기 위해서 다음 명령어를 실행하면 된다.

npm install --production

버전 범위 기호

package.json 파일에서 버전 범위를 나타내는 기호들이 존재한다. 주로 semver(Semantic Versioning)를 따르는 패키지의 버전을 지정할 때 사용된다.

💡 Semantic Versioning (semver) 버전을 MAJOR.MINOR.PATCH 형식으로 나타낸다. (주 버전.부 버전.수정 버전)

기존 버전과 호환되지 않게 API가 바뀌면 MAJOR 을 올리고,
기존 버전과 호환되면서 새로운 기능을 추가할 때는 MINOR 을 올리고,
기존 버전과 호환되면서 버그를 수정한 것이라면 PATCH 을 올린다.

`^` 기호

^ 기호는 주어진 버전과 호환되는 모든 새로운 버전을 허용한다는 의미이다. 구체적으로는 MAJOR 가 변경되지 않는 한, 가능한 최신 버전을 설치할 수 있게 한다.

💡 ex) ^4.17.1는 다음과 같은 의미를 갖는다.

4.17.1 이상이면서 4.x.x 버전의 범위 내에서
가능한 최신 버전 (즉, 주 버전 4가 유지되는 한 최신 버전)

~4.17.1 이 허용하는 버전과 아닌 버전 다음과 같다.

✅ 4.17.1 4.17.2 4.18.0 4.19.3
❌ 5.0.0 이상

`~` 기호

~ 기호는 주어진 버전과 호환되는 수정 버전(PATCH) 업데이트만 허용합니다. 부 버전(MINOR)과 주 버전(MAJOR)은 고정된다.

💡 ex) ~4.17.1 은 다음과 같은 의미를 갖는다.

4.17.1 이상이면서 4.17.x 버전의 범위 내에서
가능한 최신 버전 (즉, 부 버전 17이 유지되는 한 수정 버전은 최신 버전 가능)

~4.17.1 이 허용하는 버전과 아닌 버전 다음과 같다.

✅ 4.17.1 4.17.2 4.17.3
❌ 4.18.0 이상

그 외 기호들

> 기호: 지정된 버전보다 높은 모든 버전을 허용한다.

💡 >4.17.1는 다음과 같은 의미를 갖는다.

4.17.1 보다 높은 버전 (즉, 4.17.1 제외)

따라서, >4.17.1 이 허용하는 버전과 아닌 버전 다음과 같다.

✅ 4.17.2 4.18.0
❌ 5.0.0 4.17.1 , 그 이상

이 외에도 이와 비슷한 >=, < <= 가 있다.

의존성 범위

일반적으로 의존성의 범위는 가능한 한 좁게 설정하여 안정성과 예측 가능성을 높이는 것이 좋다. 그러나 특정한 경우에는 유연성을 제공하기 위해 넓은 범위를 사용할 수 있다.

"dependencies": {
  "express": "4.17.1" // 좁은 범위 예시
  "express": "^4.17.1" // 넓은 범위 예시
}

프론트에서 MVC 패턴과 Flux 패턴

Mon, 24 Jun 2024 02:59:51 GMT

리액트 등장 전 Angular JS와 같은 프레임워크는 MVC 패턴을 유지하고 있었다. 이후 MVC 패턴의 문제점을 해결하기 위해 Flux 패턴이 등장했다.

먼저 MVC 패턴에 대해 알아보고 Flux 패턴에 대해 알아보자.

MVC 패턴이란?

Model, View, Controller 의 약자로 Model에 상태를 저장하고 Controller가 Model를 변경시킨다. 또한 Model이 변경되면 View를 업데이트 시킨다. 또한 View 에서도 Model를 변경시킬 수 있다.

프론트에서 MVC 패턴

[Frontend] View 에서 일어나는 일들

사용자가 입력을 하거나, 화면을 선택 및 클릭, 서버와 통신 등 View에서 많은 일들이 일어난다. 이는 View와 Model이 서로 영향을 줄 수 있음을 의미한다.

💡 1. View → Model ex) 사용자 입력으로 Model 변경 2. View ← Model ex) 서버로부터 데이터를 받아서 View 에 데이터 출력 결국, View ↔ Model 이 양방향으로 데이터가 흐르는 것을 알 수 있다.

많은 View를 가지는 프론트

하지만 프론트엔드에서는 View 개수가 매우 많다 (물론 1~2개 있을 수 있지만 View 규모가 커질 것이다. 따라서 우리는 View를 분리하여 여러 개의 작은 뷰를 만든다). 그리고 Model 도 다수 존재할 수 있다.

이는 View 와 Model 간 의존성과 복잡도가 증가시킨다. 그리고 이를 보안하기 위해 많은 View 와 Model 를 상호 연결하는 매우 큰 Controller 가 필요하다.

MVC 패턴의 한계

이렇게 되면 다수의 View와 Model이 존재하고 한 View에서 여러 Model를 변경시키고 한 Model에서 여러 View를 변경시키는 문제가 발생한다. 이는 어떤 View에서 상태를 변경시키면 다른 View에도 상태가 업데이트가 표시되는 등 추적하기 어려워 진다.

결국, 복잡도가 증가하고 데이터의 흐름을 파악하고 예측하기 힘들어진다.

이를 해결하기 위해 고안된 것이 Flux 패턴이다.

Flux 패턴

Flux 패턴은 Facebook에서 개발된 애플리케이션 아키텍처로, 단방향 데이터 흐름을 통해 애플리케이션의 상태 관리를 단순화하고 예측 가능하게 한다. Flux 패턴은 주로 대규모 애플리케이션에서 상태 관리의 복잡성을 줄이기 위해 사용된다.

구성 요소

Action (액션):
- 사용자나 다른 소스로부터 발생하는 이벤트이다.
- 액션 객체는 type 필드와 함께 데이터를 포함하여 디스패처에게 전달한다.
- ex) { type: 'ADD_TODO', payload: { text: 'Learn Flux' } }.
Dispatcher (디스패처):
- 모든 액션이 중앙 디스패처를 통해 전달된다.
- 디스패처는 액션을 받아서 등록된 모든 스토어에 전달하여 스토어 상태를 조작한다.
- 단일 디스패처를 사용하여 데이터 흐름을 중앙에서 관리한다.
Store (스토어):
- 애플리케이션의 상태와 상태를 변경하는 로직을 가진다.
- 스토어는 액션에 따라 상태를 업데이트한다.
- 디스패처에 의해 상태가 변경되면 스토어는 뷰에게 변경사항을 알린다.
- 스토어는 상태를 보유하고 있으므로 컨트롤러 역할을 한다.
View (뷰): 사용자에게 데이터를 표시하는 UI 컴포넌트.
- 뷰는 스토어로부터 상태를 받아와서 렌더링한다.
- 뷰에서 이벤트(사용자 입력 등)를 발생시키면 액션을 생성하여 디스패처에 전달한다.

각 요소들은 단방향 흐름에 따라 순서대로 역할을 수행하고 Action 이 View(사용자 입력 등)나 다른 소스(서버로부터 데이터 응답 등)로 부터 발생하면 처음부터 다시 순서대로 실행된다.

이로 인해 단방향 데이터 흐름으로 인해 상태 관리가 쉬워지고, 디버깅이 용이해지며, 애플리케이션의 복잡성이 낮아진다.

데이터 흐름 도식화

ex) To Do List에서 flux 패턴 적용

참고

JS 공부 - this

Thu, 06 Jun 2024 12:27:29 GMT

this 란?

자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수

this 의 목적

생성자 함수 내부에서 프로퍼티나 메서드를 추가하기 위해 자신이 생성할 인스턴스를 참조할 수 있어야 한다. 하지만, 생성자 함수로 인스턴스를 생성하려면 먼저 생성자 함수가 존재하여야 한다.
생성자 함수를 정의하는 시점에는 아직 인스턴스 생성하기 전이므로 생성자 함수가 생성할 인스턴스를 가리키는 식별자를 알 수 없다. 따라서 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 특수한 식별자가 필요하다.

this 바인딩

this 는 함수가 호출되는 방식에 따라 this 에 바인딩될 값이 결정된다. (동적)
렉시컬 스코프와 반대

함수 호출 방식에 따른 `this` 바인딩

1. 일반 함수 호출

일반 함수로 호출하면 함수 내부 this 에는 전역 객체가 바인딩 된다.
하지만 this 는 객체 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이므로 객체를 생성하지 않는 일반 함수에서는 의미가 없다.

var value = 1;

const obj = {
    value: 100,
    foo() {
        console.log(this); // { value: 100, foo: *f* }
        console.log(this.value); // 100

        function bar() {
            console.log(this); // window
            console.log(this.value); // 1
        }

        bar(); // 📌 일반 함수 호출
    }
};

obj.foo()

메서드의 중첩함수도 일반 함수로 호출되면 this에는 전역객체 바인딩

일반 함수로 호출된 모든함수(중첩함수, 콜백함수 등) 내부의 this 에는 전역 객체가 바인딩된다.

💡 (메서드 내부 중첩함수 또는 콜백함수의 this 바인딩 ≠ 메서드 내 this 바인딩)

💡 메서드 내의 중첩 함수 또는 콜백함수 중첩 함수 또는 콜백함수는 외부 함수를 돕는 헬퍼 역할을 하므로 외부 함수 로직을 대신하는 경우가 대부분이다. 하지만, 외부 함수인 메서드와 중첩함수 또는 콜백함수의 this 가 일치하지 않는다는 것은 헬퍼로 동작하기 힘들게 만든다.
따라서 메서드 내부 중첩함수나 콜백 함수의 this 바인딩을 메서드 내 this 바인딩과 일치 시켜야 한다.
방법 1. 메서드 내의 this 를 새 변수에 할당하고 중첩함수(또는 콜백함수) 내부에서 this 대신 변수를 할당한다.
방법2. 명시적으로 바인딩한다. (apply , call , bind 메서드 사용)
방법3. 화살표 함수 사용. 화살표 함수 내부의 this 는 상위 스코프 this 를 가리킴.

예시 코드

var value = 1;

const obj = {
    value: 100,
    foo() {
        console.log(this); // { value: 100, foo: *f* }
        // ⬇ 콜백 함수 내부의 this 에는 전역객체가 바인딩된다. 
        // 📌 콜백 함수의 this 바인딩과 객체 메서드(*foo()*) 내 this 바인딩을 일치 시켜야 한다. 
        setTimeout(function () {
            console.log(this); // window
            console.log(this.value); // 1
        }, 100);
    }
};

obj.foo();

방법 1: `this` 를 새 변수에 할당

var value = 1;

const obj = {
    value: 100,
    foo() {
        const that = this; // 메서드 내 this를 변수에 할당한다. 

        // 콜백 함수에서 this 대신 that를 참조한다. 
        setTimeout(function () {
            console.log(that.value); // *100*
        }, 100);
    }
};

obj.foo();

방법 2: `bind` 이용

var value = 1;

const obj = {
    value: 100,
    foo() {
        // bind 이용
        setTimeout(function () {
            console.log(this.value); // *100*
        }.bind(this), 100);
    }
};

obj.foo();

방법 3: 화살표 함수 이용

var value = 1;

const obj = {
    value: 100,
    foo() {
        // 화살표 함수 내부의 this는 상위 스코프의 this를 가리킨다. 
        setTimeout(() => console.log(this.value), 100); // 100
    }
};

obj.foo();

2. 메서드 호출

메서드 내부의 this 에는 메서드를 호출한 객체, 즉 메서드를 호출할 때 메서드 이름 앞 마침표(.) 연산자 앞에 기술된 객체가 바인딩된다.

💡 메서드는 객체에 포함된 것이 아니라 독립적으로 존재하는 별도의 객체다

const person = {
    name: 'Lee',
    getName() {
        return this.name;
    }
};

const anotherPerson = {
    name: 'Kim'
};

anotherPerson.getName = person.getName;

// getName 메서드를 호출한 객체는 anotherPerson 이다
console.log(anotherPerson.getName()); // Kim

const getName = person.getName;

// getName 메서드를 일반함수로 호출
console.log(getName()); // ''
// window.name

3. 생성자 함수 호출

생성자 함수 내부 this 에는 생성자 함수가 생성할 인스턴스가 바인딩 된다.

💡 생성자 함수 호출 시 주의할 점은 호출할 때 new 연산자와 함께 호출해야 생성자 함수로 동작한다. new 연산자를 사용하지 않고 호출하면 일반 함수로 동작한다.

function Circle(radius) {
    this.radius = radius;
    this.getDiameter = function () {
        return 2 * this.radius;
    };
}

// 객체 생성
const circle1 = new Circle(5);
console.log(circle1.getDiameter()); // 10

// new 연산자와 함께 호출하지 않으면 생성자 함수로 동작하지 않고 일반 함수 호출이다.
const circle2 = Circle(15);

// 일반 함수로 호출된 Circle에는 반환문이 없으로 undefined 반환
console.log(circle2); // undefined

// 일반 함수로 호출된 Circle 내부 this는 전역객체를 가리킴.
console.log(radius) // 15 (*window.radius*)

4. `apply` / `call` / `bind` 메서드에 의한 간접 호출

4.1. `apply` , `call`

apply , call 는 함수를 호출하고 호출하면서 첫번째 인수로 전달한 특정 객체를 호출한 함수의 this 에 바인딩한다.

💡 두 메서드의 차이 - apply 는 함수의 인수를 배열로 묶어 전달. - call 은 함수의 인수를 쉼표로 구분한 리스트 형식으로 전달.

두 메서드는 호출할 함수에 인수를 전달하는 방식만 다를 뿐 모두 동일한 기능(this로 사용할 객체를 전달하면서 함수 호출)을 수행한다.

4.1.1. apply , call 의 활용

유사 배열 객체에 배열 메서드를 사용하는 경우

function convertArgsToArray() {
    console.log(arguments);

    // arguments 객체를 배열로 변환
    const arr = Array.prototype.slice.call(arguments);
    console.log(arr);

    return arr;
}

convertArgsToArray(1, 2, 3); // [1, 2, 3]

4.2. `bind`

bind 메서드는 함수를 호출하지 않고 첫 번째 인수로 전달한 값으로 this 바인딩이 교체된 함수를 새롭게 생성해 반환한다.

4.2.1. bind 메서드의 활용

메서드의 this 와 메서드 내부 중첩함수 또는 콜백함수의 this 불일치 문제 해결에 활용.

const person = {
    name: 'Lee',
    foo(callback) {
        // 위치1. 콜백 함수가 호출되기 이전에 this는 메서드를 호출한 객체(person)를 가리킨다.
        setTimeout(callback, 1000); // 🚨

        // bind로 callback 함수 내부의 this 바인딩을 전달
        setTimeout(callback.bind(this), 1000); // 💡
    }
};

person.foo(function () {
    console.log(this.name); // 위치2. 일반함수로 호출되어 this는 전역객체를 가리킨다.
});

정리

this 는 함수 호출 방식에 따라 동적으로 결정된다.

함수 호출 방식	this 바인딩
일반 함수 호출	전역 객체
메서드 호출	메서드를 호출한 객체
생성자 함수 호출	생성자 함수가 생성할 인스턴스
apply, call, bind 메서드에 의한 간접 호출	apply, call, bind 메서드 첫 번째 인수로 전달한 객체

참고

모던 자바스크립트 Deep Dive

JS 공부 - 원시값과 객체

Tue, 07 May 2024 16:45:19 GMT

💡 자바스크립트 데이터 타입

숫자
문자열
불리언
null
undefined
심벌
객체

원시값과 객체

차이

원시값은 변경 불가능한 값 (immutable) , 객체는 변경 가능한 값 (mutable)
변수에 값 할당 시 원시값은 실제 값이 저장, 객체는 참조값이 저장
원시 값은 값에 의한 전달 방식, 객체는 참조의 의한 전달 방식

위 자바스크립트 데이터 타입 중 7. 객체 를 제외한 데이터 타입은 모두 원시값이다.

1. 변수

이번 주제 대해 이해하기 위해 변수 개념에 대해 알 필요가 있다.

변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다.

2. 원시 값 (변경 불가능한 값)

2-1. 변수가 원시 값을 저장하는 방법

원시 값을 할당한 변수에 새로운 원시 값을 재할당 시, 이전의 값을 변경하는 것이 아니라 새로운 메모리에 값을 저장하고 변수가 그 값을 가리키게 한다.

이 때 변수가 참조하는 메모리 주소가 변경되는 이유는 변수에 할당된 값이 변경 불가능하기 때문이다. 만약 값이 변경 가능하다면 변수가 가리키는 메모리 주소는 유지되며 원시 값 자체가 변경되면 그만이다.

이러한 특성을 불변성이라 한다. 불변성을 갖는 원시 값을 할당한 변수는 재할당 이외에 변수 값을 변경할 수 있는 방법이 없다. (데이터 신뢰성을 보장)

2-2. 원시 값: 변수에 변수를 할당했을 때 무엇이 어떻게 전달되는가?

var score = 80;
var copy = score;

console.log(score); // 80
console.log(copy); // 80

변수에 원시값을 갖는 변수를 할당하면 할당받는 copy 변수 에는 할당되는 score 변수의 원시 값이 복사되어 전달된다. (값에 의한 전달). 이때, score 변수와 copy변수의 값 80은 다른 메모리 공간에 저장된 별개의 값이다.

score = 100;

console.log(score); // 100
console.log(copy); // 80

두 변수의 원시 값은 각각 다른 메모리에 저장되어 있어 어느 한쪽에서 재할당을 통해 값을 변경해도 서로 간섭할 수 없다.

3. 객체 (변경 가능한 값)

3-1. 변수가 객체를 저장하는 방법

var person = {
    name: "Lee"
}

객체를 할당한 변수에는 생성된 객체가 실제로 저장된 메모리 공간의 주소가 저장되어 있다. 이 값을 참조 값이라고 하고 변수는 이 값을 통해 객체에 접근할 수 있다.

원시 값은 원시값을 갖는 변수 값을 변경하려면 재할당 외에 방법은 없다.

하지만 객체는 변경 가능한 값이 때문에 재할당 없이 객체를 직접 변경할 수 있다. 이때, 객체를 할당한 변수에 재할당을 하지 않았으므로 객체를 할당한 변수의 참조값은 변경되지 않는다.

var person = {
    name: 'Lee'
}

person.name = 'kim';

console.log(person); // { name: "Kim" }

3-2. 객체: 변수에 변수를 할당했을 때 무엇이 어떻게 전달되는가?

var person = {
    name: 'Lee'
}

// 참조 값 복사
var copy = person;

객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달된다. (참조에 의한 전달)

💡 부작용: 객체는 원시값과 다르게 여러개의 식별자가 하나의 객체를 공유할 수 있다

위 그림처럼 원본 person 을 사본 copy 에 할당하면 원본의 참조 값을 복사해서 사본에 저장한다. 이때, 원본과 사본은 동일한 참조값을 갖는다. 즉, 원본과 사본 모두 동일한 객체를 가리킨다. 이것은 하나의 객체를 공유하며 어느 하나에서 객체를 변경하면 다른 변수에도 영향을 미친다.

이처럼 객체는 변경이 가능하기 때문에 데이터 신뢰성 보장이 어렵다. 따라서 변경 가능한 데이터가 불변성을 유지하기 위한 방법으로 카피 온 라이트가 있다.

결론

원시 값을 할당한 변수를 참조하면 메모리에 저장되어 있는 원시 값에 접근한다. 하지만 객체를 할당한 변수를 참조하면 메모리에 저장되어 있는 참조 값을 통해 실제 객체 접근한다.

더하여

*Q : const 는 상수를 의미하는 데 왜 값이 변경되나요? *

const o = {};
var score;
o.a = 1;
console.log(o); // { a: 1 }

위 코드를 보고 위와 같은 질문을 할 수도 있다. 이것은 const 키워드와 변경 가능한 값의 의미에 대해 오해할 때 생기는 질문이다.

A: const 는 재할당이 금지된 변수(상수)를 나타내는 키워드일 뿐이다. 위 코드에서 상수 o 을 재할당하지는 않았다. {} 의 데이터 타입은 객체이므로 변경 가능한 값이다. 변경 불가능한 값과 변경 가능한 값이라는 말은 값 자체를 변경할 있나 없나의 차이지 변수 값을 변경할 수 있거나 없다는 것이 아니다.

참고

모던 자바스크립트 Deep Dive

Set 를 이용한 방문처리 (G4 샘터)

Tue, 07 May 2024 15:51:23 GMT

문제 18513 샘터

18513번: 샘터

💡 입력 첫째 줄에 자연수 N과 K가 공백을 기준으로 구분되어 주어진다. (1 ≤ N, K ≤ 100,000) 둘째 줄에 N개의 샘터의 위치가 공백을 기준으로 구분되어 정수 형태로 주어진다. (-100,000,000 ≤ 샘터의 위치 ≤ 100,000,000) 단, 모든 N개의 샘터의 위치들은 서로 다르게 주어진다.

풀이

샘물 위치를 큐에 넣고 1만큼 떨어진 주변을 탐색하여 값을 도출한다. 너비우선탐색을 사용하여 쉽게 풀이법을 찾을 수 있었다.

문제

하지만 방문처리를 하기 위해 배열을 길이를 선언해야 했다. 그러나, 샘터의 위치가 -1억부터 +1억까지의 총 2억 범위에 있기 때문에 메모리 초과 문제가 발생했다.

const visited = Array.from({ length: 200_000_000 }, () => false); // 🚨 메모리 초과

또한 집을 지을 수 있는지 위치 범위가 샘터의 위치 범위와 같다고 문제에서 볼 수 없기 때문에 방문 배열의 길이를 미리 선언하는 것은 옳지 않았다.

해결

따라서 배열대신 Set 자료구조를 사용하여 문제를 해결하였다.

set.add() 메서드를 사용하여 방문처리를 하고 set.has() 메서드를 통해 방문여부를 확인할 수 있다.

set.has() 의 시간 복잡도는 평균적으로 O(1) 이다. 이는 Set이 해시 테이블을 기반으로 구현되어 있기 때문에 해시 테이블을 사용하면 값의 존재 여부를 빠르게 확인할 수 있다.

코드

const dx = [-1, 1];

const [N, K] = inputArr.shift().split(" ").map(Number);
const arr = inputArr.shift().split(" ").map(Number);

const set = new Set(); // Set 선언

let house = 0;
let answer = 0;
const dequeue = new Dequeue();
arr.forEach((v) => dequeue.push([v, 0]));
arr.forEach((v) => set.add(v)); // 방문 처리

let isBreak = false;

while (dequeue.getLength()) {
  const [curX, count] = dequeue.shift();

  for (let i = 0; i < 2; i++) {
    const nx = curX + dx[i];

    if (set.has(nx)) continue; // 방문 여부 확인

    dequeue.push([nx, count + 1]);
    set.add(nx); // 방문 처리
    house += 1;
    answer += count + 1;
    if (house === K) {
      isBreak = true;
      break;
    }
  }

  if (isBreak) break;
}

console.log(answer);

정리

그동안 배열을 선언해서만 방문처리를 하였는데 Set 으로도 방문처리 방법이 있다는 것을 알게 되었다. 좋은 해결법인 것 같다.

JS 공부 - 브라우저 렌더링

Thu, 11 Apr 2024 08:04:59 GMT

브라우저 렌더링이란?

렌더링: HTML, CSS, Javascript로 작성된 문서를 해석하여 브라우저에 시각적으로 출력하는 것

렌더링할 문서 가져오기

브라우저 렌더링을 하기 위해서는 렌더링할 리소스가 필요하다. 렌더링할 리소스들은 서버에 있기 때문에 브라우저는 서버에 요청을 보내고 서버는 브라우저에게 요청에 대한 응답을 보낸다.

이에 브라우저는 주소창을 통해 서버에게 요청을 보낼 수 있다.

브라우저 url 주소창에 https://www.naver.com/ 을 입력하면 naver.com 서버로 요청을 보낸다. 이 경우 루트 요청(/) 을 보낸다. 서버는 루트 요청에 대해 암묵적으로 index.html 을 설정한다. 즉, https://www.naver.com/ 는 https://www.naver.com/index.html 을 같은 요청이다. )

https://www.naver.com/index.html 을 요청하면 index.html 뿐만 아니라 js파일, css파일, 이미지 파일도 요청한 것을 볼 수 있다. 이것은 HTML 문서를 해석면서 script 태그, link 태그, img 태그를 만나면 HTML 코드 해석을 중단하고 각 리소스를 요청하기 떄문이다.

문서 파싱하기

HTML 코드 파싱 및 DOM 생성

HTML 문서는 순수 텍스트로 이루어진 문서이기 때문에 브라우저가 해석할 수 있도록 변환한다.

 
 
 
   
    // 📌 HTML 파싱 중단, css 파일 로드
   Document
 
 
   
       apple
       banana

이와 같이 이벤트는 이벤트를 발생시킨 이벤트 타깃은 물론 상위 DOM요소에서도 캐치할 수 있다.

💡 event.target 와 event.currentTarget

event.target 실제로 이벤트를 발생시킨 DOM 요소
event.currentTarget 이벤트 핸들러가 바인딩된 DOM 요소
```
EventTarget.addEventListener('eventType', functionName [, useCapture])
```
addEventListener 방식으로 이벤트를 등록할 때 EventTarget 이 곧 event.currentTarget 이 된다.
event.target 와 event.currentTarget 은 버블링/캡처링 과정에 따라 서로 다를 수 있다.

이벤트 캡처링 캐치 방법

이벤트 핸들러 등록 방식 중 어트리뷰트/프로퍼티 방식은 타깃 단계와 버블링 단계만 캐치할 수 있다.
addEventListener 메서드 방식은 3번째 인자로 true 를 전달하면 캡처링 단계도 캐치할 수 있다. 3번째 인자로 false 를 전달하거나 생략하면 타깃 단계와 버블링 단계만 캐치할 수 있다.

이벤트 위임

function handleClick({ target }) {
    [...$fruits.children].forEach($fruit => {
        // 로직 처리
    });
}

document.getElementById("apple").onclick = handleClick;
document.getElementById("banana").onclick = handleClick;
document.getElementById("kiwi").onclick = handleClick;

코드 문제 (위임 X)

list가 많아진다면 그만큼 브라우저가 기억해야할 이벤트 리스너도 많아진다. (비효율)
list가 동적으로 추가해야 할 때 추가로 이벤트를 등록해야한다.

function handleClick({ target }) {
        *// 이벤트를 발생시킨 요소가 #fruits > li 자식 요소가 아니면 무시*
        if (!target.matches('#fruits > li')) return;
    [...$fruits.children].forEach($fruit => {
        // 로직 처리
    });
}
$fruits.onclick = handleClick;

이벤트 위임 효과

브라우저가 너무 많은 이벤트 핸들러를 기억하지 않게 하고, DOM 이 추가/삭제 될때 Event등록을 매번 해줘야 하는 수고를 없앨 수 있다.

이벤트 전파 막기

stopPropagation 메서드 이용
하위 DOM 요소의 이벤트를 개별적으로 처리하기 위해 이벤트 전파를 막는다.

참고

JS 공부 - 이벤트

Sun, 24 Mar 2024 13:49:22 GMT

개요

이벤트 핸들러

이벤트가 발생했을 때 브라우저에 의해 호출될 함수

이벤트 핸들러 등록

이벤트 발생 시 브라우저에게 이벤트 핸들러의 호출을 위임하는 것
3가지 방법이 있다.

💡 브라우저에게 함수 호출을 위임하는 이유 사용자가 언제 이벤트를 발생 (ex. 버튼 클릭)시킬지 모르기 때문에 개발자가 명시적으로 함수를 호출하지 않고 브라우저에게 함수 호출을 위임한다. 브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지(ex. 버튼 클릭 감지)하여 이벤트를 발생 시킬 수 있다.

const $button = document.querySelector('button');

$button.onclick = () => { console.log('button click'); };

이벤트 핸들러 프로퍼티에 함수를 할당하면 해당 이벤트가 발생했을 때 (버튼 클릭했을 때) 할당한 함수가 브라우저에 의해 호출된다.

이벤트 핸들러 등록

1. 어트리뷰트 방식

등록방법
- HTML 요소 어트리뷰트 중에는 이벤트 핸들러 어트리뷰트가 있는 데 값으로 함수 호출문을 할당한다.
이벤트 핸들러 어트리뷰트 이름: on + 이벤트 타입 (ex. onclick )

🚨 함수 참조가 아닌 함수 호출문을 할당? 이벤트 핸들러를 등록할 때 콜백 함수처럼 함수 참조를 등록해야 브라우저가 이벤트 핸들러를 호출할 수 있다. 만약 함수 호출문을 등록하면 함수 평가 결과가 이벤트 핸들러로 등록된다. 이 때, 함수를 반환하는 고차함수 호출문을 등록하면 문제가 없지만 함수가 아닌 값을 반환하는 함수 호출문을 등록하면 브라우저가 이벤트 핸들러를 호출할 수 없다.

이벤트 핸들러 어트리뷰트 값은 사실 암묵적으로 생성될 이벤트 핸들러의 함수 몸체를 의미한다.

즉, onclick="sayHi('lee')" 어트리뷰트는 파싱되어 다음과 같은 함수를 암묵적으로 생성한다.

function onClick(event) {
    sayHi('lee');
}

이후 생성된 함수를 onclick 이벤트 핸들러 프로퍼티에 할당한다. (결국 이벤트 핸들러 프로퍼티 방식과 동일)

💡 왜 이렇게 동작하는 지? 이벤트 핸들러에 인수를 전달하기 위해! 어트리뷰트 값으로 함수 참조를 할당하려면 인수를 전달하기 곤란하다.

React 나 Vue.js 같은 프레임워크에서는 이벤트 핸들러 어트리뷰트 방식으로 이벤트를 처리한다.

2. 프로퍼티 방식

등록방법:
- window 객체, DOM 노드 객체는 이벤트에 대응하는 이벤트 핸들러 프로퍼티를 가지고 있다. 이 이벤트 핸들러 프로퍼티에 함수를 바인딩한다.
이벤트 핸들러 프로퍼티 키 이름: on + 이벤트 타입 (ex. onclick )

이벤트 핸들러를 등록하려면 아래 3가지를 지정해야 한다.

이벤트 타깃 (event target): 이벤트를 발생시킬 객체 (ex. $button )
이벤트 타입 (event type): 이벤트 종류 (ex. click )
이벤트 핸들러: (ex. function () { console.log() } )

이벤트 핸들러 프로퍼티에는 하나의 이벤트 핸들러만 바인딩할 수 있다.

3. addEventListener 메서드 방식

등록 방법

EventTarget.addEventListener('eventType', functionName [, useCapture])

addEventListener 메서드는 이벤트 핸들러 프로퍼티 방식과 달리 하나 이상의 이벤트 핸들러를 등록할 수 있다. (등록된 순서대로 호출)

단, 동일한 이벤트를 중복 등록하면 하나만 등록된다.

const $button = document.querySelector('button');

const handleClick = () => console.log('클릭');

// 중복 등록 시 핸들러 하나만 등록
$button.addEventListener('click', handleClick);
$button.addEventListener('click', handleClick);

이벤트 핸들러 제거

이벤트 핸들러 프로퍼티 방식에서

제거 방법
- 이벤트 핸들러 프로퍼티에 null 를 할당한다. (removeEventListenr 메서드 ❌)

// 이벤트 핸들러 등록
$button.onclick = handleClick;

// 이벤트 핸들러 제거
$button.onclick = null;

addEventListener 메서드 방식에서

제거 방법
- removeEventListenr 메서드 사용 (인수는 등록과 동일)
- addEventListener 메서드에 전달한 인수와 removeEventListener 메서드에 전달한 인수가 일치해야 한다.

// 이벤트 핸들러 등록
$button.addEventListener('click', handleClick);

// 이벤트 핸들러 제거
$button.removeEventListener('click', handleClick);

💡 removeEventListener 의 인수로 전달한 이벤트 핸들러와 addEventListener 인수로 전달한 이벤트 핸들러는 동일해야 하기 때문에 만약 익명함수로 이벤트 핸들러를 등록했다면 이벤트를 제거할 수 없다.

단, 기명 이벤트 핸들러 내부에서 removeEventListener 메서드를 호출하여 이벤트 핸들러를 제거할 수 있다. 따라서 이 경우 이벤트 핸들러는 단 한번만 호출된다.

// 버튼을 여러번 클릭해도 한 번만 이벤트 핸들러 호출
$button.addEventListener('click', function foo() {
    console.log('클릭');

    // 이벤트 핸들러를 제거한다.    
    $button.removeEventListener('click', foo);
}

참고

모던 자바스크립트 Deep Dive

그래프 탐색 문제 (SV2 연결 요소의 개수)

Sun, 28 May 2023 17:25:54 GMT

문제

11724 연결 요소의 개수 https://www.acmicpc.net/problem/11724 알고리즘 분류: 그래프 탐색, DFS, BFS

풀이

이 문제 삽질을 많이 했다. 왜냐하면 문제의 내용을 정확히 파악하지 못했다.

입력값

6 2
3 4
4 2

입력값이 위와 같을 때 그래프는 위 그림처럼 표현할 수 있다.

이 때, 주의할 것이 두가지가 있다.

간선이 무방향인 그래프이다.
연결 요소의 개수를 구할 때 2-4-3 처럼 간선으로 이루어진 그래프 뿐만 아니라 1, 5, 6 간선도 연결 요소이다. 즉, 위 그래프의 연결 요소의 개수는 1이 아닌 4이다.

구현 코드

const filePath = process.platform === "linux" ? "/dev/stdin" : "./input.txt";

const [[N, M], ...arr] = require("fs")
  .readFileSync(filePath)
  .toString()
  .trim()
  .split("\n")
  .map((i) => i.split(" ").map(Number));

// 각 노드가 연결된 정보를 배열로 표현 (2차원 배열)
const graph = Array.from({ length: N + 1 }, () => []);
for (let i = 0; i < M; i++) {
  // 무방향 그래프 특징을 감안하여 배열을 표현한다.
  graph[arr[i][1]].push(arr[i][0]);
  graph[arr[i][0]].push(arr[i][1]);
}

// 각 노드가 방문된 정보를 배열로 표현 (방문한것은 1, 그렇지 않은 것은 0)
const visited = Array.from({ length: N + 1 }, () => 0);

// DFS 함수
function dfs(graph, start, visited) {
  // 현재 노드 방문처리
  visited[start] = 1;
  for (const i of graph[start]) {
    // 현재 노드와 연결된 다른 노드 재귀적으로 방문
    if (!visited[i]) dfs(graph, i, visited);
  }
  // 간선이 서로 연결된 노드를 모두 검사했으면 1을 반환
  return 1;
}

function solution(M, arr) {
  let result = 0;

  // 간선이 없는 경우 노드의 개수가 연결 요소 개수
  if (M === 0) return N;

  for (let i = 0; i < M; i++) {
    // 노드가 방문된 상태가 아니면 DFS 함수 호출
    if (visited[arr[i][0]] === 0) {
      result += dfs(graph, arr[i][0], visited);
    }
  }
  // 연결된 노드 없이 홀로 있는 노드의 수
  const alone = visited.filter((i) => i === 0).length - 1;
  return result + alone;
}

const answer = solution(M, arr);
console.log(answer);

Today I Learned

JS 문법

빈 배열 5개 요소를 가지는 배열을 생성할 때, Array.from() 과 new Array().fill() 차이

const array = Array.from({ length: 5 }, () => []);

const array = new Array(5).fill([]);

위 두 문장 모두 array을 출력하면 [ [], [], [], [], [] ] 같은 출력값이 나온다.

그러나,

array[0].push(1);

위 코드를 실행한다면 Array.from() 로 선언한 배열의 출력값은 다음과 같고,

[ [ 1 ], [ 0 ], [ 0 ], [ 0 ], [ 0 ] ]

new Array().fill() 로 선언한 배열의 출력값은 다음과 같다.

[ [ 1 ], [ 1 ], [ 1 ], [ 1 ], [ 1 ] ]

왜 이런 원치 않는 동작이 일어나는 것일까?

new Array()로 생성된 배열은 실제로 빈 배열을 가리키는 참조를 가지고 있다. fill([]) 메소드는 주어진 배열([])을 참조하여 해당 배열로 모든 요소를 채우는 것이 아니라, 배열이 가리키고 있는 참조를 공유하는 것이다.
따라서 fill([])로 요소를 채우면, 모든 요소가 동일한 빈 배열을 참조하게 된다.

이로 인해 하나의 요소를 수정하면 다른 요소에도 동일한 변경이 반영된다.

💡 따라서 배열을 생성할 때는 각 요소가 독립적인 빈 배열을 가지도록 하기 위해 다른 방법을 사용해야 한다. Array.from()을 사용하면 각 요소가 서로 다른 빈 배열을 가지게 된다.

슬라이딩 윈도우 (SV2 소가 길을 건너간 이유 5)

Sat, 27 May 2023 17:44:57 GMT

문제

14465 소가 길을 건너간 이유 5 (SV2) https://www.acmicpc.net/problem/14465

알고리즘 분류: 슬라이딩 윈도우, 누적합

풀이

입력값

입력값 N의 길이의 배열 하나를 생성하여 배열을 고장난 신호등은 0을 정상인 신호등은 1로 한다.

[ 0, 0, 1, 1, 0, 1, 1, 1, 0, 0 ]

여기서 슬라이딩 윈도우 알고리즘을 사용한다. 검사할 윈도우의 크기는 입력값 K 이며 각 윈도우의 내부 요소의 합과 K의 차를 구해 최솟값을 구한다.

코드

const filePath = process.platform === "linux" ? "/dev/stdin" : "./input.txt";

const [input, ...inputArr] = require("fs")
  .readFileSync(filePath)
  .toString()
  .trim()
  .split("\n");

const [N, K, B] = input.split(" ").map(Number);
const repaired = inputArr.map(Number);

const array = new Array(N).fill(1);
for (const element of repaired) {
  array[element - 1] = 0;
}

let window = array.slice(0, K).reduce((ac, cv) => ac + cv, 0);
let answer = K - window;
for (let i = K; i < N; i++) {
  window += array[i] - array[i - K];
  if (K - window < answer) answer = K - window;
}

console.log(answer);

Today I Learned

슬라이딩 윈도우 기법이란?

고정 사이즈의 윈도우가 이동하면서 윈도우 내에 있는 데이터를 이용해 문제를 풀이하는 알고리즘을 말한다.

위 예시의 윈도우 내의 요소들의 합을 차례로 구한다면 다음과 같다.

첫번째 윈도우 요소의 합: 1 + 15 + 1 + 2
두번째 윈도우 요소의 합: 1 - (1) + 15 + 1 + 2 + (+6)

이 때, 다음 윈도우의 요소의 합을 구할 때 다음 윈도우의 시작과 끝 인덱스의 요소를 하나씩 합하는 게 아니라 이전의 윈도우에서 첫번째 윈도우 요소를 빼고 끝 인덱스의 다음 인덱스의 요소를 더하면 된다.

누적합 문제 (GD5 개똥벌레)

Fri, 26 May 2023 17:41:47 GMT

문제

https://www.acmicpc.net/problem/3020

알고리즘 분류: 누적합

풀이

입력값이 위와 같이 주어졌을 때, 각 높이마다 장애물의 수를 구하면 된다. 즉, 위 입력값에서 [3, 2, 3, 2, 3, 2, 3] 을 도출하고 Math.min() 을 통해 최소값과 최소값의 개수를 구하면 된다.

Today I Learned

처음 코드

처음 구현할 때 [3, 2, 3, 2, 3, 2, 3] 을 도출하는 과정에서 시간 초과가 발생했다.

입력값으로 받은 석순과 종유석의 높이값만으로 결과를 도출했기 때문에 누적합을 구할 때 2중 for 문을 사용하였다.

/* 처음 작성한 코드 */

const sucksun = array.filter(
  (v, index) => index % 2 === 0
); // sucksun: [ 1, 3, 5]
const jongyusuck = array.filter(
  (v, index) => index % 2 !== 0
); // jongyusuck: [5, 3, 1]

const arr = new Array(H).fill(0);
for (let i = 0; i < sucksun.length; i++) {
  for (let j = 0; j < sucksun[i]; j++) arr[j]++;
} 
// arr: [ 3, 2, 2, 1, 1, 0, 0 ]


for (let i = 0; i < jongyusuck.length; i++) {
  for (let j = 0; j < jongyusuck[i]; j++) arr[arr.length - 1 - j]++;
} 
// arr: [ 3, 2, 3, 2, 3, 2, 3 ]

수정 코드

석순과 종유석의 높이값에 대응되는 인덱스를 저장한다.

석순은 배열의 뒤에서부터 누적합을 계산하고 종유석은 배열의 앞에서부터 누적합을 계산한다.

/* 수정한 코드 */
let sucksun = new Array(H + 1).fill(0);
let jongyusuck = new Array(H + 1).fill(0);
array.filter((v, index) =>
index % 2 === 0 ? jongyusuck[H - v + 1]++ : sucksun[v]++
);

// sucksun: [ 0, 1, 0, 1, 0, 1, 0, 0 ] // jongyusuck: [ 0, 0, 0, 1, 0, 1, 0, 1 ]

for (let i = 1; i <= H; i++) { sucksun[H - i] += sucksun[H - i + 1]; jongyusuck[i] += jongyusuck[i - 1]; }

// sucksun: [ 3, 3, 2, 2, 1, 1, 0, 0 ] // jongyusuck: [ 0, 0, 0, 1, 1, 2, 2, 3 ]

let newArr = []; for (let i = 1; i <= H; i++) { newArr[i - 1] = sucksun[i] + jongyusuck[i]; }

// newArr: [ 3, 2, 3, 2, 3, 2, 3 ]

이진탐색 문제 (SV2 과자 나눠주기)

Fri, 26 May 2023 06:48:47 GMT

문제

16401 과자 나눠주기 (SV2)

https://www.acmicpc.net/problem/16401

알고리즘 분류: 이진 탐색

풀이

입력으로 주어진 과자의 길이 중 최대 값을 기준으로 한다.

const start = 1;
const end = Math.max(...array);

이후 이진탐색으로 계산하여 매 중간값으로 주어진 과자의 길이들을 나눈 몫을 다 더해 더한 값이 조카의 수보다 작거나 혹은 크거나 같을 때를 비교하여 start와 end 값을 조정한다.

처음 코드를 작성할 때는 주어진 과자를 mid로 모두 계산을 하고 새로운 배열에 저장했다. 그리고 이 새로운 배열의 원소들의 합을 구했다.

function binary_search(array, start, end) {
  let result = 0;
  while (start <= end) {
    const mid = Math.floor((start + end) / 2);
    const newArr = array.map((element) => Math.floor(element / mid));
    const sum = newArr.reduce((ac, cv) => ac + cv, 0);
    if (sum >= M) {
      result = mid;
      start = mid + 1;
    } else {
      end = mid - 1;
    }
  }
  return result;
}

그러나 이 방법은 나눈 몫이 0일 때도 계산을 해야하고 새로운 배열 또한 생성해야 한다. 따라서 이 방법은 시간복잡도나 공간 복잡도 측면에서 좋지 않다.

보완한 코드 작성

function binary_search(array, start, end) {
  let result = 0;
  while (start <= end) {
    let sum = 0;
    const mid = Math.floor((start + end) / 2);
    for (let i = 0; i < N; i++) {
      if (array[i] >= mid) {
        sum += Math.floor(array[i] / mid);
      }
    }

    // ...생략
}

lee-yun-pyo.log

Blob 객체

Blob

주요 특징:

Blob 생성

프로젝트에 적용한 사례

요약

JS 공부 - var, let, const 과 호이스팅

스코프

스코프 체인

함수 레벨 스코프와 블록 레벨 스코프

var 키워드의 문제점

let 키워드 특징

const 키워드 특징

호이스팅

var 변수 호이스팅

let 변수 호이스팅

비동기 처리 - 1. 콜백 패턴

비동기 처리의 필요성

비동기 처리 방법 1: 콜백 패턴

콜백 패턴 사용

콜백 패턴의 단점

콜백 지옥 발생

에러 처리 어려움

JS 공부 - 생성자 함수에 의한 객체 생성

생성자 함수란?

객체 리터럴 사용 vs 생성자 함수 사용

객체 리터럴 사용의 문제점

생성자 함수 사용의 장점

생성자 함수는 객체를 반환하는데 왜 생성자함수에는 객체를 생성하고 반환하는 코드가 없는걸까?

생성자 함수 인스턴스 생성 과정

만약 this 아닌 다른 객체를 명시적으로 반환한다면?

내부 메서드 [[Call]] 과 [[Constructor]]

new 연산자

참고

History API 로 SPA 구현

요구사항

JS로 클라이언트 단에서 라우팅 처리

navigate() 함수 생성

updateRoute 핸들러 생성

PopStateEvent 이벤트 핸들러 등록

데모

Histroy API

세션 히스토리란?

사용법

사용자 방문 기록을 앞 뒤로 이동하기

주소창 URL 조작

pushState()

replaceState()

PopStateEvent

package.json 의존성 관리

package.json

dependencies

devDependencies

버전 범위 기호

^ 기호

~ 기호

그 외 기호들

의존성 범위

프론트에서 MVC 패턴과 Flux 패턴

MVC 패턴이란?

프론트에서 MVC 패턴

[Frontend] View 에서 일어나는 일들

많은 View를 가지는 프론트

MVC 패턴의 한계

Flux 패턴

구성 요소

데이터 흐름 도식화

참고

JS 공부 - this

this 란?

this 의 목적

this 바인딩

함수 호출 방식에 따른 this 바인딩

1. 일반 함수 호출

방법 1: this 를 새 변수에 할당

방법 2: bind 이용

방법 3: 화살표 함수 이용

2. 메서드 호출

3. 생성자 함수 호출

`var` 변수 호이스팅

`let` 변수 호이스팅

`pushState()`

`replaceState()`

`PopStateEvent`

`^` 기호

`~` 기호

함수 호출 방식에 따른 `this` 바인딩

방법 1: `this` 를 새 변수에 할당

방법 2: `bind` 이용

4. `apply` / `call` / `bind` 메서드에 의한 간접 호출

4.1. `apply` , `call`

4.2. `bind`