정훈's 프로그래밍

서버 컴포넌트와 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..