본문 바로가기

전체 글

 (348)
[Next.js] catch-all segments, custom not found page Catch-all segments지금까지 배운 라우팅을 활용했을 때는 URL이 확장되면 폴더를 너무 많이 만들어야 한다는 단점이 있습니다. 그걸 해결하기 위해서 대괄호 내부에 ...을 추가해 모든 후속 세그먼트를 포괄할 수 있습니다. 아래 이미지와 같이 설정하면 /docs/something1/other1... 뒤로 오는 URL을 모두 사용할 수 있습니다. 내부 화면의 변경은 params를 활용해 해결하면 됩니다.하지만 위 방식으로 진행할 경우 단점이 하나 있습니다. /docs 본인을 포함하지 못하다는 단점입니다. 이를 해결하기 위해서 대괄호를 한 번 더 감싸주면 필수가 아닌 선택이 되기 때문에 기존의 문제도 해결할 수 있습니다.해당 내용에서 [...slug] 내부에 생성된 page.tsx가 /docs와 ..
[Next.js] Dynamic routes Dynamic routes네스티드 라우트를 이용하면 하위 라우트를 쉽게 만들 수 있습니다. 만약 쇼핑몰 사이트에서 상품을 등록하려고 하면 보통 '/제품군/아이디' URL을 이용해야 하는데, 그렇다면 아이디에 따라서 폴더를 계속 만들어야 할까요? 아닙니다. 대괄호로 내부에 원하는 이름을 지정하면 해결할 수 있습니다.위 이미지처럼 폴더 이름을 대괄호로 감싸주면 '/products/[productId]'를 통해 접근할 수 있게 됩니다. 그럼 다음과 같은 고민이 듭니다. '이렇게 되면 productId로 들어오는 모든 문자에 대해서 해당 페이지가 보이는 게 아닌가?' 맞습니다. 숫자가 들어오든 문자가 들어오든 동일한 페이지를 보여주게 됩니다. 페이지를 구분하기 위해서 먼저 URL에서 productId를 가져와야..
[Next.js] RSC, Routing React Server Components리액트의 컴포넌트를 서버 컴포넌트와 클라이언트 컴포넌트 두 가지로 나누었습니다. 특징Nextjs에서는 모든 컴포넌트를 서버 컴포넌트로 다룹니다.이 컴포넌트는 파일 읽기나 데이터 패칭 등 데이터베이스에 직접 접근하는 서버 사이드 작업을 수행할 수 있습니다. 반면에 리액트의 훅을 사용할 수 없고 ui를 다룰 수 없습니다.클라이언트 컴포넌트를 만들기 위해서는 'use client'를 컴포넌트 파일의 최상단에 작성해야 합니다. 해당 컴포넌트는 서버 컴포넌트의 역할을 할 수 없습니다.Routing라우팅의 경우 file system을 기반으로 결정되고 지켜야 하는 컨벤션이 있습니다. 컨벤션모든 라우트는 app 폴더 아래에 있어야 합니다.라우트 파일의 이름은 page.js 또..
[Next.js] how to start 시작은 간단하게 자동으로 해주는 방식과 수동으로 직접 하는 방법이 있습니다. 자동npx create-next-app@latest 수동의 경우 이거저거 설정할 일이 많기 때문에 공식 문서만 훑어보고 자동으로 설정하는 것으로 하겠습니다. 궁금증. React를 사용할 때에는 CreateReactApp보다 Vite를 사용하게 되었는데 Next는 왜 CreateNextApp을 사용하는가?현재 Vite에서는 Next.js에서 필요한 파일시스템 기반 라우팅이나 SSR 런타임 같은 부분까지 공식적으로 제공되지 않습니다. 그렇기 때문에 특화된 기능을 제공하는 CNA를 사용합니다. 명령어를 실행하고 원하는 옵션을 선택해 next가 설치되면 아래와 같은 폴더 및 파일을 가지게 됩니다. 폴더.nextnode_modulespu..
[React] Fragment React는 Component 단위로 개발을 진행하게 됩니다. 이전에는 Class Component로 구현됐지만, 지금에 와서는 Function Component가 거의 대부분입니다. 이때, Component는 엘리먼트를 반환하게 되는데 조건이 생깁니다. 바로 하나의 Component에서는 하나의 엘리먼트만 반환해야 한다는 rule입니다. 보통은 아래와 같이 만들어져 사용됩니다만, 두 엘리먼트를 하나의 엘리먼트에 모아서 사용하는 경우도 있습니다.function Example() { // ...... return ( something );} 하지만 두 엘리먼트를 동시에 내보려고 하면 에러가 발생합니다.function Total () { // ...... return ( ..
[사이드 프로젝트] LIM LIM(Lotto Is Mine)최근 로또를 매주 사며 당첨이 되는 경우와 안 되는 경우가 있는데... 이게 단순히 운에만 따르는 건지 아니면 기타 다른 신적인(?) 예를 들면 사주라던지 별자리라던지 등등에 조금이라도 영향이 있는지 궁금해져서 원하는 로또 번호를 기록해 주는 무언가가 있으면 좋겠다는 아이디어에서 시작하는 프로젝트입니다. (링크는 비공개 글이고 아이디어에 대한 메모이므로 무시하시기 바랍니다.) 위 짧은 글은 프로젝트의 소개이자 목적이고 또 하나의 목적은 Next.js의 학습과 Cursor를 활용한 개발을 진행하기 위한 프로젝트입니다. 메인 기능:로또 번호 자동/수동로또 번호 저장당첨 결과 확인서브 기능:운을 확인할 수 있는 요소 GitHub - nulzi/LIM: Lotto Is MineL..
[자료구조 활용] Deque 이렇게도 활용할 수 있다! 백준 24511번을 풀다가 덱을 활용해야 하는 경우가 나왔습니다. 좋은 활용이라고 생각해서 기록을 남겨둡니다.const [n, t, s, m, c] = require("fs") .readFileSync("dev/stdin") .toString() .trim() .split("\n");const N = +n;const M = +m;const type = t.split(" ").map(Number);const start = s.split(" ").map(Number);const C = c.split(" ").map(Number);// Deque 활용 부분const deque = start.filter((_, i) => type[i] === 0);// 한 칸 비워두기 기법const capacity = ..
[자료구조] Deque with JS 리팩토링2 코테 문제를 풀다 보니 새로운 방법을 알게 되어 바로 기록합니다. 지난 Deque 코드는 여기서 확인할 수 있습니다 → [자료구조] Deque with JS 메모리 누수 방지 이름은 한 칸 비워두기 기법!! 지난 코드와 차이점은 size 변수를 활용했던 부분을 head와 tail을 활용해 해결할 수 있게 되었습니다. 처음에 원했던 방식으로 개인적으로 이 방식이 마음에 듭니다. 큰 변화는 없기 때문에 지난 코드와 비교해서 원하는 걸로 사용하면 될 것 같습니다.class Deque { #deque; #capacity = 0; #head = 0; #tail = 0; // 한 칸 비워두기 시 0 // size 변수 삭제 constructor(capacity) { this.#capacity = c..

티스토리툴바