🔥 오늘하루는?

• 자기소개 페이지만들기
  Who Page를 작성하고, 각 페이지별 필요한 내용을 변경했다. 이전에 페이지를 디자인 해두었지만, 그 디자인으로 페이지를 만드는것은 컨턴츠나 보여지는 부분이 부족하다고 생각해서 계속 어떻게 레이아웃을 바꿀지 고민을 많이 하게되었다. 정확하게 기획이나 디자인을 완성하지 않고 작업하다보니 수정하는일이 너무 많고 스트레스도 많이 받았다.
  (다른 스터디 조원들은 슬슬 이력서를 넣고 면접을 보러 다니기떄문에 뭔가 상대적으로 조급해지는 기분? 😭)

  Who page는 처음 로딩되었을때, 순차적으로 나타는 느낌의 애니메이션을 넣었고, grid를 이용해서 전체적인 레이아웃을 설정해보았다.
  아직 grid는 익숙하지 않아서 조금 더 공부하고 자주 사용해서 빨리 익혀야겠다. container가 되는 부분을 grid-template-rows,grid-template-colunms를 사용해서 설정하니깐 편했다. 반응형을 구현할때도 도움이 많이 되었다.

  

---

TIL : 디자인패턴

오늘의 강의 🧑‍💻

• 어제 면접을 보고 온 다른 스터디원분이 어제 블로깅한 SSR에 대한 질문을 받았다고 해서 머릿속으로 생각해봤지만, 정리가 잘되지 않아서 그 강의를 후딱 찾아보고 정리했었다. 다른 블로그를 찾아보던 중 코드스테이츠 기간 중 배웠던 디자인패턴에 대한 내용이 나와서 그 부분도 다시 한번 정리하면 좋을 것 같아서 강의를 찾아보았다.

디자인 패턴?
=> 디자인 패턴은 일종의 설계 기법이며, 설계방법이다 !

1. 디자인 패턴의 목적

• 디자인 패턴을 사용하는 목적은 소프트웨어의 재사용, 호환성, 유지보수에 용이하기 때문이다.

2. 디자인 패턴의 특징

• 디자인 패턴은 아이디어이지 특정한 구현이 아니다.
• 항상 프로젝트에 디자인 패턴을 적용해야하는 것은 아니지만, 이후에 재사용, 호환, 유지 보수시 발생하는 문제를 해결을 하기위한 패턴을 만들어두는 것이다.

3. 디자인 패턴의 원칙, SOLID (객체지향설계)

• Single Responsibility Principle (단일 책임 원칙): 하나의 클래스는 하나의 역할만 해야 함.

• Open - Close Principle (개방 폐쇄 원칙) : 확장(상속)에는 열려있고, 수정에는 닫혀 있어야 함.

• Liskov Substitution Principle (리스코프 치환 원칙): 자식이 부모의 자리에 항상 교체될 수 있어야 함.

• Interface Segregation Principle (인터페이스 분리 원칙) : 인터페이스가 잘 분리되어서, 클래스가 꼭 필요한 인터페이스만 구현하도록 해야함.

• Dependency Inversion Property : 상위 모듈이 하위 모듈에 의존하면 안됨.둘 다 추상화에 의존하며, 추상화는 세부 사항에 의존하면 안됨.

4. 디자인 패턴의 분류

• 생성 패턴 (Creational) : 객체의 생성 방식 결정 => 객체의 생성과 조합을 캡슐화해 특정 객체가 생성되거나 변경되어도 프로그램 구조에 영향을 크게 받게 받지 않도록 유연성을 제공

• 구조 패턴 (Structural) : 객체간의 관계를 조직 => 클래스나 객체를 조합해 더 큰 구조를 만드는 패턴( 서로다른 인터페이스를 지닌 2개의 객체를 묶어 단일 인터페이스를 제공하거나 서로다른 객체들을 묶어서 새로운기능을 제공하는 패턴을 말한다.)

• 행위 패턴 (Behavioral): 객체의 행위를 조직, 관리, 연합 => 객체나 클래스간의 알고리즘, 책임분배에 관련된 패턴이다. 하나의 객채가 혼자서 수행 할 수 없는 작업을 여러개의 객체로 어떻게 분배하는지에 중점을 두는 방식이다.

---

🤬 알고리즘 풀이

게임 맵 최단거리

• 문제 : https://programmers.co.kr/learn/courses/30/lessons/1844

function solution(maps) {
    // 1.
    const dy = [1,0,-1,0];
    const dx = [0,1,0,-1];
    const row = maps.length;
    const col = maps[0].length;

    // 2.
    const visitCount = [...maps].map((r) => r.map((c) => 1));

    // 3.
    const queue = [[0,0]];  //시작점

    // 4.
    while(queue.length) {
        const [y, x] = queue.shift();

        // 5.
        for(let i = 0; i < 4; i++ ) {
            const ny = y + dy[i];
            const nx = x + dx[i];

            // 6.
            if(ny >= 0 && nx >= 0 && ny < row && nx < col) {
                // 7.
                if(maps[ny][nx] === 1 && visitCount[ny][nx] === 1) {
                    visitCount[ny][nx] = visitCount[y][x] + 1;
                    queue.push([ny,nx]);
                }
            }
        }
    }

    // 8.
    return visitCount[row - 1][col - 1] === 1 ? -1 : visitCount[row - 1][col - 1];    
}