잡다하다

개요URL을 잘못 입력하여 발생하는 404(NOT FOUND ERROR)를 전역으로 처리하는 방법에 대해 작성해보았다.NEXT JS 13의 app router 기준으로 작성된 글이다.만약 페이지에서 다른 페이지로 이동이 필요하지 않은 경우에는 /src/app/not-found.tsx 만 작성해주면 된다. /src/app/not-found.tsximport style from './error/404/_module/css/not.found.module.css'export default function NotFound() { return ( 페이지 없음 페이지를 찾을..

개요회사 서비스 개발을 위해 react-query를 사용하게 되었고, 이를 정리하기 위해 글을 작성해보았다. 동작 구조home 페이지가 호출될 때, backend에서 데이터를 가져오고 이를 보여주는 구조이다. 구조실제 상용 데이터들이라 이름은 임의로 변경했다. 간단하게 FLOW만 보면 좋을 것 같다./src/app/home/page.body.tsx'use client'export default function HomeBody() { const { data, isSuccess } = useHomeContentsQuery() const { setError } = useErrorStore() useEffect(() => { if (isSuccess) { if (data.status !== ..

개요 로컬과 개발서버에서 통신하는 백엔드 서버의 URL이 다름에 따라 환경설정 파일을 분리하는 작업을 env-cmd 라이브러리를 사용하여 해보았다. 설치 아래 명령어로 env-cmd를 설치한다. npm install env-cmd 사용 사용법은 간단하다. package.json에서 scripts를 설정에 따라 분리한다. "scripts": { "dev": "env-cmd -f .env.local next dev", "build": "next build", "build:dev": "env-cmd -f .env.dev next build", "start": "next start", "start:dev": "env-cmd -f .env.dev next start", "lint": "next lint" },..

개요 개발이 완료된 프로젝트를 AWS에서 배포를 하기 위해 찾아보던 중 pm2 라이브러리를 활용해서 서비스를 배포하는 방법에 대해 알게 되었고 이를 기록해보았다. 설치 아래 명령어로 pm2를 설치한다. npm install pm2 실행 프로젝트를 build하고, 압축하여 서버에 올린 후 배포하는 시나리오이다. 방장의 프로젝트는 local서버에서 통신하는 백엔드 서버 URL과, AWS 개발서버에서 통신하는 백엔드 서버 URL이 다르기 때문에 .env.local / .env.dev로 구분되어 있고, build 명령어도 package.json으로 분리해두었다. 자세한 설명은 env-cmd 라이브러리 활용에 대한 글을 참고하자. [NEXT.JS] env-cmd로 설정파일 분리하기 개요 로컬과 개발서버에서 ..

개요 프론트엔드 개발자라면 서버와의 API 요청을 개발할 때, 백엔드 개발자가 API개발이 완료되지 않은 시점에 테스트가 필요할 수 있다. 이에 따라 실제 API 통신 대신 정해진 규격에 맞는 가짜 데이터를 통해 API 개발을 쉽게 할 수 있는 MSW라는 라이브러리를 사용해봤다. 설치 터미널에서 아래 명령어를 통해 쉽게 설치할 수 있다. npm install msw 사용법 NEXT.JS 프로젝트 src 폴더 하위에 mocks 폴더를 생성한다. 폴더에는 3개의 파일을 생성한다. browser.ts 브라우저 환경 설정 파일 import { setupWorker } from 'msw/browser'; import { handler } from './handler'; export const worker = se..

Layout VS Templage layout은 디렉토리 하위 컴포넌트에 모두 공통적으로 적용되는 페이지를 의미한다. 전체적으로 사용되는 컴포넌트들을 layout에 모아놓으면 페이지를 이동해도 해당 컴포넌트들은 계속 노출된다. template 또한 하위 컴포넌트에 모두 공통적으로 적용되는 페이지지만 다른 점은 Layout에서는 상태를 보존하고, rerendering되지 않지만, Template에서는 상태는 유지되지 않고, 모든 effect는 다시 연결된다. NextJS는 아래와 같은 상황이 아니라면 Layout의 사용을 권장하고 있다. CSS, 애니메이션 라이브러리를 사용해서 애니메이션을 시작하거나 종료할 때 useEffect, useState에 의존하는 기능인 경우 기본 프레임워크 동작을 변경하는 경우..

다이나믹 라우팅? 미리 정의, 고정된 URL이 아닌 사용자가 접근한 경로 또는 특정 값에 따라 동적으로 변화하는 주소를 의미한다. 하나의 컴포넌트를 사용하여 특정값에 따라 변화하는 데이터를 사용할 수 있게 제작하기 위해 사용한다. 사용법 대괄호 []로 시작하는 폴더를 생성하면 된다. username에 따른 데이터를 보여주기 위한 컴포넌트를 만들고 싶다면 [username] 폴더와 하위에 page.tsx를 생성해주면 된다. 그리고 page.tsx에서 아래와 같이 코드를 작성하면 export default function UsernamePage(props: any) { return ( username: {props.params.username} ) } username에 해당하는 URL이 변경됨에 따라 출력되..

개요 구글이 Bard에서 GEMINI로 이름을 변경했다. 더 강력한 언어 모델을 탑재했다고 들었고 현재 무료로 API를 사용할 수 있어 현재 개발중인 포트폴리오에 적용해 봤다. 적용 사용법은 간단했다. GOOGLE에 gemini api를 검색 Get API Key in Google AI Studio -> Get API KEY -> Create API Key Home으로 돌아가 우측 상단에 Get Code를 클릭 후 프로젝트의 언어에 맞는 Code를 적용한다. 방장은 NextJS에서 사용했으며, 코드는 아래와 같다. // home.body.tsx import { Button, Card, Col, Input, Row } from 'antd' import { GoogleGenerativeAI } from '@..

개요 NEXT.JS를 사용하면서 느꼈던 폴더 구조에 대해 작성해보려고 한다. 현재 포트폴리오겸 개발중인 프로젝트기 때문에 완성되지 않은 구조임을 감안해주길 바란다. 또한, 공부가 완벽하지 않아 틀린점이 있을 수 있으니 많은 지적 부탁한다. public과 src로 크게 분리되며, public에는 font, image, svg 파일들을 보관하는 용도로 사용했다. src/app 실질적인 페이지들을 보관한 디렉토리이다. routing을 통해 접근하는 페이지별로 디렉토리를 구성한 모습이다. src/components 공통으로 사용하는 component들에 대해 보관했다. 테이블이나 버튼 등을 모든 페이지에서 공통으로 사용할 수 있다. src/config layout.tsx에서 가지게될 컴포넌트들에 대한 모음이다..

개요 회원가입 간 정규식을 활용하여 이메일 검증을 했다. 정상적인 메일 구조라면 true를 아니라면 false를 반환한다. const validateEmail = (email: string) => { const regExp = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i return regExp.test(email) } 문의사항이나 피드백은 댓글로 남겨주세요.