Feb 9, 2018 - POP_part20

관점 - 프로그래머가 보는 시각

직교성

코드에 변경은 다른코드에 영향을 주면 안된다. 즉 코드간에 독립성과 분리성을 갖도록 하자. 직교성을 가진 코드는 견고하다. 변경이 국소화 되면 생산성이 향상된다. 문제가 생겨다 해당부분을 격리 가능해서 코드가 더 견고해진다. 모듈간에 결합도를 최소화 시키자 불필요한 정보는 다른 모듈에 공개하지 말자 결합도를 최소화 하는데 계층화라는 접근이 유효한 방법

가역성

어떤 변화가 발생해도 특정 조건을 가하면 원래 상태로 돌아오는 성질 실세계의 상황은 항상 변화하므로 유연하고 적응력이 있는 가역적인 코드를 작성해 두어야 한다. 변경에 견디기 위해 초기화가 가능한 설계를 해 두자.

코드의 구린내

코드의 구린내 징후

  • 자주보인다.
  • 너무 길다.
  • 너무 크다
  • 너무 많다.
  • 이름이 맞지 않는다.

기술적 부채

문제가 있는 코드는 빚이다. 기술적 부채는 악순환을 낳는다. 문제가 있는 코드의 원인

  • 경험이 부족한 프로그래머
  • 전문화된 코드
  • 마감 압박
  • 읽기 어려운 코드
  • 그냥 나쁜설계
  • 불필요하게 복잡한 코드

팀분위기와도 상관이 있다.

참조

Feb 2, 2018 - CodeSpitz74_Part3_2

코드스피츠 74 3회차


const textNode = (text, target) =>{
     if(text.length){
         target.push({type:'TEXT', text});
         return '';
     }
};

const parser = input =>{
    const result ={tag:{type:'ROOT', children:[]}, stacks=[]};
    let cursor = 0, stack = result;
    
    do{
        let text = '';
            while (cursor < input.length){
                const char = input[cursor++];
                if(char === '<'){
                    text = textNode(text, stack.tag.children);
                    if(input[cursor++] != '/'){
                        // 활당 연산자를 통해서 변수를 줄임
                        let name = input.substr(cursor -1, cursor = input.indexOf('>', cursor));
                        const isClose = input[cursor] === '/';
                        if(isClose){
                            name = name.substr(0, name.length - 1);
                        }
                        const tag = {name, type:'NODE', children: isClose ? null:[]};
                        cursor++;
                        stack.tag.children.push(tag);
                        if(!isClose){
                            stacks.push({tag, back: stack});
                            break;
                        }
                    }
                }else{
                    text += char;
                }
            }
    }while (stack = stacks.pop())
    
    return result;
};

함수로 변환


const elementNode = (input, cursor, text, stack, stacks) =>{
   
   const char = input[cursor++];
   let isBreak = false;
   
   if(char === '<'){
       text = textNode(text, stack.tag.children);
       if(input[cursor++] != '/'){
           // 활당 연산자를 통해서 변수를 줄임
           let name = input.substr(cursor -1, cursor = input.indexOf('>', cursor));
           const isClose = input[cursor] === '/';
           if(isClose){
               name = name.substr(0, name.length - 1);
           }
           const tag = {name, type:'NODE', children: isClose ? null:[]};
           cursor++;
           stack.tag.children.push(tag);
           if(!isClose){
               stacks.push({tag, back: stack});
               isBreak = true;
           }
       }
   }else{
       text += char;
   }
   return {cursor, text, isBreak}
};




const textNode = (text, target) =>{
     if(text.length){
         target.push({type:'TEXT', text});
         return '';
     }
};


const elementNode = (input, cursor, text, stack, stacks) =>{
   
   const char = input[cursor++];
   let isBreak = false;
   
   if(char === '<'){
       text = textNode(text, stack.tag.children);
       if(input[cursor++] != '/'){
           // 활당 연산자를 통해서 변수를 줄임
           let name = input.substr(cursor -1, cursor = input.indexOf('>', cursor));
           const isClose = input[cursor] === '/';
           if(isClose){
               name = name.substr(0, name.length - 1);
           }
           const tag = {name, type:'NODE', children: isClose ? null:[]};
           cursor++;
           stack.tag.children.push(tag);
           if(!isClose){
               stacks.push({tag, back: stack});
               isBreak = true;
           }
       }else if(stack.tag.name == input.substring(cursor, input.indexOf('>',cursor))){
           stack = stack.back;
       }
   }else{
       text += char;
   }
   return {cursor, text, isBreak}
};


const parser = input =>{
    const result ={tag:{type:'ROOT', children:[]}, stacks=[]};
    let cursor = 0, stack = result;
    
    do{
        let text = '';
        while (cursor < input.length){
            const v = elementNode(input, cursor, text, stack, stacks);
            ({cursor, text} = v);
            if(v.isBreak) break;
        }
    }while (stack = stacks.pop())
    
    return result;
};

잘만들자 ㅜㅜ

참조

Jan 31, 2018 - CodeSpitz74_Part3_1

코드스피츠 74 3회차

HTML PARSER 만들기

A = BODY B = C = TEXT BODY = (A|B|C)N

함수는 어떻게 짠다. 레이아웃이라는 개념으로 짠다. 함수의 시그니쳐를 확정하는데 있다.

node로 확정되는 순간은?


const parser = input =>{
    const result;
    let cursor = 0;
    
    let text = '';
    while (cursor < input.length){
        const char = input[cursor++];
        // 여기서 text노드가 탄생하는 순간이다.
        if(char === '<'){
            // 함수로 제거
            if(text.length){
                //텍스트 노드 삽입
                text = '';
            }
   
        }else{
            text += char;
        }
    }
    
    return result;
};

함수를 만드는 기본적인 이유 사람한테 쉬운 단어로 바꾼다 어휘로 바꾼다.


const textNode = (text, target) =>{
     if(text.length){
         //target 삽입           
     }
};

const parser = input =>{
    const result;
    let cursor = 0;
    
    let text = '';
    while (cursor < input.length){
        const char = input[cursor++];
        if(char === '<'){
            
            //알고리즘 제거 어휘로 바꾼다.
            text = textNode(text, target);
            text = '';

        }else{
            text += char;
        }
    }
    
    return result;
};

첫번째 테그의 이름까지 얻어냄


const textNode = (text, target) =>{
     if(text.length){
         //target 삽입           
     }
};

const parser = input =>{
    const result;
    let cursor = 0;
    
    let text = '';
    while (cursor < input.length){
        const char = input[cursor++];
        if(char === '<'){

            text = textNode(text, target);
            text = '';

            if(input[cursor++] != '/'){
                let name = input.substr(cursor -1, cursor = input.indexOf('>', cursor));
                const isClose = input[cursor] === '/';
                if(isClose){
                    name = name.substr(0, name.length - 1);
                }
                const tag = {name, type:'NODE', children:[]};
                cursor++;
            }

        }else{
            text += char;
        }
    }
    
    return result;
};

스택추가 ㅜㅜ


const textNode = (text, target) =>{
     if(text.length){
         target.push({type:'TEXT', text});
         return '';
     }
};

const parser = input =>{
    const result ={tag:{type:'ROOT', children:[]}, stacks=[]};
    let cursor = 0, stack = result;
    
    do{
        let text = '';
            while (cursor < input.length){
                const char = input[cursor++];
                if(char === '<'){
                    text = textNode(text, stack.tag.children);
                    if(input[cursor++] != '/'){
                        let name = input.substr(cursor -1, cursor = input.indexOf('>', cursor));
                        const isClose = input[cursor] === '/';
                        if(isClose){
                            name = name.substr(0, name.length - 1);
                        }
                        const tag = {name, type:'NODE', children: isClose ? null:[]};
                        cursor++;
                        stack.tag.children.push(tag);
                        if(!isClose){
                            stacks.push({tag, back: stack});
                            break;
                        }
                    }
                }else{
                    text += char;
                }
            }
    }while (stack = stacks.pop())
    
    return result;
};

참조

©2018 g00dyearth. Powered by Jekyll, theme by Scott Emmons under Creative Commons Attribution