문제 해결 능력에 관점에서 개발 뿐만이 아니라 UI/UX 디자인에도 흥미를 느끼고 있어서 미디어 콘텐츠와 관련된 기업에 참여하고 싶습니다. 다른 분야의 분들과 협업하면서 좋은 결과를 제공하기 위해서 백엔드와 디자인의 요소들 까지 고려하고 배우고 있습니다.

프리온보딩 인턴십에서 본인이 얻고 싶은 것

클린 코드는 기능을 구현하는 앞의 20%의 단계가 나머지 80%의 단계를 좌우한다고 합니다. 프로젝트를 시작하기 앞서 CRM 마켓팅의 원리에 따라 소비자가 원하는 기능이 무엇인지 파악하여 목적에 맞게 코드를 작성하는 가장 효율적인 디자인 패턴과 아키텍처에 대해서 배우고 싶습니다. 선별 과제에서도 단순히 기능을 구현하는 것만이 아니라 이후에 새로운 기능을 추가하거나 수정해야하는 사항이 필요할 때를 고려하여 단일 책임의 원칙을 지켜 작성하려고 노력했습니다. 이를 위해서 앞으로 리액트의 심화적인 동작 원리를 알고 최적화에 대해서도 배우고 싶습니다.

최종 합격까지 몇 개 이상의 이력서 작성 및 제출할 건지 각오

프론트엔드 분야 뿐만이 아니라 회사의 전반적인 시스템과 새로운 배움에 대해서 항상 열린 태도로 배우고 있습니다. 회사를 지원하기 위해서 개인 역량의 향상과 다양한 능력 개발를 체계화시키는 과정을 진행하고 있습니다. 다양하게 배우는 이유는 관련 없어 보이는 모든 지식들도 지식의 확장을 통해서 유용하게 적용될 수 있다고 생각하기 때문입니다. 이런 마음 가짐으로 계속 지원하겠습니다.

void printInteger(int number) {
    print('the number is $number');
}

string interpolation

문자열 보간법은 $variableName 또는 ${expression} 으로 진행한다.

main

다트의 top-level-funtion은 main에서 시작된다.

OOP(object-orient-programing)

다트의 fucntions, numbers, null 까지 모두 객체이다.

변수 선언

    var name = "bob";
    String name = "bob";

다트는 동적 할당을 할 경우 var을 사용하며, 정적 할당 변수 또한 모두 존재한다.

late String description;

값을 선언하지 않는 경우 Late variable 로 미리 선언해둘 수도 있다.

상수

상수의 경우 final과 const가 존재한다. 둘 다 한번 선언하면 값을 변경할 수 없지만 const는 컴파일 타임에 상수가 된다. 그래서 인스턴스의 변수로 사용할 수 없다.

built-in type

Numbers, String, Booleans, Lists, Sets, Maps, Runes, Symbols 등이 있다.

Lists

• spread operator를 제공한다.

  var list = [1, 2, 3];
  var list2 = [0, ...list];
  assert(list2.length == 4);

  assert는 debug 중에서만 동작하며 배포 코드에서는 프로그램에 영향을 주지 않는다. 조건이 거짓인 경우 실행이 중단된다.

코딩 테스트는 보통 파이썬을 활용하는 경우가 많다. 자바스크립트나 파이썬을 사용하는 것이 좋아보이고 다른 언어를 사용하는 경우도 보았지만 보일러플레이트가 심해서 코딩 테스트로 활용하기에는 적합해보이지 않는다. 또한 절차 지향 패러다임으로 구성되는 것이 기본 단계이기로 적합해보인다.

복잡도

시간 복잡도

• 알고리즘을 위해 필요한 연산의 횟수
• O(N)으로 표기한다.
• 상수 시간, 로그시간, 선형시간, 이차 시간 등이 있다.

공간 복잡도

• 알고리즘을 위해 필요한 메모리의 양
• 메모리 사용량(MB)

유형 분석

• 이진 탐색
• 정렬
• 그리디
• 구현
• DFS/BFS
• 최단 경로
• 다이나믹 프로그래밍
• 기타 그래프 이론

오늘의 문제

카펫

Leo는 카펫을 사러 갔다가 아래 그림과 같이 중앙에는 노란색으로 칠해져 있고 테두리 1줄은 갈색으로 칠해져 있는 격자 모양 카펫을 봤습니다.

Leo는 집으로 돌아와서 아까 본 카펫의 노란색과 갈색으로 색칠된 격자의 개수는 기억했지만, 전체 카펫의 크기는 기억하지 못했습니다.

Leo가 본 카펫에서 갈색 격자의 수 brown, 노란색 격자의 수 yellow가 매개변수로 주어질 때 카펫의 가로, 세로 크기를 순서대로 배열에 담아 return 하도록 solution 함수를 작성해주세요.

나의 풀이

// 브라운은 테두리니까 갯수는 대각선의 4개를 제외하면 노란색의 가로 x 2 와 새로 x 2 로 구성된다.
// 4 + 2 + 4 = 10 
// 2 + 2 + 4 = 8
// 24가 6 x 4 일 때, 12 + 8 + 4 = 24
// 24로 만들 수 있는 경우는 1*24, 2*12, 4*6 6*4 8*3
function solution(brown, yellow) {
    let [cal, row] = [0, 0]
    while(1) {
        if(yellow % cal == 0) {
            row = yellow / cal
            if(brown == row * 2 + cal * 2 + 4)
                return [row + 2, cal + 2]
        }
        cal += 1
    }
}

• 노란색의 타일의 가로와 세로의 각각의 두배의 크기 + 대각선 4개의 블록이 브라운 타일임을 통해서 찾은 해법이다.
• 가장 인기 있던 풀이의 경우 근의 공식과 수학적인 개념을 이해해서 위의 문제를 풀어냈다.
• 수학과 과학에 관련된 지식도 공부가 필요할 것으로 보인다.

2차원 배열에 대한 익숙함이 필요

배열 내장 함수

• map, filter, forEach, reduce

• indexOf, findIndex, find, …

• forEach

[1, 2, 3].forEach(
(number, index) => console.log('index: ' + index + 'number: ' + number)

• index는 0부터 시작하여 배열의 위치값을 number는 배열의 값을 가져올 수 있다.

• 세번째 인자는 배열 자체를 가져올 수 있다.

• every, some : 특정 조건을 만족하는 지 배열을 순회하며 검사한다.

  • every는 조건을 만족하지 않는 값이 발견되면 순회를 중단한다.
  • some은 조건을 만족하는 값이 발견되면 순회를 중단한다.

한칸마다 주변에 폭탄이 있으면 위험지대로 인식하여 총 개수(n*n)에서 감산하는 방법이다.

• 중첩 반복문을 나가는 break를 쓴다는 문제점이 있다.(break는 클린코드에서 추천하지 않는 방법이다.)
• 9번과 11번이 통과되지 않았었다.
  • 배열이 n칸이면 0부터 n-1까지 가능하다는 점에서 [x, y] 값이 max보다 작을 때로 처리하자 해결됬다.
• for…in 구문이 연산자와 쓰일 때 문자로 인식되어 Number로 감싸줘야하는 문제가 있었다.

function solution(board) {
    // 보드는 n * n 배열이다.
    let [min, max] = [0, board.length]
    let [y, x] = [0, 0]
    let blanks = max * max
    let dangerArea = 0
    for(row in board)
    for(blank in board[row])
            outer:
            for(var i = -1; i < 2; i ++)
            for(var j = -1; j < 2; j ++) {
                y = Number(row) + i
                x = Number(blank) + j
                    if(y >= min && y < max && x >= min && x < max)
                    if(board[y][x] == 1) {
                        dangerArea += 1
                        break outer
                    }
            }         
    return blanks - dangerArea
}

• 다른 풀이들은 대각선을 포함한 상하좌우를 direction으로 배열로 직접 적는 방식을 사용했지만, 나는 중첩 반복문을 이용하여 깔끔하게 해결했다. 하지만 직관적으로 보기 좋은 방법은 아닌 것 같다.

• 처음에는 주변에 폭탄이 있으면 X로 변경하는 어려운 방법을 구현하려고 했다. 구현하기 전에 어떻게 하는 것이 가장 깔끔할 지 문제를 제대로 파악하는 것이 더 좋은 답을 내는 좋은 방법으로 보인다.

• 상하좌우 비교를 위해서 for…in 구문을 이용하여 번호를 받는 방식을 선택했지만 더 좋은 방법은 없었을까? 하나의 풀이는 단순하게 for문으로 처리하기도 했지만 직관성이 떨어져보인다. 하지만 나의 경우에서 Number가 의미 없이 쓰이는 문제가 있다.

• some은 어떤 조건을 만족하면 배열 순회를 멈춘다. 이를 통해 나의 break문 없이 해결

• 위처럼 outside가 있다면 만약 문제에서 폭탄 검사위치가 변경되는 경우에도 위의 방법이 적용되는 효과를 가진다.

• 내가 한 것과 유사하나 이것은 safezone을 변수로 삼았고 함수형으로 더 간결하게 작성되었다.

마법의 엘리베이터

문제 설명

마법의 세계에 사는 민수는 아주 높은 탑에 살고 있습니다. 탑이 너무 높아서 걸어 다니기 힘든 민수는 마법의 엘리베이터를 만들었습니다. 마법의 엘리베이터의 버튼은 특별합니다. 마법의 엘리베이터에는 -1, +1, -10, +10, -100, +100 등과 같이 절댓값이 10c (c ≥ 0 인 정수) 형태인 정수들이 적힌 버튼이 있습니다. 마법의 엘리베이터의 버튼을 누르면 현재 층 수에 버튼에 적혀 있는 값을 더한 층으로 이동하게 됩니다. 단, 엘리베이터가 위치해 있는 층과 버튼의 값을 더한 결과가 0보다 작으면 엘리베이터는 움직이지 않습니다. 민수의 세계에서는 0층이 가장 아래층이며 엘리베이터는 현재 민수가 있는 층에 있습니다.

마법의 엘리베이터를 움직이기 위해서 버튼 한 번당 마법의 돌 한 개를 사용하게 됩니다.예를 들어, 16층에 있는 민수가 0층으로 가려면 -1이 적힌 버튼을 6번, -10이 적힌 버튼을 1번 눌러 마법의 돌 7개를 소모하여 0층으로 갈 수 있습니다. 하지만, +1이 적힌 버튼을 4번, -10이 적힌 버튼 2번을 누르면 마법의 돌 6개를 소모하여 0층으로 갈 수 있습니다.

마법의 돌을 아끼기 위해 민수는 항상 최소한의 버튼을 눌러서 이동하려고 합니다. 민수가 어떤 층에서 엘리베이터를 타고 0층으로 내려가는데 필요한 마법의 돌의 최소 개수를 알고 싶습니다. 민수와 마법의 엘리베이터가 있는 층을 나타내는 정수 storey 가 주어졌을 때, 0층으로 가기 위해 필요한 마법의 돌의 최소값을 return 하도록 solution 함수를 완성하세요.

• 이 문제의 포인트 중의 하나는 5가 분기점이라는 것이다. 45면 5를 내리는 것이 좋고 65면 5를 올리는 게 좋다.

// 각 자리수를 숫자 배열로 받는다.
// 5보다 클 때 10에서 뺀 값을 가지만 문제는 앞의 수가 올라가는 것을 생각해야 한다.
function solution(storey) {
    let total = 0
    let sequential = Array.from(String(storey), Number)
    sequential.map(number => number <= 5 ? 
                   total += number : total += (11 - number))
    return total
}

• 간단하게 11로 처리하려고 했지만 앞의 수가 올라가는 매커니즘이 정확한 결과라 오류가 났다.

function solution(storey) {
    return Array
        .from(String(storey), Number)
        .reverse()
        .reduce((total, number, index, array) => {
            if(number > 5 && index + 1 <= array.length) {
                array[index + 1] += 1
                number = 10 - number
            }
            return total + number
        }, 0)
}

• 함수형으로 해보려고 했지만 실패

// 각 자리수를 숫자 배열로 받는다.
// 5보다 클 때 10에서 뺀 값을 가지만 문제는 앞의 수가 올라가는 것을 생각해야 한다.
function solution(storey) {
    let layer = 0
    let total = 0
    let next = 0

   while(storey != 0) {
       layer = storey % 10
       if(layer < 5) {
           storey -= layer
           total += layer
       } else if(layer > 5) {
           storey += (10 - layer)
           total += (10 - layer) 
       } else if (layer == 5) {
           next = parseInt(storey / 10) % 10
           if(next < 5) {
               storey -= 5
               total += 5
           } else {
               storey += 5
               total += 5
           }
       }
       storey = parseInt(storey / 10)
   }
    return total
}

• 숫자를 그대로 이용해야했다. 괜히 깔끔한 코드를 만들려다 못 풀뻔했다. 99과 같은 숫자는 2번이면 끝나기 때문이다.
• 중간에 next가 5보다 작은 경우에서 5와 같은 경우까지 조건에 포함하여 문제가 발생했다. 5는 상관없다고 생각했지만, 만약 55라면 5를 더해서 100으로 만드는 편이 빠르다.
• 나의 경우는 굉장히 노골적으로 푼 경우.
• 나의 경우에서 storey에 감산과 가산하는 부분을 보면 그냥 storey = parseInt(storey/ 10) 하면 된다는 것을 알 수 있다.

어떤 분의 풀이

• 재귀함수를 이용한 방법. 굉장히 깔끔하다.
• Math.min으로 아래로 가는 지 위로 가능 지 비교한다.

지금까지 이런 스타일은 없었다. 이것은 CSS인가 JAVA인가.

별건 아닙니다.. 어느 날과 같이 CSS가 안되서 javascript는 시작도 못하던 중이었습니다. 안 그래도 객체 지향에 대한 이해를 향상하기 위하여 디자인 패턴을 공부하고 있었습니다.

그러다 문득 SCSS의 extends와 mixin을 이용해서 일명 객체 지향 CSS, OOC(오우씨..) 설계를 구상해보는 것 어떨까 아이디어가 떠올랐습니다.

그렇습니다. 거창한 시작과 달리 별 볼일 없는 SCSS 사용하는 이야깁니다. CSS의 하나의 블록 스코프가 클래스가 되는 것입니다. (그래서 class attribute에 넣었던 것인가..)

부족하지만 성장하려고 노력하는 모습을 좋게 봐주셨으면 좋겠습니다.

Object CSS

일단 레이아웃과 관련된 flex와 grid를 설계합니다. 안타깝게도 grid가 익숙하지 않아 flex부터 시작해봅시다.

.flex-row { display: flex; flex-direction: row; } .flex-col { display: .... component.scss는 기본 component와 extends들이 작성됩니다. ( 버튼, 빨간 버튼, 애니메이션 버튼 ... )

페이지마다 CSS 모듈을 작성합니다. 각 컴포넌트들은 무조건 하나의 클래스만 받으며, 예를 들어 헤더를 만들 경우 <div cassName="header"/>

.header{ @include flex(align,justify..) @include textStyle(... }

빌더 패턴에서 빌더 클래스가 상위 클래스에서 빌딩되는 클래스가 상속을 받자 깔끔해진 것처럼 컴포넌트들은 미디어쿼리를 상속받는 느낌으로 작성합니다.

이 방법의 장점은 직관적이고 낮은 결합에 높은 응집도를 가진다고 생각합니다. 한 가지 문제는 CSS 파일이 너무 길어져버릴 수 있다는 건데요. 이러한 이유로 몇 가지 방법을 떠올렸습니다.

1. 인라인 스타일을 활용한다.
2. CSS-in-JS의 믹스인을 활용한다.
3. 자바스크립트로 직접 구현하다.

위에 대한 저의 생각은 ..

1 : 인라인 스타일은 리액트에서 권장하지 않습니다. <style> 태그 가 아닌 인라인으로 변환되기 때문에 좋은 방법이 아닙니다.

2 : 믹스인을 클래스에 넣는 방법은 한 가지 문제가 파라미터를 줄 수 없습니다. 또한 Styled-components는 attribute가 태그를 길어지게 하는 것이 가독성이 좋지 않다고 생각했습니다. spread attibute를 활용하면 되지만 해당 컴포넌트가 가지고 있는 props를 확인하는 방법이 없어서 코드가 길어지면 그 부분이 아쉬울 것 같았습니다.

3 : 직접 javascript function으로 제작 방법이 있어보이나 거의 하나의 라이브러리를 만들어야할 거 같고, 그러기 위해선 먼저 위의 방법의 불편한 점부터 파악한 뒤 리팩토링하는 게 좋아 보입니다.

위와 같은 결론으로 일단 SCSS로 프로젝트를 진행해보겠습니다!

빌더 패턴

빌더 패턴은 생성 인자가 많을 시, 빌더 객체를 통해 구체적인 객체를 생성

자바 클래스 오버로팅 생성자에서 아래 같은 형식을 본 적이 있을 것이다.

public class Person{
    private String name;
    private int age;
    private int height;

    public Person(String name){
    this.name = name;
    }
    public Person(String name, int age){
    this.name = name;
    this.age = age;
    }
    public Person(String name, int age, int height){
    this.name = name;
    this.age = age;
    this.height = height;
    }
} 

위와 같은 방법은 원하는 신상 정보만 등록할 수 있다. 하지만 문제가 있다.

1. 이름(name)과 키(height)만 입력하려는 경우
2. 인자가 너무 많아져서 구분하기 어려워질 경우
3. 새로운 인자를 추가할때마다 새로운 생성자를 생성해야 하는 경우

이를 위한 빌더 클래스를 아래와 같이 작성할 것이다.

public  class PersonBuild{
    private String name;
    private int age;
    private int height;

    public PersonBuild name(String name){this.name = name; return this;}
    public PersonBuild age(String age){this.age = age; return this;}
    public PersonBuild height(String height){this.height = height; return this;}
    public Person build(){
        Person thisPerson = new Person(name,age,height);
        return thisPerson
    }
}

빌더 클래스가 완성된 후에 생성자를 부를 때 아래와 같이 작성할 수 있다.

PersonBuild personbuild = new Personbuild();
Pesron person = psersonbuild
    .name("tatiana")
    .age("26")
    .height("165")
    .build();

1. 불필요한 생성자를 만들지 않는다.
2. 인자들의 가독성이 좋아진다.
3. 인자들의 순서가 섞여도 상관 없다.

여기서 멈출 수 없다. Javascript로 빌더 패턴에 들어가자!

class Person {
  constructor(build) {
    if (build) {
      this.id = build.id;
      this.name = build.name;
      this.age = build.age;
    }
  }

  static get Build() {
    class Build {
      name(name) {
        this.name = name;
        return this;
      }
      age(age) {
        this.age = age;
        return this;
      }
      height(height) {
        this.height = height;
        return this;
      }
      build() {
        return new Person(this);
      }
    }
    return new Build();
  }
}

아래와 같이 사용할 수 있다.

const personBuilder1 = person.build;
const person1 = personBuilder1.name("tatiana").age(26);
const personBuilder2 = person.build;
const person2 = personBuilder2.name("James").age(50);

아직 깔끔하지 않다. 여기서 어제 배운 객체 지향 패러다임을 본다면 클래스란 개념이다. 빌더 역시 객체가 아닌 클래스 개념이다. 때문에 빌더가 상위 클래스가 되서 빌더가 되는 클래스에게 상속한다면 getter & setter의 중복도 제거하고, 클린 코드도 가능하다. 위와 같은 방법은 어떻게 해야할까? 다음 시간에 알아보도록 하겠다.

객체 지향도 마찬가지이다. 한 장에 작성할 변수와 함수를 묶어서 인스턴스화를 통해 전제적인 관리를 하는 것이고 함수형 프로그래밍은 함수를 값으로 보고 결국 값을 도출하는 방법으로

결국 중복과 반복을 줄이면서 결합을 최소화(응집도는 최대화) 하는 방향을 찾고 있는 것이다.

물론 이것은 개인적으로 접하면서 내린 결론이다. 빠른 성장을 위해서 공부를 시작해보자.

*"객체는 붕어빵이 아니다 !"*

객체가 붕어빵이라는 비유에는 모순이 있다. 책에서는 객체 지향을 이렇게 설명한다. 클래스는 개념이고 객체는 실체이다.

학생이나 선생이나 같은 사람이다. 결국 개념이란 공통된 특성을 내열해두는 일인 것이다. 아직까지 공통된 점을 묶는다는 나의 생각과 비슷하다.

*"상속은 부모님과 자식이 아니다!"*

상속을 역시 처음 배울 때 부모님의 DNA나 재산과 같은 비유가 많다. 하지만 상속의 키워드는 extends 즉 확장 이다. 즉 기존의 개념을 가지는 더 구체적인 개념을 생성하는 것이다. 예를 들어, 강아지나 고양이는 동물이다. Dog extends Animal. Cat extends Animal

클래스와 상속은 우리가 아는 내용이지만 이러한 오해를 고치고 개념을 바로 잡아가는 것들이 개발자가 설계 단계에 있을 때 구상하는 능력을 키울 수 있다고 생각한다.

"인터페이스는 able to .. "

인터페이스는 우리가 알 듯 클래스에 레고처럼 추가할 수 있는 부분이다.

SOLID 원칙

솔리드는 객체 지향의 5대 원칙이다.

SRP : 단일 책임 원칙 OCP : 개방 폐쇄 원칙 LSP : 리스코브 치환 원칙 ISP : 인터페이스 분리 원칙 DIP : 의존 역전 원칙

아래의 내용은 다음에 살펴보도록 하겠다.

경고

"아직 부족한 저는 제가 이해한 대로 최대한 쉽게 적고 있습니다."

생성 패턴

디자인 패턴은 생성, 구조, 행위로 나뉩니다. 그 중에서 *생성 패턴 * 을 알아보고 있습니다..

생성 패턴이란 클래스가 인스턴스를 생성하는 과정을 디자인한 패턴 입니다.

오늘의 두 번째 패턴은 팩토리 메서드 패턴 입니다.

팩토리 메서드 패턴

자식 클래스들의 생성자들을 묶어서 생성하는 클래스와 인스턴스

(싱글톤 패턴 다음으로 팩토리 패턴을 선택한 것은 실수다. 이해하는 데 시간이 조금 걸렸다...) 이미 작성된 포스트들도 꾸준히 리뉴얼할수 있도록 하겠습니다!

팩토리 메서드 패턴은 constructor 생성가 아닌 " 생성하는 방법을 담당하는 " 클래스를 제작하는 것이다.

class Button {
  constructor(content){
    this.content = content,
    this.action = () => console.log("The button was pressed.")
  }
}
class Text {
    constructor(content){
    this.content = content,
    this.action = () => console.log("Please enter your text")
    }
}
class Component {
    constructor(type,content){
    if(type == "button")
      return new Button(content)
    if(type == "text")
      return new Text(content)
    }
}

const LogInButton = new Component("button","Login")
const titleText = new Component("text","myTitle")

아래의 두 줄과 같이 생성하는 과정이 깔끔해지는 것을 직관적으로 알 수 있게 작성하였습니다.

디자인 패턴

프로그래밍 설계 단계에서 나타나는 효과적인 패턴

디자인 패턴의 종류

• 생성
• 구조
• 행위

생성 패턴

클래스가 생성자와 NEW 연산으로 인스턴스를 생성할 때 유연성(재사용을 높이고 결합도를 낮추는)이 강한 패턴

싱글톤 패턴

싱글톤 클래스가 클래스 내부에 하나의 인스턴스를 생성하여 다른 인스턴스 생성시 새로운 인스턴스를 부여하는 것이 아닌 기존의 내부 인스턴스를 공유하는 방법

// ES7
class SingleTon {
  static instance
  constructor(){
      if(instance) return instance
      instance = this
    }
}
var first = new SingleTon()
var second = new SingleTon()
console.log(first == second) // true

장점

• 전역으로 어디서나 접근
• 메모리 사용량 감소

  단점

• 객체 지향 패러다임과 거리가 먼 방법

  예시

• 다크 모드에서 전역으로 동일한 색상 값 전달