분류 전체보기

script 태그의 defer 키워드와 async 키워드 쉽게 알아보기

defer, async 스크립트란? script 태그에 추가될 수 있는 속성이다. HTML 코드를 보면, 혹은 와 같은 구문을 볼 수 있다. 역사를 알면, 이러한 속성 값들이 왜 생겼는지 알 수 있다. 역사를 살펴보며 천천히 배워보자. script 태그의 특징 초기의 브라우저 자바스크립트는 아주 짧고 간단한 스크립트 코드를 넣기 위해 존재했다. 그런데 동적인 웹의 발달로 자바스크립트 코드는 아주 길게 변했다. 브라우저는 DOM 을 생성하다가도 script 태그를 만나면, script 태그의 내용부터 해석하는 방식으로 동작했다. script 태그의 특징 때문에 생긴 문제 초기에 의도한대로 head 태그에 자바스크립트 코드를 몰아넣으니 DOM 을 생성하기도 전에 자바스크립트를 해석하느라 페이지 로딩 속도가 ..

컴포지트 패턴 (Composite Pattern, 컴포짓 패턴) 이란?

컴포지트 (Composite) 패턴 그룹 전체와 개별 객체를 동일하게 처리할 수 있는 패턴이다. 트리 형태로 데이터를 표현할 수 있을 때 유용하다. 여러 오브젝트를 트리 구조로 재구성한 뒤 오브젝트들을 각각의 오브젝트처럼 이용한다. 트리는 Leaf 와 Composite 로 이루어져 있다. 클라이언트가 복잡한 구조의 오브젝트를 이용할 때 복잡함에 영향을 받지 않고 쉽게 오브젝트를 이용할 수 있도록 도와준다. 다이어그램으로 살펴보기 Component 가 구조상 가장 Primitive 한 단위가 된다. Component 를 구현한 것이 Leaf 가 된다. Component 를 구현하면서 내부에 Component 를 포함하는 것이 Composite 가 된다. 이렇게 중첩 구조를 가진다. Client 입장에서는 ..

브릿지 패턴 (Bridge Pattern) 이란?

브릿지 (Bridge) 패턴 커다란 클래스 혹은 긴밀하게 연관된 클래스를 추상 부분과 구현 부분으로 쪼개어 나눈다. 두 부분이 독립적으로 개발될 수 있다. extend 보다 composition 을 적극 활용한다. 다이어그램으로 살펴보기 현실 예제 컵을 판매하는 회사가 있다. 컵의 재질은 플라스틱, 유리, 종이 등이 존재한다. 컵의 색상은 빨간색, 파란색, 노란색, 초록색 등이 존재한다. 컵을 클래스화 시켜서 자바 프로그램에 녹여넣고 싶은데, 어떤 방식이 좋을까? 상속 (extend) 을 통한 접근 먼저 Cup 클래스를 만들었다. 컵의 재질을 표현하기 위해서 Material 인터페이스를 추가했다. Material 을 상속하는 Plastic, Glass, Paper 등을 만들었다. 이를 이용해 Cup 에 ..

자바 디자인 패턴, 객체 생성 관련 패턴 (Object Creational Patterns) 이란?

객체 생성 관련 패턴이란? 이름처럼 객체의 생성에 관여하는 패턴이다. 객체 생성 과정에서 일반적으로 생길 수 있는 문제를 해결하기 위해 등장했다. 5가지 객체 생성 관련 패턴에 대한 간략한 설명 싱글톤 패턴 (Singleton Pattern): 하나의 객체를 생성하여, 애플리케이션 전역에서 이용할 수 있도록 만들어준다. 생성 비용이 비싸거나 생성이 까다로운 혹은 보안상의 문제로 단 하나만 존재해야 하는 객체를 생성할 때의 문제를 해결한다. 팩터리 메서드 패턴 (Factory Method Pattern): 연관된 여러 오브젝트를 손쉽게 생성할 수 있도록 만들어준다. 공통적인 필드를 여러개 가지고 있는 다양한 종류의 오브젝트를 만들어야 할 때 중복 코드를 줄이고, 확실하게 공통로직을 사용할 수 있게 해준다...

함수형 프로그래밍, 모나드(Monad) 란?

모나드란? 함수형 프로그래밍에서 자주 등장하는 디자인 패턴 중 하나이다. 일련의 연산 과정들을 감싸주는 컨테이너 혹은 래퍼이며, 예측 가능하고 구성 가능한 방식으로 이 단계들을 함께 연결(chaining) 하는 방법을 제공한다. 사이드 이펙트를 핸들링하거나, 불확실한 상태를 이용한 연산, 비동기 연산 등 평범하게 동기적으로 흘러가지 않는 연산을 처리할 때 코드가 복잡해지기 쉬운데, 이를 간단히 처리할 수 있게 해준다. 자바스크립트의 Promise 객체, 자바의 Optional 객체의 역할과 같다. 코드의 작성 시점에는 내부의 결과를 모르는데도 결과의 케이스에 따른 로직을 작성할 수 있다. Promise 객체는 비동기 연산을 캡슐화하고 체이닝한다. Optional 객체는 있을지 없을지 모르는 값에 대한 연..

모던 자바스크립트, 프라미스 2 - 유틸 메서드와 작업 패턴 그리고 안티 패턴

Promise 의 유틸 메서드 상황에 따라 편리하게 이용 가능한 유틸 메서드도 제공한다. Promise.all() 모든 Promise 가 resolve() 여야 then() 을 실행한다. 서로 의존하지 않고 병렬로 수행될 수 있는 여러 개의 비동기 작업이 있는데, 결과를 내기 위해서는 각 비동기 작업의 결과 값이 필요할 때 유용하다. ex) 3개의 영상의 조회수를 구하고 그 합을 구해야 한다면? const viewCount1 = getAsyncViewCount1(); const viewCount2 = getAsyncViewCount2(); const viewCount3 = getAsyncViewCount3(); viewCount1.then((count1) => { viewCount2.then((count..

모던 자바스크립트, 프라미스 1 - 기본 개념

프라미스 (Promise) 란? ES2015 에서 생겼다. 비동기 결과를 나타내는 객체이다. 작업을 비동기화하진 않으며, 비동기식의 결과를 관찰하는 방법이다. 여러 언어에서 promise, future, deferred 라는 다양한 이름으로 불리는 패턴이다. Promises/A+ 사양에 크게 의존한다. ES2018 에서 나온 async 와 상호작용하는 방식으로 많이 쓰인다. Promise 라는 이름은 엔진이 어떠한 비동기 작업을 하겠다고 약속한다는 의미에서 지어졌다고 한다. 프라미스를 사용하는 이유 프라미스는 자바스크립트에서 지원하는 대수타입의 모나드이며, 비동기 작업에서 서로간의 제어를 분리할 수 있도록 도와주는 역할을 한다. 비동기 작업의 제어권은 자바스크립트 엔진의 비동기 큐에게 맡기고, 비동기 작..

쿠키와 Iframe 으로 인한 트러블 슈팅 회고

원인 클라이언트사에 Iframe 에 embed 시킬 수 있는 전용 미니 웹페이지를 제공했다. 문제는 Iframe 에 embed 된 웹사이트에서 쿠키가 함께 사용되었다. 여기서 문제가 생겼다. 쿠키는 자신이 사용되어야 할 곳을 도메인 으로 구분한다. Iframe 은 aaa.co.kr 도메인 내의 페이지를 보여준다. Iframe 을 보여주는 웹페이지 자체는 bbb.co.kr 이었다. aaa.co.kr 에서 bbb.co.kr 의 쿠키를 받으니 쿠키는 매 응답마다 왔지만 바로 버려졌다. 브라우저 내부에서 Iframe 으로부터 전달받은 쿠키를 그대로 사용하면 보안상 이슈가 생긴다. 브라우저 초창기에는 Iframe 으로부터 전달받은 쿠키를 그냥 사용했으나, 점차 이를 악용하는 피싱 사이트들이 생겨났다. 마음만 먹으..

매크로 태스크 (Macro Task) 와 마이크로 태스크 (Micro Task) 란?

마이크로 태스크 (Micro Task) 와 매크로 태스크 (Macro Task) 자바스크립트에서 비동기 작업에 대해 공부하다 보면, 마이크로 태스크 (Micro Task) 와 매크로 태스크 (Macro Task) 라는 용어가 나온다. 둘 다 즉시 실행되지 않고 일단 대기 후에 실행되는 비동기 작업이라는 공통점이 있지만 둘은 다르게 처리된다. 마이크로 태스크 (Micro Task) 란? 현재 수행 중인 작업이 끝난 뒤에 이어서 실행될 작업 (콜백) 을 말한다. 프로미스 핸들러에서 볼 수 있는 then(), catch(), finally() 와 같은 예시가 있다. Node.js 에서 process.nextTick() 과 같은 메서드가 있다. nextTick() 에서 tick 은 이벤트 루프를 한 번 반복하는..

Intellij Tomcat 사용 환경에서 .js .css .properties 등 리소스 쉽게 업데이트 하기

Intellij 단축키로 리소스 업데이트 방법 우측 상단 Tomcat 을 클릭하여 Edit configurations... 을 클릭한다. On Update Action, On Frame Deactive Action 이 두개를 Update Resources 로 바꾸어준다.

2023년 2월 2주차 임대차 계약 관련 회고

2023년 2월 2주차 회고 드디어 집을 구했다. 1월 말과 2월 초는 집을 구하느라 매우 바빴다. 결과적으로 내 문제를 해결해주는 집을 구했다. 몇가지 아쉬운 협의점도 있지만, 결과적으로는 손해가 아니라서 감내하기로 했다. 집에 잔존했던 문제들 현재 살고있는 집도 나쁘진 않았지만, 몇가지 문제가 있었다. 이건 정리해두면 도움이 될 것 같아 따로 정리한다. 소음 관련 문제 지금 살고 있는 곳은 법적으로 '근린생활시설'이다. '근린생활시설'은 주거용 혹은 상업용으로 선택하여 쓸 수 있는 시설이다. 1층에 택배회사가 있는데 이 회사에 아침마다 택배를 싣는 대형 트럭이 들어와서 매우 시끄럽다. 나는 개인적으로 소음에 민감하다. 작은방에서 자면, 소음이 없는 편인데 큰 방에서는 개인..

클로저 (Closure) 란 무엇인지 설명해주세요.

클로저란 무엇인가요? 함수에서 반환된 내부 함수가 이미 콜스택 영역에서 제거된 외부 함수 영역의 참조를 잃지 않고 기억하는 것을 말합니다. 함수 내부에 [[Scopes]] 라는 프로퍼티가 있기에 가능합니다. 이는 자바스크립트 코드로는 접근이 불가능하지만, 실행 컨텍스트에서의 Lexical Environment 를 기억하고 있습니다. function outer() { let count = 0; return function inner() { return count++; }; } const inner = outer(); console.log(inner()); // 0 console.log(inner()); // 1 console.log(inner()); // 2 클로저의 장점은 무엇인가요? 메모리 효율적이다...