개요 : React에서의 routing React.js에서는 routing을 위해서 react-router-dom을 설치해야한다. (현재 최신 버전은 6.2) React에서는 routing을 아래처럼 코딩을 해야한다. import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom'; const App = () => { return ( ) } export default App; 위의 코드는 별거 아니지만, E-commerce에서 Nested Routing이 들어가는 순간 코드는 어마어마하게 길게 될 수 있다. router package도 다운로드 받을 뿐 아니라 코드도 복잡해진다. 이를 위해 Next.js (Nuxt.js ver..

재사용의 이유 Tailwind CSS는 uility class를 html에 markup 형태로 쓰는 방식이다. 그러나 보통 좀 제대로 된 간단한 버튼 하나를 구현하려고 해도 코드과 다음과 같아 길어진다. Hello 위 코드를 반복해서 쓰고 싶다면 가독성이 더욱 더 떨어질 것이다. 이 코드를 My Button 의 형태로 재정의해서 사용하면 .jsx (.tsx) 파일의 가독성이 훨씬 올라갈 것이다. 재사용 방법 Utility class를 재사용하는 방법은 기본적으로 3가지가 있다. 1. tailwind.config.js 이미 정의되어있는 utility class를 재정의하거나, 새로운 utility class를 정의할 때 사용 예시: theme: { extend: { colors: { primary: '#F..

개요 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 속성을 조정해 크기 차이가 발생하지 않게하였다..