전체 글177 [next 14 공식문서 부시기] 2.6 Dynamic Routes Dynamic Routes(동적경로) 동적 데이터로부터 경로를 생성하고 싶을 때, Dynamic Segments를 사용 해 요청 시 채워지거나 빌드 시 미리 렌더링될 수 있습니다. 사용법 폴더 이름을 대괄호(ex: [folderName])로 묶어 생성할 수 있습니다. Dynamic Segments 는 layout, page, route, generateMetadata 함수 등등에 params 가 props 로 전달됩니다. export default function Page({ params }: { params: { slug: string } }) { return My Post: {params.slug} } 기본 형태 Route URL params app/blog/[slug]/page.js /blog/a .. 2024. 1. 17. [JS] 코딩 테스트 문제 : 뮤직비디오 [2진 탐색, 결정알고리즘] 문제 : 뮤직비디오(결정알고리즘) 문제 설명 지니레코드에서 가수의 라이브 동영상을 DVD로 만들어 판매하려 한다. DVD에는 총 N개의 곡이 들어가는데, DVD에 녹화할 때에는 라이브에서의 순서가 그대로 유지되어야 한다. 순서가 바뀌는 것을 가수가 매우 싫어한다. 즉, 1번 노래와 5번 노래를 같은 DVD에 녹화하기 위해서는 1번과 5번 사이의 모든 노래도 같은 DVD에 녹화해야 한다. 또한 한 노래를 쪼개서 두 개의 DVD에 녹화하면 안된다. 지니레코드 입장에서는 이 DVD가 팔릴 것인지 확신할 수 없기 때문에 이 사업에 낭비되는 DVD를 가급적 줄이려고 한다. 고민 끝에 지니레코드는 M개의 DVD에 모든 동영상을 녹화하기로 하였다. 이 때 DVD의 크기(녹화 가능한 길이)를 최소로 하려고 한다. 그리.. 2024. 1. 17. [JS] 코딩 테스트 문제 : 이분검색 [이진 탐색] 문제 : 이분검색 문제 설명 임의의 N개의 숫자가 입력으로 주어집니다. N개의 수를 오름차순으로 정렬한 다음 N개의 수 중 한 개의 수인 M이 주어지면 이분검색으로 M이 정렬된 상태에서 몇 번째에 있는지 구하는 프로그램을 작성하세요. 단 중복값은 존재하지 않습니다. ▣ 입력설명 첫 줄에 한 줄에 자연수 N(3 [num, index + 1]); console.log(sortArr); // 배열의 값이 하나 남을 때 까지 반복 while (sortArr.length > 0) { let centerIdx = Math.floor(sortArr.length / 2); // 기준이 될 인덱스 const [num, index] = sortArr[centerIdx]; // 기준이 될 숫자와 번호 console.log(.. 2024. 1. 16. [next 14 공식문서 부시기] 2.5. Router Handlers Route Handlers Route Handlers 사용하면 웹 요청 및 응답 API 를 사용하여 특정 경로에 대한 사용자 정의 요청 핸들러를 생성할 수 있습니다 App 디렉터리 내에서만 사용할 수 있습니다. Convention Route Handlers는 App 디렉터리 내의 Route.js|ts 파일에 정의되어 있습니다. HTTP 메서드 지원 GET, POST, PUT, PATCH, DELETE, HEAD 및 OPTIONS 와 같은 HTTP 메서드가 지원됩니다. 지원되지 않는 메서드가 호출되면 Next.js 는 405 Method Not Allowed 응답을 반환합니다. 경로 지정 관련 페이지와 같은 레이아웃이나 클라이언트 측 탐색에는 참여하지 않습니다. page.js와 동일한 경로에 route.j.. 2024. 1. 16. [next 14 공식문서 부시기] 2.4. Error 처리와 Error boundary 에러 처리 error.js 활용해서 런타임 오류를 적절하게 처리할 수 있습니다. error.js 는 중첩된 하위 세그먼트 또는 page.js 구성 요소를 래핑하는 React Error Boundary 를 자동으로 생성합니다.Error boundary 내에서 오류가 발생하면 오류가 포함되고 대체 구성 요소가 렌더링됩니다. Error boundary 를 감싸는 레이아웃은 상태를 유지 하고 상호작용이 가능합니다. 오류 복구 reset() 메서드를 사용하여 사용자에게 오류 복구를 시도하라는 메시지를 표시할 수 있습니다. 함수 실행 시 error boundary 안의 내용을 다시 렌더링하려고 시도합니다. 성공하면 대체 오류 컴포넌트가 다시 렌더링된 결과로 대체됩니다. // app/dashboard/error.ts.. 2024. 1. 16. [next 14 공식문서 부시기] 2.3. <Link> & navigating 연결 및 탐색 Next.js에서 경로 간을 탐색하는 방법에는 세 가지가 있습니다. 컴포넌트 사용 useRouter 사용 기본적인 window.history 사용 Link component 은 HTML 태그를 확장하여 prefetching 및 클라이언트 측을 제공하는 내장 구성 요소입니다. 경로 간 탐색. 이는 Next.js에서 경로 간을 탐색하는 기본적이고 권장되는 방법입니다. import Link from 'next/link' export default function Page() { return Dashboard } Props Prop Example Type Required href href="/dashboard" String or Object Yes replace replace={false} Boo.. 2024. 1. 15. [next 14 공식문서 부시기] 2.2 Loading 페이지와 Streaming Loading UI loading.js 파일을 활용해 콘텐츠가 로드되는 동안 서버에서 로딩 상태를 표시할 수 있습니다 . 렌더링이 완료되면 새 콘텐츠가 자동으로 교체됩니다. ※ Instant Loading States 같은 폴더에서 loading.js 는 layout.js 안에 중첩됩니다. page.js 파일과 그 아래의 모든 하위 항목을 경계에 자동으로 래핑합니다. Streaming 기존 SSR 의 이해 먼저, 특정 페이지의 모든 데이터를 서버에서 가져옵니다. 그런 다음 서버는 페이지의 HTML을 렌더링합니다. 페이지의 HTML, CSS 및 JavaScript가 클라이언트로 전송됩니다. 상호작용은 없는 사용자 인터페이스는 생성된 HTML 및 CSS를 사용하여 표시됩니다. 마지막으로 React는 hydr.. 2024. 1. 15. [JS] 코딩 테스트 문제 : 결혼식 문제 : 결혼식 문제 설명 현수는 다음 달에 결혼을 합니다. 현수는 결혼식 피로연을 장소를 빌려 3일간 쉬지 않고 하려고 합니다. 피로연에 참석하는 친구들 N명의 참석하는 시간정보를 현수는 친구들에게 미리 요구했습니다. 각 친구들은 자신이 몇 시에 도착해서 몇 시에 떠날 것인지 현수에게 알려주었습니다. 현수는 이 정보를 바탕으로 피로연 장소에 동시에 존재하는 최대 인원수를 구하여 그 인원을 수용할 수 있는 장소를 빌리려고 합니다. 여러분이 현수를 도와주세요. 만약 한 친구가 오는 시간 13, 가는시간 15라면 이 친구는 13시 정각에 피로연 장에 존재하는 것이고 15시 정각에는 존재하지 않는다고 가정합니다. ▣ 입력설명 첫째 줄에 피로연에 참석할 인원수 N(5 a - b); let endTimeArr =.. 2024. 1. 14. [next 14 공식문서 부시기] 2.1 Page & Layout Pages page.js 파일에서 컴포넌트를 구성해 페이지를 정의하고 해당 경로에 맞게 접근할 수 있습니다. 페이지는 기본적으로 Server Components이지만 Client Components로 설정할 수 있습니다. 페이지에서 데이터를 가져올 수 있습니다 데이터 가져오기 ※ 헤더 설정 가능 js 뿐 아니라 js, ts, tsx 형식 사용 가능 Layouts layout.js 파일을 정의해 여러 페이지에서 공유되는 UI 를 구성할수 있습니다. 레이아웃은 상태를 유지하며 다시 렌더링되지 않습니다. 레이아웃은 중첩될 수도 있습니다. children props 를 통해 하위 레이아웃(존재하는 경우) 또는 하위 페이지로 채워집니다. layout.js 및 page.js 파일을 동일한 폴더에 정의할 수 있습니다.. 2024. 1. 13. [next 14 공식문서 부시기] 2. Next.js 라우팅 맛보기 App 라우터 13 버전부터 Next.js는 공유 레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원하는 React Server Components 를 기반으로 구축된 새로운 App Router를 도입했습니다. App Router 는 app이라는 새 디렉토리에서 작동합니다. app 디렉토리는 pages 디렉토리와 함께 작동하여 점진적인 채택을 허용합니다. Pages Router 문서 참조 기본적으로 앱 내부의 구성 요소는 React Server Components입니다. 이는 성능 최적화에 유리하고 Client Components도 사용할 수 있습니다.App 라우팅 관련 파일 layout : 공통적으로 감싸지는 ui 파일page : 페이지 관련 ui 파일loading : 로딩시 보여질 대체 ui .. 2024. 1. 12. [next 14 공식문서 부시기] 1. 설치 및 시작 Next.js 14 버전 설치 및 시작 필요 조건 Node.js 18.17 버전 이상. 자동 설치 npx create-next-app@latest 설치 옵션 // project name 설정 What is your project named? my-app // TypeScript 사용여부 Would you like to use TypeScript? No / Yes // ESLint 사용여부 Would you like to use ESLint? No / Yes // Tailwind CSS 사용여부 Would you like to use Tailwind CSS? No / Yes // src 디렉토리 사용여부 Would you like to use `src/` directory? No / Yes // app r.. 2024. 1. 11. [JS] 코딩 테스트 문제 : 장난꾸러기 현수 문제 : 장난꾸러기 현수 문제 설명 현수네 반에는 N명의 학생들이 있습니다. 선생님은 반 학생들에게 반 번호를 정해 주기 위해 운동장에 반 학생들을 키가 가장 작은 학생부터 일렬로 키순으로 세웠습니다. 제일 앞에 가장 작은 학생부터 반 번호를 1번부터 N번까지 부여합니다. 현수는 짝꿍보다 키가 큽니다. 그런데 현수가 앞 번호를 받고 싶어 짝꿍과 자리를 바꿨습니다. 선생님은 이 사실을 모르고 학생들에게 서있는 순서대로 번호를 부여했습니다. 현수와 짝꿍이 자리를 바꾼 반 학생들의 일렬로 서있는 키 정보가 주어질 때 현수가 받은 번호와 현수 짝꿍이 받은 번호를 차례로 출력하는 프로그램을 작성하세요. 내코드 function solution(arr) { let answer = []; let sortedArr = .. 2024. 1. 10. 이전 1 2 3 4 5 6 7 ··· 15 다음
