코드 스터디

『김밥 코드 』폴더생성 및 네임스페이스 코딩

Recstasy 2021. 3. 30. 06:35

취업, 창업이 아닌 개인적인 취미로

s/w를 개발한다면 조금 달라져야하지 않을까?

 

효율성과 속도가 중요한 개인 개발자의 입장에서는

라이브러리를 적재적소에 어떻게 사용하느냐가 중요하기 때문이다.

 

그래서 김밥코드를 생각했다.

 

가령, 블로그에서 활용할 수준의 웹앱이라면

스파게티보다는 좀더 질서정연한 김밥이 어울린다.

 

김밥은 최소한 기본적인 틀이 있고, 서로 꼬여있지는 않다.

또한 김밥은 코스식(객체지향 아키텍처)으로 제공할 필요가 없다.

기본적인 틀(김)에 싼후, 내용물이 단단하게 뭉쳐져 있으면 된다.

사실상 컴포넌트 패턴의 변형이다.

 

 

 

 

 

 

『폴더 생성』

 

김밥 코드의 틀은 기본적으로 객체지향의 원리를 활용한다. 

 

폴더구조

MVC를 변형한 폴더구조를 만들자.

js폴더 아래 app, board, common, sources 폴더를 생성하고,

index.html파일을 만든다.

 

board폴더는 기존의 MVC구조에서

Model, View, Control 기능을 하나로 뭉쳐버린 폴더이다.

즉, borad는 mvc기능을 한다.

 

어차피 위의 프로젝트는 대규모 단위테스트가 필요없는 구조이며,

자질구레한 버전업만 진행할 예정이므로

board.js 파일 내의 M,V,C기능은 주석으로 분리된다.

그리고 나머지 기능은 모두 함수형으로 구현된다.

 

김밥 코드의 핵심은 '속도'다.

 

 

 

 

 

common::네임스페이스

 

common폴더에는 네임스페이스를 생성하는 공통 코드를 작성한다.

 

//'CGBADA'삭제 후 프로젝트명 기입

var CGBADA = CGBADA || {}; // 싱글턴 패턴, 전역변수 선언

CGBADA.createNameSpace = function(nsVal){

    let parts = nsVal.split('.');
    let parent = CGBADA;
    let i;

    if(parts[0] === 'CGBADA'){
        parts = parts.slice(1);
    }

    for(i=0; i<parts.length; i+=1){
        if(typeof parent[parts[i]] === 'undefined'){
            parent[parts[i]] = {};
        }
        parent = parent[parts[i]]; //CGBADA안의 객체가 있다면, 그대로 사용
    }

    return parent;
}

 

common폴더에 네임스페이스 파일을 생성했다면,

index.html에 경로를 지정한다.

 

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/common/cgbadaCommon.js"></script>
    <title>CGBADA</title>
</head>
<body>
    <script>
        window.onload = ()=>{
            let main = new CGBADA.app.CGBADA_main();
        }
    </script>
</body>
</html>

 

이제 구조 파일은 main.js, constants.js파일이 남았는데,

해당 파일은 app폴더에 생성한다.