# 소개비전캠프 기숙사 자동 배정 프로그램(V-DAS)입니다.# 정의```1. 캠프여름방학과 겨울방학 기간에 교회나 기독교 단체에서 운영하는 신앙 교육 중심의 캠프를 의미합니다.캠프는 1회당 9개의 회차로 구성되어있으며, 연평균 2회 주최됩니다.2. 신청내역해당 회차에 참가신청을 한 교회들의 성별 별 신청 인원 엑셀 파일입니다.3. 산출물 3.1) 배정 파일 기숙사 호수 별 배정된 교회들의 이름과 배정 인원이 저장된 엑셀 파일입니다. 3.2) 배정 카드 특정 교회가 기숙사 어느 방에 몇 명이 배정되었는지 배정 현황을 확인할 수 있는 이미지입니다. 3.3) 배정 현황표(라벨지) 이미지 교회 배정 현황 14개 묶음을 표로 나타낸 이미지입니다.```# 성과### 스태프> 기숙사 배정 프로세스 자동..
전체 글
src / middleware.ts// middleware.tsimport { NextRequest, NextResponse } from "next/server";/** * 특정 슬러그(id)에 해당하는 커스텀 도메인을 찾아주는 함수 * 예시 함수이며 실제 서비스에서는 supabase 데이터베이스에서 조회해야 함 */function getDomainByHost(host: string): number | null { const domainMappings = [ { id: 123, customDomain: "philog.site" }, { id: 456, customDomain: "philog.site" }, { id: 789, customDomain: "philog.site" }, ];..
좋아. 아래는 커스텀 도메인 연결을 위해 Next.js 프로젝트, 도메인 구매 업체, Vercel에서 각각 해야 할 일을 정확하고 순차적으로 정리한 절차야.✅ 최종 목표사용자가 구매한 도메인 www.분양1.site로 접속하면www.분양모아.com/분양1과 같은 콘텐츠가 자동 렌더링되도록 구성🧭 전체 흐름 요약Next.js 프로젝트에서 커스텀 도메인 요청 처리 준비사용자가 도메인 구매 업체에서 DNS 설정넌 Vercel에 도메인 등록 & SSL 연결사용자가 www.분양1.site로 접속 시 → bunyang1 콘텐츠 자동 렌더링🛠️ 순서대로 정리✅ 1. Next.js 프로젝트에서 해야 하는 일단계 작업 설명1-1DB에 사용자 slug + customDomain 저장예: slug: "bunyang1", ..
import { mixinFlex } from "@/styles/mixins";import { Stack, styled } from "@mui/material";import { motion } from "motion/react";import React from "react";const Photo = () => { const variants = { initial: { y: 0, scale: 0.5 }, moveUp: { y: -250, transition: { duration: 1 } }, scaleUp: { scale: 1.5, transition: { duration: 1, delay: 1 } } }; return ;};export d..
type PropsType = Promise;export default async function CardDetail({ params }: { params: PropsType }) { const { churchName } = await params; return 교회 이름 : {churchName};}
설치npm install react-dnd react-dnd-html5-backend 시작하기프로바이더 정의src / components / DndProviderLayer.tsx"use client"; // 클라이언트 컴포넌트로 설정import { DndProvider } from "react-dnd";import { HTML5Backend } from "react-dnd-html5-backend";export default function DndProviderLayer({ children }: { children: React.ReactNode }) { const options = { enableMouseEvents: true, // 마우스 이벤트 활성화 enableTouchEvents..
1. 클라이언트 애플리케이션이 데이터 전송 요청 2. OS 네트워크 스택이 TCP/IP 패킷을 구성 3. NIC 드라이버가 이진 데이터(패킷)를 NIC에 전달 4. 클라이언트 NIC가 이진 데이터를 전기 신호로 변환 5. (유선/무선으로 전송) 6. 서버 NIC가 전기 신호를 수신해 디지털 데이터로 복원 7. 이더넷 프레임 → IP 패킷 → TCP 세그먼트로 파싱 8. 커널 네트워크 스택이 해당 소켓으로 전달 9. 사용자 애플리케이션이 소켓으로 데이터 수신
Electron에서 React를 함께 사용하는 건 매우 일반적인 패턴입니다. React로 UI를 만들고, Electron으로 데스크탑 앱화하는 거죠.아래에 기본적인 구성 방법을 순서대로 정리해드릴게요.✅ 목표Electron + React를 연동해서 데스크탑 앱 개발하기→ React가 렌더링한 UI가 Electron 창에 표시되는 구조🧱 1. 프로젝트 생성# 1. 새로운 React 프로젝트 생성npx create-react-app my-electron-appcd my-electron-app# 2. Electron 설치npm install --save-dev electron concurrently wait-onconcurrently와 wait-on은 React dev 서버 + Electron을 동시에 실행..