김기지의 코딩노트

수강 중인 클론코딩에서 배운 Parallel Routes와 Intercepting Routes에 대해 정리해보겠다! 🩵 Parallel Routes 동일한 레이아웃 내에서 하나 이상의 페이지를 동시에 또는 조건부로 렌더링한다.대시보드 및 소셜 사이트의 피드와 같이 앱의 매우 동적인 섹션에 유리하다.  Parallel Routes 사용하기폴더명 앞에 @를 붙여 생성한다. 이때 @가 붙은 폴더는 경로가 되지 않는다. 모달은 현재 페이지와 동일한 위치가 되야하기 떄문에 (beforeLogin) 안에 page.tsx를 옮겨준다.여기에 layout.tsx 파일을 추가로 생성하는데 이것은 parallel route한 페이지에서 두 화면을 동시에 보여주기 위함이다. // 가독성을 위해 타입을 따로 정의type Pr..

공식문서 따라하기 그 이후..customer 페이지를 완성해보자! 1. Customer 데이터 받아오기data.ts 파일에는 2개의 고객 정보 요청 함수가 작성되어 있다.export async function fetchCustomers() { noStore(); try { const data = await sql` SELECT id, name FROM customers ORDER BY name ASC `; const customers = data.rows; return customers; } catch (err) { console.error('Database Error:', err); throw new Error('..

15. 인증 추가대시보드에 인증을 추가한다. 15-1. 인증이란?시스템이 유저 자신이 누구인지 확인하는 방법보안 웹사이트에서는 유저의 신원을 확인하기 위해 다양한 방법을 사용한다.유저 이름과 비밀번호를 입력하면 사이트에서 기기로 인증 코드를 보내거나 Google Authenticator과 같은 외부 앱을 사용한다.이는 2단계 인증(2FA)은 보안을 강화하는 데 도움이 된다. 누군가 유저의 비밀번호를 알게 되더라도 해당 유저의 고유 토큰 없이는 계정에 접근할 수 없다. 💜 Authentication(인증) vs Authorization(승인)웹 개발에서 인증과 권한 부여는 서로 다른 역할을 한다.인증 : 사용자가 누구인지 확인하는 것사용자 이름과 비밀번호 등 사용자가 가지고 있는 정보를 통해 사용자의 신..

14. 접근성 개선14-1. 접근성이란?장애가 있는 사용자를 포함하여 모든 사람이 사용할 수 있는 웹 애플리케이션을 설계하고 구현하는 것을 의미한다.키보드 탐색, 시멘틱 HTML, 이미지, 색상, 비디오 등과 같은 많은 영역을 다루는 광범위한 주제이다.  14-2. Next.js에서 ESLint 접근성 플러그인 사용하기기본적으로, Next.js는 접근성 문제를 초기에 파악하는 데 도움이 되는 eslint-plugin-jsx-a11y 플러그인이 포함되어 있다.예를 들어, 이 플러그인은 대체 텍스트가 없는 이미지가 있는 경우 aria-* 및 role 속성을 잘못 사용하는 경우 등을 경고한다. package.json 파일에 next link를 스크립트에 추가한다."scripts": { "build": ..

12. 데이터 변형송장 생성, 업데이트 및 삭제 기능을 추가해 송장 페이지를 구현한다. 12-1. 서버 작업이란?React Server Actions를 사용하면 서버에서 직접 비동기 코드를 실행할 수 있다.데이터를 변경하기 위해 API 엔드포인트를 생성할 필요가 없지만, 서버에서 실행되고 클라이언트 또는 서버 컴포넌트에서 호출될 수 있는 비동기 함수를 작성한다. 웹 애플리케이션은 다양한 위협에 취약할 수 있으므로 보안이 최우선이다.서버 작업이 필요한 곳이다.효과적인 보안 솔루션을 제공해 다양한 유형의 공격으로부터 보호하고 데이터를 보호하며 승인된 액세스를 보장한다.서버 작업은 POST 요청, 암호화된 클로저, 오류 메세지 해싱, 호스트 제한과 같은 기술을 통해 보호하며 모두 함께 작동하여 앱의 안전성을 ..

10. 부분 Prerendering이 기능은 Next.js 14에 도입된 실험적 기능으로 사용하지 않으려면 건너뛰어도 된다. 10-1. 정적 콘텐츠와 동적 콘텐츠 결합하기현재 경로 내에서 동적 함수(ex. noStore(), cookies() 등)를 호출하면 전체 경로가 동적이 된다.오늘날 대부분의 웹 앱이 이 방식으로 구축된다. 전체 애플리케이션이나 특정 경로에 대해 정적 렌더링과 동적 렌더링 중에 선택한다. 그러나 대부분의 경로는 완전히 정적이거나 동적이지 않다.정적 콘텐츠와 동적 콘텐츠가 모두 포함된 경로가 있을 수 있다.이커머스 사이트의 경우, 제품 페이지의 대부분을 사전 렌더링할 수 있지만 유저의 장바구니와 추천 제품을 동적으로 가져오고 싶을 수 있다. 대시보드 경로를 분할하는 방법을 확인해보자..

7. Fetching Data7-1. 데이터를 가져오는 방법 선택💜 API 계층API는 애플리케이션 코드와 데이터베이스 사이의 중간 계층으로 API를 사용할 수 있는 몇 가지 경우가 있다.API를 제공하는 타사 서비스를 사용하는 경우클라이언트에서 데이터를 가져오는 경우 데이터베이스 비밀이 클라이언트에 노출되는 것을 방지하기 위해 서버에서 실행되는 API 계층이 있어야함Next.js에서는 Route Handlers를 사용해 API 엔드포인트를 생성할 수 있다.  💜 데이터베이스 쿼리풀스택 애플리케이션을 생성할 때 데이터베이스와 상호 작용하는 로직도 작성해야 한다.Postgres와 같은 관계형 데이터베이스의 경우 SQL 또는 Prisma와 같은 ORM을 사용하여 이를 수행할 수 있다. 데이터베이스 쿼리를..

더보기다시 돌아온 Next.js,,, 프로젝트 미팅에서 Next.js를 선택하기로 결정하여(정보 또는 레퍼런스 이슈 등등) 훑어보기만 했던 Next.js를 깊어 파보기로 했다..!!1. 새 프로젝트 만들기공식문서에서 주어진 명령어를 입력해 Next.js 프로젝트 폴더를 생성했다.https://nextjs.org/learn/dashboard-app/getting-started#creating-a-new-project Learn Next.js: Getting Started | Next.jsCreate a new Next.js application using the dashboard starter example and explore the project.nextjs.orgnpx create-next-app@l..

🖥️ Global Styles Global Style은 app 디렉토리 내의 모든 레이아웃, 페이지 또는 구성 요소에 모두 적용할 수 있다. 파일의 위치는 중요하지 않다. Global Styles 생성하기 // styles/global.css body { padding-top: 150px; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; background-color: black; color: white; font-size: 18px; } Global Styles 사용하기 전역 스타일은 모..

🖥️ Metadata SEO와 웹 공유성을 향상시킬 수 있는 API 메타데이터를 추가하는 방법 구성 기반 메타데이터 : 정적 메타데이터 객체 또는 동적 generateMetadata 함수를 layout 또는 page로 내보냄 파일 기반 메타데이터 : 라우팅 세그먼트에 정적 또는 동적으로 생성된 특수 파일을 추가 이 두가지 옵션을 모두 사용하면 Next.js가 페이지에 대한 관련 요소를 자동으로 생성한다. ImageResponse 생성자를 이용해 동적 OG 이미지를 생성할 수도 있다. 정적 Metadata layout.js나 정적 page 파일에서 메타데이터 객체를 내보낸다. ※ 메타데이터는 서버 컴포넌트 요소이므로 클라이언트 컴포넌트에서는 사용할 수 없다. metadata의 title에 문자열 또는 객체..