전체 글

Next.js는 React 기반 프레임워크로, CSR(Client Side Rendering)과 SSR(Server Side Rendering)을 모두 지원한다. 단순히 개념만 아는 게 아니라, Next.js에서는 이걸 어떻게 구현하는지가 핵심이다.…

문제 상황 Next.js에서 모바일 햄버거 메뉴를 만들던 중 아래와 같은 에러가 발생했다. Error: Hydration failed because the server rendered HTML didn't match the client. 처음에는 단…

1. 문제 상황 소개 Next.js 기반의 개인 프로젝트에서 move.gif 애니메이션을 사용했다. 처음에는 잘 작동하는 듯했지만, Netlify에 배포하고 Lighthouse 성능 점수를 확인해보니 로딩 시간 지연과 성능 저하가 발생했다. 용량: …

문제 링크 : https://www.acmicpc.net/problem/5567 문제 탐색하기 1) 문제 분석 동기의 수 n (2 ≤ n ≤ 500) 친구 관계의 개수 m (1 ≤ m ≤ 10 000) 이후 m개 줄에 걸쳐 a, b가 친구라는 관계 …

문제 링크 : https://www.acmicpc.net/problem/2204 문제 탐색하기 1) 문제 분석 테스트케이스 정수 : n (단어의 개수) 대소문자를 구분하지 않고, 사전순으로 가장 앞에 있는 단어 출력 n개의 만큼 문자열 입력 0을 입…

문제 링크 : https://www.acmicpc.net/problem/2644 문제 탐색하기 1) 문제 분석 line1 : 전체 사람의 수 : n line2 : 촌수 계산 인원 : a, b line3 : 부모자식 관계의 수 : m line4 : 부…

그래프란? 그래프는 여러 개의 점(정점)과 선(간선)으로 이루어진 자료구조이다. 현실 세계에서 사람과 사람의 관계, 도로 지도, 지하철 노선도 등을 그래프로 표현할 수 있다. 간단히 말하면, “노드끼리 연결된 관계를 표현하는 자료구조”이다. 그래프 …

문제 링크 : https://www.acmicpc.net/problem/11742 문제 탐색하기 1) 문제 분석 정점(vertex) : N 간선(edge) : M M개 줄에 대한 양 끝점 : u, v 같은 간선은 1번만 2) 가능한 시간복잡도 (1)…

문제 링크 : https://www.acmicpc.net/problem/17204 문제 탐색하기 1) 문제 분석 N : 사람 수, K : 보성이 번호 줄마다 지목하고자 하는 사람의 수 (origin -> next) 게임 시작하는 사람은 0번 보성이가…

문제 링크 : https://www.acmicpc.net/problem/10451 문제 탐색하기 1) 문제 분석 순열 사이클이란?: 순열에서 특정 숫자를 따라가다가 다시 원래 숫자로 돌아오면 그것을 하나의 사이클로 본다. 문제 목표: 주어진 순열에서…

문제 링크 : https://www.acmicpc.net/problem/1463 문제 탐색하기 1) 문제 분석 X가 3의 배수면 3으로 나눈다. X가 2의 배수면 2로 나눈다. 두 가지 경우가 다 아니면 1을 뺀다. 연산을 사용하는 횟수의 최솟값을 …

문제 링크 : https://www.acmicpc.net/problem/1010 문제 탐색하기 1) 문제 분석 서쪽 사이트 N개 동쪽 사이트 M개 서쪽 사이트 개수만큼 다리를 지어야 하며, 한 사이트에는 최대 한 개의 다리만 연결 다리는 서로 겹칠 …