API를 Mocking 하기 위해 MSW를 사용하고 있다.MSW는 화면 개발할 때만 쓰일 거 같아서 딱히 스토리북까지는 세팅을 안 해줬는데 개발하다 보니 필요해졌다. ✏️ 설정이 필요한 이유나의 경우에는 현재 게임 카드 리스트를 띄우는 탐색 페이지를 개발 중이다.게임 카드들의 경우 선택한 태그(장르)를 기반으로 결과를 필터링할 수 있다. 태그 선택 버튼(태그 +)을 클릭하면 조회하고 싶은 장르의 태그들을 선택할 수 있는 모달을 띄어야 한다. 여기서 띄어지는 태그들은 백엔드에서 응답받은 정보이다.현재는 백엔드 API가 나오지 않았기 때문에 MSW 핸들러 정보로 띄우고 있다.그렇기 때문에 스토리북에 MSW를 연결하지 않으면 저 정보들을 띄울 수 없었다.No QueryClient set, use Query..

💻 Problem문제 보러 가기 준성이는 1㎝ 간격으로 눈금이 매겨져 있는 줄자를 가지고 있다. 그 줄자에 있는 서로 다른 눈금 6개에 한 눈금에 하나씩 점이 찍혀 있는데, 빨간 점, 파란 점, 노란 점이 각각 두 개씩 있다.준성이는 먼저 빨간 점이 만나도록 줄자를 접었다. 그런 후 두 파란 점이 만나도록 줄자를 접고, 또다시 두 노란 점이 만나도록 줄자를 접었다. 줄자는 투명하여 접더라도 점들을 잘 볼 수 있다. 어떤 색깔의 두 점이 만나도록 줄자를 접었을 때, 그다음에 접으려는 색깔의 두 점이 이미 만나고 있으면, 그 두 점에 대해서는 줄자를 접지 않는다.예를 들어 길이 10㎝ 인 줄자에 아래 그림과 같이 2㎝ 와 7㎝ 위에에 두 빨간 점이 찍혀 있고, 5㎝ 와 4㎝위치에 파란 점이, 10㎝ 와 3..

💻 Problem문제 보러 가기 상근이는 근처 피자 가게에서 매일 저녁으로 피자를 배달해 먹는다. 주머니 사정이 얇아진 상근이는 이번 달부터는 "최고의 피자"를 구매하려고 한다. 최고의 피자란, 피자 가게에서 주문할 수 있는 피자 중 1원당 열량이 가장 높은 피자를 말한다. 최고의 피자는 여러 종류가 있을 수도 있다.이 피자 가게는 토핑 N개에서 여러 종류를 선택해서 주문할 수 있다. 같은 종류의 토핑을 2개 이상 선택할 수는 없다. 또, 토핑을 전혀 선택하지 않을 수도 있다.선택한 토핑은 도우 위에 올라간다. 도우의 가격은 A원이고, 토핑의 가격은 모두 B원이다. 피자의 가격은 도우와 토핑의 가격의 합계가 된다. 즉, 토핑을 k종류 (0 ≤ k ≤ N) 선택했다면, 피자의 가격은 A + B*k원이 된..

💻 Problem문제 보러 가기 실험실에서 새로운 종의 벌레 한 마리가 탄생하였다. 벌레는 스스로 분열하며, 분열하면 자기 자신과 같은 벌레를 한 마리 만들어 내게 된다. 벌레가 분열하는 규칙은 다음과 같다.벌레는 기준연도 1년 2월에 1마리가 탄생한다.벌레는 매년 1월이 되면 분열한다. 분열 시 본래의 개체는 그대로, 새로운 개체가 하나 탄생하는 것으로 본다.홀수 연도에 탄생한 개체는 3번 분열 시, 짝수 연도에 탄생한 개체는 4번 분열 시 사망한다.예를 들어, 기준년도 1년 2월에 존재하던 벌레는, 2년 1월, 3년 1월, 4년 1월에 분열하고 사망하여 4년 말에는 존재하지 않게 된다. 이때, N 년 말에 존재하는 벌레의 수를 구하여라. 💡 Approach먼가.. 문제를 읽어 보니 DP겠다 싶어서..

1. MSW란?MSW(Mock Service Worker)는 API를 흉내 내는(mocking) 라이브러리이다.Service Worker를 활용해서 네트워크 요청을 가로채고 응답을 가짜로 돌려준다.MSW를 쓰면 백엔드 API가 준비되지 않은 상태에서도 프론트엔드에서 미리 개발이 가능하다. MSW 공식문서를 보면서 따라해보자!다만 Next.js에서는 MSW가 완벽하게 연동되지 않는다.SSR Fetch를 위해 추가적으로 작성해줘야 하는 코드가 있다.MSW에서 제공하는 Next.js + MSW 예제가 있는데 이거랑 Next.js(MSW 포함) 강의 들었던 거랑 다 참고해서 세팅했다. 2. 패키지 설치일단 msw 패키지부터 설치한다.npm i msw --save-dev 3. 클라이언트 환경(브라우저) 설정moc..

이번에는 이슈 템플릿이랑 만들어 보려고 한다!사실 지난 프로젝트에서도 GitLab에서 사용하긴 했지만.. 그땐 팀원이 다 만들어준 상태에서 이용했었는데 이번 프로젝트에서는 내가 도입해보려고 한다.누군가에게 도움이 될까 싶어서 양식/예시도 올려뒀다. ✏️ 라벨 만들기라벨은 기본적으로 주어져 있어서 건들지 않아도 사용할 수 있긴 하다.나는 우리 프로젝트에 맞게 수정하고 싶어서 라벨부터 바꿔줬다. 먼저 리포지토리에 들어가서 Labels를 들어가면 리포지토리의 라벨 목록이 뜬다. 기본적으로 여러 개 있었지만 나는 아래와 같이 수정했다!타입이 따로 있긴 하지만 타입은 커스텀이 안돼서 타입을 안쓰고 라벨에서 관리하는 거 같다.일단 필요하다고 생각되는 것들 만들어봤는데 프로젝트 하다보면 수정할지는 모르겠다. 이렇게 ..

💻 Problem문제 보러 가기 KOI 야구 리그에는 N개의 지역리그가 존재하고 각 지역리그에는 M개의 팀이 존재해서, 리그 전체로는 N × M개의 팀으로 운영되고 있다.한 시즌에 각 팀은 같은 지역리그 팀뿐만 아니라 다른 지역리그 팀과도 경기를 해야 한다. 같은 지역리그 팀과의 팀당 경기 수는 A로 같은 지역리그 팀들에 대해서 모두 동일하다. 즉, 한 팀 X는 같은 지역리그에 있는 모든 팀 Y (≠ X)와 각각 A번의 경기를 한다. 또한 다른 지역리그 팀과의 팀당 경기 수는 B로 다른 지역리그 팀들에 대해서 모두 동일하다. 즉, 한 팀 X는 다른 지역리그에 있는 모든 팀 Z( ≠ X)와 각각 B번의 경기를 한다. 단, A와 B는 A = k × B (k는 1 이상의 정수)를 만족해야 한다.세계적 판데..

💻 Problem문제 보러 가기 7 3 8 8 1 0 2 7 4 44 5 2 6 5위 그림은 크기가 5인 정수 삼각형의 한 모습이다.맨 위층 7부터 시작해서 아래에 있는 수 중 하나를 선택하여 아래층으로 내려올 때, 이제까지 선택된 수의 합이 최대가 되는 경로를 구하는 프로그램을 작성하라. 아래층에 있는 수는 현재 층에서 선택된 수의 대각선 왼쪽 또는 대각선 오른쪽에 있는 것 중에서만 선택할 수 있다.삼각형의 크기는 1 이상 500 이하이다. 삼각형을 이루고 있는 각 수는 모두 정수이며, 범위는 0 이상 9999 이하이다. ✏️ Solution 1import sysinput = sys.stdin.readlinen = int(input(..