꾸르빅 블로그

[디자인 패턴 바이블] 4장. 콜백을 사용한 비동기 제어 흐름 패턴

꾸르빅 — Sun, 24 Mar 2024 10:30:28 +0900

4-1. 비동기 프로그래밍의 어려움

- Javascript는 클로저와 익명 함수로 인해 개발자가 코드베이스 지점을 옮겨다니지 않고 원할한 프로그래밍을 할 수 있게 해준다. 따라서 비동기 코드 작성 시 제어를 놓치는 일이 흔하게 발생한다.

4-1-1. 콜백 지옥

- 많은 클로저와 in-place 콜백 정의가 코드의 가독성을 떨어뜨리고 관리할수 없는 덩어리 형태로 만드는 것을 콜백 지옥이라고 한다.

- 콜백 지옥의 문제점

1) 가독성 하락

2) 스코프에서 사용되는 변수 이름 중복(ex. err). 어떤 이들은 각 스코프의 객체를 구분(err, err1, err2, error)하려고 하고, 어떤 이들은 항상 같은 이름(err)을 사용하려고 하는 등 코드컨벤션을 맞추기 어려워진다.

3) 성능 하락(클로저는 성능 및 메모리를 많이 점유한다) 및 메모리 누수 가능성

4-2-1. 콜백 규칙

1. 콜백을 정의할 때 in-place 함수 정의를 남용하지 않는다. 가급적 중첩없이 개별적인 함수를 작성한다.

2. 빠른 반환 원칙 : callback 실행 후에도 함수가 계속 동작하기 떄문에 나머지 함수의 실행을 차단하는 return 명령어를 삽입하는것을 잊지 말아야 한다! 자주 발생하는 실수!

// 비선호
if (err) {
	cb(err)
} else {

}

// 선호
if (err) {
	return cb(err)
}

4-2-3. 순차 실행

- 일련의 작업을 순차적으로 실행한다는 것은 한번에 하나씩 실행한다는 것. 즉, 실행 순서가 중요하고 이를 지켜야 한다.

- 직접방식의 블로킹API를 사용하여 구현할때는 비교적 간단하지만, 일반적인 비동기 API를 사용하는 경우 콜백 지옥의 주된 원인이 된다.

- 코드를 개발하는 경우 컬렉션을 이용하여 작업 목록을 순차적으로 반복하고, 완료 시 비동기 작업(콜백)을 수행하는 방식으로 개발할 수 있다. = reduce 알고리즘의 기본이 되는 패턴.

순차 실행 기본 패턴

4-2-4. 무한 병렬 실행

- 비동기 작업들의 실행 순서가 중요하지 않고, 작업의 모든 실행이 끝났을 때 알림을 받으면 되는 작업

- Node.js의 블로킹 성질(내부적으로 동시 처리) 덕분에 단일 스레드임에도 불구하고 동시성을 달성할 수 있다.

- 각 작업이 완료되면 결과를 컬렉션에 모으거나, 배열에 매핑 후 완료되었다는 finish() 콜백을 호출하는 방식으로 구현할 수 있다. 이때 경쟁(competitive race)를 주의해야 한다.

- 병렬에서 다중 작업이 실행되고 있을 때, 외부 리소스에 대한 접근에 대한 경쟁 상태(race condition)을 가질 수 있기 떄문!

- Node.js는 단일 스레드에서 실행되고 병렬화를 일반적인 방법으로 사용하기 떄문에, 다중 스레드 프로그래밍에서 사용하는 동기화 메커니즘(lock, 뮤텍스, 세마포어) 같은 구조를 사용하지 않아도 된다.

무한 병렬 실행 기본 패턴

4-2-5. 제한된 병렬 실행

- 무한 병렬 수행은 Dos(Denial-of-service) 공격에 취약하기 때문에 병렬 작업의 수를 제한하는 것이 복원력있는 애플리케이션을 만드는데 도움이 된다.

- 한번에 수행하는 동시성을 제한하는 방식으로 간단하게 구현할 수 있다(순차실행 + 병렬실행의 혼합). 이경우 작업 순서를 지정할 수도 있으며, 동시에 실행하는 수만 지정하고자 하는 경우 큐(Queue)를 사용하는 메커니즘으로 구현하면 된다.

- 큐 + EventEmitter를 혼합하여 관찰자 패턴을 조합하면, 에러가 발생한 경우에도 큐가 정상적으로 동작하며, 큐 기반 시스템에서 작업이 정지되지 않고 에러 발생 시 재시도 및 복구전략을 수립할 수 있다.

4-3. 비동기 라이브러리

- nodejs에서 주로 사용하는 async 라이브러리가 이와 같은 방식이다.

1) 컬렉션으로 비동기 함수 수행(순차적/제한된 동시성과 함께 병렬 수행)

2) 모든 함수의 출력이 다음 함수의 입력이 되는 비동기 함수 체인

3) Queue 추상화 사용.

[디자인 패턴 바이블] 3장. 콜백과 이벤트 (2)

꾸르빅 — Sun, 24 Mar 2024 09:46:21 +0900

3-1. 관찰자 패턴

- 관찰자 패턴이란? Node.js의 반응적(reactive) 특성을 모델링하고 콜백을 완벽하게 보완하는 이상적인 해결책.

상태 변화가 일어날 때, 관찰자(또는 Listener)에게 통지할 수 있는 객체를 정의하는 것

- 콜백 패턴과의 차이 : 콜백은 일반적으로 하나의 리스너에게 결과를 전달하는 반면, 관찰자 패턴은 주체가 실질적으로 여러 관찰자에게 통지를 할 수 있다.

3-2-1. EventEmitter 클래스

- Node.js에서의 관찰자 패턴은 이미 코어에 내장되어 있으며, EventEmitter 클래스를 통해 사용할 수 있다.

- 특정 유형의 이벤트가 발생되면 호출되는 하나 이상의 함수를 리스너로 등록할 수 있다.

import { EventEmitter } from 'events'
const emitter = new EventEmitter()

3-2-2. EventEmitter 생성 및 사용

- 필수 method

1) on(event, listenr) : 주어진 이벤트 문자열에 대해 새로운 리스너(함수)를 등록

2) once(event, listener) : 첫 이벤트가 전달된 후 제거되는 1회성 리스너 등록

3) emit(event, [arg1], [...]) : 새 이벤트를 생성하고 리스너에게 전달할 추가적인 문자열(인자)를 제공

4) removeListenr(event, listenr) : 지정된 이벤트 문자열에 대한 리스너를 제거

3-2-3. 오류 전파

- EventEmiiter는에러가 발생했을 때, 콜백처럼 예외를 throw 하는 방식이 아니라 error라는 특수한 이벤트를 발생시키고, Error 객체를 인자로 전달하는 방식으로 진행한다.

- 오류 이벤트가 발생하고 이에 연결된 리스너가 없을 경우 자동으로 예외를 throw하고 애플리케이션이 종료되니 오류 리스너를 필수적으로 등록해줘야 한다.

3-2-5. 메모리 누수

- 관찰 가능한 주체들에 대해서 오랜 시간동안 구독을 하고 있을 때, 더이상 구독이 필요하지 않은 경우 구독 해지를 해야 메모리 누수를 예방 할 수 있다.

- 구독 해지 시, 리스너의 scope에 있는 더이상 사용되지 않는 객체의 메모리 점유를 해제하기 떄문에, 사용하지 않는 리스너는 제거해주는것을 권장한다.

emitter.removeListener('an_event', listener)

- emitter 자체에 대한 참조가 더이상 활성되어 있지 않아 도달할 수 없게 되는 경우에만 가비지 컬렉션에 잡혀 메모리 점유를 해지한다. 즉, 코드를 잘못 작성하여 해제되지 않는 영구적인 EventEmiiter를 등록한다면 메모리 누수를 일으키게 되니 주의해야 한다(ex. once 메소드 사용하였는데, 이벤트가 한번도 발생하지 않는 경우)

- 리스너의 수가 일정 갯수(default 10)를 초과하면 EventEmitter가 경고를 발생시키는 기능을 활용하면 좋다.

(node) warning: possible EventEmitter memory leak detected. 11 listeners added.

Use emitter.setMaxListeners() to increase limit.

3-2-6. 동기 및 비동기 이벤트

- EventEmitter는 기본적으로 비동기적 이벤트를 다루는데 사용한다. 이벤트를 동기적으로 발생시키는 것은 EventEmitter가 필요하지 않거나, Zalgo 의 상황(동기와 비동기 이벤트를 혼합하여 사용하는 것)이다.

// 파일에서 특정 단어를 찾으면 이벤트를 발생시키는 경우
// find()함수에서 readFile(비동기) 사용시 found1, found2 둘다 감지되나, 
// readFileSync(동기) 사용 시 found1만 감지됨
findRegexInstance
   .addFile(...)
   .on('found1', (file,match) => console.log('match found1'))
   .find()
   .on('found2', (file,match) => console.log('match found2'))

- 이벤트가 비동기적으로 발생할 때, 현재의 스택이 이벤트 루프에 넘어갈 때 까지는 이벤트가 발생한 이후에도 새로운 리스너를 등록할 수 있다. 즉, 이벤트가 이벤트 루프 다음 사이클이 될 때까지 날라가지 않는것이 보장된다. 따라서 어떠한 이벤트도 놓치지 않게 된다.

- 이벤트가 특정 작업에서 동기적으로 발생한다면, 모든 리스너를 이벤트 발생 전에 등록해야 한다. (ex. 파일을 동기적으로 읽는 메소드 readFileSync() 을 사용하는 경우)

3-2-7. EventEmitter vs 콜백

- 대체적으로 결과가 비동기적으로 반환되어야 하는 경우에는 콜백을 사용, EventEmitter는 발생한 사건과 연결될 때 사용한다.

- 이외에도 여러가지 판단 근거가 있다.

1) 가독성 측면 : 콜백은 여러 유형의 결과를 전달하기 어렵기 떄문에, 여러 이벤트를 전달해야되는 경우 EventEmitter를 사용하면 코드가 깔끔하게 작성 가능하다.

2) 의미 측면 : EventEmitter는 같은 이벤트가 여러번 발생하거나, 발생하지 않을 수도 있는 경우 사용되어야 한다.

콜백은 작업이 성공/실패 여부와 상관없이 정확히 한번 호출되기 때문에, 반복 가능성이 있거나 발생하지 않을수도 있는 경우는 EventEmitter를 사용하는것이 좋다.

3) 구현 측면 : 콜백을 사용하는 API는 오직 특정한 콜백 하나만 사용할 수 있고,EventEmitter는 같은 이벤트에 대해 다수의 리스너를 등록할 수 있다.

3-2-8. 콜백과 EventEmitter의 결합

- glob 패키지(https://www.npmjs.com/package/glob) : 콜백을 사용하여 결과를 비동기적으로 전달하고, 동시에 EventEmitter를 반환하여 비동기 처리 상태에 대해 상세한 판단을 제공.

- 주어진 패턴과 일치하는 모든 파일 리스트를 가지고 호출된 콜백 함수를 가져온다. 프로세스 상태에 대해서 보다 세분화된 알림을 제공하는 EventEmitter 사용.

const eventEmitter = glob(pattern, [option], callback)

[디자인 패턴 바이블] 3장. 콜백과 이벤트 (1)

꾸르빅 — Sun, 4 Jun 2023 00:28:35 +0900

들어가기에 앞서 Key Point

- 콜백 패턴 : 어떻게 동작하며, Node.js에서 어떤 방식으로 자주 사용되는지, 자주 발생하는 위험요소를 어떻게 다룰지

- 관찰자패턴 : Node.js에서 EventEmitter 클래스를 사용하여 구현을 어떻게 할 것인지

3-1. 콜백 패턴

- 콜백 : 비동기 작업을 처리할 때 필요한 '작업의 결과를 전달하기 위해 호출되는 함수'로, Javasciprt는 콜백에 이상적인 언어이다.

- 콜백을 구현하는 방법으로는 함수(일급 클랙스 객체)와 클로저(생성된 함수의 환경을 참조)가 있다.

※ 일급 객체(first-class object)란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 보통 함수에 인자로 넘기기, 수정하기, 변수에 대입하기와 같은 연산을 지원할 때 일급 객체라고 한다.(출처 : 위키백과)

3-1-1. 연속 전달 방식

- Javascript에서 콜백은 다른 함수에 인자로 전달되는 방식으로 사용된다. 이러한 방식을 연속전달방식(CPS: Continuation-Passsing Style) 이라고 하며, 이는 단순히 결과를 호출자에게 직접 반환하는 대신 다른 함수(콜백)로 전달하는 것을 의미한다. 반대로, return문을 통해 호출자에게 전달되는 방식을 직접스타일(direct style)이라고 한다.

//Dircet style
fucntion add(a,b) {
	return a+b
}

//CPS
fuction addCps(a, b, callback) {
	callback(a + b)
}

function additionAsync(a, b, callback) {
	setTimeout(() => callback(a + b), 100)
}

console.log('before')
additionAsync(1, 2, result => console.log('result: ${result}'))
console.log('after')
/*
결과
before
after
result: 3
/*

- setTimeout()은 비동기 작업을 실행시키기 때문에 콜백의 실행이 끝날 때까지 기다리지 않는 대신, 즉시 반환되어 additionAsync()로 제어를 돌려주어, 제어가 호출자에게 반환된다. 따라서, 최종 출력은 [ after ] 가 찍힌 후 [ result : 3 ]이 출력된다.

- 위의 코드에서 Javascript의 클로저 덕분에 콜백이 다른 시점과 다른 위치에서 호출되더라도, 비동기 함수의 호출자 컨텍스트를 유지한다. 따라서, additionAsync() 함수가 종료되었음에도 이벤트 루프의 다음 사이클에서 콜백함수가 수행될 때, 변수값을 유지한 상태로 결과값이 출력된다.

※ 클로저(Closer)란, 내부 함수가 참조하는 외부함수의 지역변수가 외부함수가 리턴된 이후에도 유효성이 유지될 때, 이 내부함수를 클로저라고 한다 ( 출저 : 초보자를 위한 Node.js 200제)

- 비 연속 전달(Non-CPS) 콜백 : 콜백 인자가 있는 경우에도 직접적인 방식으로 전달할 수 있다.

(ex. 단순 배열 접근을 위한 map 함수의 경우 요소를 반복하는데 사용될 뿐, 비동기적으로 연산 결과를 전달하지 않기 때문에 결과는 직접적인 방식으로 동기적으로 반환됨)

Non-CPS 콜백과 CPS 콜백은 문법적 차이가 없기 때문에 API 문서에 분명하게 명시해야 한다.

const result = [1,5,7].map(element => element -1)
console.log(result) // [0, 4, 6]

3-1-2. 콜백의 위험요소

- 특정 조건에서 동기적으로 동작하고, 다른 조건에서는 비동기적으로 동작하는 API를 개발하지 말자

import { readFile } from 'fs'

const cache = new Map()

function inconsistentRead(filename, cb) {
	if (cache.has(filename)) {
    	//동기적으로 호출되는 부분에서 콜백 사용
        cb(cache.get(filename))
    } else {
    	//비동기 함수 내에서 콜백 사용
      	readFile(Filename, 'utf8', (err, data) => {
        	cache.set(filename, data)
        	cb(data)
        })
    }
}

function createFileReader(filename) {
	const listeners = []
    inconsistentRead(filename, value => {
    	listeners.forEach(listener => listener(value))
    })
    
    return {
    	onDataReady: listener => listenenrs.push(listener)
    }
}


const reader1 = createFileReader('data.txt')
reader1.onDataReady(data => {
	console.log('First call data : ${data}')
    
    //일정 시간 후 같은 파일 다시 읽기 시도
	const reader2 = createFileReader('data.txt')
    reader2.onDataReady(data => {
	console.log('Second call data : ${data}')
    })
})

/* 결과
First call data : some data
*/

- 파일을 처음 읽을 때는 readFile의 callback함수로 cb가 전달되기 때문에, 파일을 읽고 listener에 data가 전달되는 시간동안 리스너가 생성 및 등록되어 reader1의 onDataReady callback이 수행된다. 그러나 두번째 읽을 때는 동기적으로 수행되기 때문에 reader2.onDataReady의 callback은 수행되지 않을 수 있다.

수정방안 1) 동기 API를 이용하여 함수가 전체적으로 직접 스타일로 구현되게 수정

//동기API 사용
import { readFileSync } from 'fs'

const cache = new Map()

function consistentReadSync(filename) {
	if(cache.has(filename)) {
    	return cache.get(filename)
    } else {
    	const data = readFileSync(filename, 'utf8')
        cache.set(filename, data)
        return data
    }
}

- 비동기 → 동기로 변경 시 아래 사항들을 고려해야 한다.

1) 대체할 수 있는 동기API가 있는지 확인한다. (지원하는 API가 없을 수 있음)

2) 동기API는 이벤트루프를 block하고 동시요청을 보류하기 때문에 전체 애플리케이션 속도를 떨어뜨릴수 있다.

수정방안 2) process.nextTick()을 이용하여 실행을 지연시켜 완전한 비동기로 수행되게 수정

import { readFile } from 'fs'

const cache = new Map()

function consistentReadAsync(filename, callback) {
	if (cache.has(file)) {
    	//지연된 콜백 호출
        process.nextTick(() => callback(cache.get(filename)))
    } else {
    	//비동기 함수 사용
      	readFile(Filename, 'utf8', (err, data) => {
        	cache.set(filename, data)
        	cb(data)
        })
    }
}

- process.nextTick() : 현재 진행중인 작업의 완료 시점 뒤로 함수의 실행을 지연시킴.

※ process.nextTick() vs setImmediate() vs setTimeout(callback,0)

1. process.nextTick()은 현재 작업이 완료 된 후 바로 실행되어 다른 I/O 이벤트가 발생하기 전 실행됨(마이크로 테스크, 콜백을 인수로 받아 대기중인 I/O 이벤트 대기열의 앞으로 밀어넣고 즉시 반환시키는 형태) . 따라서 특정 I/O가 계속 수행되지 않는 기아 상태에 빠질 수 있다.

2. setImmediate()은 이미 큐에 있는 I/O 이벤트들의 뒤에 넣어 대기하는 형태로 실행됨.

3.setTimeout(callback,0)은 setImmediate()와 비슷하나 이벤트 루프의 다른 Phase에서 실행된다. setTimeout은 Timer에서, setImmediate는 check에서 실행되기 때문에, I/O 콜백과 연관되어 수행된다면 setImmediate()로 예약된 콜백이 먼저 수행된다.

- 이처럼 CPS ↔ 직접 스타일, 비동기 ↔ 동기 로 변경하게 된다면, 연결된 모든 코드들의 동작방식을 수정해야 되기 때문에 주의가 필요하다.

3-1-3. Node.js 콜백 규칙

1. 콜백은 맨 마지막에

- Node.js 코어 함수 표준 규칙에 따라, 콜백을 사용하는 API의 경우 콜백이 마지막 로 전달되어야 한다. 함수 호출의 가독성이 좋아지기 때문!

2. 오류는 맨 처음에

- 콜백함수에 오류를 인자로 전달해야되는 경우, 콜백의 첫번째 인자로 전달한다.

또한 오류는 항상 Error 타입으로 전달한다(간단한 문자열이나 숫자를 오류 객체로 전달하지 말자)

3. 에러 처리 방법

- 동기식 직접 스타일 함수 : try/catch문과 throw문을 사용

- 비동기식 CPS 함수 : 호출 체인의 콜백으로 전달.

1) 에러를 다시 밖으로 발생시키거나 리턴하지 않고, 다른 결과처럼 콜백 사용

2) 콜백함수 내부 동작 코드는 try/catch문을 이용하여 에러 캐치

- 콜백에서 에러 발생 시 콜백을 수행시키는 함수의 에러로 감지되지 않는다. callback -> stack -> event loop -> console로 포착되기 때문에 외부에서 잡을 수 없어 내부에서 try/catch로 에러를 캐치해야 한다.

try {
 readJSONThrows('invalid_json.json', (err) => console.error(err))
} catch (err){
//동작하지 않음.
console.log('This will not catch the JSON parsing exception')
}

3) try문 안에서 콜백 호출 지양(콜백이 자체적으로 발생시키는 에러도 잡히기 때문)

import { readFile } from 'fs'

function readJSON(filename, callback) {
	readFile(filename, 'utf8', (err, data) => {
    	if(err){
        //에러를 전파하고 현재의 함수에서 빠져 나옴
        	return callback(err)
        }
        try {
        	//파일 내용 파싱
            parsed = JSON.parse(data)
        } catch (err) {
        	//파싱 에러 캐치
            return callback(err)
        }
        //에러없음. 데이터 전파
        callbcak(null, parsed)
    })
}

[디자인 패턴 바이블] 2장. 모듈 시스템

꾸르빅 — Sun, 5 Mar 2023 03:03:18 +0900

들어가기에 앞서 Key Point

- 모듈이 왜 필수적이며 Node.js에서 다른 모듈 시스템이 가능한 이유

- Node.js는 두가지 모듈 시스템(CommonJs , ECMAScript module)을 사용하는데 이 두가지 형태가 왜 존재하는지

2-1. 모듈과 모듈 시스템

- 모듈 시스템(Module System) : 모듈을 정의하고 사용할 수 있게 해주는 도구이자 문법

- 모듈(Module) : 소프트웨어의 실제 유닛

- 좋은 모듈 시스템은 아래와 같은 특징이 있다.

1) 코드베이스 분할 방법 제시 : 구조적으로 관리할 수 있으며 독립적인 기능의 조각으로 개발할 수 있도록 가이드

2) 코드의 재사용 : 기능을 간단하고 구조화하여 다른 프로젝트에서 사용가능하도록 개발

3) 은닉성 : 복잡한 구현을 숨기고 간단한 인터페이스를 노출

4) 종속성 관리 : 모듈 실행 시 필요한 종속성들을 쉽게 import할 수 있도록 관리

2-2. Javascript, Node.js에서의 모듈 시스템

- Javascript는 초반에 내장 모듈시스템 없이 코드베이스 분할(1번항목), <script>태그를 통한 쉬운 import(4번항목)가 가능했으나, Javascript 브라우저 애플리케이션이 점점 복잡해지고 여러 프레임워크가 사용되면서 Javascript 프로젝트에 효율적으로 사용될 모듈 시스템 정의가 필요했다. 이에 성공적 결과를 낸 것이 AMD와 UMD이다.

※ AMD(Asynchronous Module Definition) : 비동기 모듈에 대한 표준안. 브라우저는 모든 모듈이 다 로딩될 때까지 기다릴 수 없기 때문에 비동기 모듈 로딩 방식으로 구현되어있다. RequireJS에 의해 대중화되었다.

※ UMD(Universal Module Definition) : CommonJS와 AMD를 통합하기 위한 표준안.

- Node.js는 운영체제의 파일 시스템에 직접적으로 접근할 수 있기 때문에, 브라우저가 아닌 환경에서 Javascript 모듈을 제공할 수 있도록 고안된 CommonJS가 탄생하였다. 이후 Browserify와 Webpack과 같은 모듈 번들러 덕분에 브라우저 환경에서도 사용하게 되었다.

- 이후 2015년도에 ES6의 발표와 함께 표준 모듈 시스템(ESM)의 제안이 나왔다. 이에 따른 구체적인 구현을 제공하지 않았기 때문에 Node.js 13.2 버전부터 ESM에 대한 안정적인 지원을 한다. 따라서 현재는 CommonJS가 주된 모듈 시스템이라고 볼 수 있다.

2-3. 모듈 시스템과 패턴

2-3-1. 노출식 모듈 패턴

- 은닉의 필요성 : Javascript는 네임스페이스가 없어 모든 스크립트가 전역 범위에서 실행된다. 따라서 애플리케이션 코드나 종속성 라이브러리가 노출된다면 스코프가 오염되어 코드 충돌이 날 수 있다. 또한 애플리케이션이 확장됨에 따라 개별적이고 분리된 기능 구현이 필요하다.

- 노출식 모듈 패턴(revealing module pattern) : 자기 호출 함수(즉시 실행 함수 표현-IIFE)를 사용하여 private 범위를 만들고 공개될 부분만 내보내는 방식.

const myModule = (() => {
	const privateFoo = () => {}
    const privateBar = []
    
    const exported = {
    	publicFoo: () => {},
        publicBar: () => {}
    }
    return exported
})() //괄호 파싱 시 함수 호출

console.log(myModule) // publicFoo와 publicBar로 구성된 객체 반환
console.log(myModule.privateFoo, myModule.privateBar) // undefined 반환

2-4. CommonJS 모듈

- CommonJS 명세의 두가지 주요 개념 요약

1) require는 로컬 파일 시스템으로부터 모듈을 import하게 해준다.

2) exports와 module.exports는 특별한 변수로서 현재 모듈에서 공개될 기능들을 내보내기 위해서 사용된다.

2-4-1. 직접 만드는 모듈 로더

- 노출식 모듈 패턴을 이용한 Node.js require() 함수 모방

function loadModule(filename, module, require) {
	const wrappedSrc = 
    	'(function (module, exports, require) {
        	${fs.readFileSync(filename, 'UTF8')}
        })(module, module.exports, require)'  //module.exports 사용 주의
    eval(wrappedSrc)
}

function require(moduleName) {
	const id = require.resolve(moduleName) //모듈 전체 경로 로드
    if(require.cache[id]) { //캐싱되어 있는 경우 캐시값을 가져옴
    	return require.cache[id].exports
    }
    
    //모듈 메타 데이터: 최초 로드를 위해 exports 속성 초기화된 module 객체 생성
    const module = {
    	exports: {}, //로드한 모듈 코드에서의 public API export용
        id
    }
    require.cache[id] = module //캐시 업데이트
    loadModule(id, module, require) //모듈소스코드를 읽어와 module.exports 객체에 public API를 넣음
	
    return module.exports
}
require.cache = {}
require.resolve = (moduleName) => {
 /* 모듈 이름으로 모듈의 전체 경로를 찾아냄 */
}

2-4-2. 모듈 정의

- module.export 변수에 할당되지 않다면 비공개

const dependency = require('./anotherModule')

//private함수
function log() {
	console.log('Well done ${dependency.username}')
}

//공개적으로 사용되기 위해 익스포트되는 API
module.exports.run = () => {
	log()
}

2-4-3. module.exports VS exports

- module.exports는 require에서 사용되는 return 값이며, exports는 module.exports의 참조값이다.

따라서, export의 재할당은 module.exports에 영향을 미치지 않는다. exports 사용 시 새로운 속성(property)을 추가할 수 있다

const module = { exports: {} }
const exports = module.exports

exports.hello = () => {
	console.log('Hello')
}

module.exports = () => {
	consloe.log('Hello')
}

참고자료

- AMD와 UMD

https://velog.io/@rlaclgns321/%EB%AA%A8%EB%93%88-%EC%8B%9C%EC%8A%A4%ED%85%9CCommonJS-AMD-UMD-ES6

- module.exports 대 export

https://cotak.tistory.com/103

[디자인 패턴 바이블] 1장. Node.js 플랫폼

꾸르빅 — Sun, 5 Mar 2023 00:35:47 +0900

1-1. Node.js의 철학

1-1-1. 경량 코어

- Node.js 코어의 바깥 부분에 유저랜드/유저스페이스라 불리는 사용자 전용 모듈 생태계 구성하여, 코어를 최소한의 기능으로 관리한다.

※ 유저랜드(Userland), 유저스페이스(UserSpace) : 커널 공간이 아닌 사용자 메모리 공간에서 실행되는 라이브러리

1-1-2. 경량 모듈

- Node.js는 재사용 가능한 라이브러리를 만들기 위한 기본적인 수단으로 Module 개념을 이용한다. 코드의 양과 범위 측면에서 작은 모듈로 디자인 하는것이 Node.js에서 통용되는 원칙이다(1 program - 1 rule)

- 작은 모듈을 구성했을때의 장점

1) 재사용성 ↑

2) 이해하기 쉽고 사용하기 쉽다

3) 테스트 및 유지보수가 쉽다

4) 사이즈가 작아 브라우저에서 사용하기 좋다.

- NPM(패키지 관리자)의 도움을 받아 각 패키지가 필요로하는 버전의 종속성 패키지를 가질 수 있다. 충돌 방지 뿐만아니라 많은 수의 작은 종속성을 가질수 있게 해준다.

- DRY(Don't Repeat Yourself) 원칙 : 반복하지 마라!

1-1-3. 작은 외부 인터페이스

- Node.js 모듈은 단일 진입점을 제공한다(단 하나의 함수나 클래스를 노출시켜 사용하도록 구성)

- 모듈 내부 접근을 제한하여 확장의 가능성을 낮추지만, 이 점이 오히려 본질적인 기능에 집중하여 활용성을 좋게 만든다.

1-1-4. 간결함과 실용주의

- KISS(Keep it Simple, Stupid) 원칙 : 부족하지만 간단한 기능이 소프트웨어를 위해서는 더 좋은 디자인이다.

- node.js가 javascript 기반인 이유도 javascript가 실용적인 언어이기 때문이다.

1-2. Node.js 코어 작동 원리

1-2-1. 논블로킹 I/O

- 블로킹 I/O의 경우 멀티 쓰레드를 통해 여러 동시 연결을 처리하나, 메모리 소모 및 컨텍스트 전환으로 인해 낭비되는 자원이 많다.

- 논블로킹I/O는 즉시 반환되기 때문에 리소스가 읽힐 준비가 된 데이터를 가지고 있지 않다면 오류가 발생한다.

따라서 논블로킹 I/O는 데이터를 처리하는 방식이 중요하다.

- 동기 이벤트 디멀티플렉서(이벤트 통지 인터페이스) : 여러 리소스를 관찰하여 읽기/쓰기 연산이 완료되었을 때 새로운 이벤트를 반환하는 방식. 새로운 이벤트가 반환되기 전까지 블로킹된다. 이러한 방식은 단일 쓰레드에서 여러 리소스의 I/O를 다룰 수 있다.

watchedList.add(socketA, FOR_READ)
watchedList.add(fileB, FOR_READ)
while(events = demultiplexer.watch(watchedList)){
	for (event of events){
    	data = event.resource.read()
        if(data === RESOURCE_CLOSED) {
        	demultiplexer.unwatch(event.resource)
        } else {
        	consumeData(data)
        }
    }
}

1-2-2. 리액터(Reactor) 패턴

- 각 I/O 작업에 연관된 핸들러(콜백함수)를 가지고, 리소스가 준비되면 이벤트 루프에서 콜백함수를 호출하며 자원을 가져간다.

1-2-3. Libuv ( Node.js의 I/O 엔진 라이브러리)

- Linux의 epoll, macOS의 kqueue, Windows IOCP(I/O completion port) API 등 디멀티플렉서를 위한 자체 인터페이스가 있다.

- I/O별, OS별로 다르게 동작할 수 있기 때문에 Node.js에서는 OS별 호환성과 서로 다른 리소스 유형의 논블로킹 동작을 표준화하는 Libuv 라이브러리를 사용한다.

- 시스템 호출 추상화, 리액트 패턴 구현(이벤트 루프 생성, 이벤트 큐 관리, 비동기 I/O 작업 실행) 등의 기능을 수행한다.

1-3. Node.js의 javascript

1-3-1. 운영체제 기능에 대한 모든 접근

- Node.js는 Javascript를 사용하지만 브라우저 영역 안에서 실행되지 않기 때문에, 운영체제에서 기본적으로 제공하는 주된 서비스들에 바인딩할 수 있다.

ex) fs모듈 - 파일 시스템에 있는 파일 접근 가능

net, dram 모듈 : 애플리케이션이 저수준의 TCP,UDP 소켓을 사용할 수 있음.

1-3-2. 네이티브 코드 실행

- Node.js는 N-API 인터페이스를 통해 네이티브 코드에 바인드할 수 있는 사용자측 모듈을 만들수 있다. N-API는 네이티브 코드와 연결되는 공유객체(Addons)를 빌드하기 위한 API로, C 또는 C++를 사용하여 모듈을 작성해야 한다.

- C/C++ 라이브러리를 가져와 사용할 수 있기 때문에 오픈소스 재사용이 가능해지며, 하드웨어 드라이브/포트와 같은 저수준 특성에 대한 접근을 제공할 수 있다.

[Vue] Do it! Vue.js 입문 내용 정리

꾸르빅 — Sun, 11 Dec 2022 03:55:39 +0900

- 예제 코드 : https://github.com/joshua1988/doit-vuejs

01. Vue.js 소개

- Vue.js란? 2014년도에 공식 배포된 웹페이지 화면을 개발하기 위한 frontend framework.

데이터를 화면에 표현할 수 있는 기능(명시적 렌더링) + 라우터, 상태 관리, 테스팅 등을 쉽게 결합할 수 있는 구조(프레임워크의 기능) = 점진적인 프레임워크(progressive framework)라고 표현한다.

- Vue.js의 장점

1) 배우기 쉬운 난이도 : 타입스크립트, ES6, jsx, 웹팩 등의 학습이 필요한 리액트/앵귤러에 비해 쉽다.

2) (리액트와 앵귤러에 비해) 우수한 성능 : https://vuejs.org/v2/guide/comparison.html

3) 앵귤러(Anbular)의 데이터 바인딩 특성 + 리액트(React)의 가상 돔(virtual DOM) 기반 렌더링 특성 모두 존재

- Vue.js의 특징

1) MVVM패턴 기반으로 Model - View - ViewModel 구조로 개발하는 방식.

- View: 사용자에게 보여지는 화면

- DOM : HTML 문서에 들어가는 요소(태그, 클래스, 속성) 정보를 담고 있는 데이터 트리

- DOM Listner : 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치(ex. 클릭 이벤트)

- Model : 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장.

- Data Binding : 뷰에 표시되는 내용과 모델의 데이터를 동기화(ex. 화면 재구성)

- ViewModel : 뷰와 모델의 중간 영역(돔 리스터/데이터 바인딩 기능 영역)

Vue.js의 MVVM 패턴

2) 컴포넌트 기반 프레임워크

- 트리 구조처럼 뷰를 구성. 코드를 재사용하기 쉽고 화면의 구조를 직관적으로 파악할 수 있다.

3) 리액트와 앵귤러의 장점을 모두 가진 프레임워크

- 앵귤러의 양방향 데이터 바인딩 : 화면의 데이터와 모델의 데이터가 동기화되어 자동으로 변경되는 것

- 리액트의 단방향 데이터 흐름 : 컴포넌트의 root 구조(수직적 구조에서 부모->자식으로의 흐름)

- 리액트의 가상 돔 렌더링 방식 : 특정 돔 요소를추가/삭제할 때 전체 렌더링이 아닌 변경된 부분만 가상 DOM을 구성하여 실제 DOM과 비교. 변경된 부분만 UI 업데이트

02. 개발 환경 설정

1) 크롬 브라우저 : 구성한 웹 화면 확인

2) 텍스트에디터/IDE : 책에서는 무료 텍스트 에디터인 아톰(Atom) 사용

3) Node.js :서버 자바스크립트 실행 환경

4) 뷰 개발자 도구: https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

03. 인스턴스 & 컴포넌트

- 뷰 인스턴스(Instance) : 뷰의 기본 단위.

- 뷰 생성자 : new Vue(); 뷰 라이브러리 로딩 및 접근하도록 뷰 인스턴스를 생성

- 뷰 인스턴스 옵션 :

1) el : 뷰 인스터스로 화면을 렌더링 할 때 화면이 그려질 위치의 DOM 요소를 지정

2) data : DOM에서 사용할 수 있는 데이터 값 정의

3) template : html, CSS 등 마크업 요소 정의하는 속성

- 뷰 인스턴스 유효범위 : el 속성으로 지정한 DOM 요소 내부에서만 사용 가능

- 뷰 인스턴스 라이프사이클 :

뷰 인스턴스 라이프 사이클

1) 인스턴스 생성 -> 화면에 부착

- beforeCreate : data 속성과 method 속성 정의X. DOM 요소 접근X

- created : data 속성과 method 속성 정의O = this.data, this.function() 로직 사용 가능. DOM 요소 접근X

주로 초기 데이터 셋팅 시 사용

- beforeMount : 자바스크립트로 DOM 화면을 그리는 render() 함수 호출 전 로직. DOM요소 접근X

- mounted : DOM 요소 접근 O. 화면 제어 로직 수행 시 사용

하위 컴포넌트 및 외부 라이브러리 호출 시점 전인 경우 $nextTick() API로 HTML 코드 최종 파싱까지 대기

2) 화면에 부착 -> 내용 갱신(데이터가 변경되는 경우에만 사용 가능)

※ 데이터 관찰 : 뷰의 반응성(Reactivity) 제공을 위해 $watch 속성으로 감시

- beforeUpdate : 데이터 관찰 시 가상 DOM 그리기 전 호출되는 단계. 변경 예정 데이터의 값과 관련된 로직 수행 가능.

- updateed : 가상DOM으로 화면을 그린 뒤 호출되는 단계. 데이터 변경으로 인한 화면 요소까지 변경 완료된 상태.

이 단계에서 데이터 값을 변경하면 무한루프에 빠질 수 있으므로 주의! 데이터보단 DOM 관련 로직 사용 시 활용

3) 내용 갱신 -> 인스턴스 소멸(갱신 없을 시 화면에 부착 -> 인스턴스 소멸)

- beforeDestory : 인스턴스 소멸 전 단계로 인스턴스 접근 가능. 사용했던 데이터 삭제 시 활용

- destroyed : 인스턴스 파괴 후 호출되는 단계로 인스턴스 접근 불가능.

- 뷰 컴포넌트(Component) : 화면을 구성하는 영역 단위

- 전역 컴포넌트 : 모든 인스턴스에서 사용 가능한 컴포넌트.

Vue생성자에 .component()를 호출하여 수행. '컴포넌트 이름 , {컴포넌트 내용}' 형태로 정의

HTML 사용자 정의 태그 형식으로 사용 가능

전역 컴포넌트 사용 예제 코드

- 지역 컴포넌트 : 특정 인스턴스 내에서만 사용 가능한 컴포넌트.

인스턴스 내 components 속성에 항목 추가. '컴포넌트 이름: 컴포넌트 내용' 형태로 정의

지역 컴포넌트 사용 예제 코드

- 컴포넌트 간 유효범위(scope) : 컴포넌트마다 자체의 고유한 유효 범위를 가지기 때문에 같은 웹 페이지라도 컴포넌트 내부 데이터를 공유할 수 없다.(컴포넌트 참조 불가)

- 컴포넌트 간 데이터 전달 :

1) 상위 컴포넌트 -> 하위 컴포넌트 : 호출 시 props 전달.

상위(b-vind이용) / 하위(props 이용)

props 사용 예제 코드

2) 하위 컴포넌트 -> 상위 컴포넌트 : 이벤트 emit 발생

하위(this.$emit 이용) / 상위(v-on 이용)

※ 뷰의 특성인 단방향 데이터 흐름에 어긋나기 때문에 하위->상위 데이터 전달은 공식 사이트에서 다루지 않는다.

emit 사용 예제 코드

3) 같은 레벨 컴포넌트 통신 : 이벤트 버스 사용

전달 컴포넌트(eventBus.$emit) / 수신 컴포넌트(eventBus.$on)

※ 기본 원리대로라면 하위(전달자) -> 상위 -> 하위(수신자) 방식으로 구현해야 하나, 상위 컴포넌트에 불필요한 데이터를 전달해야하는 수고로움이 있기 때문에 이벤트 버스를 이용하여 통신한다.

event bus 이용 예제 코드

이벤트 버스의 경우 많아지는 경우 관리가 되지 않기 때문에 이벤트 버스 관리 도구인 뷰엑스(Vuex)를 사용한다.

04. 라우터 & HTTP 통신

- 라우팅(routing) : 웹 페이지간의 이동 방법. SPA(Single page Application)에서 사용하는 방식으로 매끄러운 화면 전환 및 빠른 화면 조작에 용이하다.

※ SPA : 미리 페이지를 로딩하고 페이지 이동 시 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴의 Application

- vueRouter : 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리.

<router-link to="URL값"> : 페이지 이동 태그. 화면에서는 a 태그로 표시되어 클릭 시 to에 지정한 URL로 이동.

<router-view> : 페이시 표시 태그. 변경되는 URL에 따라 컴포넌트를 뿌려주는 영역.

vueRouter 예제 코드

- 네스티드 라우터(Nested Router) : 한 화면에 상-하위 관계에 있는 2개 이상의 컴포넌트로 라우팅하는 경우 사용

router 정의 시 children으로 이동할 하위 컴포넌트를 등록하고 router-view가 이중으로 들어간다.

네이티드 라우터 예제 코드

- 네임드뷰(Named View) : 한 화면에 같은 레벨의 여러 컴포넌트로 라우팅하는 경우 사용

router-view에 name을 붙여줘서 name과 컴포넌트를 연결한다.

네임드뷰 사용 예제 코드

- HTTP 통신 방법 : ajax를 지원하는 axios 라이브러리 사용. 반환 데이터가 객체형태로 JSON.parse()를 이용하여 객체로 변환할 필요가 없어 사용성이 좋다.

※ ajax : 서버에서 받아온 데이터를 표시할 때 화면 전체를 갱신하지 않고도 화면의 일부분만 변경할 수 있게 하는 자바스크립트 기법.

Promise 기반의 API이므로 정상적인경우 then(), 비정상적인 경우 catch() 로직이 수행될 수 있도록 작성한다.

1) axios.get('url주소') : url 주소로 GET 요청을 보냄

2) axios.post('url주소') : url 주소로 POST 요청 보냄

05. 템플릿 & 프로젝트 구성

- 뷰 템플릿(Template) : HTML,CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해주는 속성.

- 뷰 템플릿의 속성과 문법:

1) 데이터 바인딩 : 뷰 인스턴스의 데이터와 HTML 화면 요소를 연결하는 방식.

① {{ }} 콧수염괄호 : 뷰 인스턴스 내 data에 정의된 속성 값을 읽어온다. data가 변경되는 경우 자동으로 갱신되는데, 갱신을 막으려면 v-once 속성을 사용한다. 자바 스크립트 표현식 사용 가능(선언문 불가/분기구문 사용불가. 삼항연산자로 대체 사용/복잡한 연산은 인스턴스에서 수행 후 결과만 표기 )

② v-bind : id, class, style 등의 html 속성 값에 뷰 데이터 값을 연결할때 사용하는 방식. ':'로 간소화하여 약식문법 사용.

2) 뷰 디렉티브(Directive) : v- 접두사를 가지는 모든 속성들을 의미. 데이터 변경 시 리액티브하게 반응하여 갱신된다.

① v-if : 데이터의 진위여부에 따라 HTML 태그의 존재 여부를 정함(false시 태그 완전 삭제)

② v-show : 데이터의 진위여부에 따라 HTML 태그의 표기 유무를 정함(display:none이라는 css 효과 부여)

③ v-for : 지정한 뷰 데이터 개수만큼 HTML 태그 반복 출력. 리스트 개발 시 '(item, index) in arrayList' 형식으로 구현

④ v-bind : html 태그 속성과 뷰 데이터 속성을 연결

⑤ v-on : 화면 요소의 이벤트를 감지하여 처리

⑥ v-model: form(input, select, textarea)에 입력한 값을 뷰 인스턴스의 데이터와 즉시 동기화.

3) 이벤트 처리 : v-on에 method를 연결하여 처리

v-on과 method 연결 예제 코드

4) 고급 템플릿 기법

① computed : 데이터 가공 등의 복잡한 연산이 필요할 경우 사용.

장점) 연결된 data 속성 값의 변화에 따라 자동으로 다시 연산 수행. 자주 연산하기 때문에 캐싱 기능 제공

※ Method는 호출시에만 연산 수행. 따라서 캐싱 기능 X

② watch : 데이터 변화를 감지하여 자동으로 특정 로직 수행.

computed보다 시간이 상대적으로 더 많이 소요되는 비동기 처리 시 사용

watch 사용 예제 코드

- 뷰 프로젝트 구성 방법

1) 싱글 파일 컴포넌트 체계 : 확장자를 .vue로 구성하는 방식. 파일 1개 = 컴포넌트 1개로 따로 vue 생성자를 대체한다.

<template> <script> <style> 구조로 나뉘어져있다.

이 체계를 사용하기 위해서는 .vue 파일을 웹 브라우저가 인식할 수 있는 형태의 파일로 변환해주는 웹팩이나 browserify 같은 도구를 추가로 설치해야 한다.

※ 웹팩(Webpack) : 웹 앱의 자원들을 자바스크립트 모듈로 변환해 하나로 묶어주는 자바스크립트 모듈 번들러(bundler)

※ browerify : 웹팩과 유사하나 웹 자원 압축, 빌드자동화 기능 X

2) 뷰 CLI : 프로젝트 구성을 CLI로 할 수 있게 제공하는 도구. 프로젝트 초기 구성에 필요한 웹팩이나 브라우저리파이를 쉽게 설치할 수 있다(vue init)

3) 뷰 로더(Loader) : 웹팩에서 지원하는 라이브러리로 .vue파일의 내용을 웹페이지 형태로 변환해준다.

test 속성에서 로더가 적용될 대상 파일 지정, loader는 적용할 로더의 종류를 지정한다.

웹팩의 뷰 로더 처리 부분

frontend 추가 필요한 학습

1) CSS 선택자

2) 네이밍 컨벤션

3) 7장 Vue.js 고급 개발자 되기 부분 정리

[디자인 패턴 바이블] 0. Design Pattern 공부 시작

꾸르빅 — Sun, 9 Oct 2022 02:48:19 +0900

Node.js 공부를 하면서 스터디에도 도움이 될만한 강의 주제를 고민하다가

최근에 학습한 디자인 패턴이 Node.js에서 어떻게 활용되는지에 대해 공유하기로 결정했다.

따라서 앞으로 포스팅할 내용은 이 책의 내용 정리 및 서칭을 통한 추가 자료 정리 위주로 될 예정!

Node.js 디자인 패턴 바이블

http://www.yes24.com/Product/Goods/101686866

Node.js 디자인 패턴 바이블 - YES24

완벽한 Node.js 애플리케이션 설계를 위한 디자인 패턴 바이블효율적이고 강력한 Node.js 애플리케이션 구축에 필요한 디자인 패턴들을 한 권으로 정리한다. Node.js로 프로그래밍을 하는데 필요한

www.yes24.com

이번 포스팅은 책을 공부하기 전에 "디자인 패턴"이 무엇인지, 책에서 다루는 디자인 패턴들이 어떤 것인지에 대해 가볍게 워밍업하는 내용을 다룰 예정이다.

- 설계 패턴(Design Pattern)

소프트웨어 분야에 자주 일어나는 설계 문제에 대한 해결책들을 재사용 가능한 패턴으로 정리한 것.

- 개발자가 디자인 패턴을 알아두면 좋은 점

1) 디자인 패턴 지식을 기반으로 재사용 가능하고 유연한/확장가능한 프로그램을 개발
2) 개발자들끼리 커뮤니케이션을 할 때 어떻게 개발할지 or 개발한 코드가 어떤 구조로 되어있는지 좀 더 간결하게 말하기 가능

- Levels of Pattern [POSA]

1) 아키텍처 패턴(Architecture pattern) : 시스템 전체에 대한 골격 및 구성/조직에 적용되는 패턴

대표적 예시로 MVC 패턴이 있다(전체 시스템을 Model, View, Controller 구조로 구분하여 개발)

출처 : https://medium.com/@joespinelli_6190/mvc-model-view-controller-ef878e2fd6f5

Model : 무엇을 할지(데이터 구조부분)
Controller : 모델이 어떻게 할지(로직처리 부분)
View : 화면에 보여주는 역할(UI)

※ Model이 View와 직접적으로 연결되서는 안되고, View가 Model의 데이터를 직접적으로 확인해서는 안되는 특성이 있음.

(non-UI인 Model과 와 UI인 View간의 연결이 약하다)

2) Design Pattern : 아키텍처 패턴 적용 후 결정된 subsystem들간의 관계를 설계할 때 사용하는 패턴

아키텍처 패턴보다 작은 규모여서 전체 시스템에 영향을 끼치지 않는다.

앞으로 다루는 항목이 이 Design Pattern이며, 개발하는 기능의 특성별(개발 시 주의해야 하는 조건들)에 따라 다른 패턴을 사용한다.

ex) 전체 시스템에 사용되는 기본 설정값은 시스템 상 딱 하나여야 하기 떄문에 '싱글턴 패턴'을 채택한다.

3) Coding pattern(Programming idiom) : 프로그램 언어에 적용되는 low level 패턴.

설계한 부분을 실제로 구현할 때의 문제점을 해결하는 부분이며 언어의 특성에 의존적인 부분이 있다.

ex) 자바에서는 멀티쓰레드이기 때문에 기본적인 싱글턴 기법을 사용할 때 어려움이 있으니 static으로 쓰자!

D-002. Idiom, Design Patterns, Architectural Patterns

패턴 소개 우리가 알고 알는 디자인 패턴의 개념이 건축학에서 온 것은 알려진 사실입니다. 패턴은 전파하기 알맞게 포장되어 있다는 점에서 경험을 축적하고 전달하기에 좋다고 봅니다. 긍정

guysheep.tistory.com

2) JAVA에서 Static을 이용한 싱글턴 기법 사용 : https://hsik0225.github.io/design%20pattern/2020/12/17/Singleton-Pattern/

[디자인패턴] 싱글턴패턴(Singleton Pattern)

불필요한 인스턴스 생성을 방지하는 패턴

hsik0225.github.io

- Gof 패턴(Gang of Fours)

객체지향 프로그래밍에서 해결책으로 사용되는 패턴들 중 23가지를 카탈로그화 한 것.

23가지 패턴을 문제별(목적별) 사용하는 3가지 패턴으로 나눌 수 있다.

node.js 디자인 패턴 바이블에 나오는 패턴들 위주로만 가볍게 훑어보자

(전반적인 디자인 패턴의 한줄설명은 https://coding-factory.tistory.com/708 를 참고하자)

1. Creational Pattern(생성 패턴) : 객체의 생성과 관련된 패턴.

생성 시 다른 객체를 통해 만들면서 캡슐화를 한다 (ex. Object A = new Object()같은 직관적 방법 외 다양한 기법으로 생성)

▶ Factory : 여러 타입의 객체가 있을 때, 중간 클래스(공장.Factory)에서 생성할 객체의 타입을 받아 생성하는 패턴. 자바 문법으로는 switch 같은 형식으로 객체를 생성하는 방식이다. 객체타입이 추가되는 경우 유지관리가 용이하다.

▶ Builder : 객체를 생성할때 변수나 파라미터를 필수/옵션을 구분지을 때 사용하는 패턴. 필수값은 생성자를 통해 만들고, 옵션값은 메소드를 통해 입력받아 build를 통해 하나로 합쳐 생성한다. 파라미터가 많을 때 파라미터 관리 에러(변수 타입,순서) 방지 및 가독성을 높여주는 역할을 한다.

▶Singleton : 오직 하나의 인스턴스만 존재하도록 보장하는 객체 생성 패턴. 동일 클래스로 새로운 객체를 생성하는 경우에도 같은 객체를 전달받는다. 동일 인스턴스가 생기지 않게 구성하는 경우 사용된다. 보통 getInstance()를 이용해서 구현한다

참고로 singleton 패턴의 경우 JS에서 모듈을 가져올때 사용하는 require 함수를 예로 들 수 있다.
모듈을 맨 처음 로드하는 경우 require.cache에서 저장되고, 다시 부르는 경우 캐시에서 값을 가져오기 때문에 singleton 패턴이 기본적으로 보장된다. 즉, 추가로 구현하는것이 오히려 코드의 복잡도를 높일 수 있다고 하니 사용 시 주의하자!

Home

yceffort

yceffort.kr

2) Builder 설명2 : https://velog.io/@namezin/%EB%B9%8C%EB%8D%94Builder

빌더(Builder)

velog.io

3) JS에서 require 함수 설명 : https://kyungyeon.dev/posts/77

Node.js에서 singleton을 구현하려하지 마세요

당신은 하지 않아도 될 코드를 생성하고 있을지도 모릅니다

kyungyeon.dev

4) required 공식문서 : https://nodejs.org/api/modules.html#requireid

Modules: CommonJS modules | Node.js v18.10.0 Documentation

Modules: CommonJS modules# CommonJS modules are the original way to package JavaScript code for Node.js. Node.js also supports the ECMAScript modules standard used by browsers and other JavaScript runtimes. In Node.js, each file is treated as a separate mo

nodejs.org

5) node.js 모듈 설명 공식문서 : https://nodejs.org/api/modules.html#modules_caching

Modules: CommonJS modules | Node.js v18.10.0 Documentation

nodejs.org

6) factory 설명1 : https://velog.io/@lsj8367/%EC%9E%90%EB%B0%94-%ED%8C%A9%ED%86%A0%EB%A6%AC%ED%8C%A8%ED%84%B4

[Java] 디자인 패턴 - 팩토리 패턴(Factory pattern)

팩토리 패턴

velog.io

2. Structural Pattern(구조 패턴) : 이미 있는 객체들을 이용해 더 큰/복잡한 객체를 만들거나 객체의 구조를 나눌 때 사용하는 패턴

▶Proxy : 다른 객체로 접근하는 것을 제어하기 위해 관리자하는 객체를 생성하는 방식.

▶Decorator : 객체에 동적으로 기능 및 역할을 추가해주는 방식. 기본 기능에서 여러 옵션 기능들이 유연하게 확장하는 경우에 사용된다. 데코레이터는 기본 객체(대상)과 기능을 추가하는 객체(decorator)로 구성된다. java에서는 상속과 override 기능을 이용한다고 보면 된다!
특정 기능 앞뒤로 여러 패턴을 추가한다고 생각하면 좋다.

사용 예시 : https://coding-factory.tistory.com/713

[JS] 설계패턴 (프록시, 데코레이터, 어댑터)

다른 객체에 대한 액세스를 제어할 수 있는 패턴Subject라고 하는 다른 객체에 대한 액세스를 제어하는 객체=> 객체의 여러 기본동작을 다른동작을 할 수 있게 도와주는 걸 말합니다.데이터 검증:

velog.io

2) Decorator 설명 1: https://velog.io/@koo8624/Javascript-Decorator

[Javascript] Decorator

ES6부터 자바스크립트에 데코레이터 문법이 추가되었다. 데코레이터는 그 이름처럼, 다른 함수를 꾸며주는 역할을 하는 함수로, 메서드를 인자로 받아 이를 감싸고 있는(wrapping) 새로운 함수를

velog.io

3) Decorator 설명 2 : https://gmlwjd9405.github.io/2018/07/09/decorator-pattern.html

[Design Pattern] 데코레이터 패턴이란 - Heee's Development Blog

Step by step goes a long way.

gmlwjd9405.github.io

4) Decorator 설명3 : https://coding-factory.tistory.com/713

[Design Pattern] 데코레이터 패턴(Decorator pattern)에 대하여

데코레이터(Decorator pattern) 패턴이란? 데코레이터 패턴(Decorator Pattenr)은 주어진 상황 및 용도에 따라 어떤 객체에 책임(기능)을 동적으로 추가하는 패턴을 말합니다. 데코레이터라는 말 그대로 장

coding-factory.tistory.com

3. Behavioral Pattern(행위 패턴) : 객체에 어느정도의 책임(responsiblities)을 부여할지 결정하는데 사용하는 패턴

객체가 수행해야 하는 작업을 여러개의 객체로 어떻게 분배할지, 객체끼리 어떤 관계를 가질지에 대한 문제를 해결하는 방식이다.

▶strategy : 객체의 기능을 동적으로 바꿔야 하는 문제가 자주 발생하는 경우 사용하는 전략. 객체의 기능을 직접 수정하는게 아닌 여러 기능을 미리 구현해놓고 특정 상황에서 기능의 교체가 가능하게 한다.

사용 예시 : https://victorydntmd.tistory.com/292

▶Iterator : 자료구조와 기능을 분리시켜 여러번 반복하는 작업이 있을때 자료구조에 상관없이 객체 접근 방법을 통일시키는 패턴.

사용 예시 : https://zion830.tistory.com/33

1) strategy 패턴 설명 : https://victorydntmd.tistory.com/292

[디자인패턴] 전략 패턴 ( Strategy Pattern )

전략 패턴 ( Strategy Pattern ) 객체들이 할 수 있는 행위 각각에 대해 전략 클래스를 생성하고, 유사한 행위들을 캡슐화 하는 인터페이스를 정의하여, 객체의 행위를 동적으로 바꾸고 싶은 경우

victorydntmd.tistory.com

2) Iterator 패턴 설명 : https://zion830.tistory.com/33

[디자인 패턴] Iterator 패턴 (반복자 패턴)

Iterator 패턴은 무언가 많이 모여있는 것을 하나씩 지정해서 순서대로 처리하는 패턴이다. iterator는 무언가를 반복한다 는 의미를 가지고 있다. 보통 프로그래밍을 하면서 반복이 필요할 때는 for

zion830.tistory.com

[백준 알고리즘]5397. 키로거

꾸르빅 — Sun, 10 Feb 2019 19:42:20 +0900

처음 코드

arraylist를 이용하여 작성.

add(index,value)와 remove를 사용하였다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import java.util.*;
import java.io.BufferedReader;
import java.io.InputStreamReader;
 
public class Main {
    public static void main(String args[]) throws Exception {
        BufferedReader in = new BufferedReader(new InputStreamReader(System.in));
        int n = Integer.parseInt(in.readLine());
        for(int i=0; i<n; i++){
            ArrayList<String> password = new ArrayList<>();
            int cursor = 0;
            String[] input_string = in.readLine().split("");
            for(int j=0; j<input_string.length;j++){
                switch (input_string[j]){
                case "<":
                    if(cursor>0)
                        cursor--;
                    break;
                case ">":
                    if(cursor<password.size())
                        cursor++;
                    break;
                case "-":
                    if(cursor>0 && password.size()>0){
                        password.remove(--cursor);
                    }
                    break;
                    
                default:
                    password.add(cursor,input_string[j]);
                    cursor++;
                }
            }
            
            for(int k=0; k<password.size();k++){
                System.out.print(password.get(k));
            }
            System.out.println();
        }
        
        
    }
    
 
    
 
}
Colored by Color Scripter
cs

최종코드

스택 2개를 이용하여 값을 옮겨가며 작성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
import java.io.*;
import java.util.*;
 
public class Main {
    public static void main(String args[]) throws Exception {
/*        File file = new File("C:\\Users\\minjeong\\Downloads\\2010-testdata\\testdata\\I.in");
        BufferedReader in = new BufferedReader(new FileReader(file));*/
 
        BufferedReader in = new BufferedReader(new InputStreamReader(System.in));
        
        int n = Integer.parseInt(in.readLine());
        for(int i=0; i<n; i++){
            
            Stack2 answer_st = new Stack2(1000000);
            Stack2 temp_st = new Stack2(1000000);
            char[] input_string = in.readLine().toCharArray();
            int len = input_string.length;
            for(int j=0; j<len;j++){
                switch (input_string[j]){
                case '<':
                    if(!answer_st.isEmpty())
                        temp_st.push(answer_st.pop());
                    break;
                case '>':
                    if(!temp_st.isEmpty())
                        answer_st.push(temp_st.pop());
                    break;
                case '-':
                    if(!answer_st.isEmpty())
                        answer_st.pop();
                    break;
                    
                default:
                    answer_st.push(input_string[j]);
                    break;
                }
            }
            
            while(!answer_st.isEmpty()){
                temp_st.push(answer_st.pop());
            }
            
            StringBuilder answer = new StringBuilder();
            while(!temp_st.isEmpty()){
                answer.append(temp_st.pop());
            }
 
            
            System.out.println(answer);
            
        }
        
        
    }
    public static class Stack2 {
        private Object[] st;
        private int size;
        public Stack2(int size_default){
            st = new Object[size_default];
            size = 0;
        }
        public void push(Object value){
            if(!isFull()){    
                st[size] = value;
                size++;
            }
        }
        public Object pop(){
            if(!isEmpty()){
                size--;
                Object temp = st[size];
                st[size] = null;
                return temp;
            }else{
                return -1;
            }
        }
        public int size(){
            return size;
        }
        public boolean isFull(){
            if(size == st.length)
                return true;
            else
                return false;
        }
        public boolean isEmpty(){
            if(size==0)
                return true;
            else
                return false;
        }
        public Object peek(){
            if(!isEmpty()){
                Object t = st[size-1];
                return t;
            }else{
                return -1;
            }
        }
 
    }
 
    
 
}
Colored by Color Scripter
cs

스택 2개를 쓰는데도 시간초과가 났었다.

이때의 문제점

1. char형을 안쓰고 string을 썼다.

(in.readLine().toCharArray()말고 in.readline().split("") 사용)

2. 직접 만든 stack을 사용했다.

3. 마지막에 System.out.print(stack.pop())을 하였다.

결과

1. char형이 더 빠르겟지만, string을 사용해도 문제가 없었다.

2. 직접 만든 스택이 더 시간이 짧게 걸렸다.

아마 스택 크기를 더 안늘려도 되게 잡았기 떄문

3. 하나하나 프린트하는데 io시간이 걸리기 떄문에 오래 걸리는 것이였다.

string += stack.pop()형식으로 바꾸어도 시간이 오래걸렸다!

최종으로는 stringBuilder 이용하니 다른거 pass!

(위 문제점 1,2를 안고쳐도 이거 하나만 고치면 시간이 줄었다.)

StringBuilder answer = new StringBuilder();

while(!temp_st.isEmpty()){

answer.append(temp_st.pop());

}

느낀점

string+= 연산자의 돌아가는 구조가

string a = "ㄱ"

a += "ㄴ"

a += "ㄷ"

하면

"ㄱ", "ㄱㄴ", "ㄱㄴㄷ"...순으로 덮어쓰기가 아니라 새로생성으로

들어간다는 정보를 확인하였다.

앞으로는 문자열 단순조회는 string, 갱신할땐 builder나 buffer를 이용하자

(builder와 buffer의 차이는 쓰레드 동기화차이. buffer가 동기화된다?고함)

2019.02.10 지금보니 처음코드도 print로 찍길래 stringbuilder를 이용해서 찍어보았는데 여전히 시간초과가 난다.

arraylist는 그냥 쓰지 말아야겠다...

참고사이트

https://github.com/bactoria/Algorithm-java/blob/master/_5397KeyLoger_Stack.java

https://jeong-pro.tistory.com/85

https://novemberde.github.io/2017/04/15/String_0.html

[백준 알고리즘]2293. 동전1

꾸르빅 — Sat, 10 Feb 2018 20:06:03 +0900

문제

n가지 종류의 동전이 있다. 각각의 동전이 나타내는 가치는 다르다. 이 동전들을 적당히 사용해서, 그 가치의 합이 k원이 되도록 하고 싶다. 그 경우의 수를 구하시오. (각각의 동전은 몇 개라도 사용할 수 있다.)

핵심 풀이

n과 k의 숫자가 크기 때문에 재귀형식으로는 풀기 어렵다고 판단하고, BOTTOM-UP형식으로 풀어야 겠다고 생각했다.

그런데, 동전의 갯수가 아닌 만들수 있는 경우의 수라 어떻게 작은 문제를 해결해야 되는지를 구하지 못했다...

예를들어 2의경우 1+1과 2인 2가지 경우의 수가 있는데, 3의 경우 1+1+1, 2+1 이렇게 2가지의 경우인데, 두 상관관계를 어떻게 알지..?라는 생각으로 막혀버렸다ㅠㅠ

좀더 고민해봐야 할듯

코드

[백준 알고리즘]9461. 파도반 수열

꾸르빅 — Tue, 30 Jan 2018 04:11:55 +0900

문제

한 변의 길이가 1인 정삼각형부터 시작하여 나선모양으로 삼각형을 추가하여 붙인다.

이때 붙일 수 있는 변의 길이가 가장 긴 변 k가 존재할 경우, k변 정삼각형을 추가한다.

이 과정을 반복했을 때, 입력값의 순서에 가장 긴 변 k을 출력하라.

핵심 풀이

계속 반복하다보면 특정한 규칙이 발견하게 된다.

6번째부터 규칙적으로 그 전 삼각형의 변 길이 + 이전에 붙인 삼각형(정확히는 5번째 전에 붙인 삼각형)의 변 길이를 더하면 최대 변이 나오게 된다.

그래서 그 방식을 코드로 만들면 된다.

주의할점은, 100번째를 돌려보면 int형의 범위를 벗어나는 것을 확인 할 수 있다.

그러므로 최대 길이의 변을 저장하는 변수는 long형으로 하자!

코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import java.io.*;
import java.util.*;
 
public class Main{
    public static void main(String[] agrs) throws IOException{
        Scanner in = new Scanner(System.in);
        
        long p[] = new long[100];
        p[0] = 1;
        p[1] = 1;
        p[2] = 1;
        p[3] = 2;
        p[4] = 2;
        
        int cnt = in.nextInt();
        int testcase[] = new int[cnt];
        for(int i=0; i<cnt;i++){
            testcase[i] = in.nextInt();
        }
        
        for(int i=0; i<cnt;i++){
            for(int j=0; j<testcase[i];j++){
                if(p[j] == 0){
                    p[j] = p[j-1] + p[j-5];
                }else{
                    continue;
                }
            }
            System.out.println(p[testcase[i]-1]);
        }
        in.close();
    }
}
 
 
Colored by Color Scripter
cs