김기지의 코딩노트

MSWMock Service Worker서비스 워커를 사용해 네트워크 호출을 가로채는 API 모킹(mocking)라이브러리백엔드 API인 척하면서 프론트엔드의 요청에 가짜 데이터를 응답한다. 요청에 대한 응답을 직접 MSW로 만들어 백엔드에서 API를 주기 전에 어떤 형식의 데이터가 들어올 것인지 미리 코드를 작성할 수 있다.따라서 백엔드 개발자와 미리 회의를 통해 데이터의 정확한 형식을 맞춰 놓는 것이 좋은 방법이다.  - MSW 세팅하기MSW 초기 세팅npx msw init public/ --savepublic폴더에 msw를 세팅한다. 강의에서는 위 코드로 실행하는데 나는 오류가 발생해서 뒤의 --save를 제외하고 입력했다.  MSW 설치npm install msw@latest --save-dev ..

수강 중인 클론코딩에서 배운 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..

⇩ 완성본 미리보기  지난 스터디에서 진행했던 튜토리얼을 다시 파헤쳐 보자!  1. Setup👉 기본 템플릿 생성하기npx create-remix@latest --template remix-run/remix/templates/remix-tutorial아주 기본적인 템플릿을 사용하지만 CSS와 데이터 모델을 포함하므로 Remix에 집중할 수 있다.   명령어를 입력하면 프로젝트 이름과 git, npm에 대한 설정을 묻는다. 실제 프로젝트에서는 pnpm을 사용하지만 여기서는 npm을 사용했다.          설치가 완료되면 폴더가 생성된다! 여기서 app 폴더 안에 있는 root.tsx가 "루트 경로"가 된다.렌더링되는 UI의 첫 번째 구성요소로 일반적으로 페이지의 전역 레이아웃이 포함된다.       ..