잡다하다

소개Next.js는 React 애플리케이션을 위한 프레임워크로, 서버사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하여 성능과 SEO 최적화를 돕는다.  주요 기능서버사이드 렌더링 (SSR): 페이지 로딩 속도와 SEO를 개선합니다.정적 사이트 생성 (SSG): 빌드 시 HTML 파일을 생성해 빠른 로딩 속도를 제공합니다.API 라우팅: API 엔드포인트를 쉽게 생성할 수 있습니다.자동 코드 분할: 필요할 때만 자바스크립트를 로드하여 성능을 향상시킵니다. 설치 및 기본 사용법npx create-next-app@latest my-next-app cd my-next-app npm run dev페이지 생성: pages 폴더에 파일을 추가하면 자동으로 라우팅됩니다. // pages/index.js e..

개요 로컬과 개발서버에서 통신하는 백엔드 서버의 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..

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

개요 회원가입 간 정규식을 활용하여 이메일 검증을 했다. 정상적인 메일 구조라면 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) } 문의사항이나 피드백은 댓글로 남겨주세요.

이전 글에 이어 _app.js를 커스텀하는 방법에 대해 작성해 보려고 한다. [NEXT.JS] #5 CSS STYLING (2) 이전 글에 이어 CSS 를 설정하는 다른 방법에 대해 작성해보겠다. [NEXT.JS] #4 CSS STYLING (1) 이전 글에 이어 CSS 를 설정하는 방법에 대해 작성해보겠다. [NEXT.JS] #3 pages와 페이지 이동 이전 글에서 next p many.tistory.com _app.js Next.js에서 각각의 페이지가 초기화될 때 로딩되는 파일이다. 모든 페이지가 초기화될 때 로딩되므로 전체 페이지의 로직을 작성할 수 있다. 즉, 모든 페이지에서 공통으로 사용하는 컴포넌트나 css 등을 적용하는데 용이하다. 이전 게시물들에서 NavBar.js를 index.js, ..

이전 글에 이어 CSS 를 설정하는 다른 방법에 대해 작성해보겠다. [NEXT.JS] #4 CSS STYLING (1) 이전 글에 이어 CSS 를 설정하는 방법에 대해 작성해보겠다. [NEXT.JS] #3 pages와 페이지 이동 이전 글에서 next project를 생성했다. 이번 글은 nextjs의 페이지 이동에 대해 작성하였다. [NEXT.JS] #2 Project many.tistory.com styled JSX next js에서 사용하는 기본적인 css 설정 방법이다. 방장은 next.js 14버전을 사용했기 때문에 하위 버전과 사용법이 다를 수 있다. components/NavBar.js 사이의 코드를 통해 element의 css를 설정하는 방법이다. import Link from "next/..

이전 글에 이어 CSS 를 설정하는 방법에 대해 작성해보겠다. [NEXT.JS] #3 pages와 페이지 이동 이전 글에서 next project를 생성했다. 이번 글은 nextjs의 페이지 이동에 대해 작성하였다. [NEXT.JS] #2 Project 생성하기 특징과 기능에 대한 정리를 마쳤으니 이제 프로젝트를 생성해 보겠다. NEXT.JS 특 many.tistory.com module.css 첫번째로 .module.css로 생성된 css파일을 import하여 내부의 class를 적용하는 방법을 사용했다. 방장은 next.js 14버전을 사용했기 때문에 하위 버전과 사용법이 다를 수 있다. components/NavBar.module.css .active { color: tomato; } compone..

이전 글에서 next project를 생성했다. 이번 글은 nextjs의 페이지 이동에 대해 작성하였다. [NEXT.JS] #2 Project 생성하기 특징과 기능에 대한 정리를 마쳤으니 이제 프로젝트를 생성해 보겠다. NEXT.JS 특징과 기능 [NEXT.JS] #1 특징과 기능 회사에서 진행하는 프로젝트에서 REACT.JS가 선택되었다. NEXT.JS를 통해 FRONTEND 개발 many.tistory.com routing을 통해 호출한 url과 component를 연결해주는 작업이 필요한 library인 react와 달리 framework인 nextjs는 pages 내부에 생성된 파일명만으로 웹에서 해당 파일을 호출할 수 있었다! pages/test.js 이제 intelliJ를 열고 pages하위에..