Next.js

jellyjoji·2025년 3월 28일

Next.js

목록 보기

1/1

설치

npx create-next-app@latest

npm run dev

SCSS 모듈을 사용하는 방법

SCSS 모듈을 사용하면 스타일을 컴포넌트 단위로 격리할 수 있어 CSS 클래스의 충돌을 방지할 수 있습니다.
컴포넌트마다 스타일을 분리하여 적용할 수 있으며, 클래스 이름은 자동으로 고유하게 변환됩니다.

SCSS 모듈 설정
sass 패키지 설치

먼저 SCSS를 사용할 수 있도록 sass 패키지를 설치합니다.

npm install sass

SCSS 모듈 파일 생성

SCSS 파일은 [이름].module.scss 형식으로 생성해야 합니다. 예를 들어, ExampleComponent라는 컴포넌트를 위한 SCSS 파일을 ExampleComponent.module.scss로 생성합니다.

SCSS 모듈 파일 작성
styles/ExampleComponent.module.scss:

/* ExampleComponent.module.scss */
.container {
  padding: 20px;
  background-color: #e0e0e0;
  border-radius: 8px;
  
  &__inside{
  padding: 20px;
  background-color: #e0e0e0;
  }
}

SCSS 모듈을 컴포넌트에서 사용
SCSS 모듈 파일을 컴포넌트에서 import 하고, className 속성으로 스타일을 적용합니다. 모듈을 사용할 때는 객체 형태로 import되어, 클래스 이름을 직접 사용하는 대신 객체의 프로퍼티로 접근합니다.

components/ExampleComponent.tsx:

import styles from './ExampleComponent.module.scss';

const ExampleComponent = () => {
  return (
    <div className={styles.container}>
      <p className={styles.text}>This is a component with SCSS modules!</p>
    </div>
  );
};

export default ExampleComponent;

lucide-react ICON 사용하기

lucide icon
1. lucide-react 설치
먼저, lucide-react 패키지를 설치합니다.

npm install lucide-react
yarn install lucide-react

아이콘 사용하기
이제 X와 AlignJustify 아이콘을 원하는 위치에서 사용할 수 있습니다. 아이콘을 임포트하고 JSX 내에서 사용하면 됩니다.

import { X, Menu } from "lucide-react";

export default function MyComponent() {
  return (
    <div>
      <button>
        <X size={24} /> {/* X 아이콘 */}
        Close
      </button>

      <button>
        <Menu size={24} /> {/* Menu 아이콘 */}
        Menu
      </button>
    </div>
  );
}

metadata 삭제해주고 "use client" 선언해주기

Google Fonts 또는 CDN 사용

Next.js의 _app.js 또는 _app.tsx 파일에서 global.css를 로드한 후, CSS에서 @import로 Pretendard를 추가하면 돼.

📌 steps
1️⃣ 전역 스타일 파일 (예: styles/globals.css)에 다음 코드 추가:

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

body {
  font-family: 'Pretendard', sans-serif;
}

2️⃣ Next.js에 globals.css 연결 (pages/_app.js 또는 pages/_app.tsx)

import '@/styles/globals.css';

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

도메인 주소 변경

Vercel 배포를 Cafe24 도메인에 연결

1단계: Vercel 배포 URL 얻기

Vercel에 프로젝트를 배포합니다. (배포되지 않았다면 먼저 배포해주세요).

배포가 완료되면, Vercel에서 제공하는 프로젝트 URL을 확인할 수 있습니다 (예: your-project-name.vercel.app).

2단계: Vercel에 커스텀 도메인 추가하기

Vercel 대시보드에 로그인하고, 연결할 프로젝트를 선택합니다.

프로젝트 대시보드에서 Settings 탭을 클릭합니다.

Domains 섹션에서 Add Domain 버튼을 클릭합니다.

Cafe24 도메인(예: example.com 또는 www.example.com)을 입력합니다.

Add 버튼을 클릭합니다.

Vercel 배포된 프로젝트으니 IP 주소를 복사헤서 cafe 24 IP 에 붙여넣기 합니다.
(예: 76.76.21.21)

3단계: Cafe24에서 DNS 설정 업데이트하기

Cafe24 계정에 로그인한 후 DNS 설정 또는 도메인 관리 페이지로 이동합니다.

도메인의 DNS 설정을 찾습니다. 여기서 도메인의 DNS 레코드를 수정할 수 있습니다.

필요한 DNS 레코드 추가:

A 레코드:

Name: www

IP: 76.76.21.21 (Vercel의 IP 주소)

4단계: Vercel에서 DNS 설정 확인

다시 Vercel 대시보드로 돌아가서 도메인 설정 페이지에서 Verify 버튼을 클릭합니다.

Vercel이 DNS 레코드를 확인하고, 올바르게 설정되었는지 검사합니다.

DNS가 제대로 연결되면 도메인이 성공적으로 연결됩니다.

5단계: DNS 전파 대기

DNS 설정이 적용되는 데 시간이 걸릴 수 있습니다(5시간 정도).

vercel 배포시 주의사항

.env 환경변수 설정시 http 가 아닌 https 만 사용이 허용된다.
HTTPS로 변경해야 하는 이유는 보안과 브라우저 정책 때문이다.

SMTP를 이용한 Gmail 이메일 연동 방법

1️⃣ Google 계정에서 보안 설정 변경
🔹 1. 이중 인증(2단계 인증) 활성화
Google 계정 보안 설정으로 이동

"2단계 인증" 활성화!

🔹 2. 앱 비밀번호(App Password) 생성
SMTP 앱 비밀번호 만들기 링크
같은 페이지에서 앱 비밀번호 설정

"앱 선택" → Mail 선택

"기기 선택" → Other(기타) → 원하는 이름 입력 후 생성

생성된 16자리 앱 비밀번호를 복사!

예시.jsx

npm install nodemailer

import nodemailer from "nodemailer";

export async function POST(req) {
  try {
    const requestData = await req.json();
    console.log("Received Data:", requestData); // 콘솔로 데이터 확인

    const { company, email, message } = requestData;

    const transporter = nodemailer.createTransport({
      service: "gmail",
      auth: {
        user: process.env.EMAIL_USER,
        pass: process.env.EMAIL_PASS,
      },
    });
    const mailOptions = {
      from: email,
      to: "casmopiler@gmail.com",
      subject: `새로운 문의가 접수되었습니다 - ${company}`,
      text: `새로운 문의가 접수되었습니다.\n\n회사명: ${company}\n이메일: ${email}\n\n문의 내용:\n${message}`,
      html: `
        <h2>${company} (${email})에서 새로운 문의가 접수되었습니다.</h2>
        <ul>
          <li><strong>회사명:</strong> ${requestData.company}</li>
          <li><strong>사업자등록번호:</strong> ${requestData.businessNumber}</li>
          <li><strong>연락처:</strong> ${requestData.tel}</li>
          <li><strong>이메일:</strong> ${requestData.email}</li>
          <li><strong>제목:</strong> ${requestData.title}</li>
          <li><strong>문의 내용:</strong> ${requestData.message}</li>
        </ul>
      `,
    };
    await transporter.sendMail(mailOptions);

    return new Response(
      JSON.stringify({ message: "Email sent successfully" }),
      {
        status: 200,
        headers: { "Content-Type": "application/json" },
      }
    );
  } catch (error) {
    console.error("Error sending email:", error);
    console.error("Error sending email:", error.message);

    return new Response(JSON.stringify({ message: "Error sending email" }), {
      status: 500,
      headers: { "Content-Type": "application/json" },
    });
  }
}

🔹 3. Vercal 배포시 Environment Variables 설정
Vercel 배포시 로컬 .env 파일은 ignol 처리되어 push 되지 않는다.
vercel 에서 .env 의 이메일과 smtp 비밀번호를 따로 설정해주어야 메일로 수신된다.

Vercel은 자동으로 재시작되지 않기 때문에, 환경 변수 수정 후 Deploy를 다시 눌러야 적용됩니다.

vercel smtp 설정

주의 : 환경 변수 설정

이메일 주소와 비밀번호는 반드시 .env 환경변수로 설정하여 보안에 주의한다.
이때 .env 환경변수는 .gitignore 파일에 담아 깃에 올라가지않도록 한다.

.env

# 이메일 설정 (노드메일러)
EMAIL_USER=YOUR_EMAIL
EMAIL_PASS=YOUR_APP_PASSWORD

.gitignore

# .env 파일을 Git에 커밋하지 않도록 추가
.env

code snippet

ednf
export default function first(second) {third}

globals.css -> globals.scss

scss 에서 globals.css 의 root 색상이 인식되지 않을때 css -> scss 로 변경하여 사용.

깃 분산 전략

기능별로 브랜치를 나누는 대신, 모두 develop에 작업하고 안정화되면 main으로 병합하는 방식입니다.

📌 기본 명령어 흐름
1. main → develop 분기

git checkout main (현재 위치 MAIN)
git checkout -b develop

작업하고 커밋

# 수정 후
git add .
git commit -m "기능 추가 또는 수정 내용"

push

git push origin develop

배포 시

# develop 브랜치 내용을 main으로 병합
git checkout main
git merge develop
git push origin main

git checkout develop

ipconfig

내 ip 주소 찾기

ifconfig | grep inet
ipconfig getifaddr en0

찾은 아이피로 백엔드에서 cors 등록하여 사용

예 http://192.168.1.18:3000

[동적 라우트 Dynamic Route]

URL의 일부로 사용됨
변수처럼 동작함
사용자가 입력하거나 특정 값을 기반으로 동적으로 페이지를 보여줄 때 사용

app/
└── product/
    └── [id]/
        └── page.jsx

(라우트 그룹 Group Routes)

URL 경로에는 포함되지 않음
디렉토리 구조를 나누기 위한 그룹화 도구
레이아웃이나 구조 분리를 할 때 사용

app/
└── (auth)/
    ├── login/
    │   └── page.jsx
    └── signup/
        └── page.jsx

문법 이름 URL에 포함됨 용도

[name] 동적 라우트 ✅ 포함됨 변수로 사용되는 URL 경로
(name) 라우트 그룹 ❌ 포함 안 됨 구조 정리, 레이아웃 분리 용도

shadcn 설치

https://ui.shadcn.com/docs/components/alert-dialog
https://tailwindcss.com/docs/installation/framework-guides/nextjs
shadcn 을 사용하기 위해 tailwind 가 설치되어있어야한다.

jellyjoji

Next.js

Next.js

설치

SCSS 모듈을 사용하는 방법

lucide-react ICON 사용하기

Google Fonts 또는 CDN 사용

도메인 주소 변경

1단계: Vercel 배포 URL 얻기

2단계: Vercel에 커스텀 도메인 추가하기

3단계: Cafe24에서 DNS 설정 업데이트하기

4단계: Vercel에서 DNS 설정 확인

5단계: DNS 전파 대기

vercel 배포시 주의사항

SMTP를 이용한 Gmail 이메일 연동 방법

주의 : 환경 변수 설정

code snippet

globals.css -> globals.scss

깃 분산 전략

ipconfig

[동적 라우트 Dynamic Route]

(라우트 그룹 Group Routes)

문법 이름 URL에 포함됨 용도

shadcn 설치

0개의 댓글