본문 바로가기

전체 글177

[next 14 공식문서 부시기] 3.1 fetch 를 활용한 데이터 요청과 캐싱 및 재검증 과정 1. fetch 를 사용하여 서버에서 데이터 가져오기 Next.js 는 기본 fetch 웹 API를 확장하여 서버의 각 요청에 대한 캐싱(cashing) 및 재검증(revalidating) 동작을 구성할 수 있도록 합니다. 또한 Server Components, Route Handlers, Server Actions 등 에서 async/await 와 함께 fetch 를 사용할 수 있습니다. 1.1 캐싱(cashing) 기본적으로 Next.js는 fetch 의 반환 값을 서버의 데이터 캐시에 자동으로 캐시합니다. 이는 빌드 시 또는 요청 시 데이터를 가져오고, 캐시하고, 각 데이터 요청에서 재사용할 수 있음을 의미합니다. 1.2 재검증(revalidating) 데이터 캐시를 제거하고 최신 데이터를 다시 가.. 2024. 2. 8.
[next 14 공식문서 부시기] 2.9 Intercepting Routes(경로 가로채기) Intercepting Routes 경로를 가로채면 현재 레이아웃 내 애플리케이션의 다른 부분에서 경로를 로드할 수 있습니다. 사용자가 다른 컨텍스트로 전환하지 않고도 경로의 내용을 표시하려는 경우 유용할 수 있습니다. 예를 들어, feed 에서 photo 를 클릭하면 feed 에 오버레이되어 사진을 모달로 표시할 수 있습니다. 이 상황에서 Next.js 는 /photo/123 경로를 가로채서 URL 을 마스크하고 /feed 위에 오버레이합니다. 당연하게도 URL 을 클릭하거나 페이지를 새로 고쳐 photo 로 직접 이동하면 모달 대신 전체 사진 페이지가 렌더링됩니다. 기본 모양 및 규칙 현재 페이지의 컨텍스트를 유지하면서 현재 레이아웃 내에서 경로를 로드할 수 있습니다. (.)동일한 수준 의 세그먼트 .. 2024. 2. 7.
[next 14 공식문서 부시기] 2.8 Parallel Routes(병렬 경로) Parallel Routes (병렬 경로) 병렬 경로를 사용하면 동일한 레이아웃 내에서 하나 이상의 페이지를 동시에 또는 조건부로 렌더링할 수 있습니다. 이는 대시보드 및 소셜 사이트의 피드와 같이 앱의 매우 동적인 섹션에 유용합니다. Slots 병렬 경로는 @folder 와 같은 형식으로 정의되는 slots 을 통해 생성됩니다. 슬롯은 공유 상위 레이아웃에 props 으로 전달됩니다. 아래의 예에서 app/layout.js 의 component 는 @analytics 및 @team 슬롯 props 을 받아 이를 children props 과 함께 병렬로 렌더링할 수 있습니다. ※ 그러나 슬롯은 경로 세그먼트가 아니며 URL 구조에 영향을 주지 않습니다. 예를 들어 /dashboard/@analytics.. 2024. 2. 5.
[JS] 코딩 테스트 문제 : 조합의 경우수(메모이제이션) [스택] 문제 : 조합의 경우수(메모이제이션) 문제 설명 조합 즉 서로 다른 n개중에 r개를 선택하는 경우의 수를 구할 때 nCr = n! / ((n-r)! * r!) 다음과 같은 공식으로 계산합니다. 이 공식을 쓰지 않고 다음 공식을 사용하여 재귀를 이용해 조합 수를 구해주는 프로그램을 작성하세요. nCr = (n-1)C(r-1) + (n-1)Cr ▣ 입력설명 첫째 줄에 자연수 n(3 2024. 2. 1.
[JS] 코딩 테스트 문제 : 동전교환 [DFS] 문제 : 동전교환 문제 설명 다음과 같이 여러 단위의 동전들이 주어져 있을 때 거스름돈을 가장 적은 수의 동전으로 교환해주려면 어떻게 주면 되는가? 각 단위의 동전은 무한정 쓸 수 있다. ▣ 입력설명 첫 번째 줄에는 동전의 종류 개수 N(1 2024. 1. 30.
[JS] 코딩 테스트 문제 : 중복순열 구하기 [재귀함수] 문제 : 중복순열 구하기 문제 설명 1부터 N까지 번호가 적힌 구슬이 있습니다. 이 중 중복을 허락하여 M번을 뽑아 일렬로 나열하는 방법을 모두 출력합니다. ▣ 입력설명 첫 번째 줄에 자연수 N(3 2024. 1. 29.
[JS] 코딩 테스트 문제 : 바둑이 승차 [DFS] 문제 : 바둑이 승차(DFS) 문제 설명 철수는 그의 바둑이들을 데리고 시장에 가려고 한다. 그런데 그의 트럭은 C킬로그램 넘게 태울수가 없다. 철수는 C를 넘지 않으면서 그의 바둑이들을 가장 무겁게 태우고 싶다. N마리의 바둑이와 각 바둑이의 무게 W가 주어지면, 철수가 트럭에 태울 수 있는 가장 무거운 무게를 구하는 프로그램을 작성하세요. ▣ 입력설명 첫 번째 줄에 자연수 C(1 2024. 1. 28.
[JS] 코딩 테스트 문제 : 합이 같은 부분집합 [DFS] 문제 : 합이 같은 부분집합(DFS) 문제 설명 N개의 원소로 구성된 자연수 집합이 주어지면, 이 집합을 두 개의 부분집합으로 나누었을 때 두 부분집합의 원소의 합이 서로 같은 경우가 존재하면 “YES"를 출력하고, 그렇지 않으면 ”NO"를 출력하는 프로그램을 작성하세요. 둘로 나뉘는 두 부분집합은 서로소 집합(Disjoint Set)이며, 두 부분집합을 합하면 입력으로 주어진 원래의 집합이 되어야 합니다. 예를 들어 {1, 3, 5, 6, 7, 10}이 입력되면 {1, 3, 5, 7} = {6, 10} 으로 두 부분집합의 합이 16으로 같은 경우가 존재하는 것을 알 수 있다. ▣ 입력설명 첫 번째 줄에 자연수 N(1 a + b, 0); let n = arr.length; // 배열의 인덱스를 의미할 파.. 2024. 1. 24.
[JS] 코딩 테스트 문제 : 부분 집합 구하기 [DFS] 문제 : 부분집합 구하기(DFS) 문제 설명 자연수 N이 주어지면 1부터 N까지의 원소를 갖는 집합의 부분집합을 모두 출력하는 프로그램을 작성하세요. ▣ 입력설명 첫 번째 줄에 자연수 N(1 0); // 현재 원소 L 값이 현재 원소값 L 이 n + 1 이 되는 경우 재귀함수를 종료 function DFS(L) { if (L === n + 1) { let tmp = ""; // ch[L] 값이 1인 경우 그 배열의 인덱스값을 문자열(tmp)에 추가하며 for (let i = 1; i 0) answer.push(tmp.trim()); } // 체크 배열에 L번째(ch[L]) 값이 0인 경우와 1인 경우로 나누어 재귀 함수 호출 else { ch[L] = 1; DFS(L + 1); ch[L] = 0; DFS.. 2024. 1. 23.
[JS] 코딩 테스트 문제 : 이진트리 순회 [깊이우선탐색] 문제 : 이진트리 순회(깊이우선탐색) 문제 설명 아래 그림과 같은 이진트리를 전위순회와 후위순회를 연습해보세요. 전위순회 출력 : 1 2 4 5 3 6 7 중위순회 출력 : 4 2 5 1 6 3 7 후위순회 출력 : 4 5 2 6 7 3 1 내코드 function solution(n, end) { let preorderAnswer = ""; let inorderAnswer = ""; let postorderAnswer = ""; // 트리 생성부분 let tree = []; let current = 1; // 현재 입력될 숫자를 의미 // n 부터 end 만큼 반복하면서 이진트리 생성 num 현재 노드를 의미 // tree 배열의 주소 index 와 노드의 값이 같아 index 값이 즉 index 값을 .. 2024. 1. 22.
[next 14 공식문서 부시기] 2.7 프로젝트 구조 (Route Groups, Private Folders) 프로젝트 구조 라우팅 폴더 및 파일 규칙 외에도 Next.js는 프로젝트 파일을 구성하고 배치하는 방법에 대한 다양한 기능과 전략이 존재합니다. Safe colocation by default Router 구조가 폴더를 통해 정의되더라도 page.js 또는 Route.js 파일이 경로 세그먼트에 추가될 때까지 경로에 공개적으로 액세스할 수 없습니다. 또한 공개적으로 액세스 가능하도록 설정된 경우에도 page.js 또는 Route.js 에서 반환된 콘텐츠만 클라이언트로 전송됩니다. ※ 즉 프로젝트 파일이 앱 디렉터리의 경로 세그먼트 내에 실수로 라우팅되지 않고 안전하게 같은 위치에 배치될 수 있음을 의미합니다. Route Groups Route Groups 은 폴더를 괄호로 묶어 생성할 수 있습니다.폴더가.. 2024. 1. 19.
[JS] 코딩 테스트 문제 : 마구간 정하기 [2진 탐색, 결정알고리즘] 문제 : 마구간 정하기(결정알고리즘) 문제 설명 N개의 마구간이 수직선상에 있습니다. 각 마구간은 x1, x2, x3, ......, xN의 좌표를 가지며, 마구간 간에 좌표가 중복되는 일은 없습니다. 현수는 C마리의 말을 가지고 있는데, 이 말들은 서로 가까이 있는 것을 좋아하지 않습니다. 각 마구간에는 한 마리의 말만 넣을 수 있고, 가장 가까운 두 말의 거리가 최대가 되게 말을 마구간에 배치하고 싶습니다. C마리의 말을 N개의 마구간에 배치했을 때 가장 가까운 두 말의 거리가 최대가 되는 그 최대 값을 출력하는 프로그램을 작성하세요. ▣ 입력설명 첫 줄에 자연수 N(3 2024. 1. 19.

티스토리툴바