import 바로 밑에서 export 했을 때의 장점. JS의 새로운 컨벤션 제안.

안녕하세요. 저는 약사겸 개발자인 유상준이라고 합니다.

저는 그동안 제 도메인 분야인 약학분야에서 파이썬을 활용한 데이터 정제 분석과 api 서버 구축을 주로 해왔습니다.

최근에 약국 약사로서 겪는 일상적인 문제를 해결하고자 약 한달전부터 express 서버를 이용한 토이프로젝트를 시작하였고, 이 과정에서 새롭게 자바스크립트와 노드 js, express 를 학습하며 개발하고 있습니다.

이 과정에서 나름대로 효율적인 개발을 위해 만든 스타일을 여러분과 공유하고자 적어봅니다.

제가 제안드리고자 하는 스타일의 핵심은 제목에 적은 것 처럼
import 구문 바로 밑에서 export 하자는 겁니다.

보통 자바스크립트의 파일들을 보면
파일 초반에 사용하고자 하는 모듈이나 변수, 객체등을 import 하고
중간에 로직을 구현하고 맨마지막에 export 하거나,
중간에 export 하고자 하는 변수, 함수 등의 앞에 export 구문을 넣어 export 합니다.

예시1)

import .....


작성한 코드 

export { 내보내고자 하는 변수나 함수, 객체 등등...}

예시2)

import ....

export const variable = ....

export function myFuntion(){ ...

그러다 보니
1) 해당 파일에서 어떤 기능을 export 하는지 알기 위해서는 파일의 끝까지 내려야 하거나

2) 개별 함수, 변수 등의 앞에 export 문구가 있는지 확인해야 하는 문제가 있습니다.

이는 개발자에게 주의력을 요하며, 시간도 소모하게 하는 스타일이라고 생각했습니다.

이 문제를 해결하고, 보다 논리적인 구성을 만들기 위해서 다음 처럼 import 구문 바로 밑에 export 를 써서 개발해보았습니다.

import {dynamoClient}  from 'src/config.db/awsDbS3Config.js';

export {dynamoReadAll, dynamoReadOneByIndex, dynamoCreateOne, dynamoDeleteOne, dynamoUpdateOne};

... 코드본문...

위와 같이 작성하자 크게 3가지 정도의 장점이 있었습니다.
1) 파일을 열자마자 이 파일이 어떤 자원(라이브러리, 자체적으로 만든 함수, 객체 등)들을 import 하고, 본문의 코드를 통해 어떤 작업물(변수,함수 등)을 export 하고 있는지 한눈에 확인할 수 있었습니다.

2) 위 1의 부수적인 효과인데, 코드를 파일단위에서 보다 논리적으로 파악할 수 있었습니다.
함수형 사고에 익숙한 저로서는 모든 코드를 '입력->함수 내부 과정->출력결과'로 파악하는 습관이 있는데, import 하는 자원들을 함수에 입력하는 인자로 생각하고, export 하는 것들을 함수 연산의 결과로 생각하자 하나의 js 파일이 하나의 함수로 인식되었습니다. 그렇게 생각하자 파일 내부 구조, 파일과 파일간의 관계를 보다 논리적으로 파악하고 설계 할 수 있게 되었습니다.

3) export {...} 구문이 일종의 가이드라인이 될 수 있었습니다. 코딩을 하면서 기능을 생각하면서 먼저 export { } 구문안에 만들어서 내보내야 할 함수나 오브젝트등을 적어놓고,주석으로 그 기능을 적어놓은 후, 본문에서 이를 하나씩 구현했습니다. 이 방식으로 보다 짜임새 있는 코딩이 가능했습니다.
별도의 todo리스트나 개발 문서를 작성하는 것이 일반적이지만, 이렇게 export 구문안에서 미리 export할 기능들을 적어주고 그 상세 내용을 주석으로 부연해주니 문서와 IDE를 오가면서 작업을 하지 않아도 되었습니다.

만약 구현이 안된 부분때문에, 테스트 할 때 에러가 나는 것이 싫다면
전체를 아래 처럼 줄 전체를 주석 처리 해준 다음, 기능을 만든 후 주석을 지워주는 방식이 좋습니다.

export {
 완성된 함수, // 함수 기능 상세 설명
 // 미완함수1, // 함수 기능 상세 설명
 //  미완함수2,
...
}

이런 식으로 주석처리 해놓고, 완성할 때마다 주석을 지워가면서 테스트 해도 괜찮습니다.

4) nodemon과 같이 사용할 경우, 실시간으로 에러가 어디에서 나는지 파악이 가능하고, 이 에러를 줄이는 것을 하나의 자바스크립트 파일을 완성하는 것으로 생각한다면 파일 단위에서 기능을 구현하는 것을 보다 짜임새 있게, 순차적으로 진행할 수가 있습니다. 마치 게임에서 업적을 달성하는 느낌으로 할 수 있었습니다.

파이썬의 경우 export 가 따로 없으며, 위에서 부터 아래로 순차적으로 처리되기 때문에 위와 같은 방식으로 개발을 할 수가 없습니다. 자바스크립트의 경우 Hoisting이라는 독특한 특성 때문에 밑에서 선언된 변수와 함수도 최상단에서 사용할 수 있기 때문에 export를 파일의 최상단에서 할 수 있습니다.

지금까지 이 컨벤션 스타일을 사용하면서 단점은 딱히 발견하지 못했습니다. 혹시 이 방식에 문제가 있거나 개선해야 할 점 등 의견이 있으시면 언제든지 의견을 남겨주셔도 됩니다.

감사합니다.