Homile

📗 오늘 한 일

알고리즘 문제풀이 (리트코드 3문제)

• [easy] Reverse Bits
  • 주어진 정수를 가지고 이진법으로 변경하여 거꾸로 된 값을 찾아서 32bit 정수로 반환하는 문제이다.
    비트 관련 문제는 프로그래머스, 백준에서는 거의 보지 못한 문제였어서 split, reverse, join 등과 같은 메서드를 사용해서 풀으려 했으나 실패했고, 찾아 본 결과 비트연산자를 사용해서 풀어야하는 문제였다...
• [easy] Number of 1 Bits
  • 부호가 없는 0과 1로 이루저진 정수를 받아서 비트 1의 개수를 출력하는 문제이다.
    처음엔 단순하게 filter를 사용해서 해결하려 했으나 들어오는 수가 정수였고 0으로 시작하는 비트 정수가 존재했기에 toString으로 2진수로 변환하고, split으로 나눈다음 filter로 1인 비트를 찾아서 갯수를 찾아냈다.
• [easy] Happy Number
  • 입력 받은 정수를 한 자리씩 끊어서 2제곱한 값들을 더한 값이 1이 될때까지 반복하여 1이라면 true를 반환하고 이전에 나왔던 정수라면 false를 반환하는 문제이다.
    while문으로 2제곱한 값들을 더한 값이 1인지 확인하고 1이 아니라면 stack 배열에 추가해주고 더한 값이 stack에 있다면 false를 반환해주고 1이라면 true를 반환하는 식으로 구성했다. 

Next.js 학습 (Udemy)

• Link 사용하기
• 동적 Route로 네비게이팅하기
• Link href 설정하는 방법 2가지
• 프로그래밍 방식으로 네비게이팅 하기
• 커스텀 404 페이지 추가하기

면접준비

부트캠프 동기분이 받았던 질문들을 토대로 학습하지 않았던 부분에 대해서 학습했다.

• useCallback이나 useMemo을 사용하기 좋은 시점을 설명해주세요
• useEffect로 컴포넌트 언마운트 구현할 때 어떻게 구현할건지 설명해주세요
• 커스텀 훅의 장점은 무엇인가요
• useLayoutEffect에 대해서 설명해주세요

✍ Diary

📗 오늘 한 일

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

📗 오늘 한 일

알고리즘 문제풀이 (리트코드 4문제)

• [easy] single number
  • 정수가 들어있는 배열에서 유일하게 존재하는 수 찾기
    배열을 정렬해서 현재 값과 이전값 이후 값이 같은 지 판별하여 같지 않다면 유일한 수 이므로 반환한다.
    bit를 사용해서 XOR로 연산하여 푸는 방법도 있다.(x^=y)
• [easy] Excel Sheet Column Title
  • 정수를 입력받아 A~ZZ 까지 엑셀시트 알파벳을 반환하는 문제
    charCodeAt과 String.fromCharCode를 사용하여 풀었다. (아스키코드 사용)
• [easy] Majority Element
  • 2개의 정수로 이루어진 배열중 가장 많이 나온 수를 반환하는 문제
    정렬하여 배열의 길이가 짝수일 경우 중앙에 나오는 값을 반환, 아닐경우 중앙 왼쪽 값을 반환
• [easy] Excel Sheet Column Number
  • Excel Sheet Column Title 문제와 반대 성격 (알파벳 시트를 번호로 변경)
    이전 문제는 입력 값이 0이 될때까지 while 문을 돌려서 해결할 수 있었지만 이번 문제는 문자를 입력 받기 때문에 for문을 돌려서 해결해야했다.

Javascript 알고리즘 스터디 (21:00 ~ 22:00)

• 문제 풀이 해설
  • [Level1] 기사단원의 무기
  • [Level2] 구명보트
  • [Level2] N개의 최소 공배수
• 이번주 문제 선정 (3문제)
  • [level1] 명예의 전당(1)
  • [level2] 예상 대진표
  • [level2] 점프와 순간 이동

면접준비

✍ Diary

📗 오늘 한 일

알고리즘 문제풀이 (리트코드 3문제)

• [easy] Pascal's Triangle II
  • Pascal's Triangle와 같은 알고리즘 방식을 사용하지만 입력된 index의 1차원 배열만 출력한다.
• [easy] Best Time to Buy and Sell Stock
  • 가격이 들어있는 배열의 인덱스번호 + 1은 날짜이다. 적은 가격에 매수해서 가장 큰 이익을 볼 수 있는날 매도하고 이익을 구하는 문제이다.
    간단하게 배열을 탐색하면서 풀면 쉽게 풀 수 있다.
• [easy] Valid Palindrome
  • 특수문자, 공백이 포함된 문자열을 특수문자, 공백을 제외하고 정방향으로 읽었을 때와 역방향으로 읽었을 때 같은지 확인하는 문제이다.
    문자열을 filter 메서드를 사용하여 특수문자, 공백을 제외한다. (match()함수와 정규표현식 사용)
    정방향 문자열을 뒤집어서 같은지 판별한다.

Next.js 학습(Udemy)

• 페이지, 파일 기반 라우팅
  • pages 폴너 내 정적 Route, 중첩 Route 구현
  • 동적 경로, Route 추가
  • 중첩된 동적 Route, 경로 구축
  • Catch-All Route 추가

✍ Diary

📗 오늘 한 일

알고리즘 문제풀이 (리트코드 3문제)

• [easy] Climbing Stairs
  • 정수 n이 되는 경우의 수를 구하는 문제 (동적프로그래밍)
• [easy] Merge Sorted Array
  • 배열 합치는 문제
    splice와 sort 메서드를 사용하면 쉽게 풀 수 있다.
• [easy] Pascal's Triangle
  • 삼각형으로 값을 더해서 내려주는 문제이다.
    프로그래머스 3단계의 정수삼각형 문제랑 비슷하다.

면접준비

나만의 포트폴리오 사이트

• Skills 컴포넌트 구현
  • 스택 필터 버튼 클릭시 프론트엔드, 백엔드, 배포, 기타에 대한 이미지 출력
  • 스택 이미지 hover시 scale 1.1 확장

✍ Diary

📗 오늘 한 일

알고리즘 문제풀이 (리트코드 3문제)

• [easy] Search Insert Position
  • target과 일치하는 인덱스 번호를 찾거나 없을 경우 몇번째 인덱스에 삽입할 수 있는지 찾는 문제
    처음에 findIndex를 사용해서 일치하는 인덱스만 찾았다. 통과되지 않아 문제를 다시 보고 나서 바로 풀 수 있었다.
• [easy] Plus One
  • 정수하나씩이 담긴 배열을 하나의 큰 정수로 만들고 +1을 해주고 다시 배열로 반환하는 문제
    처음에 join을 사용해 합쳐주고 +1을 한 후 문자열로 만들어 split해서 반환했지만 맨앞이 0인경우가 해결되지 않아서 for문으로 배열의 뒤에서 부터 순회하여 더해주었다.
• [easy] Add Binary
  • 이진 문자열 2진수를 더한 값을 반환하는 문제
    parseInt로 10진수로 변환한 후 toString으로 2진수로 변환했지만 제출시 틀림.
    이유를 생각해보니 Int의 범위를 벗어나는 경우가 있을 수 있다. BigInt를 사용하여 문제를 해결했다.

면접준비

나만의 포트폴리오 사이트

• Skills components 구현
• 스킬 필터 버튼 구성
  • Redux-toolkit 사용하여 전역상태 관리
• 객체 string key 접근 시 compile 에러 발생
  • el[selectSkill]
  • 타입스크립트로 하니 타입을 지정해야하는 번거로움이 조금 생기긴 했지만 실제 현업에서 API를 받을 때는 정확한 타입을 알 수 있어서 좋을 것 같지만 이와 같은 객체에 문자열로 값을 찾으려할 때, 시그니처를 설정해야하는 것이 문제였다.
  • 시그니처를 설정하여 문제를 해결했지만 map을사용하여 값을 가져오는 과정에서 오류가 발생하여 타입스크립트의 기능중 하나인 타입 추론을 통해 문제를 해결했다.
    • 객체에서 배열로 변경함에 따라 string key 방식에서 index 방식으로 변경

✍ Diary