21.02.02

💡

알고리즘

• 수도코드 작성 Checklist

  • 요구사항이 하나 이상인 문제를 여러 개로 쪼개서 생각할 수 있는가?
  • 문제를 일상적인 문장으로 표현할 수 있는가? (해당 위치에 바르게 주석을 적을 수 있는가?)
  • 잘게 쪼갠 특정 문제를 JavaScript의 개념과 연관되는지 생각해낼 수 있는가?

• 코딩하기 전에 어떻게 프로그램이 작동하는지 흐름을 파악하자.

• 수도코드 예시 (텍스트에서 foo라는 단어를 찾아 전부 다른 단어로 바꿔주는 코드)

  1. 기본

     • 텍스트를 입력으로 받는다
     • foo라는 단어를 찾는다
     • 그 단어를 지운다
     • 그 자리에 새로운 단어를 넣는다
     • 바뀐 내용을 리턴한다

  2. 구체화 (자바스크립트가 할 수 있는 것과 할 수 없는 것에 대해 생각하며 어떤 기능을 쓸지 구체화해 본다.)

     • 텍스트를 입력으로 받는다
     • foo라는 단어를 찾는다
     • 끝까지 일치하는지 확인해본 후,
     • foo라는 글자의 index가 -1이 아니면 단어를 찾은 것이다
     • while index를 발견하면
     • index를 이용해 foo 바로 앞까지의 텍스트를 얻어내고
     • foo 대신 새로운 단어를 넣는다
     • foo 이후의 텍스트를 넣는다
     • endwhile

  3. 구현

     function replaceFoo(text) {
       // foo라는 글자의 index가 -1이 아니면 단어를 찾은 것이다
       while( text.indexOf('foo') !== -1 ) { // index를 발견하면
         let index = text.indexOf('foo');
     
         // index를 이용해 foo 바로 앞까지의 텍스트를 얻어내고
         let beforeText = text.slice(0, index);
         // foo 대신 새로운 단어를 넣는다
         let replaceText = 'BAR';
         // foo 이후의 텍스트를 넣는다
         let afterText = text.slice(index + 3); // 'foo'는 세 글자이므로 3을 더함
     
         text = beforeText + replaceText + afterText;
       }
     
       return text; // 바뀐 내용을 리턴한다
     }

  4. (+) 문제 분해

     • 위 코드를 기능별로 구분해 수정하여, 아래처럼 각각 보편적인 함수로 바꿀 수도 있다.
     • find(text, searchString);
replace(text, searchString, replaceString);

코드 스타일링

• 들여쓰기(Indentation)

  • 탭이 아닌 2개의 스페이스를 권장. 절대로 피해야 할 것은 스페이스와 탭을 혼용해서 쓰는 것.
  • if, while 등 중괄호 안에 종속된 코드가 있는 경우, 종속된 코드 블록은 주인 코드 블록보다 두 칸 들여쓰기한다.

    if (condition) {
      action();
    } // 종속된 코드 블록 마지막 줄의 중괄호는 시작한 줄(여기서는 if 앞)과 동일한 위치에 놓는다.

• 이름 짓기(Naming)

  • 변수명은 값의 본질적인 의미를 지녀야 한다. 개발 분야의 핵심을 잘 묘사해줄수록, 한 단어로 표현할수록 좋다. (금융 관련 개발을 하는 경우 그 분야에서 사용하는 용어 사용)

    let interestRate = 0.2; //이자율임을 쉽게 알 수 있다.

  • 변수에 할당되는 값의 형식이 아닌, 그 값의 의미가 변수 이름에 반영되어야 한다.

    let animals = ['cat', 'dog', 'fish'];
    //targetInput과 같이 변수가 가지고 있는 구조를 표현하고 있는 변수명보다
    //값의 의미를 반영한 animals가 낫다.

  • 데이터의 모음(collection)이 할당된 변수의 이름은 복수 명사가 좋다. 위의 예시 코드로 예를 들자면, animalList보다는 animals가 의미를 더 잘 표현하기 때문에 animals를 사용했다. (단수 animal은 NO!)
    
    

  • boolean이 할당된 변수는 is 혹은 are을 붙여서 참 혹은 거짓임을 분명히 표현한다.

    let isDog = true;
    let 강아지입니다 = true;

  • 함수의 이름은 동사로 시작하는 게 좋다. 기능을 담은 동사를 함수명에 포함하면 역할을 쉽게 파악할 수 있고, 함수의 입력값과 출력값, 둘 사이의 변환 과정을 파악하기 쉽다.

    let countBlocks = function() {
     // 벽돌의 개수를 세는 함수임을 쉽게 알 수 있습니다.
    }

  • 변수 할당 값이 Class인 경우에는 주로 변수의 첫 글자를 대문자로 사용한다. new 키워드를 사용한 함수에 한해서 대문자를 쓰기도 한다. (class 역할을 하기 때문)

    class Animal(){
    // ES6 부터 사용 가능한 class가 할당되는 변수는 첫 글자를 대문자로 적습니다.
    }
    function Animal() {
    // class 생성자 함수가 될 함수이므로 대문자로 적습니다.
    }

  • 상수는 모두 대문자로 적는다.

    const MAX_ITEMS_IN_QUEUE = 100;

• 기호 및 구두점(Punctuation)

  • 문법적으로 생략 가능한 때에도 중괄호는 생략하지 않는다. (for문이나 if문 등에서 종속 코드가 1줄일 경우 중괄호를 생략할 수 있으나, 생략하지 않고 모두 써준다.)
    
    
  • JavaScript의 문자열 표시는 작은따옴표를 권장한다. HTML에서 사용하는 큰따옴표와 구분하기 위해서이다. (큰따옴표도 괜찮으나 혼용은 NO!)

    let dog = 'dog';
    let cat = 'cat';

  • 줄바꿈이 필요한 문자열을 정의할 때는 ` 백틱(backtick)사용을 권장한다.

    let multilineText = `this is line one
    this is line two
    this is line three`;
    // 엔터가 명확하게 보입니다.

  • 코드 실행의 가장 작은 단위인 Statement(문)의 끝에 세미콜론을 사용한다.

    alert('hi');

  • if, for, while문의 끝에는 세미콜론을 사용하지 않는다. 중괄호로 끝나는 Statement는 이미 종료가 암시되어 있기 때문이다.

    if (condition) {
      response();
    }

  • 함수 표현식의 끝에는 세미콜론을 사용한다.

    let greet = function () {
      alert('hi');
    };

• 연산자와 키워드

  • 엄격한 비교 연산자(strict equality, ===, !==)를 사용한다.
    
    

  • 3항 연산자(?)는 간결하고 가독성이 좋은 경우만 사용한다. 코드를 간결하게 만들지만 리턴 값이 장황한 경우 가독성이 떨어진다.

    // **BAD!** 
    return (actual === expected) ? 'passed' : 'FAILED ['
      + testName + '] Expected "'+expected+'",but got '+'"'+actual+'"';
     };

  • not 연산자('!')는 바로 앞에 붙여서 사용한다.

    if (!isEqual) {

• 짧게 쓰기

  • 코드는 뜻이 분명하고 실행되는 한, 되도록 짧게 쓴다. 변수를 선언하지 않아도 될 곳에서는 바로 값을 리턴한다.
    
    
  • 부정의 의미가 명확한 곳에만 NOT 연산자를 사용한다. if(!equalSizes || !equalValues) 처럼 남발하지 않는다. 불필요하게 조건에 대해 고민하게 만든다.
    
    
  • Boolean으로 평가되는 표현문은 바로 return한다. return charSet.size > text.length; 비교문은 무조건 true 혹은 false로 평가되기 때문에 조건문을 작성하지 않아도 된다.
    
    

• 코드 문장과 구문 사이 공간

  • 한 번에 더 많은 코드를 읽기 위해서 줄 바꿈은 최소로 사용한다. (최대 한 칸) 줄을 바꿔야 할 때와 줄 바꿈을 자제해야 할 때를 잘 구분한다. 어떻게 작성해야 이해하기 쉬운가?
    
    
  • 들여쓰기는 일관성 있게 최소화하여 사용한다. 괄호와 따옴표 사이에 공백을 넣고 싶다면, 앞뒤 둘 다 넣는다. (둘 다 넣지 않아도 됨)
    YES alert( 'I chose to put visual padding around this string' );
    NO alert( 'I only put visual padding on one side of this string');
    
    
  • 같은 라인에 값을 보기 위해 하는 들여쓰기는 지양한다. 변수명과 값을 정렬하기 위해 불필요한 들여쓰기를 하지 않는다.
    
    
  • 콤마 사이는 한 칸 띄어 쓴다.
    assertEqual(Math.pow(3, 2), 9, 'Math.pow squares properly');
    
    
  • 연산자 사이는 한 칸 띄어 쓴다.
    'Failed [' + testName + ']'...
if(actual === expected)
    
    

• 주석

  • 주석은 꼭 필요한 경우에만 작성한다.
  • 변수 이름과 구조로 코드의 목적이 정확히 표현되면 주석을 적을 필요가 없다. 코드를 보고 바로 이해할 수 있을 만큼 가독성 좋게 코드를 작성해야 한다.
    
    

• CamelCase vs. snake_case

  • JavaScript에서는 변수의 이름을 지정할 때 Camel Casing으로 지정한다. (Ruby 같은 다른 프로그래밍 언어에서는 Snake Casing을 사용한다.) 단, 상수 이름을 지을 때는 Snake Casing을 사용한다.
    Camel Casing let camelCased = 'Used in javascript';
    Snake Casing let snake_cased = 'Used in other languages';

    
    

• 유명한 코드 스타일 가이드

  • Google JavaScript Style Guide
  • Airbnb JavaScript Style Guide
  • The Modern JavaScript Tutorial - Coding Styling
  • NHN 코딩 컨벤션 - HTML / CSS
  • NHN 코딩 컨벤션 - Javascript
    
    
    

추가

• split()

  • String 객체를 지정한 구분자를 이용하여 여러 개의 문자열로 나눈다.
  • str.split([separator[, limit]])
  • 문자열 유형의 separator 두 글자 이상일 경우 그 부분 문자열 전체가 일치해야 끊어진다
  • str.split('')은 문자열을 나눌 때 UTF-16 코드 유닛으로 나누게 되어 써로게이트 페어가 망가질 수 있다. 사용에 주의.
  • [...str]과 Object.assign([], str)은 str.split('')과 동일한 결괏값을 리턴한다.
    
    

• indexOf()

  • 호출한 String 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환한다. 일치하는 값이 없으면 -1을 반환한다.
  • str.indexOf(searchValue[, fromIndex])
  • fromIndex로 찾기 시작하는 위치를 지정할 수 있다.
    
    

• join()

  • Array의 모든 요소를 연결해 하나의 문자열로 만들어 반환한다. arr.length가 0이라면, 빈 문자열을 반환한다.
  • arr.join([separator])
  • 요소가 undefined 또는 null이면 빈 문자열로 변환한다.
  • separator를 ()로 지정하면 배열 사이에 쉼표가 삽입되며, ('')로 지정하면 아무 문자 없이 연결된다.

---

　

📝

내가 구상한 코드를 어떻게 하면 상대방에게 잘 설명할 수 있을까? 아마 수도코드 작성 경험이 별로 없어서 설명도 제대로 못 하는 것 같다. 특히 오늘은 급하게 설명하려다 보니 더 횡설수설... 노트에 써보려고 해도 쓰다 보면 그냥 손으로 키보드 두들기는 것처럼 코드부터 써 내려가고 있다. 🤷 혼자서 자주 연습해봐야겠다.
이해했다고 기억했다고 생각했던 것들이 기초 알고리즘을 풀 때쯤 되니 흐려져 있었다. 주말에 자주 쓰였던 메소드들을 정리하자.