프론트엔드 개발자라면 알아야할 다섯가지 알고리즘

5 JavaScript Algorithms You Should Know How To Solve

 

 

 

이 블로그 글은 위의 내용을 번역한 자료입니다!

 

---

 

알고리즘이란 무엇인가? What is an Algorithm?

 

알고리즘은 문제를 해결하기 위한 또는 특정한 결과에 다다르기 위한 순서의 나열이다. 알고리즘을 풀기 위해서는 그 문제를 이해를 해야하고, 코딩으로 풀 수 있어야한다. 알고리즘을 쉽게 해결하기 위해서는 먼저 작은 부분들로 나누어야 한다. 그리고 이 작은 문제를 먼저 풀어나가는게 전체 문제에 먼저 접근하는 것보다 훨씬 쉬울 것이다. 알고리즘은 매우 중요하고 유용하다. 코딩 문제를 풀게끔 해주며 더 좋은 프로그래머가 될 수 있도록 도와준다.

 

이 글에서는 자바스크립트 코딩 스킬과 문제 해결 능력을 향상시킬수 있을만한 알고리즘을 공유한다.

 

 

 

Photo by  Olav Ahrens Røtne  on  Unsplash

 

 

1. Missing Letters

 

이 알고리즘은 행렬에서 숨겨진 마지막으로 이어질 글자를 찾아 리턴을 한다. 만약 모든 글자가 범위내에 존재한다면 return 값을 undefined으로 돌려주어야 한다. 먼저 JavaScript 함수를 생성해야한다. 함수는 추가할 문자 행렬을 대표할 하나의 파라미터를 받아 숨겨진 문자가 있는지 체크한다.

 

 

Algorithm Example.

 

// 알고리즘 예제
function letters(str) {
	// 코드가 위치하는 곳
   }
letters("abce");
// letters("abce") "d"를 리턴해야한다.
// letters("bcdf") "e"를 리턴해야한다.
// letters("abcedfghi")는 undefined를 리턴해야한다.

 

Solution

function fearNotLetter(str) {
	for (var i=0; i<str.length; i++) {
    /* 현재 문자에 대한 코드 */
    var code = str.charCodeAt(i);
    
    /* 현재 문자가 첫번째 문자와 일치하지 않는다면 + i로 빠져나간다. */
    if (code !== str.charCodeAt(0) + i) {
    	/* 만약 현재 문자가 빠져나갔다면 그 전의 문자를 찾아 리턴 */
    	return String.fromCharCode(code -1);
        }
    }
 	return undefined;
}

fearNotLetter("abce");

 

 

 

2. Pig Latin

 

피그 라틴은 영어 단어를 교체하는 방식 중 하나이다. 이 알고리즘은 두 개의 규칙이 있다.

 

1. 만약 단어가 자음으로 시작한다면, 첫번째 자음 또는 자음의 모음들을 끝으로 옮기고 "ay"를 추가해라.

 

2. 만약 단어가 모음으로 시작한다며, "way"를 끝에 추가해라.

 

 

Algorithm Example. 

 

// 알고리즘 예제
function translatePigLatin(str) {
	// 코드가 위치하는 곳
    }
    
translatePigLatin("california");
// translatePigLatin("california")는 "aliforniacay"를 리턴한다.
// translatePigLatin("algorithm")은 "algorithmway"를 리턴한다.

 

Solution

 

function translatePigLatin(str) {
	let consonantRegex = /^[^aeiou]+/;
    let myConsonants = str.match(consonantRegex)
    return myConsonants !== null // 모음정규형에 비어있지않다면
     ? str							
     	.replace(consonantRegex, "") // 모음정규형이라면 빈 문자열로 대치
        .concat(myConsonants) // 모음정규형에 일치하는 문자열을 찾아서 매치한 뒤 연결
        .concat("ay") // "ay"를 연결
     : str.concat("way"); // 자음으로 시작한다면 "way"를 연결	
}

translatePigLatin("consonant");

 

 

 

3. Smallest Common Multiple

 

이 알고리즘은 제공되는 두개의 파라미터로 똑같이 나누어질 수 있는 가장 작은 공통 배수를 찾는 문제이다(최소공배수). 범위는 두 수의 범위 내에 있어야한다. 예를 들면, 1과 3이 있다면, 1과 3으로 똑같이 나누어 질 수 있는 가장 작은 공통 배수이어야한다. 이 경우에, 답은 6이 될 것이다.

 

 

Algorithm Example.

 

// 알고리즘 예제
function smallestCommons(arr) {
// 코드가 위치하는 곳
}

smallestCommons([1,5]);
// 예제:
// smallestCommons([1,5])는 60을 리턴해야한다.
// smallestCommons([5,1])은 60을 리턴해야한다.
// smallestCommons([2,10])은 2520을 리턴해야한다.

 

Solution

 

const smallestCommons = arr => {
	let max = Math.max(...arr);
   	let min = Math.min(..arr);
    // 먼저 값을 배열의 가장 높은 value에 할당한다.
    let sol = max;
    
    for(let i = max -1; i >= min; i--) {
    
    if(sol % i) {
    	sol += max;
        i = max;
	}
}
    return sol;
};

smallestCommons([1, 5]);

 

 

 

4. Binary Agents

 

이 알고리즘을 위해서는 우리는 이진 스트링을 영어로 된 문장으로 전환시켜야 한다. 이진 스트링은 space로 구분되어진다. 그러므로 이 알고리즘을 위해서는 이진 스트링을 파라미터로 받을 수 있는 자바스크립트 함수가 있어야한다. 아래의 예제를 보고 문제를 이해해보자.

 

 

Algorithm Example.

 

// 알고리즘 예제.
function binaryAgent(str) {
	// 코드가 위치하는 곳
}

binaryAgent("01000001 01110010 01100101 01101110 00100111 01110100 00100000 01100010 01101111 01101110 01100110 01101001 01110010 01100101 01110011 00100000 01100110 01110101 01101110 00100001 00111111")");
// 예제:
// binaryAgent("01000001 01110010 01100101 01101110 00100111 01110100 00100000 01100010 01101111 01101110 01100110 01101001 01110010 01100101 01110011 00100000 01100110 01110101 01101110 00100001 00111111")는 "Aren't bonfires fun!?"을 리턴한다.
// binaryAgent("01001000 01100101 01101100 01101100 01101111") "Hello"를 리턴한다.

 

Solution

 

function binaryAgent(str) {
	var biString = str.split(" ");
   	var uniString = [];
    
    /* 베이스 파라미터를 parseInt 형변환으로 이진수를 숫자로 변환하고 동시에 문자로 변환한다. */
    
    for(var i = 0; i < biString.length; i++) {
    	uniString.push(String.fromCharCode(parseInt(biString[i],2)));
        }
        
        return uniString.join("");
 	}
    
    binaryAgent(
    	"01000001 01110010 01100101 01101110 00100111 01110100 00100000 01100010 01101111 01101110 01100110 01101001 01110010 01100101 01110011 00100000 01100110 01110101 01101110 00100001 00111111"
);

 

 

 

5. Streamroller

 

Streamroller 알고리즘은 계층된 배열을 하나의 배열로 정렬하는 것이다. 계층들의 다른 높이를 염두에 두고, 그에 알맞는 함수를 작성해야한다.

 

 

Algorithm Example.

 

// 알고리즘 예제:
function steamrollArray(arr) {
	// 코드가 위치하는 곳
}
steamrollArray([1, [2], [3, [[4]]]]);
// 예제:
// steamrollArray([1, [2], [3, [[4]]]])는 [1, 2, 3, 4]를 리턴해야 한다.
// steamrollArray([[["a"]], [["b"]]])는 ["a", "b"]를 리턴해야 한다.

 

Solution

 

function steamrollArray(arr) {
	let flat = [].concat(...arr);
    return falt.some(Array.isArray) ? steamrollArray(flat) : flat;
}

steamrollArray([1, [2], [3, [[4]]]]);

 

 

---

 

 

Conclusion

 

알고리즘은 대체로 중요하면서 문제 해결 능력 향상을 위한 유용한 도구이다. 아마 이 문제들은 당신의 인터뷰 문제로 나올 수도 있고 그렇기 때문에 프론트엔드 개발자라면 이 문제 해결방법들을 알고 있어야 한다. I believe you can do it, you just need to believe in yourself!