김기지의 코딩노트

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의 첫 번째 구성요소로 일반적으로 페이지의 전역 레이아웃이 포함된다.       ..

상위 경로와 일치하는 하위 경로를 렌더링한다.import { Outlet } from "@remix-run/react";export default function SomeParent() { return ( Parent Content );}  Propscontextoutlet 아래의 엘리먼트 트리에 컨텍스트 값을 전달한다. 상위 경로가 하위 경로에 값을 제공해야 할 때 사용한다. 하위 컴포넌트에서 전달받은 컨텍스트를 가져올 때는 useOutletContext를 사용한다.   useLoaderData에서 액세스한 지연된 로더 promise를 해결하는 역할을 한다.import { Await } from "@remix-run/react";Loading...}> {(..

- useActionData가장 최근의 라우트 action에서 직렬화된 데이터를 반환하거나 해당 데이터가 없는 경우에는 undefined를 반환한다.import type { ActionFunctionArgs } from "@remix-run/node"; // or cloudflare/denoimport { json } from "@remix-run/node"; // or cloudflare..

💛 .client modules 흔하지는 않지만 브라우저에서 모듈 부작용을 사용하는 파일이나 종속성이 있을 수 있다. 서버 번들에서 강제로 제외하기 위해 파일 이름에 *.client.ts를 사용하거나 .client 디렉토리 내에 파일을 중첩할 수 있다. // feature-check.client.ts export const supportsVibrationAPI = "vibrate" in window.navigator; 이 모듈에서 내보낸 값은 서버에 있으므로 모두 undefined가 될 것이기 때문에 이를 사용할 수 있는 유일한 장소는 useEffect와 클릭 핸들러와 같은 유저 이벤트이다. import { supportsVibrationAPI } from "./feature-check.client.ts..