분류 전체보기

HTTP 쿠키 (HTTP Cookie) 란?

HTTP 쿠키란? HTTP 쿠키를 이해하기 전에 HTTP 공부가 선행된다. HTTP 통신 프로토콜을 모르면 쿠키만 공부해봐야 반쪽짜리 지식이다. HTTP 프로토콜은 기본적으로 무상태 (stateless) 프로토콜이다. 무상태란 통신 중에 아무것도 저장하지 않는 것을 말한다. 아무것도 저장하지 않기에 통신이 끝나면 아무것도 기억하지 못한다. HTTP 프로토콜이 무언가를 기억할 수 있게 하는 1가지 방법이 있는데, 이를 '쿠키'라 한다. 쿠키는 인터넷 통신의 매개체인 '브라우저'가 기억한다. 브라우저는 쿠키를 저장해두었다가 매 HTTP 요청마다 저장소에 있는 쿠키를 함께 보낸다. 사실, 무상태라는 것은 큰 장점이다. 상태가 없다면, 같은 것을 물어봤을 때 매번 똑같이 응답한다. ..

호이스팅이란 무엇인가요?

호이스팅이란? 호이스팅이란 자바스크립트 엔진의 동작 매커니즘 중 하나로 변수, 함수, 클래스 선언을 코드 실행 전 최상단 스코프로 끌어올리는 것을 말합니다. 이해를 위해 끌어올린다는 표현을 사용하였으나 실제로 각 식별자들을 인식하는 과정입니다. 단, 선언(declaration) 만 끌어올릴 뿐 초기화(initialization) 를 끌어올리지는 않습니다. 코드 예제 var 의 경우 console.log(message); //output : undefined var message = "The variable Has been hoisted"; 선언이 끌어올려져 undefined 를 출력하고 있습니다. var message; console.log(message); message = "The variable H..

메모이제이션이란 무엇인가요?

메모이제이션이란? 메모이제이션은 프로그래밍 기법 중에 하나입니다. 이 기법을 캐시라고 부르는 사람들도 있습니다. 한 번 연산한 값을 메모리에 기억해두었다가 값이 필요할 때 연산을 다시 반복하지 않고 메모리에서 이미 연산된 값을 다시 꺼내쓰는 기법입니다. 만일 함수의 결과가 외부 요인에 영향을 받지 않는다면, 메모이제이션 기법을 적용할 수 있는 좋은 대상이 됩니다. 인자별 결과 값을 메모리에 저장해두면 나중에 같은 인자로 함수가 호출되었을 때 연산을 하지 않고 메모리에서 바로 값을 제공할 수 있습니다. 이렇게 함수의 결과 값을 메모리에서 가져오면, 비싼 컴퓨팅 자원을 아끼게 해주고 함수 실행 결과도 매우 빨리 나오게 됩니다. 주로 재귀 함수나 동적 프로그래밍에 이 기법이 많이 이용됩니다. 웹에서는 만일 매..

자바스크립트에서 URL 을 인코드하거나 디코드하는 방법에 대해서 알고 있나요?

자바스크립트 URL 인코드 디코드 방법 URL 인코드 디코드는 아래의 경우에 사용합니다. URL 파라미터에 특수문자가 있는 데이터를 넘길 때 ex) www.naver.com/search?keyword=%3A%2F%2F%5E%5E%3A%2F%2F 쿠키에 데이터를 담을 때 쿠키의 데이터의 기호가 쿠키의 양식에 맞지 않게 들어가 HTTP 헤더의 포맷을 깰 수 있으므로 인코딩하여 넘기는 것이 안전합니다. encodeURI(), decodeURI() 글로벌 오브젝트에 내장 메서드로 encodeURI() 와 decodeURI() 가 있습니다. 이 함수를 통해서 "full URL"을 인코드하거나 디코드할 수 있습니다. 가끔은 encodeURI() 와 decodeURI() 를 통해 인코딩 디코딩이 불가능한 경우도 있습..

빌더 패턴 (Builder Pattern) 이란?

빌더 패턴이란? 객체 생성에 연관된 패턴이다. 복잡한 객체들을 단계별로 생성할 수 있게 만들어 복잡도를 줄여준다. 동일한 프로세스를 거쳐 다양한 구성의 인스턴스를 만드는 방법을 제공한다. 해결하려는 문제 객체에 아주 많은 필드가 들어있어 복잡할 때 객체 생성이 어려운 문제가 있다. 생성자에 필드를 몰아놓으면 처음 객체를 생성하기가 매우 어렵다. Setter 를 이용하려고 하면, 필수값과 연계값 등 제약조건을 넣기 힘들다. 복잡한 객체를 생성할 때 빌더 패턴을 사용하면 조금 더 쉽게 생성할 수 있다. 빌더 패턴 다이어그램으로 살펴보기 복잡한 Product 를 만드는 경우, Builder 에 추상 메서드를 추가하고, ConcreteBuilder 가 이를 구현하도록 위임하여 복잡한 객체를 만드는 프로세스를 독..

모던 자바스크립트, 메서드 정의 문법과 super, [[HomeObject]]

메서드 정의와 super, [[HomeObject]] 메서드 정의 문법은 function 키워드 없이 객체 내에서 메서드를 선언하는 것이다. [[HomeObject]] 에 접근할 수 있도록 해준다. super 에 접근이 가능하다. const obj = { functionProperty: function() { // 함수 프로퍼티 문법 (function 키워드 사용) } method() { // 메서드 정의 (function 키워드와 ':' 이 없음) }, }; super 접근 예제코드 정말 메서드 문법에서만 super 에 접근 가능한지 확인해보자. 메서드 문법을 사용하지 않는 경우 const obj1 = { name: "Joe", toString: function () { return su..

모던 자바스크립트, 단축 속성 (shorthand properties)

단축 속성 (shorthand properties) 단축 속성 (shorthand properties) 은 프로퍼티의 키와 값이 동일할 때 키만 적어도 같은 이름의 변수 값을 값 영역으로 끌어온다. 예제 function getMinMax(nums) { const min = Math.min(...nums); const max = Math.max(...nums); return { min, max }; } getMinMax([1, 2, 3]); // {min: 1, max: 3}

모던 자바스크립트, 계산된 속성 이름 (computed property name)

계산된 속성 이름 (computed property name) 계산된 속성 이름 (computed property name) 은 표현식의 결과를 프로퍼티의 이름으로 쓸 수 있게 해준다. 예제1: 기본 사용법 const name = "answer"; const obj = { [name]: 100, }; console.log(obj); 예제2: 작동 순서 파악하기 let counter = 0; const obj = { [counter++]: counter++, [counter++]: counter++, }; console.log(obj); // {"0": 1, "2": 3} 인터프리터에 의해 해석되는 시점에 왼쪽에서 오른쪽으로 위에서 아래로 식이 하나씩 평가된다. let counter = 0; const g..

모던 자바스크립트, 프로토타입 얻기 설정하기 (getPrototypeOf, setPrototypeOf)

객체 프로토타입 얻기와 설정하기 Object.getPrototypeOf(o) 를 통해 객체의 프로토타입을 얻을 수 있다. ES5의 obj.__proto__ 와 같다. Object.setPrototypeOf(obj, proto) 를 통해 객체의 프로토타입을 설정할 수 있다. ES5의 obj.__proto__ = proto 와 같다. ES5 예제 소스코드 const proto = { greet() { console.log(`proto greet, name = ${this.name}`); }, }; const obj = Object.create(proto); console.log(obj.__proto__); // {greet: ƒ} obj.name = "Joe"; obj.greet(); // proto gre..

추상 팩토리 패턴 (Abstract Factory Pattern) 이란?

추상 팩토리 패턴이란? 서로 관련된 여러 객체를 만들어주는 인터페이스를 제공하고 이를 구현하는 패턴 관련이 깊은 여러 종류의 객체를 일관된 방식으로 생성하는 경우에 유용하다. 팩토리 메서드 패턴 과 굉장히 비슷하다. 팩토리 메서드 패턴 은 하나의 객체 생성을 어떻게 할까에 집중하는 반면, 추상 팩토리 패턴은 관련 있는 여러 객체를 묶어 여러 구체적 클래스에 의존하지 않는 것에 집중한다. 다이어그램으로 살펴보기 AbstractFactory 는 CreateProductA() 와 CreateProductB() 라는 추상 메서드를 제공한다. ProductA 와 ProductB 를 생성한다. 구체적인 객체 생성 방법의 구현은 하위 클래스에게 맡긴다. ConcreteFactory1 과 ConcreteFactory2..

팩토리 메서드 패턴 (Factory Method Pattern) 이란?

팩토리 메서드 패턴이란? 객체 생성 패턴의 한 종류이다. 팩토리 패턴은 객체 생성 역할을 별도의 클래스에 넘기는 패턴을 말한다. 객체 생성 책임을 구체적인 클래스가 아닌 추상 메서드에 넘긴다. 인터페이스나, 추상 클래스로 구현이 가능하다. 다양한 팩토리 클래스를 만들어 객체 생성 추상 메서드를 구현할 수 있다. 다이어그램으로 살펴보기 Creator 는 factoryMethod() 라는 추상 메서드를 가지고 있다. Product 타입의 객체를 반환한다. factoryMethod() 는 추상 메서드인만큼 누군가 구현해주어야 한다. Creator1 은 Creator 의 구현체이다. 추상 메서드였던 factoryMethod() 를 구현했다. Product1 은 Product 의 구현체로 Product 를 상속한..

2022년 연간 회고, 정신없었지만 행복했던 2022.

2022년 전체 회고 내 개발자 인생에서 2021년과 2022년은 가장 큰 변화가 있는 시기였다. SI 업무를 하다가 처음으로 서비스 회사의 업무를 시작했다. 많은 시행착오를 겪고, 또 많은 다짐을 하게 만들었다. 전체적인 글의 구조 원하는 것을 구체적으로 알아야 내 삶의 전체적인 방향성을 잡을 수 있기에 이것부터 적을 것이다. 실제 있었던 일을 적어보고 그에 대한 피드백에는 내가 원하는 것이 이뤄질 수 있도록 하려면 앞으로 어떻게 행동해야 할지를 적는 식으로 회고할 것이다. 삶에 대한 메타인지를 높이기 위해 내가 원하는 것, 내가 원하지 않는 것, 내가 행동한 것, 행동에 대한 결과 순으로 적어볼 것이다. 삶은 간단하게 가치관에 따른 결정, 결정에 따른 행동, 행동에 따른 결과 만 있다고 생각한다. 이..