구현 동기 필수값, 글자수 제한, 이메일 형식, 전화번호 형식 등 간단한 검사만 필요하다. joi나 yup 같은 외부 라이브러리 없이 구현하고 싶다. (복잡한 기능은 필요 없다.) 메서드 체이닝을 직접 구현해보고 싶다 이러한 동기로 입력의 유효성을 검사하는 유틸리티를 직접 구현해 보기로 했다. 요구사항 메서드 체이닝으로 체이닝 된 순서대로 유효성을 검증한다. 확장성을 위해 직접 정의한 메서드로 유효성을 검증할 수 있어야 한다. 입력 필드 컴포넌트에서 입력 시마다 유효성을 자동으로 검증한다. 구현하기 Validator 클래스 유효성을 검증하는 Validator 클래스를 생성한다. 클래스의 메서드로 유효성을 검증하는 로직을 구현한다. 각 메서드는 항상 this를 리턴해서 체이닝이 가능하도록 한다. type ..

Next.js 13 버전에서 추가된 4가지 기능 Next.js 13 버전에서는 App Directory가 추가되었다. 이전 버전에서 pages 폴더에 대응되는 것으로, 다음과 같은 기능을 지원한다. Layouts: state를 유지하고 비용이 많이 드는 리렌더링을 피하면서 라우트 사이에 UI를 쉽게 공유할 수 있음. Server Components: 서버에서 렌더링되는 컴포넌트를 명시적으로 구현할 수 있음. Streaming: 유저는 로딩 상태를 즉시 확인할 수 있으며, UI가 단계적으로 렌더링됨. 원한다면 App Directory 내에 컴포넌트 파일, 테스트 파일, 스타일 파일 등 라우트가 아닌 파일이 존재해도 된다. 이전 버전에서 pages 폴더 안에는 무조건 NextPage Dynamic Rout..

2021년에 React를 이용한 프로젝트를 진행했었다. (내 첫 프론트엔드 프로젝트) 그때 이후로 회사에 입사하면서 Next.js로만 개발하다 보니 react-router-dom를 사용할 일이 없었다. Next.js는 pages 폴더를 이용해 자동으로 라우트를 만들어주기 때문이다. 리액트 멘토링을 진행하면서 2년만에 기억 저편의 react-router-dom을 다시 사용해 보게 되었다. 2년 전에 사용했던 버전은 5.2.0이고 이번에 사용하게 된 버전은 6.10.0이다. v6로 업데이트되면서 인터페이스가 완전히 바뀌었다. react-router-dom BroswerRouter로 라우터 구현하기 v5에서 라우팅 구현하는 방법 기존 v5에서는 라는 컴포넌트가 존재했다. path prop에 `/posts/:i..