22.11.30_TIL

📗 오늘 한 일

Javascript 알고리즘 스터디 문제풀이

• [Level1]명예의 전당(1)
  • 자료구조 스택을 사용하여 풀면 쉽게 풀리는 문제였다.
    명예의 전당에 k만큼 수가 차는지 확인하고, k만큼 차지 않았다면 push로 스택에 채워주고 Math.min을 사용하여 스택에 담긴 정수중 가장 낮은 점수를 추출하면 된다. k만큼 명예의 전당이 찼을 경우 내림차순으로 정렬하여 k-1번째의 값을 뽑아내면 명예의 전당에 올라간 점수중 가장 낮은 점수를 추출하게 된다.
    위의 내용은 문제에 나와있는 그림과는 다른 풀이였다. 계속 스택에 쌓기만하고 제거하진 않아서 후에 메모리문제가 생길 수도 있다고 생각하여 문제에 나와있는 것과 동일하게 push & pop을 사용하여 다시 풀었더니 score의 길이가 적을 경우는 속도가 비슷했으나 score의 길이가 많아 질 경우 평균 20ms가 나오던 이전 풀이에 비해 0.7ms가 나와 속도가 훨씬 빨라진 것을 확인할 수 있엇다.
• [Level2]예상 대진표
  • n명중 a와 b가 무조건 이긴다는 가정하에 토너먼트에서 a와 b가 몇번째 경기를 치룬뒤 만나는지 알아내는 문제였다.
    사실 n명이라는 것은 필요하지 않았다. a와 b를 둘다 짝수로 두고 몇번째에 a와 b를 각각 2로 나눈 몫이 같아질 때 까지 반복문을 실행하면 풀리기 때문이다.
    n명이라는 것이 필요하도록 문제를 계산할 수도 있었지만 사용하지 않아도 풀렸기 때문에 코드를 한줄이라도 더 줄이는 것이 좋다고 생각했다. 
    만약 문제에서 몇번째에 만나는가? 대신 a와 b가 만날때까지 거쳐간 선수들의 번호를 알아내야 했다면 n을 사용했을 것이다.
• [Level2]점프와 순간 이동
  • 점프와 순간이동을 하여 원하는 목적지까지 가장 적은 건전지를 소모하여 갈 수 있는지 확인하는 문제였다.
    이문제는 결국 짝수 일때는 순간이동을하고 홀 수 일때는 순간이동 + 점프를 하여 이동횟수를 n*2씩 쌓아가면 풀리는 문제이다.

Next.js 학습

• 페이지, 파일 기반 라우팅
  • pages 폴더 내 정적 Route, 중첩 Route 구현
    • pages 폴더 내 정적 Route를 설정할 때는 일반적으로 js, ts 파일 하나를 작성하면 그것이 하나의 Route 역할을 하게 된다. (/portfolio)
    • 중첩 Route를 구현할 때는 pages 폴더의 하위 폴더를 구성하여 파일을 작성하게 되면 중첩 Route 역할을 하게 된다. (/portfolio/list)
  • 동적 경로, Route 추가
    • pages 폴더의 하위 폴더를 하나 생성하고 그안에 [].js라는 대괄호로 동적 경로를 지정할 수 있다. 대괄호 안에는 식별자를 작성하면 된다. (/portfolio/one, /portfolio/hello는 경로는 다르지만 하나의 컴포넌트이다.)
    • 사용하는 이유는 여러 종류의 데이터를 불러와야 하는 페이지를 생성할 때 동적 라우팅을 사용하며 예시로는 온라인 스토어 상품, 블로그 게시글 등이 있다.
  • 중첩된 동적 Route, 경로 구축
    • pages 폴더의 하위 폴더를 하나 생성하고 그 하위 폴더를 [] 대괄호안에 식별자를 포함하여 생성하면 중첩된 동적 Route를 구축할 수 있다. (/상위pathname/동적 pathname/동적 pathname으로 구성가능)
  • Catch-All Route 추가
    • 파일 명을 [...파일명].js 와 같은 형식으로 작성을 하게 되면 항상 동일한 컴포넌트를 불러오는 방식으로 파일 이름으로 대괄호와 식별자를 작성하지 않고 구문이나 특수한 표기법을 추가할 수 있다. ([...slug]) (/blog/2020/12)
    • 경로를 확인할 때는 pathname, query등과 같은 메서드를 사용할 수 있는 useRouter 라는 next에서 만든 React Hook을 사용하면된다. (import { useRouter } from 'next/router')

✍ Diary

알고리즘 스터디를 하고 난 뒤 다음날 문제를 다 풀어두는 것이 마음이 편한것 같아서 이전에도 같이 작업을 해뒀었는데 예기치 않은 상황이 발생하여 스터디가 일주일 밀리게 될 경우에 나의 풀이를 잊어버리는 것 같아서 코드에 주석을 적는 것 뿐만 아니라 블로그에 간단한 나의 풀이에 대한 설명을 적기 시작했다!

Next로 Route를 어제 실제로 구현했었는데 오늘 다시 React에서 작성했을 때와 next로 다시 작성해 보았을 때 확실히 편했고 폴더와 파일을 관리하기 더 쉬워졌다는 것을 느끼게 되었다.