Dev_Ryomi

문제 설명 문제 분석각 지표는 두 가지 성격 유형으로 구성됩니다. (RT, CF, JM, AN)검사지(survey)와 선택지(choices) 배열이 주어집니다.choices는 1-7 사이의 값으로, 4를 기준으로 어느 성격 유형에 점수를 줄지 결정합니다.각 지표에서 점수가 같으면 사전순으로 빠른 유형이 선택됩니다. 첫 번째 접근: O(n) function solution(survey, choices) { const character = { RT: { R: 0, T: 0 }, CF: { C: 0, F: 0 }, JM: { J: 0, M: 0 }, AN: { A: 0, N: 0 }, } survey.forEach((el, i) => {..

기본 개념Controlled Components- 사용자 입력을 컴포넌트의 state로 관리하는 컴포넌트- UI에서 입력한 데이터와 저장한 데이터의 상태가 항상 일치- 변경할 수 있는 state는 일반적으로 컴포넌트의 state 속성에 유지되고 setState()에 의해 업데이트- 사용자가 입력할 때마다 리렌더링되므로, 실시간으로 값이 필요한 경우 사용function ControlledInput() { const [value, setValue] = React.useState(""); return ( setValue(e.target.value)} /> );} Uncontrolled Components- React가 아닌 DOM 자체에서 상태를 관리하는 컴포넌트- 입력값을 제어하지 않고, ..

1. Request WaterfallRequest Waterfall는 데이터 요청이 순차적으로 처리되며 발생하는 지연을 의미합니다.문제점:하나의 요청이 완료된 후에야 다음 요청이 시작되기 때문에 요청 처리 시간이 누적됩니다.특히, 여러 데이터를 의존적으로 가져와야 하는 경우 페이지 로드 속도에 큰 영향을 줍니다.예시:async function fetchData() { const user = await fetchUser(); const posts = await fetchPosts(user.id); return { user, posts };}위 코드에서는 fetchUser가 끝난 뒤에야 fetchPosts가 실행되므로 비효율적입니다.2. Static RenderingStatic Rendering은 빌드..

API 레이어API는 애플리케이션 코드와 데이터베이스 사이의 중개자 역할을 합니다. 다음과 같은 경우에 API 레이어를 활용할 수 있다:서드파티 서비스 사용 시: 외부 서비스에서 제공하는 API를 통해 데이터를 가져와야 할 때.클라이언트에서 데이터 페칭 시: 데이터베이스 비밀 정보를 클라이언트에 노출하지 않기 위해 서버에서 실행되는 API 레이어를 사용하여 데이터를 가져온다.Next.js에서는 Route Handlers를 사용하여 API 엔드포인트를 생성할 수 있다. 데이터베이스 쿼리풀스택 애플리케이션을 개발할 때는 데이터베이스와 직접 상호작용하는 로직이 필요하다. Postgres와 같은 관계형 데이터베이스의 경우, SQL이나 ORM을 통해 이를 수행할 수 있다. 다음과 같은 상황에서 데이터베이스 쿼리가..

정리searchParams vs useSearchParams 특징  searchParams  useSearchParams 사용 환경서버 컴포넌트클라이언트 컴포넌트선언 방식props로 자동 전달React Hook으로 import데이터 형태일반 객체URLSearchParams 객체사용 방법searchParams.categorysearchParams.get('category')변경 감지페이지 새로고침 시실시간 (자동 갱신)주 사용 목적초기 데이터 로딩, SEO동적 필터링, 실시간 업데이트 params vs usePathname 특징  params  usePathname 사용 환경서버 컴포넌트클라이언트 컴포넌트선언 방식props로 자동 전달React Hook으로 import반환 값동적 라우트 파라미터 객..

네비게이션 최적화가 필요한 이유전통적인 웹사이트에서는 태그를 사용하여 페이지 간 이동을 구현했다. 하지만 이 방식은 매번 전체 페이지를 새로고침하게 되므로 다음과 같은 문제가 발생한다.느린 페이지 전환 속도깜빡임 현상상태 초기화불필요한 서버 요청 Next.js의 Link 컴포넌트Next.js는 이러한 문제를 해결하기 위해 Link 컴포넌트를 제공한다.기본 특징클라이언트 사이드 네비게이션:페이지 간 이동이 브라우저 전체를 다시 로드하지 않고, 클라이언트 측에서 처리됩니다.빠른 페이지 전환으로 사용자 경험이 향상됩니다.자동 코드 스플리팅:Next.js는 각 페이지를 필요한 코드만 로드하도록 자동으로 최적화합니다.프리패치(prefetch)를 기본적으로 활성화하여 사용자가 링크에 접근하기 전에 이동할 페이지의..

문제 설명 문제 분석두 정수 X, Y가 주어집니다.X, Y에서 공통으로 나타나는 숫자를 사용하여 만들 수 있는 가장 큰 정수를 찾아야 합니다.공통된 숫자가 없다면 "-1", 공통된 숫자로 0밖에 만들 수 없다면 "0"을 반환합니다. 첫 번째 접근:  O(n * m) function solution(X, Y) { let answer = '' let [xLength, yLength] = [X.length, Y.length] new Array(10).fill(0).forEach((_, i) => { X = X.replaceAll(9 - i, '') Y = Y.replaceAll(9 - i, '') const count1 = xLengt..

들어가며Next.js 13부터 도입된 App Router는 새로운 Layout 시스템을 제공했다. 이는 페이지 간 공통 UI를 효율적으로 관리하고, 더 나은 사용자 경험을 제공하는데 도움을 준다. Layout의 기본 개념Layout은 여러 페이지에서 공유되는 UI 요소를 정의하는 특별한 컴포넌트다.따라서 페이지 이동시, 레이아웃은 리렌더링 되지 않고, 오직 페이지 컴포넌트만 업데이트 된다. 이를 부분 렌더링(partial rendering)이라고 한다. 기본 Layout 구조// app/layout.tsxexport default function RootLayout({ children,}: { children: React.ReactNode}) { return ( ..

문제 설명 문제 분석일부 학생들이 체육복을 도난당했습니다.여벌 체육복이 있는 학생이 도난당한 학생에게 체육복을 빌려줄 수 있습니다.학생들은 자신의 번호의 앞뒤 번호의 학생에게만 체육복을 빌려줄 수 있습니다.최대한 많은 학생이 체육 수업을 들을 수 있도록 해야 합니다. 첫 번째 접근: reduce() O(n * m) function solution(n, lost, reserve) { const duplication = lost.filter(el => reserve.includes(el)) lost = lost.filter(el => !duplication.includes(el)) .sort((a, b) => a - b) .map(el => [el - 1, ..

들어가며: 이미지 최적화가 필요한 이유웹 성능에서 이미지는 가장 큰 비중을 차지하는 요소 중 하나이다. 최적화되지 않은 이미지는 다음과 같은 문제를 일으킬 수 있다 :느린 페이지 로딩 시간불필요한 대역폭 사용레이아웃 이동 (CLS)모바일 사용자 경험 저하 Next.js의 Image 컴포넌트Next.js는 성능과 사용자 경험을 향상시키기 위해 이미지 최적화(Image Optimization) 기능을 제공한다. 이는 이미지 파일의 크기를 줄이고, 다양한 기기와 화면 해상도에 맞는 이미지를 자동으로 생성하여 로드 시간을 줄이고 웹사이트를 더 빠르게 만든다.기능자동 크기 조정: 기기의 뷰포트 크기에 따라 이미지를 적절히 조정포맷 변환: 더 효율적인 포맷(WebP 등)으로 이미지를 자동 변환레이지 로딩(Lazy ..