0과 1의 쉼터

[백준 26265] 멘토와 멘티 [Java]

문제https://www.acmicpc.net/problem/26265 풀이주어진 N개의 멘토-멘티 쌍에 대해 멘토를 기준으로 사전순정렬, 만약 동일하다면 멘티를 기준으로 역사전순 정렬하면 된다. // Solve list.sort((s1, s2) -> { int cmp = s1[0].compareTo(s2[0]); if (cmp == 0) { return -s1[1].compareTo(s2[1]); } return cmp; });소스코드https://github.com/rogi-rogi/problem-solving/blob/main/baekjoon-online-j..

[Official Learn Next.js] Learn ‘App Router’ - Chapter 3. Optimizing Fonts and Images

App Router: Optimizing Fonts and Images글꼴을 최적화 해야하는 이유프로젝트에서 사용자 지정 글꼴을 사용하면 글꼴파일 로드시 성능에 영향을 미칠 수 있다.ex) 시스템 글꼴로 랜더링 후 사용자 글꼴로 텍스트가 렌더링 됨에 따라 텍스트 크기, 간격 등이 변경되어 주변 요소에 영향을 미친다.NextJs는 빌드시 글꼴 파일을 다운로드해 다른 정적 자산과 함께 호스팅한다.즉 next/font/폰트명 으로 폰트를 다운받고, 정적 자산으로 번들링 된다.따라서 사용자가 애플리케이션에 방문 시 성능에 영향을 줄 수 있는 네트워크 요청이 없다.기본 글꼴 추가/app/ui 폴더에 fonts.ts 를 만듭니다.import { Inter } from 'next/font/google'; export..

[Official Learn Next.js] Learn ‘App Router’ - Chapter 2. CSS Styling

App Router: CSS Styling현재 프로젝트에는 아무런 스타일도 적용되지 않았습니다.이번 장에서는 Next.js에서 스타일을 지정하는 다양한 방법을 살펴보겠습니다.전역 CSS 파일 추가하기Tailwind와 CSS 모듈유틸리티 패키지 clsx를 사용해 조건부로 클래스 이름을 추가하는 방법전역 스타일프로젝트 내부의 /app/ui 폴더에 global.css 파일을 사용해 전역 CSS를 설정할 수 있습니다.⚠️global.css 는 최상위 구성 요소에 추가하는 것이 좋습니다./app/layout.tsx파일로 이동해 전역 스타일을 추가합니다.import '@/app/ui/global.css'; export default function RootLayout({ children,}: { children..

[Official Learn Next.js] Learn ‘App Router’ - Chapter 1. Gatting Started

App Router: Getting Started프로젝트 만들기프로젝트를 만들기 전에 앞서 npm 또는 yarn 패키지 관리자가 없다면 pnpm을 설치합니다.프로젝트를 보관하려는 폴더로 이동 후 아래 명령어로 예제 프로젝트를 설치합니다.npx create-next-app@latest nextjs-dashboard --example "" --use-pnpmcd nextjs-dashboard폴더 구조/app주 작업 공간으로, 애플리케이션에 필요한 모든 경로, 구성 요소, 논리가 포함되어 있습니다./app/lib재사용 가능한 유틸리티 함수, 데이터 가져오기 함수 등 애플리케이션에서 사용되는 함수가 포함되어 있습니다./app/ui카드, 테이블, 양식 등 애플리케이션의 모든 UI 구성 요소를 포함합니다./publ..

[Official Learn Next.js] Learn ‘App Router’ - Introduction

본 학습 과정에서는 풀스택 웹 애플리케이션을 빌드하며 Next.js의 주요 기능을 배웁니다.다음과 같은 회계 대시보드를 구축합니다.공개 홈페이지로그인 페이지인증이 필요한 페이지사용자의 송장 CRUD개요Styling Next.js에서 애플리케이션의 스타일을 지정하는 다양한 방법Optimizations 이미지, 링크, 글꼴을 최적화하는 방법Routing 파일 시스템 라우팅을 사용하여 중첩된 레이아웃과 페이지를 만드는 방법Data Fetching Vercel에 Postgres 데이터베이스를 설정하는 방법과 가져오기 및 스트리밍을 위한 모범 사례.Search and Pagination URL 검색 매개변수를 사용하여 검색 및 페이지 번호를 구현하는 방법.Mutating Data React Server Actio..