Update: Tech Stack documentation and Footer contact info
This commit is contained in:
parent
253c1c9ba5
commit
461917a15e
73
docs/TECH_STACK.md
Normal file
73
docs/TECH_STACK.md
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
# 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` 서비스의 **암호화된 고유 토큰**을 사용하여 데이터를 전송하므로, 크롤러에 의한 이메일 주소 수집을 원천적으로 차단합니다.
|
||||||
@ -7,7 +7,7 @@ React 앱(`sokuree.com`)이 데이터를 가져오기 위해 필요한 백엔드
|
|||||||
다음 패키지들이 설치되어 있어야 합니다.
|
다음 패키지들이 설치되어 있어야 합니다.
|
||||||
- **Web Station**
|
- **Web Station**
|
||||||
- **Apache HTTP Server 2.4** (또는 Nginx)
|
- **Apache HTTP Server 2.4** (또는 Nginx)
|
||||||
- **PHP 8.0 이상** (Headless 모드는 최신 PHP 권장)
|
- **PHP 8.3 이상** (Headless 모드는 최신 PHP 권장)
|
||||||
- **MariaDB 10** (데이터베이스)
|
- **MariaDB 10** (데이터베이스)
|
||||||
- **phpMyAdmin** (DB 관리용, 선택사항이나 강력 추천)
|
- **phpMyAdmin** (DB 관리용, 선택사항이나 강력 추천)
|
||||||
|
|
||||||
|
|||||||
@ -6,10 +6,10 @@ const Footer = () => {
|
|||||||
<div className="container footer-container">
|
<div className="container footer-container">
|
||||||
<div className="footer-info">
|
<div className="footer-info">
|
||||||
<h3>Sokuree Consultant</h3>
|
<h3>Sokuree Consultant</h3>
|
||||||
<p>代表: 홍길동 | Business License: 000-00-00000</p>
|
<p>대표: 최병규 | Business License: 000-00-00000</p>
|
||||||
<p>주소: 서울특별시 ... (추후 업데이트)</p>
|
<p>주소: 전북 순창군 ... (추후 업데이트)</p>
|
||||||
<p>
|
<p>
|
||||||
이메일: <a href={`mailto:${'contact'}@${'sokuree.com'}`} style={{ color: '#ccc', textDecoration: 'none' }} onClick={(e) => { e.currentTarget.href = `mailto:contact@sokuree.com`; }}>{'contact'}@{'sokuree.com'}</a> | 전화: 02-0000-0000
|
이메일: <a href={`mailto:${'contact'}@${'sokuree.com'}`} style={{ color: '#ccc', textDecoration: 'none' }} onClick={(e) => { e.currentTarget.href = `mailto:contact@sokuree.com`; }}>{'contact'}@{'sokuree.com'}</a> | 전화: 010-2125-0217
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="footer-links">
|
<div className="footer-links">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user