정훈's 프로그래밍

1. 필요한 패키지 설치터미널에서 다음 명령어를 실행하여 NextAuth, MySQL2(프로미스 지원), bcryptjs 패키지를 설치합니다.npm install next-auth mysql2 bcryptjs2. NextAuth API 라우트 생성Next.js의 API 라우트를 사용하여 인증 엔드포인트를 생성합니다. (Next.js 13 기준으로 pages 디렉터리를 사용하는 경우의 예제이며, app 디렉터리 사용 시에는 약간의 구조 차이가 있습니다.)파일 경로: pages/api/auth/[...nextauth].ts"use server";import NextAuth from "next-auth";import CredentialsProvider from "next-auth/providers/creden..

1. 프로젝트 루트에 .env 파일 생성프로젝트 루트(예: package.json 파일이 위치한 곳)에 .env 파일을 생성합니다.보통 민감한 정보(예: 데이터베이스 접속 정보, API 키 등)를 저장합니다.MYSQL_HOST=localhostMYSQL_USER=your_mysql_usernameMYSQL_PASSWORD=your_mysql_passwordMYSQL_DATABASE=your_database_name주의:클라이언트 사이드에서 사용해야 하는 변수는 반드시 NEXT_PUBLIC_ 접두사를 붙여야 합니다.예: NEXT_PUBLIC_API_URL=https://example.com/api2. Next.js가 .env 파일을 자동으로 로드Next.js는 기본적으로 프로젝트 루트의 .env, .env..

✅ route.ts(라우트 API) vs. Server Actions 비교라우트 API (route.ts) 서버 액션 (use server)방식HTTP 요청(예: fetch, axios)을 통해 API 엔드포인트를 호출서버에서 직접 함수를 호출하여 실행사용법app/api/.../route.ts에 작성 (GET, POST, PUT, DELETE 가능)use server 키워드를 사용하여 서버 함수 실행보안API 호출을 통한 요청이므로 CSRF 방어 필요클라이언트에서 직접 실행할 수 없어 CSRF 공격 걱정 없음유연성외부 API와의 통합이 용이클라이언트와의 직접적인 상호작용에 적합상태 관리fetch 요청으로 데이터를 가져와야 함클라이언트 컴포넌트에서 바로 실행 가능최적화캐싱 및 CDN을 활용할 수 있음페이지..

서버 컴포넌트와 Propsuse server 지시자를 사용한 서버 컴포넌트는 props를 통해 데이터를 받을 수 있습니다. 예를 들어, 부모 컴포넌트에서 서버 컴포넌트로 데이터를 전달하면, 서버에서 렌더링될 때 이 props를 활용해 동적으로 콘텐츠를 생성할 수 있습니다. 이는 React의 컴포넌트 간 데이터 전달 방식과 유사하며, 서버 측에서 실행되는 특성을 갖습니다.예시:// 부모 컴포넌트// ServerComponent.jsx"use server";export default function ServerComponent({ data }) { return {data}; // "안녕하세요" 출력}API 라우트와 데이터 처리반면, API 라우트는 HTTP 요청을 통해 데이터를 주고받는 방식으로 동작합니다..

1. 목적에 따른 폴더 분리서버 파일을 기능이나 역할에 따라 폴더로 나누는 것이 좋습니다. 이렇게 하면 파일의 목적을 쉽게 파악할 수 있고 유지보수가 편리해집니다. 예를 들어:API 관련 파일: /api 폴더에 API 엔드포인트(라우트) 파일을 모아둡니다.서버 컴포넌트: /components/server처럼 서버에서 실행되는 컴포넌트를 별도로 관리합니다.데이터베이스 관련 파일: /lib/db 또는 /services/db에 데이터베이스 연결이나 쿼리 로직을 정리합니다.유틸리티 함수: /utils에 서버에서 공통으로 사용하는 함수를 둡니다.2. 모듈화와 재사용성서버 파일에서 반복적으로 사용되는 로직은 모듈화해서 관리하는 것이 좋습니다. 예를 들어:데이터베이스 연결 로직을 /lib/db/connection.t..

MySQL과 연동하는 간단한 예제1. 필요한 패키지 설치MySQL과 연동하려면 먼저 mysql2 라이브러리를 설치해야 합니다. 아래 명령어를 사용하세요:npm install mysql22. 서버 컴포넌트에서 MySQL 쿼리 실행다음은 'use server'; 지시자를 사용해 서버에서만 실행되는 컴포넌트에서 MySQL 데이터를 가져와 렌더링하는 코드입니다:// app/page.tsx'use server';import mysql from 'mysql2/promise';async function getUsers() { // MySQL 연결 설정 const connection = await mysql.createConnection({ host: 'localhost', user: 'your_user..

React 훅을 사용한 클라이언트 컴포넌트 예제다음은 사용자 목록을 관리하고, 새로운 사용자를 추가할 수 있는 간단한 클라이언트 컴포넌트 예제입니다. 이 코드는 React 훅인 useState를 사용합니다.// components/UserList.tsx'use client'; // 클라이언트 컴포넌트임을 명시import { useState } from 'react';export default function UserList({ initialUsers = [] }) { // 상태 관리: 사용자 목록과 입력 필드 값 const [users, setUsers] = useState(initialUsers); const [newUser, setNewUser] = useState(''); // 새로운 사용자..

Next.js에서 "use server"와 "use client"는 서버 컴포넌트와 클라이언트 컴포넌트를 명시적으로 구분하기 위한 지시자(directive)입니다. 이들은 React의 서버 사이드 렌더링(SSR) 및 서버 컴포넌트 아키텍처를 활용하여 성능을 최적화하고 개발 경험을 개선하는 데 사용됩니다. 아래에서 간략히 설명합니다.1. "use server"의미: 해당 파일 또는 컴포넌트가 서버에서만 실행된다는 것을 나타냅니다.사용 위치: 파일의 최상단에 작성합니다 (예: 'use server';).특징:클라이언트로 전송되지 않으며, 서버에서 렌더링된 후 결과(HTML 등)만 클라이언트로 전달됩니다.데이터베이스 쿼리, 파일 시스템 접근, API 호출 등 서버 전용 작업에 적합합니다.클라이언트 측 Java..

// Animate On Scrollnpm install aos // type scriptnpm install --save-dev @types/aos // 예제: AOS를 초기화하는 React 컴포넌트import { useEffect } from "react";import AOS from "aos";import "aos/dist/aos.css";/** * AOS 예제 컴포넌트 * 스크롤 시 요소에 애니메이션 효과를 적용합니다. * * @returns {JSX.Element} 애니메이션이 적용된 컴포넌트 */export default function AOSExample(): JSX.Element { useEffect(() => { // AOS 초기화 (애니메이션 지속 시간 1000ms) AOS..

Next.js 15 버전 이상에서 선호되는 라우터 방식은 App Router입니다.App Router는 Next.js의 새로운 라우팅 시스템으로, 기존의 Pages Router를 대체하며 다음과 같은 특징을 가집니다:app/ 디렉토리를 사용하여 라우팅을 구성합니다.폴더 기반 라우팅을 채택하여 더 직관적인 구조를 제공합니다.React Server Components를 기본적으로 지원합니다.레이아웃 구성이 더 유연해졌으며, layout.js 파일을 통해 중첩 레이아웃을 쉽게 구현할 수 있습니다.서버 중심 라우팅을 채택하여 성능 최적화에 중점을 둡니다.App Router는 Pages Router에 비해 더 강력한 기능을 제공하며, Next.js의 미래 방향성을 대표합니다. 따라서 새로운 프로젝트를 시작할 때는..