Clean Module

succeeding·2023년 3월 10일
0

유틸 모듈 작성을 좀 더 보기 편하게 하기 위한 저만의 코드 컨벤션을 정리한 문서입니다.

크게 두 가지 유형으로 모듈을 작성할 수 있을 것 같습니다.

1. 클래스형 모듈

모듈을 하나의 클래스라고 생각하고 작성하는 것입니다. importing하는 부분에서 모듈을 마치 클래스의 인스턴스라고 생각하고 사용하는 것이지요.

구현

파일타입과 디렉터리 타입에 따라서 다르게 구현합니다.

파일

product-builder.js 하나의 파일로 구성된 모듈 예시입니다.

// product-builder.js
function createProduct() {
	return _makeProduct()
}

function _makeProduct(){
// ...logic...
}

const ProductBuilder = {createProduct}

export default ProductBuilder

디렉터리

아래와 같은 소스 트리를 갖는 디렉터리로 구성된 모듈 예시입니다.

// src-tree
/product-builder
	/index.js
	/method
		/create-product.js
	/type
		/product.type.d.ts
	/constant
		/product.constant.js

소스트리 구조가 마치 하나의 클래스처럼 구성되는 것이 더욱 보기 좋다고 생각합니다. 즉, method 안에 파일 하나 하나의 메서드에 매칭되는 것처럼 구현하는 것이죠.
필요에 따라서, type, constant 디렉터리를 추가로 구현해도 좋을 것 같습니다.

// product-builedr/index.js
import {createProduct} from './method/create-product'

const ProductBuilder = {createProduct}

export default ProductBuilder
// product-builedr/method/create-product.js
export function createProduct() {
	return _makeProduct()
}

function _makeProduct(){}

저는 디렉터리 방식을 선호하는데, index.js 파일이 마치 interface의 역할을 해주기 때문입니다. 이를 통해 얻는 이점은 다음과 같습니다.

  • imporing 편의성 증가: 모듈 사용자가 어떤 모듈에서 어떤 부분을 import 할지 내부 구현 코드를 볼 필요 없이 쉽게 파악이 가능합니다.
  • 은닉화: _makeProduct() 와 같이 모듈 내부에서만 쓰이는 값들을 감출 수 있습니다. 즉 private 키워드를 쓰는 효과를 간접적으로 얻을 수 있습니다.

클라이언트 코드

클라이언트 코드는 다음과 같을 것입니다.

import ProductBuilder from './product-builder'

const prod = ProductBuilder.createPruduct()

모듈을 마치 클래스라고 생각하고 사용하는 것이 포인트입니다. 저는 코드 컨벤션을 객체의 경우 변수명을 카멜 케이스, 클래스의 경우 파스칼 케이스를 주로 사용했는데요. 모듈이 객체처럼 사용되고 있으나 파스칼 케이스를 적용하는 것은, 이것이 모듈임을 코드에 표시하기 위함입니다.

2. 명사형 모듈

위 클래스형 모듈을 여러개 모아놓은 모듈이라고 생각하면 될 것 같습니다.

구현

아래와 같은 소스트리를 갖는 예시입니다.

// src-tree
/file
	/index.js
	/class
		/file-writter.js // 간단하다면 파일-클래스형으로
		/file-reader // 복잡하다면 디렉터리-클래스형으로
			/index.js
			/method
				/read-file.js
// file/index.js
export {FileWritter} from 'class/file-writter'
export {FileReader} from 'class/file-reader'

클라이언트 코드

import {FileReader} from './product-builder'

const file = FileReader.readFile()

0개의 댓글