개요 Vercel Next.js의 공식 github 레포지스티에 가면 example 소스코드가 있는데 schema validation을 위해 zod라는 패키지를 쓰고 있다. 이전 글에서 소개한 ajv가 압도적으로 다운로드 수가 많지만 legacy한 부분도 없지않고, Next.js 공식 코드에서 사용하는 만큼 zod가 장점이 꽤 많다. 아래 보는 것 처럼 올해 들어 다운로드수도 폭발적으로 증가 중이다. schema validation이 필요한 이유 1. api request 하나만 실패해도 web app 전체가 다운되는 현상을 방지 물론 optional chaining을 이용해 어느 정도 web app 전체가 다운되는 현상을 방지할 수는 있지만 원인을 찾을 수는 없다. 2. Typescript에만 의존할 ..

다음은 Next.js에 국한되지 않고, 예를들어 백엔드 프로그래밍을 하다가 처음 React를 접했을 때 기본적으로 알아야 할 것들을 나열해보았다. 쓰다보면 React에서 가장 자주 쓰이는 syntax는 정해져있다. 1. Componentization 이건 javascript에 관한 것이라기보다 refactoring 관련인데 한 파일 안에 2천800줄되는 코드도 봤는데 도저히 수정이 불가능하다. 처음 짤 때부터 컴포넌화하는 습관이 중요하다. 예시: refactor 안 된 코드 예 profile-page.jsx ... const ProfilePage = ({user}) => { return ( User Profile {user.name} Email: {user.email} Bio: {user.bio} {/*..

개요 그냥 우스개소리로 백엔드와 프론트엔드를 진짜 대충 캐쥬얼하게 대충 설명하자면, backend는, db에서 데이터 가져와서 프론트에 json으로 뿌려주는 애고, frontend는, 백엔드가 뿌려준 json 받아서 브라우저 화면에 뿌려주는 애다. 그만큼 json이 중요하단 얘기고, 그래서 백엔드에서도 프론트엔드에서도 유효성 검사를 이중으로 해줘야 한다. Json schema 다음 json-schema 링크에 가면 https://json-schema.org/implementations#validators-javascript 언어 종류별 json 유효성 검사에 대해 나오는데 javascript는 이 목록 중 아직까지는 ajv 라는 패키지가 단연 인기가 높다. npmjs의 ajv : https://www.n..

Next.js 12 12버전에는 보통 다음과 같이 구글 폰트를 적용했다. export default function Home() { return ( ... 위처럼 font를 가져와서 처리한다. 그래서 잠깐의 시간 차이인 하지만 가져오기 직전 fallback font로 보였다가 font가 load 되면서 layout shift가 발생하곤 하였다. Layout shift 란 fallback font와, 내가 사용하려는 font와 동일한 font-size를 사용해도, font 고유의 크기가 달라서 font가 load되면서 layout이 밀리는 현상이다. Next.js 13에서부터는 adjustFallbackFont 라는 기능을 이용해 CSS의 size-adjust 속성을 조정해 크기 차이가 발생하지 않게하였다..

nextjs의 끝판왕이라 생각되는 React-Query를 개념적으로만 다루어보겠습니다. React-Query는 React 앱에서 비동기 로직을 간편하게 처리할 수 있도록 도와주는 라이브러리입니다. 이전에 Redux와 Saga를 사용하여 비동기 관련 로직을 다뤘던 것과 다른 비동기 작업을 접근하고, 다양하고 유용한 기능을 제공하고있습니다. React-Query React-Query는 비동기 데이터 요청과 관련된 여러 가지 문제점을 해결하기 위해 등장했습니다. 이 라이브러리는 전역 상태 관리, 캐싱, 리패칭 등을 자동으로 처리하여 개발자가 데이터의 무결성에 직접 신경 쓰지 않아도 되도록 돕습니다. 기존에는 React 애플리케이션에서 비동기 데이터를 다루기 위해 Redux나 Context API와 함께 자체적..

개요 현재 제목에 '01-'로 시작하는 글들의 목적은 npx create-next-app으로 만드는 템플릿을 직접 구성하는 목적이다. 만약 npx create-next-app@latest my-app으로 프로젝트를 만든다면 자동으로 물어보는 질문은 다음 6가지이다. ✔ Would you like to use TypeScript? … No / Yes ✔ Would you like to use ESLint? … No / Yes ✔ Would you like to use Tailwind CSS? … No / Yes ✔ Would you like to use src/ directory? … No / Yes ✔ Would you like to use App Router? (recommended) … No / Ye..