sokuree_web_front/docs/TECH_STACK.md

Technology Stack & Architecture

이 프로젝트는 Headless CMS 아키텍처를 기반으로 하며, 프론트엔드와 백엔드가 분리되어 운영됩니다. 다음은 프로젝트에 사용된 주요 기술과 도구에 대한 명세입니다.

1. Frontend (사용자 인터페이스)

사용자에게 보여지는 웹사이트 화면은 React를 사용하여 구축되었습니다.

Core Framework & Language

• React 19: 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다.
  • 이용 방식: 컴포넌트(Component) 단위로 UI를 쪼개어 개발(예: Navbar, Footer, PostCard)함으로써 재사용성과 유지보수성을 높였습니다.
• JavaScript (ES6+): 최신 자바스크립트 문법을 사용합니다.
  • 주요 기능: Async/Await (비동기 처리), Arrow Functions, Destructuring 등을 적극 활용했습니다.
• Vite: 차세대 프론트엔드 빌드 도구입니다.
  • 역할: 개발 서버를 빠르게 구동하고, 배포를 위해 코드를 최적화하여 빌드(Build)하는 역할을 합니다. (기존 Create-React-App보다 훨씬 빠름)

Routing & Navigation

• React Router DOM: SPA(Single Page Application) 구현을 위한 라우팅 라이브러리입니다.
  • 역할: 페이지를 새로고침하지 않고도 URL(url/about, url/news 등)에 따라 다른 화면을 보여줍니다.

Styling (디자인)

• Vanilla CSS: 별도의 CSS 프레임워크(Tailwind, Bootstrap 등) 없이 순수 CSS를 사용했습니다.
  • 파일: src/styles/main.css 하나로 통합 관리됩니다.
  • 특징: CSS Variables(var(--primary-color))를 사용하여 색상 테마를 일관되게 관리하며, 반응형 디자인(@media)이 적용되어 있습니다.

Data Communication (통신)

• Axios: 서버와 통신하기 위한 HTTP 클라이언트입니다.
  • 역할: 워드프레스 API(wp-json)에 요청을 보내 뉴스 글이나 데이터를 가져옵니다.

Security & Utilities

• DOMPurify: 워드프레스에서 가져온 HTML 본문을 안전하게 렌더링하기 위해 XSS 공격(악성 스크립트)을 방지하는 라이브러리입니다.
• Context Menu Blocking: 마우스 우클릭 및 드래그를 방지하여 콘텐츠 무단 복사를 막는 로직이 포함되어 있습니다.

---

2. Backend (CMS & Data)

데이터 관리와 콘텐츠 작성은 WordPress를 사용합니다.

• WordPress (Headless Mode): 전통적인 워드프레스 테마를 사용하지 않고, 오직 데이터 저장소 및 관리자 페이지 역할만 수행합니다.
• REST API: 워드프레스에 내장된 API를 통해 프론트엔드(React)로 JSON 데이터를 전달합니다.
• PHP 8.3: 워드프레스 구동을 위한 서버 사이드 언어입니다.
• MariaDB 10: 게시글, 댓글 등 모든 데이터가 저장되는 데이터베이스입니다.

---

3. Infrastructure (인프라)

• Synology Web Station: 웹 서버 호스팅 환경입니다.
• Apache HTTP Server 2.4: React 빌드 파일(정적 파일)과 워드프레스(PHP)를 서비스하는 웹 서버 소프트웨어입니다.
• Gitea: 소스 코드의 버전 관리를 담당하는 자체 호스팅 Git 서버입니다.

---

4. Contact Form Security (문의하기 보안 정책)

문의하기 기능(Contact.jsx)에는 스팸 봇(Bot) 및 어뷰징 방지를 위해 4단계 보안 시스템이 적용되어 있습니다.

1. Honeypot Field (허니팟)

• 원리: 사용자(사람)의 눈에는 보이지 않는 숨겨진 입력 필드(honeypot)를 폼에 배치합니다.
• 방어: 자동화된 봇은 모든 필드를 채우려는 특성이 있습니다. 이 숨겨진 필드에 값이 입력되면 즉시 스팸으로 간주하여 전송을 차단합니다.

2. Rate Limiting (전송 빈도 제한)

• 원리: 브라우저의 localStorage를 활용하여 마지막으로 문의를 전송한 시각을 기록합니다.
• 방어: 동일한 브라우저에서 1분(60초) 이내에 연속으로 문의를 보낼 수 없도록 차단하여, 메일 폭탄(Email Bombing) 공격을 예방합니다.

3. Input Validation (입력값 검증)

• 원리: 사용자가 입력한 데이터가 유효한 형식인지 클라이언트 단에서 1차 검증합니다.
• 방어: 특히 연락처 필드는 한국 휴대폰 번호 정규식(^01([0|1|6|7|8|9])-?([0-9]{3,4})-?([0-9]{4})$)을 통과해야만 전송 버튼이 작동하여, 무의미한 데이터 전송을 막습니다.

4. Secure Token Submission

• 원리: 이메일 주소를 HTML 소스코드에 직접 노출(mailto: 등)하지 않습니다.
• 방어: FormSubmit 서비스의 암호화된 고유 토큰을 사용하여 데이터를 전송하므로, 크롤러에 의한 이메일 주소 수집을 원천적으로 차단합니다.