Kylie's Archive

웹 최적화, 왜 중요하고 어떻게 할까?

Thu, 31 Jul 2025 06:12:02 GMT

들어가기 전

웹 개발을 하다 보면 사용자에게 빠르고 쾌적한 웹 서비스를 제공하는 것이 얼마나 중요한지 깨닫게 됩니다. 마치 잘 정돈된 식당에서 음식이 빨리 나오고, 관공서에서 서류 처리가 신속하게 이루어지며, 스마트폰 앱이 버벅거림 없이 잘 작동하는 것처럼 말이죠.

이번 글에서는 사용자들이 웹사이트를 더 빠르고 효율적으로 이용할 수 있도록 만들어주는 중요한 작업, 바로 웹 최적화에 대해 알아보겠습니다. 웹 최적화는 단순히 페이지 로딩 속도를 높이는 것을 넘어, 사용자 경험을 향상시키고, 검색 엔진 노출에 긍정적인 영향을 미치며, 서버 비용을 절감하는 등 다양한 이점을 제공합니다. 간단한 예시와 함께 웹 최적화의 중요성을 이해하고, 어떤 방법들이 있는지 함께 살펴보겠습니다.

1. 이미지 최적화

웹사이트에서 가장 많은 용량을 차지하는 것 중 하나가 바로 이미지입니다. 고해상도 이미지를 그대로 사용하면 웹 페이지 로딩 속도를 현저히 떨어뜨릴 수 있어요.

JPEG, PNG, WebP 등 적절한 포맷 사용: 사진에는 JPEG, 투명 배경이 필요한 아이콘 등에는 PNG가 적합합니다. WebP는 JPEG나 PNG보다 압축 효율이 뛰어나면서도 품질 손실이 적어 최근 각광받고 있는 포맷입니다.
이미지 압축: TinyPNG, Squoosh 등과 같은 도구를 사용하여 이미지 용량을 줄일 수 있습니다.
반응형 이미지: 사용자의 화면 크기에 따라 적절한 크기의 이미지를 제공하여 불필요하게 큰 이미지를 로딩하지 않도록 합니다. srcset 속성 등을 활용할 수 있습니다.
지연 로딩 (Lazy Loading): 당장 사용자 화면에 보이지 않는 이미지는 나중에 스크롤될 때 로딩되도록 하여 초기 로딩 속도를 향상시킵니다. loading="lazy" 속성을 이미지 태그에 추가하면 됩니다.

2. 코드 최적화

HTML, CSS, JavaScript 코드도 최적화가 필요합니다. 불필요한 공백, 주석, 사용되지 않는 코드 등은 파일 크기를 늘려 로딩 시간을 지연시킬 수 있습니다.

코드 압축 (Minification): HTML, CSS, JavaScript 파일에서 공백, 주석 등을 제거하여 파일 크기를 줄입니다. 빌드 도구(Webpack, Gulp 등)를 사용하면 쉽게 자동화할 수 있습니다.
번들링 (Bundling): 여러 개의 JavaScript 또는 CSS 파일을 하나로 묶어 네트워크 요청 횟수를 줄입니다.
사용하지 않는 CSS/JS 제거: 웹사이트에 실제로 사용되지 않는 CSS나 JavaScript 코드가 있다면 과감히 제거합니다. (트리 쉐이킹(Tree Shaking) 같은 개념과 연관됩니다.)

3. 캐싱 활용

캐싱은 자주 요청되는 데이터를 임시 저장소에 보관해 두었다가, 다음에 같은 요청이 들어오면 서버에 다시 요청하지 않고 저장된 데이터를 바로 제공하는 방식입니다.

브라우저 캐시: 웹 브라우저가 CSS, JavaScript, 이미지 등 정적 파일을 사용자의 컴퓨터에 저장해 두었다가 재방문 시 다시 다운로드하지 않도록 합니다. HTTP 헤더 (Cache-Control, Expires 등)를 설정하여 제어할 수 있습니다.
서버 캐시: 데이터베이스 쿼리 결과, API 응답 등 동적으로 생성되는 데이터를 서버 메모리에 저장하여 매번 다시 계산하거나 조회하지 않도록 합니다. Redis, Memcached 등의 도구를 활용할 수 있습니다.

4. 서버 응답 시간 단축

아무리 프론트엔드 최적화를 잘해도 서버 응답 시간이 느리면 전체적인 웹사이트 속도는 느려질 수밖에 없습니다.

효율적인 데이터베이스 쿼리: 데이터베이스 쿼리가 너무 많거나 비효율적이면 응답 시간이 길어집니다. 인덱스 설정, N+1 쿼리 방지 등을 통해 개선할 수 있습니다.
서버 하드웨어 개선: CPU, 메모리 등 서버 사양을 업그레이드하거나 더 많은 서버를 사용하여 부하를 분산합니다.
CDN (콘텐츠 전송 네트워크) 사용: 사용자에게 가까운 CDN 서버에서 정적 파일을 전송하여 물리적인 거리에 따른 지연 시간을 줄입니다.

5. 렌더링 최적화

웹 페이지가 화면에 그려지는 과정(렌더링)도 최적화할 수 있습니다.

CSS와 JavaScript의 위치: CSS는 태그 안에 두어 페이지가 빠르게 스타일링되도록 하고, JavaScript는 태그 닫히는 부분 바로 위에 두어 HTML 콘텐츠가 먼저 렌더링되도록 합니다. defer나 async 속성을 활용할 수도 있습니다.
Critical CSS: 페이지를 로드했을 때 가장 먼저 보이는 부분(폴드 위, Above the Fold)에 필요한 CSS만 따로 추출하여 인라인으로 삽입하여 초기 렌더링을 빠르게 합니다.
레이아웃 스래싱 방지: JavaScript에서 DOM 조작을 반복적으로 수행할 때 발생하는 불필요한 레이아웃 계산을 최소화합니다.

부록: 웹 최적화 도구 및 지표

웹 최적화는 단순히 감으로 하는 것이 아니라, 다양한 도구를 활용하여 측정하고 분석하며 개선해나가야 합니다.

Google Lighthouse: Chrome 개발자 도구에 내장되어 있어 웹 페이지의 성능, 접근성, SEO 등을 종합적으로 분석하고 개선 방안을 제시해줍니다.
Google PageSpeed Insights: 웹 페이지 URL을 입력하면 Lighthouse와 비슷한 분석 결과를 제공하며, 모바일 및 데스크톱 환경에서의 점수와 개선 권장 사항을 보여줍니다.
Web Vitals: Google에서 제시하는 핵심 웹 지표(Core Web Vitals)로, 사용자의 실제 경험을 측정하는 데 중요한 지표입니다.
- LCP (Largest Contentful Paint): 페이지의 가장 큰 콘텐츠(이미지, 텍스트 블록 등)가 렌더링되는 시간.
- FID (First Input Delay): 사용자가 처음으로 페이지와 상호작용할 때(버튼 클릭 등)부터 브라우저가 응답하기까지의 시간. (실제 사용자 경험에 기반)
- CLS (Cumulative Layout Shift): 페이지 콘텐츠가 얼마나 예상치 못하게 움직이는지를 측정하는 지표.
GTmetrix: 웹 페이지의 성능을 분석하고 워터폴(Waterfall) 차트 등을 통해 각 리소스의 로딩 시간을 시각적으로 보여줍니다.

웹 접근성과 SEO

Thu, 31 Jul 2025 05:55:35 GMT

들어가기 전

"코드만 잘 짜면 되지 않나요?" 라고 생각하실 수도 있습니다. 하지만 아무리 뛰어난 기술력으로 만든 웹사이트라도, 특정 사용자만 이용할 수 있거나 아무도 찾지 못한다면 무슨 소용이 있을까요?

웹 접근성은 이름 그대로 '웹에 얼마나 잘 접근할 수 있는가'를 의미합니다. 시각, 청각, 지체 장애는 물론 고령자, 일시적인 부상 등으로 인해 웹사이트를 이용하는 데 어려움을 겪는 모든 사용자가 웹 콘텐츠를 제약 없이 이용할 수 있도록 하는 것을 목표로 합니다. 이는 단순한 배려를 넘어, 차별 없는 정보 접근을 보장하는 기본적인 권리이자, 더 넓은 잠재 고객에게 도달할 수 있는 비즈니스 기회이기도 합니다.

그렇다면 SEO는 무엇일까요? 웹사이트를 바다에 띄운 배라고 상상해 보세요. SEO는 이 배가 나침반 없이 망망대해를 헤매는 대신, 사람들이 검색이라는 등대를 보고 쉽게 찾아올 수 있도록 돕는 기술입니다. 구글, 네이버 같은 검색 엔진이 여러분의 웹사이트를 더 잘 '이해'하고, 검색 결과 상위에 노출시켜 더 많은 트래픽을 유도하는 일련의 과정이죠. 결국 웹사이트의 가시성을 높여 더 많은 사람에게 도달하게 하는 핵심 전략입니다.

이 두 가지는 별개의 개념처럼 보이지만, 사실은 밀접하게 연결되어 있습니다. 잘 만들어진 접근성 좋은 웹사이트는 검색 엔진이 더 쉽게 크롤링하고 인덱싱할 수 있게 도와주며, 이는 결국 SEO 점수를 높이는 데 긍정적인 영향을 미칩니다. 결국 웹 접근성과 SEO는 '모두를 위한 웹'이라는 큰 목표 아래 시너지를 내는 셈입니다.

1. 의미 있는 HTML (Semantic HTML) 사용하기

웹 접근성과 SEO의 가장 기본이자 핵심입니다.

와 으로만 가득 찬 코드 대신, 각 요소의 의미를 살린 HTML 태그를 사용하세요.

,
,
,
,
,
등 구조적인 태그를 사용하여 웹 페이지의 논리적인 흐름을 명확하게 제시합니다. 스크린 리더는 이 태그들을 통해 페이지 구조를 파악하고, 검색 엔진은 콘텐츠의 중요도를 이해합니다.

2. 이미지에는 `alt` 속성을!

이미지는 웹사이트의 시각적인 매력을 더하지만, 시각 장애인에게는 장벽이 될 수 있습니다. 이때 alt (대체 텍스트) 속성이 구세주처럼 등장합니다.

alt 속성에는 이미지가 담고 있는 정보를 명확하고 간결하게 설명해 주세요. 스크린 리더는 이 텍스트를 읽어주며, 이미지가 로드되지 않았을 때도 사용자가 내용을 파악할 수 있게 합니다.
SEO 측면에서도 중요합니다! 검색 엔진은 alt 텍스트를 통해 이미지의 내용을 파악하고, 관련성 높은 검색어에 이미지 검색 결과로 노출시킬 수 있습니다.

3. 명확한 제목 계층 (Heading Structure) 활용하기

신문 기사를 읽는다고 생각해 보세요. 헤드라인(H1), 주요 소제목(H2), 세부 소제목(H3) 등이 체계적으로 구성되어 있죠? 웹 페이지도 마찬가지입니다.

태그는 페이지당 하나만 사용하여 가장 중요한 제목을 나타내세요.
,
,
등을 순서에 맞게 사용하여 콘텐츠의 논리적인 계층을 만듭니다.
이는 스크린 리더 사용자가 페이지를 빠르게 탐색하는 데 도움을 주며, 검색 엔진 또한 이 제목 태그들을 통해 콘텐츠의 핵심 주제와 중요도를 파악합니다.

4. 키보드 탐색 가능하게 만들기

마우스 없이 키보드만으로 웹사이트를 이용하는 사용자가 많습니다. (장애인, 혹은 단순히 마우스 사용이 불편한 경우)

모든 인터랙티브 요소(버튼, 링크, 입력 필드 등)는 Tab 키로 이동 가능해야 합니다.
포커스(Focus) 시각적 표시(:focus CSS 속성)를 명확하게 해주어 사용자가 현재 어디에 있는지 알 수 있도록 해야 합니다.
드롭다운 메뉴나 모달창 등 복잡한 UI는 키보드 조작이 가능하도록 WAI-ARIA(Web Accessibility Initiative - Accessible Rich Internet Applications) 속성을 적절히 활용하는 것이 좋습니다.

5. 반응형 웹 디자인

오늘날 대부분의 웹 트래픽은 모바일에서 발생합니다.

다양한 디바이스(PC, 태블릿, 모바일)에서 레이아웃이 깨지지 않고 최적화된 형태로 보여지는 반응형 웹 디자인은 기본 중의 기본입니다.
이는 모바일 사용자 경험을 향상시킬 뿐만 아니라, 검색 엔진이 모바일 친화적인 웹사이트에 더 높은 점수를 부여하므로 SEO에도 큰 영향을 미칩니다.

부록

웹 접근성과 SEO는 꾸준한 관심과 노력이 필요한 분야입니다. 다행히 우리를 도와줄 훌륭한 도구들이 많습니다.

Lighthouse (크롬 개발자 도구): 웹 페이지의 성능, 접근성, SEO, 권장 사항 등을 종합적으로 분석하고 점수를 매겨줍니다. 이 도구에서 제공하는 가이드를 따라가다 보면 많은 개선점을 찾을 수 있을 겁니다.
Google Search Console: 구글 검색 엔진이 여러분의 웹사이트를 어떻게 인식하고 있는지 보여줍니다. 크롤링 오류, 색인 현황, 검색어별 노출 통계 등 SEO와 관련된 중요한 정보를 얻을 수 있습니다.
Naver Search Advisor: 네이버 검색에 특화된 도구입니다. 사이트맵 제출, 로봇 배제 표준(robots.txt) 설정 등 국내 사용자들에게 중요한 SEO 정보를 제공합니다.
WAVE (Web Accessibility Evaluation Tool): 웹 접근성 오류를 시각적으로 보여주는 도구입니다. 특정 페이지의 접근성 문제점을 빠르게 파악하고 수정하는 데 유용합니다.

보안 헤더 & 암호화로 철통 방어하기

Mon, 21 Jul 2025 02:24:07 GMT

들어가기 전

인터넷으로 데이터를 주고받을 때, 마치 엽서를 우편함에 넣어 보내는 것과 같아요. 누구든 중간에 엽서 내용을 볼 수 있죠. 이처럼 중요한 데이터가 안전하게 전달되도록 돕는 것이 바로 보안 헤더와 암호화입니다.

보안 헤더는 웹 브라우저와 서버가 서로 지켜야 할 약속(규칙)을 정하는 역할을 해요. 예를 들어, '이 웹사이트는 무조건 HTTPS로만 접속해야 해!' 같은 규칙을 알려주는 거죠.

암호화는 데이터 내용을 알아볼 수 없도록 꽁꽁 싸매는 거예요. 마치 비밀 편지를 암호로 쓰는 것처럼요. 이렇게 하면 제3자가 중간에 데이터를 가로채도 내용을 읽을 수 없게 됩니다.

1. HTTPS와 TLS: 안전한 웹의 시작

1-1. SSL vs TLS: 이름은 다르지만 결국 '그 기술'이 발전한 거예요!

웹을 안전하게 지켜주는 암호화 기술에는 SSL(Secure Sockets Layer) 과 TLS(Transport Layer Security) 가 있어요. 쉽게 말해, SSL이 먼저 나왔고, TLS는 SSL의 업그레이드 버전이라고 생각하면 돼요.

우리가 흔히 'SSL 인증서'라고 부르지만, 실제로 웹 통신을 암호화하는 건 이 인증서를 서버에 설치해서 TLS 프로토콜을 사용하게 하는 거예요.

SSL: 1990년대 초에 처음 나왔지만, 보안에 약점(POODLE 같은 공격)이 발견돼서 지금은 거의 쓰지 않아요. 오래된 기술이죠.
TLS: SSL을 더욱 강력하고 빠르게 만든 후속 버전이에요. 지금은 대부분의 웹사이트가 TLS 1.2를 쓰고 있고, 가장 최신 버전인 TLS 1.3은 훨씬 더 빠르고 안전해서 적극 권장되고 있어요.

프로토콜 이름	주요 특징	지금 사용해도 될까요?
SSL 3.0	초창기 암호화 기술	사용하지 마세요! 보안에 취약해요.
TLS 1.0	SSL 3.0을 개선했지만 여전히 오래된 기술	아주 오래된 환경이 아니라면 사용하지 마세요.
TLS 1.2	강력한 암호화, 빠르고 안전함	지금 대부분의 웹사이트에서 쓰고 있어요!
TLS 1.3	더 빠르고, 더 안전한 최신 기술	가장 추천하는 버전이에요!

💡 웹사이트 서버에서는 최소한 TLS 1.2 이상을 사용해야 하고, 가능하면 TLS 1.3만 허용해서 최고 수준의 보안과 속도를 확보하는 것이 좋아요.

1-2. HTTPS 적용 과정: 내 웹사이트에 자물쇠 달아주기

HTTPS는 웹사이트 주소 앞에 🔓'자물쇠' 모양이 생기고 'https://'로 시작하게 하는 거예요. 이걸 적용하려면 다음 과정을 거쳐야 해요.

인증서 발급받기:
- Let's Encrypt (무료), DigiCert, GlobalSign (유료) 같은 전문 기관에서 '우리 웹사이트가 진짜예요!'라는 것을 증명하는 인증서를 발급받아요.
- 예시: Let's Encrypt의 Certbot 사용 (리눅스 명령어)
```
sudo certbot certonly --standalone -d example.com -d www.example.com
```
  이 명령어를 입력하면 example.com과 www.example.com 도메인에 대한 인증서를 자동으로 발급받을 수 있어요. 발급된 인증서는 fullchain.pem(인증서 파일)과 privkey.pem(개인키 파일)이라는 이름으로 저장됩니다.

서버에 인증서 설치하기:

발급받은 인증서 파일을 웹사이트가 돌아가는 서버에 설정해 줘야 해요. 서버 종류마다 설정 방법이 조금씩 달라요.

NGINX (엔진엑스) 서버 예시:

server {
  listen 443 ssl; # 443 포트로 HTTPS 접속을 받아요
  server_name example.com; # 이 도메인에 적용해요

  ssl_certificate       /etc/letsencrypt/live/example.com/fullchain.pem; # 인증서 파일 위치
  ssl_certificate_key   /etc/letsencrypt/live/example.com/privkey.pem; # 개인키 파일 위치

  ssl_protocols         TLSv1.2 TLSv1.3; # TLS 1.2와 1.3만 허용해요
  ssl_ciphers           HIGH:!aNULL:!MD5; # 안전한 암호화 방식만 사용해요

  # 기타 필요한 설정들...
}

Apache (아파치) 서버 예시:

 # 443 포트로 HTTPS 접속을 받아요
  ServerName example.com # 이 도메인에 적용해요

  SSLEngine on # SSL/TLS 기능을 켜요
  SSLCertificateFile    /etc/letsencrypt/live/example.com/fullchain.pem # 인증서 파일 위치
  SSLCertificateKeyFile /etc/letsencrypt/live/example.com/privkey.pem # 개인키 파일 위치

  SSLProtocol all -SSLv3 -TLSv1 -TLSv1.1 # SSLv3, TLSv1, TLSv1.1은 사용하지 않아요
  SSLCipherSuite HIGH:!aNULL:!MD5 # 안전한 암호화 방식만 사용해요

  # 기타 필요한 설정들...

Express.js (Node.js) 웹 애플리케이션 예시:

const fs = require('fs');
const https = require('https'); // HTTPS 모듈을 불러와요
const express = require('express');

const app = express();
const options = {
  key: fs.readFileSync('/etc/letsencrypt/live/example.com/privkey.pem'), // 개인키 파일 읽기
  cert: fs.readFileSync('/etc/letsencrypt/live/example.com/fullchain.pem'), // 인증서 파일 읽기
};

https.createServer(options, app).listen(443, () => { // HTTPS 서버를 443 포트로 시작
  console.log('HTTPS server running on port 443');
});

인증서 자동 갱신 설정하기:
- Let's Encrypt 인증서는 90일마다 갱신해야 해요. 매번 수동으로 하면 너무 번거롭겠죠? certbot renew 명령을 컴퓨터가 알아서 실행하도록 설정(크론탭 등록)해두면 편리해요.
- 자동 갱신 명령어 (리눅스)
```
0 0 * * * certbot renew --quiet
```
  이 명령은 매일 자정(새벽 0시)에 certbot renew를 조용히 실행하라는 뜻이에요.
제대로 적용되었는지 확인하기:
- openssl이라는 명령어를 사용해서 여러분의 웹사이트가 어떤 TLS 버전을 쓰고 있는지, 암호화 강도는 어떤지 확인할 수 있어요.
```
openssl s_client -connect example.com:443 -tls1_2
```
- 또는 SSL Labs의 SSL Server Test 같은 온라인 도구를 사용하면 훨씬 쉽게 웹사이트의 HTTPS 설정을 점검해 볼 수 있어요.

Tip: 사람들이 http://example.com으로 접속해도 자동으로 https://example.com으로 연결되도록 서버 설정을 해주는 걸 잊지 마세요! (NGINX에서는 return 301 https://$host$request_uri; 같은 설정을 사용해요.)

2. HTTP/2 & HTTP/3: 웹사이트를 더 빠르고 안전하게!

HTTP는 웹에서 데이터를 주고받는 규칙인데, 버전이 계속 업그레이드되고 있어요. 최신 버전들은 보안과 속도를 모두 잡았답니다.

2-1. HTTP/2의 보안 및 성능 이점

HTTP/2는 기존 HTTP/1.1보다 웹페이지를 훨씬 빠르게 로딩할 수 있게 해줘요.

멀티플렉싱: 한 번에 여러 개의 요청(데이터)을 주고받을 수 있어요. 마치 하나의 도로에서 여러 대의 차가 동시에 달리는 것처럼요. 덕분에 암호화 과정(TLS 핸드쉐이크)에서 생기는 시간 지연을 줄일 수 있어요.
헤더 압축(HPACK): 웹 통신 시 필요한 부가 정보(헤더)를 꽉 압축해서 보내요. 덕분에 네트워크 데이터를 절약할 수 있죠.
서버 푸시: 웹페이지를 보여줄 때 필요한 이미지나 스타일(CSS), 스크립트(JS) 같은 파일들을 클라이언트(사용자 웹브라우저)가 요청하기도 전에 서버가 미리 보내줘요. 페이지가 훨씬 빨리 뜨겠죠?

2-2. HTTP/3 & QUIC: 차세대 웹의 주인공

HTTP/3는 아직 초기 단계이지만, 앞으로 웹의 표준이 될 강력한 프로토콜이에요.

**QUIC(퀵)**이라는 새로운 통신 규칙(UDP 기반)을 사용해요. 기존보다 연결 지연 시간을 확 줄여주고, 한 번 접속했던 웹사이트에 다시 방문할 때는 훨씬 더 빨리 데이터를 주고받을 수 있도록 해줘요 (이걸 0-RTT 연결이라고 불러요).
HTTP/2의 장점들(멀티플렉싱, 헤더 압축)을 그대로 가지고 있으면서, 네트워크 상태가 안 좋을 때(패킷 손실)도 데이터를 더 빨리 복구할 수 있는 능력이 있어요.

2-3. 내 웹사이트에 HTTP/2와 HTTP/3 적용하기

여러분의 웹사이트에 HTTP/2와 HTTP/3를 적용하려면, 사용 중인 서버가 이 기술들을 지원해야 해요.

1) NGINX (엔진엑스)에서 HTTP/2 활성화하기

server {
  listen 443 ssl http2; # 443 포트로 HTTPS와 HTTP/2를 함께 사용해요
  server_name example.com;

  ssl_certificate       /etc/letsencrypt/live/example.com/fullchain.pem;
  ssl_certificate_key   /etc/letsencrypt/live/example.com/privkey.pem;

  ssl_protocols         TLSv1.2 TLSv1.3;
  add_header            Alt-Svc 'h2=":443"'; # 클라이언트에게 HTTP/2를 지원한다고 알려줘요
}

listen ... http2; 부분이 HTTP/2를 켜는 설정이에요.

2) NGINX (엔진엑스)에서 HTTP/3 (QUIC) 활성화하기

server {
  listen 443 ssl http2;
  listen 443 quic reuseport; # QUIC 프로토콜을 사용하고, 443 포트를 재사용해요
  server_name example.com;

  ssl_certificate       /etc/letsencrypt/live/example.com/fullchain.pem;
  ssl_certificate_key   /etc/letsencrypt/live/example.com/privkey.pem;

  ssl_protocols         TLSv1.3; # QUIC는 TLS 1.3만 사용해요
  ssl_prefer_server_ciphers off;
  ssl_ciphers           TLS_AES_128_GCM_SHA256; # 사용할 암호화 방식

  add_header Alt-Svc 'h3-23=":443"'; # 클라이언트에게 HTTP/3를 지원한다고 알려줘요
  add_header QUIC-Status $quic;
}

HTTP/3(QUIC)를 사용하려면 NGINX와 OpenSSL 버전에 특별한 설정이 필요할 수 있어요.

3) Apache (아파치)에서 HTTP/2 활성화하기

LoadModule http2_module modules/mod_http2.so # HTTP/2 모듈을 불러와요
Protocols h2 http/1.1 # HTTP/2를 기본으로 사용하고, 없으면 HTTP/1.1을 사용해요


  ServerName example.com

  SSLEngine on
  SSLCertificateFile    /etc/letsencrypt/live/example.com/fullchain.pem
  SSLCertificateKeyFile /etc/letsencrypt/live/example.com/privkey.pem

  ProtocolsHonorOrder On
  Protocols h2 h2c http/1.1

mod_http2 모듈을 로드하고 Protocols 지시자로 우선순위를 정해줘요.

4) HTTP/3 지원 고려사항

Apache에서 HTTP/3는 아직 개발 중이어서 완벽하게 지원되진 않아요. 만약 HTTP/3를 웹사이트에 적용하고 싶다면, Cloudflare, Fastly, Google Cloud CDN 같은 CDN 서비스를 이용하는 것이 훨씬 쉽고 안정적인 방법이에요. 이런 서비스들이 대신 HTTP/3를 적용해 줄 거예요.

3. 웹사이트를 더 안전하게 만드는 '보안 헤더'들

웹사이트의 보안을 강화하기 위해 웹 브라우저에게 특별한 지시를 내리는 것이 바로 보안 관련 HTTP 헤더예요. 이것들을 설정하면 여러 가지 웹 공격을 막을 수 있어요.

3-1. Strict-Transport-Security (HSTS)

역할: 이 웹사이트는 무조건 HTTPS로만 접속해야 한다고 강제하는 헤더예요. 한번 접속한 사용자의 브라우저는 앞으로 이 사이트에 접속할 때 항상 HTTPS로만 연결하려고 시도해요. 중간에서 공격자가 HTTP로 유도하는 것을 막아줘요.
설정 예시:
```
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
```
- max-age=31536000: 1년(3153만 6천 초) 동안 이 규칙을 기억하라는 뜻이에요.
- includeSubDomains: 이 도메인의 모든 하위 도메인(예: https://www.google.com/search?q=blog.example.com)에도 적용하라는 뜻이에요.
- preload: 이 사이트가 HSTS를 사용한다는 정보를 미리 웹 브라우저에 등록하도록 요청하는 거예요.

3-2. X-Frame-Options

역할: 웹사이트가 다른 사이트에 '액자(프레임)' 형태로 삽입되는 것을 막아요. 이걸 안 막으면 클릭재킹(Clickjacking) 같은 공격에 취약해질 수 있어요. (클릭재킹은 사용자가 의도치 않게 악성 버튼을 누르게 만드는 공격이에요.)

설정 예시:

X-Frame-Options: DENY # 아예 다른 사이트에 삽입될 수 없게 해요
# 또는
X-Frame-Options: SAMEORIGIN # 같은 도메인 내에서만 삽입을 허용해요

3-3. X-Content-Type-Options

역할: 웹 브라우저가 파일 형식을 멋대로 판단하는 것을 막아요. 이걸 MIME 스니핑 방지라고 하는데, 만약 웹사이트에 이미지 파일을 올렸는데 브라우저가 이걸 스크립트 파일로 오해해서 실행해버리면 보안 문제가 생길 수 있겠죠? 그걸 막아줘요.
설정 예시:
```
X-Content-Type-Options: nosniff
```
- nosniff: '절대 멋대로 판단하지 말고, 서버가 보낸 Content-Type 헤더를 그대로 믿어라!'는 뜻이에요.

3-4. Referrer-Policy

역할: 사용자가 어떤 링크를 클릭해서 다른 사이트로 이동할 때, 이전에 어떤 페이지에서 왔는지(참조 정보, Referrer)를 알려줄지 말지를 제어해요. 개인 정보 노출을 줄이는 데 도움이 돼요.
설정 예시:
```
Referrer-Policy: strict-origin-when-cross-origin
```
- strict-origin-when-cross-origin: 다른 출처(도메인)로 이동할 때는 전체 URL 대신 https://example.com처럼 도메인만 보내주고, 같은 출처로 이동할 때는 전체 URL을 보내줘요.

3-5. Permissions-Policy (구 Feature-Policy)

역할: 웹페이지에서 카메라, 마이크, GPS 같은 브라우저의 특정 기능들을 사용할 수 있는지 없는지를 정하는 헤더예요. 악성 웹사이트가 사용자의 동의 없이 기능을 사용하는 것을 막을 수 있어요.
설정 예시:
```
Permissions-Policy: camera=(), geolocation=(self)
```
- camera=(): 이 웹사이트에서는 카메라를 사용할 수 없도록 해요.
- geolocation=(self): 이 웹사이트 자체(self)에서만 위치 정보(geolocation)를 사용할 수 있도록 해요. 다른 외부 스크립트가 마음대로 위치 정보를 가져가는 것을 막아요.

3-6. Content-Security-Policy (CSP)

역할: 웹사이트에서 불러오는 스크립트, 스타일, 이미지 같은 모든 자원들이 어떤 출처(도메인)에서만 허용될지를 아주 세밀하게 제어할 수 있는 가장 강력한 보안 헤더 중 하나예요. 크로스 사이트 스크립팅(XSS) 공격 같은 것을 막는 데 효과적이에요.
설정 예시:
```
Content-Security-Policy: default-src 'self'; img-src 'self' https://cdn.example.com; script-src 'self';
```
- default-src 'self': 기본적으로 모든 자원은 '우리 웹사이트(self)'에서만 불러올 수 있도록 해요.
- img-src 'self' https://cdn.example.com: 이미지는 우리 웹사이트와 https://cdn.example.com이라는 CDN에서만 불러올 수 있도록 해요.
- script-src 'self': 스크립트는 우리 웹사이트에서만 불러올 수 있도록 해요.

4. 데이터 암호화 전략: 꼼꼼하게 잠그기

데이터는 두 가지 주요 시점에서 암호화가 필요해요. 하나는 데이터를 주고받을 때이고, 다른 하나는 데이터를 저장해 둘 때예요.

4-1. 전송 중 암호화 (In Transit)

필수: HTTPS/TLS를 사용하는 것이 핵심이에요. 웹 브라우저와 서버 간에 데이터가 이동하는 동안 아무도 훔쳐보지 못하도록 암호화하는 거죠.
TLS 버전: 위에서 설명했듯이, TLS 1.2 이상을 사용하는 것이 중요하고, 최신 버전인 TLS 1.3은 보안과 성능 면에서 가장 뛰어나요.

4-2. 저장 시 암호화 (At Rest)

데이터베이스 암호화: 웹사이트에서 사용하는 데이터베이스에 저장된 모든 데이터를 암호화하는 거예요. TDE(Transparent Data Encryption) 같은 기술을 사용하면 데이터베이스에 저장된 데이터 자체를 암호화해서, 만약 데이터베이스 파일이 유출되더라도 내용을 알 수 없게 만들 수 있어요.
필드 암호화: 주민등록번호, 계좌번호, 전화번호처럼 특히 민감한 정보는 데이터베이스 전체를 암호화하는 것 외에도 해당 필드만 따로 암호화해서 저장하는 것을 고려할 수 있어요.
암호화 알고리즘: 데이터를 암호화할 때는 AES-256, RSA-2048처럼 이미 검증되고 널리 사용되는 강력한 암호화 방식을 사용해야 해요.

Tip: 비밀번호는 절대로 원래 모습 그대로(평문) 저장하면 안 돼요! bcrypt, Argon2처럼 강력한 해시 함수를 사용해서 비밀번호를 암호화된 형태로 저장해야 해요. 이렇게 하면 만약 데이터베이스가 털려도 사용자 비밀번호가 바로 유출되지 않아요.

부록: 더 깊이 알아보기

A. 보안 헤더 Express.js에서 쉽게 설정하기

Node.js의 Express.js를 사용한다면, 다음과 같이 미들웨어를 통해 보안 헤더를 한 번에 설정할 수 있어요.

app.use((req, res, next) => {
  res.setHeader('Strict-Transport-Security', 'max-age=31536000; includeSubDomains; preload');
  res.setHeader('X-Frame-Options', 'DENY');
  res.setHeader('X-Content-Type-Options', 'nosniff');
  res.setHeader('Referrer-Policy', 'strict-origin-when-cross-origin');
  res.setHeader('Permissions-Policy', 'camera=(), geolocation=(self)');
  // Content-Security-Policy는 내용이 길어져 별도의 모듈을 사용하는 것이 좋아요.
  next();
});

B. 암호화에 유용한 도구들

OpenSSL: SSL/TLS 인증서를 만들거나, 웹사이트의 TLS 설정을 테스트할 때 유용하게 쓰이는 강력한 도구예요.
bcrypt, argon2: 비밀번호를 안전하게 암호화(해시)할 때 사용하는 라이브러리예요.
Vault: 민감한 정보(비밀키, API 키, 인증서 등)를 안전하게 관리하고 배포하는 데 사용되는 도구예요.

C. 용어 정리: SSL vs TLS (더 자세히 알아볼까요?)

많은 사람이 SSL과 TLS를 섞어 쓰는 이유가 뭘까요? 그리고 이 둘은 정확히 어떻게 다른 걸까요?

역사적 배경

SSL 1.0: 넷스케이프에서 개발했지만, 실제로 공개되지 않은 베타 버전이에요.
SSL 2.0 (1995년): 처음으로 공개된 버전이지만, 여러 보안 취약점이 발견되어 빠르게 사라졌어요.
SSL 3.0 (1996년): 보안이 많이 개선되었지만, POODLE 공격 같은 새로운 취약점 때문에 지금은 더 이상 사용하지 않아요.
TLS 1.0 (1999년): SSL 3.0을 기반으로 만들어졌고, 이름만 TLS로 바뀌었을 뿐 내부적으로는 SSL 3.0과 비슷해요. 호환성을 위해 이름만 바뀐 초기 TLS 버전이죠.
TLS 1.1 (2006년): 몇 가지 보안 문제가 해결되었어요.
TLS 1.2 (2008년): 지금 가장 널리 쓰이는 버전으로, SHA-256 같은 더 강력한 암호화 방식을 지원하기 시작했어요. 대부분의 웹사이트에서 표준으로 사용하고 있어요.
TLS 1.3 (2018년): 가장 최신 버전으로, 데이터를 주고받기 시작하는 과정(핸드셰이크)을 훨씬 짧게 만들어서 속도를 높였고, 보안적으로 취약한 암호화 방식들을 아예 없애버려서 보안성과 성능을 동시에 잡았어요.

주요 차이점

버전 협상: 웹 브라우저와 서버가 서로 어떤 TLS 버전을 지원하는지 확인하고, 가장 안전하고 최신 버전을 자동으로 선택해서 사용해요.
데이터 주고받는 과정(핸드셰이크) 구조: TLS 1.3은 웹 브라우저와 서버가 연결을 맺는 단계를 한 번(1-RTT)으로 줄여서 연결 속도가 훨씬 빨라졌어요.
암호화 방식: 오래된 SSL 3.0과 TLS 1.0은 약한 암호화 방식도 허용했지만, TLS 1.2/1.3은 GCM, ChaCha20-Poly1305처럼 강력하고 안전한 암호화 방식만 사용하도록 강제해요.
보안 강화: TLS 1.2부터는 데이터의 변조를 막는 기능이 강화되었고, TLS 1.3에서는 모든 데이터가 암호화되어 보안성이 크게 좋아졌어요.
암호화 스위트 축소: TLS 1.3은 안전하지 않은 암호화 방식들을 제거하고, 웹 브라우저가 이전에 방문했던 사이트에 더 빠르게 접속할 수 있도록 0-RTT 모드를 기본으로 지원해요.

실무에서 적용하는 팁

여러분 서버에서 SSLv2, SSLv3, TLS 1.0, TLS 1.1은 아예 사용하지 못하도록 설정하고, TLSv1.2와 TLSv1.3만 허용해야 해요.
암호화 방식(Cipher 스위트)도 OWASP나 Mozilla에서 권장하는 최신 기준에 맞춰 설정하세요.
정기적으로 SSL Labs나 testssl.sh 같은 온라인 도구를 사용해서 여러분의 웹사이트 TLS 설정이 제대로 되어 있는지, 혹시 취약점은 없는지 꼭 점검해야 해요.
발급받은 인증서가 만료되지 않았는지, 그리고 인증서 발급 기관(CA)이 신뢰할 수 있는 곳인지도 주기적으로 확인하는 게 좋아요.

D. 왜 아직도 'SSL'이라는 말을 많이 쓸까요? (용어 혼동의 역사)

기술적으로는 'TLS'가 맞는 표현인데 왜 아직도 'SSL'이라는 말을 많이 쓸까요? 몇 가지 이유가 있어요.

오랜 습관: 넷스케이프가 1990년대 초에 처음 개발한 암호화 기술이 'SSL'이었어요. 시간이 지나 'TLS'로 발전했지만, 사람들은 이미 'SSL'이라는 이름에 익숙해져 버렸죠. 한번 굳어진 용어는 쉽게 바뀌지 않아요.
인증서 판매 회사의 마케팅: 인증서를 판매하는 회사들은 처음부터 "SSL 인증서"라는 이름을 사용해서 마케팅을 해왔어요. 이 이름이 더 친숙하고, 오랫동안 사용되었기 때문에 지금도 많은 곳에서 "SSL 인증서"라는 브랜드를 고수하고 있어요.
기술 문서에서의 혼용: 웹 호스팅 가이드, 서버 관리 문서, 온라인 튜토리얼 등 많은 기술 문서에서도 정확한 명칭 대신 "SSL 인증서"라는 용어를 그대로 사용하는 경우가 많아요. 그래서 "SSL 인증서 설치"라고 검색하면 실제로는 TLS 1.2/1.3용 인증서 설치 방법이 나오는 것을 볼 수 있죠.

정리: '프로토콜 자체'를 이야기할 때는 TLS라는 용어를 쓰는 것이 정확해요. 하지만 '인증서'를 이야기할 때는 오랜 관습 때문에 SSL 인증서라는 표현도 많이 쓰인다는 점을 이해하시면 됩니다. 중요한 건 용어보다는 실제로 TLS 1.2 이상의 최신 버전을 적용하는 것이라는 점을 기억해주세요!

XSS 완전정복 & 입력 검증으로 안전한 웹 만들기

Mon, 21 Jul 2025 01:24:35 GMT

들어가기 전

웹사이트에서 검색창에 를 입력했는데, 클릭 한 번에 경고창이 뜬다면 놀라지 않을 수 없죠? 이처럼 공격자가 악성 스크립트를 삽입해, 다른 사용자의 브라우저에서 임의 코드를 실행하게 만드는 공격이 바로 XSS(Cross-Site Scripting) 입니다. XSS는 개인정보 탈취, 세션 쿠키 탈취, 피싱 페이지 삽입 등 치명적 보안 사고를 일으킬 수 있습니다.

이번 장에서는 XSS의 원리와 유형별 사례, 그리고 이를 막기 위한 입력 검증, 인코딩·이스케이프, CSP(Content Security Policy) 적용 방법을 실제 코드 예제와 함께 자세히 살펴보겠습니다.

1. XSS 기초: 왜 위험할까?

XSS는 공격 코드가 사용자 웹 페이지에서 실행되도록 만드는 공격입니다. 크게 두 가지 문제가 발생합니다:

세션 쿠키 탈취
- 공격 스크립트가 document.cookie를 통해 쿠키를 훔쳐, 외부 서버로 전송할 수 있습니다.
사용자 임의 조작
- DOM 변경, 키 입력 로깅, 피싱 폼 삽입 등 다양한 악성 행동이 가능해집니다.

💡 비유: XSS는 웹 페이지에 몰래 열린 작은 뒷문처럼, 공격자가 원하는 코드를 마음대로 들여놓고 실행할 수 있는 구멍입니다.

2. XSS 유형별 사례

2-1. Stored XSS (영구 저장형)

시나리오: 공격자가 게시판, 댓글, 프로필 입력란 등에

2-2. Reflected XSS (반사형)

시나리오: URL 파라미터나 폼 입력이 즉시 페이지에 반영되며, 그 값에 스크립트가 포함되면 공격이 실행됩니다.

예제:


검색 결과: "<%= req.query.q %>"

a href="https://myshop.com/search?q=" 링크 클릭 시 경고창 발생

2-3. DOM-based XSS (클라이언트 측)

시나리오: 자바스크립트가 URL hash, innerHTML 등으로 DOM을 직접 조작할 때, 공격 코드를 삽입합니다.

예제:

3. 방어 기법: 다양한 XSS 공격 차단하기

XSS 공격을 예방하려면 입력 단계부터 출력, 렌더링, 스크립트 실행 단계에 이르는 전 과정에서 방어해야 합니다. 아래 주요 기법들을 조합해 안전한 웹 페이지를 구축해 보세요.

3-1. 입력 검증(Validation)

화이트리스트 검증: 사용자가 입력할 수 있는 문자와 길이, 형식을 제한합니다.

// 예: 이름 입력은 영문·숫자만, 최대 30자
if (!/^[a-zA-Z0-9]{1,30}$/.test(name)) throw new Error('Invalid name');

블랙리스트은 보조용으로만 사용하고, 필수 입력 필드나 형식(이메일, URL 등)은 별도 정규식 검사하세요.

3-2. 출력 인코딩·이스케이프(Escaping)

HTML 인코딩: <, > 등 특수 문자를 <, > 처럼 변환합니다.

function escapeHTML(str) {
  return str.replace(/&/g, '&')
            .replace(//g, '>')
            .replace(/"/g, '"')
            .replace(/'/g, ''');
}
element.innerHTML = escapeHTML(userInput);

Attribute, URL, JavaScript 컨텍스트별 인코딩도 고려해야 합니다.

3-3. 자동 이스케이프 기능 활용

React(JSX), Vue, Angular 등의 프레임워크는 기본적으로 텍스트 바인딩 시 이스케이프를 적용합니다.
서버 템플릿 엔진(Handlebars, EJS 등)에서도 자동 인코딩 옵션을 활성화하세요.

3-4. HTML Sanitization

사용자가 HTML을 직접 입력해야 할 경우, DOMPurify 같은 검증된 라이브러리를 사용해 위험한 태그나 속성을 제거합니다.
```
const clean = DOMPurify.sanitize(userHtml);
container.innerHTML = clean;
```

3-5. 보안 HTTP 헤더 설정

X-XSS-Protection: IE/Edge 내장 XSS 필터 활용
```
X-XSS-Protection: 1; mode=block
```
X-Content-Type-Options: MIME 스니핑 방지
```
X-Content-Type-Options: nosniff
```
Referrer-Policy, Permissions-Policy 등도 함께 설정해 보안 강화

3-6. Content Security Policy (CSP)

엄격한 스크립트 소스 제어: 인라인 스크립트와 외부 도메인 로딩을 제한합니다.

app.use((req, res, next) => {
  res.setHeader('Content-Security-Policy',
    "default-src 'self'; script-src 'self' 'nonce-abc123'; style-src 'self';"
  );
  next();
});

Nonce/hash 기반 스크립트 허용: 인라인 스크립트 사용 시 nonce-... 를 스크립트 태그에 추가해, 오직 그 스크립트만 실행되게 합니다.

3-7. 서버 측 XSS 방어 추가 기법

서버 측에서도 XSS를 방어하기 위해 다음과 같은 방법을 적용할 수 있습니다.

3-7-1. 전역 출력 인코딩 적용

템플릿 엔진에서 사용자가 입력한 모든 데이터를 자동으로 HTML 이스케이프 설정

// 예: Express + EJS 설정
app.set('view engine', 'ejs');
// EJS는 <%= %> 구문에서 자동 HTML 이스케이프를 수행합니다.

3-7-2. 서버 측 Sanitization

서버에서 들어오는 HTML 또는 사용자 입력을 DOMPurify(Node 버전) 등으로 정제

const createDOMPurify = require('dompurify');
const { JSDOM } = require('jsdom');
const window = new JSDOM('').window;
const DOMPurify = createDOMPurify(window);

app.post('/submit', (req, res) => {
  const cleanHtml = DOMPurify.sanitize(req.body.userHtml);
  // cleanHtml을 저장 또는 렌더링
});

3-7-3. HTTP 응답 시 자동 헤더 적용

모든 응답에 보안 헤더를 일괄 설정해 XSS 취약점 노출을 줄임

app.use((req, res, next) => {
  res.setHeader('X-XSS-Protection', '1; mode=block');
  res.setHeader('X-Content-Type-Options', 'nosniff');
  next();
});

3-7-4. 라우터별 세부 방어 정책

중요한 데이터가 노출되는 라우터(Path)에 대해 추가 검증 및 제한 적용

app.get('/user/profile', (req, res) => {
  const safeBio = escapeHTML(req.user.bio);
  res.render('profile', { bio: safeBio });
});

부록

A. 주요 XSS 방어 함수·태그 정리

기법	코드/태그 예시	설명
HTML Escape	`<`, `>`, `&`	출력 시 특수문자 인코딩
textContent	`el.textContent = userInput`	DOM 삽입 시 자동 이스케이프
CSP Header	`Content-Security-Policy` 헤더	외부 스크립트 로드 제어

B. 테스트 및 디버깅 도구

브라우저 개발자 도구: Console, Network 패널을 활용해 스크립트 로드/실행 여부 확인
Burp Suite, OWASP ZAP: 자동 스캔으로 XSS 취약점 탐지
Security Headers 웹 서비스: CSP, XSS Protection 헤더 설정 상태 검사

교차 출처(CORS) & 요청 위조(CSRF)

Thu, 17 Jul 2025 10:58:30 GMT

들어가기 전

로그인된 상태로 쇼핑몰에서 결제를 준비하던 중, 이상한 뉴스 사이트 한 곳만 방문했을 뿐인데 장바구니에 엉뚱한 상품이 담기거나 결제가 자동으로 이루어진다면 얼마나 당황스러울까요? 웹 브라우저는 기본 보안 정책으로 서로 다른 도메인 간 스크립트를 제한하지만, 여러 이유로 외부 리소드를 안전하게 받아와야 할 때가 있습니다. 이를 관리하는 것이 CORS(Cross-Origin Resource Sharing)이며, 동시에 사용자의 세션 쿠키를 노리는 악질 공격인 CSRF(Cross-Site Request Forgery) 에 주의해야 합니다.

이번 장에서는 교차 출처 리소스 공유 방법과 의도치 않은 요청이 내 세션을 악용하지 못하도록 차단하는 기법을 차근차근 살펴보겠습니다.

브라우저가 '서로 다른 출처'를 막는 이유는 사용자가 의도하지 않은 데이터 접근이나 조작을 방지하기 위해섭니다. 그러나 때로는 믿을 수 있는 외부 API에서 데이터를 가져와야할 필요가 있습니다. CORS는 그 균형을 맞추는 열쇠입니다.

브라우저가 외부 도메인에 요청을 보내면, 요청 헤더에 Origin:https://example.com 같은 정보를 추가합니다. 서버는 응답 헤더로 Access-Control-Allow-Origin: https://example.com 을 지정해, 이 출처에서 온 요청을 받아들이겠다고 명시하죠. 만약 서버가 허용하지 않은 출처에서 요청이 들어오면, 브라우저가 응답 내용을 차단하고 개발자 도구에 오류를 보여줍니다.

추가로, 복잡한 요청(커스텀 헤더나 비-단순 메서드)을 위해 브라우저는 사진 요청(preflight)이라는 OPTIONS 요청을 먼저 보내기도 합니다. 이때 Access-Control-Allow-Methods, Access-Control-Allow-Headers 등을 통해 허용 범위를 더욱 정교하게 설정할 수 있습니다.

# 클라이언트 요청 예시
GET /api/data HTTP/1.1
Host: api.external.com
Origin: https://myshop.com

# 서버 응답 예시
HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://myshop.com
Access-Control-Allow-Methods: GET,POST
Access-Control-Allow-Headers: Content-Type,Authorization
Access-Control-Allow-Credentials: true
Content-Type: application/json

{ "data": [...] }

Origin 헤더로 출처를 알리고, 서버가 Access-Control-Allow-* 헤더로 허용 범위를 명시합니다

💡 개발 시 * 와일드카드를 무분별하게 사용하면 보안이 약해집니다. 꼭 필요한 도메인만 명시하세요.

2. CSRF(Cross-Site Request Forgery) 공격

CSRF 공격은 사용자가 로그인한 세션을 이용해, 공격자가 의도한 동작을 실행하도록 만드는 기술입니다. 예를 들어, 같은 코드를 몰래 삽입하면, 사용자가 페이지를 방문하는 순간 브라우저가 자동으로 해당 요청을 보냅니다.

이 공격을 막으려면, 서버가 “이 요청이 정말 내 애플리케이션에서 온 것인가?”를 확인해야 합니다. 가장 대표적인 방법이 CSRF 토큰입니다. 로그인 시 서버는 세션과 별도로 긴 무작위 문자열(CSRF 토큰)을 생성해 사용자에게 전달합니다. 사용자가 폼을 제출하거나 AJAX 요청을 보낼 때 이 토큰을 함께 전송하게 하고, 서버는 요청의 토큰과 세션에 저장된 토큰을 비교합니다. 일치하면 정상, 그렇지 않으면 거부하는 것이죠.

또 다른 방법은 SameSite 쿠키 설정입니다. 쿠키에 SameSite=Lax 또는 Strict 속성을 넣으면, 외부 출처에서 자동으로 쿠키가 전송되지 않아 CSRF 공격을 근본적으로 방지할 수 있습니다.

마지막으로, AJAX 요청에는 반드시 커스텀 헤더(X-CSRF-Token 등)를 추가하도록 강제하고, 서버는 해당 헤더가 없으면 요청을 차단하는 전략도 있습니다. 이 방식은 단순 GET 요청으로는 흉내 낼 수 없는 보안 장벽을 만듭니다.

실제 코드 동작 흐름을 보며 더 자세히 알아보도록 하겠습니다.

공격 시나리오 (실제 코드 동작 흐름)

사용자가 https://myshop.com에 로그인해 세션 쿠키를 저장합니다.
같은 브라우저에서 공격자가 만든 악성 페이지를 방문합니다.
HTML에 숨겨진 태그나 자동 제출 스크립트가 포함되어 있어, 클릭 없이도 다음과 같은 요청이 전송됩니다
브라우저가 세션 쿠키를 포함해 요청을 보내고, 서버는 이를 정당한 요청으로 인식해 이체를 실행합니다.

방어 기법

1. CSRF 토큰 사용 (Synchronizer Token Pattern)

로그인 시 서버는 세션에 csrfToken을 저장하고, 페이지 렌더링 시 형태로 삽입합니다.
서버는 POST/PUT/DELETE 요청 시, 요청 바디나 헤더(X-CSRF-Token)에 담긴 토큰과 세션의 토큰을 비교합니다.

// 서버 측 (Express.js)
app.get('/form', (req, res) => {
  const token = generateSecureToken();
  req.session.csrfToken = token;
  res.render('form', { csrfToken: token });
});

app.post('/transfer', (req, res) => {
  if (req.body.csrfToken !== req.session.csrfToken) {
    return res.status(403).send('CSRF token mismatch');
  }
  // 정상 처리 로직
});

2. SameSite 쿠키 설정

쿠키에 SameSite=Lax 또는 Strict 속성을 추가하면, 크로스 사이트 컨텍스트에서 쿠키가 전송되지 않습니다.

Set-Cookie: sessionId=XYZ; HttpOnly; Secure; SameSite=Strict

3. Custom Header 확인

AJAX 요청에만 X-Requested-With: XMLHttpRequest 같은 커스텀 헤더를 포함하고, 서버는 이 헤더가 없으면 요청을 거부합니다.

fetch('/api/secure', {
  method: 'POST',
  headers: { 'X-Requested-With': 'XMLHttpRequest' }
});

4. Referer/Origin 헤더 검증

서버에서 req.get('Origin') 혹은 req.get('Referer')를 확인해, 허용된 도메인이 아니면 요청을 차단합니다.

SameSite 쿠키와 토큰 전략 심화

SameSite 속성은 크로스 사이트 요청에서 쿠키 전송을 제어하는 중요한 수단입니다. Strict로 설정하면 외부 링크나 폼 전송을 포함한 모든 크로스 사이트 요청에서 쿠키를 전송하지 않고, Lax는 안전한 GET이나 탭 전환에서만 쿠키를 허용합니다. None을 사용하려면 반드시 Secure 속성을 함께 추가해 HTTPS 환경에서만 동작하도록 해야 합니다.

Strict: 모든 크로스 사이트 요청에서 쿠키 전송 차단 (가장 안전) Lax: 안전한 HTTP 메서드(GET, HEAD, OPTIONS)만 쿠키 전송 허용 None: 모든 요청에 쿠키 전송 허용 (반드시 Secure와 함께 사용)

한편, Double Submit Cookie 방식은 CSRF 토큰을 쿠키와 요청 본문 또는 헤더에 동시에 포함해 검증합니다. 쿠키에 저장된 토큰과 요청에 담긴 토큰이 일치해야만 서버가 요청을 처리하죠. 이 방법은 서버에 별도 저장소를 두지 않고도 CSRF 방어를 할 수 있는 장점이 있습니다.

// 서버:
const token = generateSecureToken();
res.cookie('csrfToken', token, { SameSite: 'Lax', Secure: true });
res.send({ csrfToken: token });

// 클라이언트:
const token = getCookie('csrfToken');
fetch('/update', {
  method: 'POST',
  credentials: 'include',
  headers: { 'X-CSRF-Token': token }
});

// 서버 검증:
if (req.cookies.csrfToken !== req.get('X-CSRF-Token')) {
  return res.status(403);
}

마지막으로, Origin/Referer 헤더 검증도 유용합니다. HTTPS 사이트에서는 브라우저가 Origin 또는 Referer 헤더를 항상 보내므로, 서버는 이 값을 확인해 허용된 도메인에서 왔는지 검사할 수 있습니다. 다만, 프라이버시 모드나 프록시 사용 시 헤더가 누락될 수 있어 보완책이 필요합니다.

app.use((req, res, next) => {
  const origin = req.get('Origin') || req.get('Referer');
  if (!origin || !origin.startsWith('https://myshop.com')) {
    return res.status(403).send('Forbidden');
  }
  next();
});

인증·인가 & 세션 관리 A to Z

Wed, 16 Jul 2025 23:14:58 GMT

들어가기 전

내 장바구니에 담긴 물건만 내가 볼 수 있다고 믿고 쇼핑몰에 로그인했는데, 갑자기 다른 사람의 주문 내역이 쭉 보인다면 얼마나 당황스러울까요? 이런 끔찍한 상황은 단순한 화면 오류가 아니라, “이 사용자가 진짜 누구인지(Authentication,인증)” 그리고 “그 사용자에게 이 데이터를 보여줘도 괜찮은지(Authorization,인가)”를 결정하는 로직이 제대로 작동하지 않았다는 증거입니다. 게다가 한 번 로그인하면 페이지를 옮겨도 계속 내 계정으로 머물러 있어야 하는데, 이 ‘로그인 상태 유지’를 책임지는 것이 바로 세션(Session)입니다. 이처럼 누가 누구인지 확인하고, 그 사람에게 무엇을 허용할지를 결정하는 인증·인가의 원리부터, 로그인 상태를 안전하게 관리하는 세션과 쿠키의 비밀까지 알아보도록 하겠습니다.

1. 세션 vs 쿠키: 브라우저의 메모리와 서버의 기록실

웹 애플리케이션에서 로그인 버튼을 누르는 순간, 브라우저와 서버는 각자의 역할을 시작합니다.

쿠키(Cookie): 브라우저의 작은 메모장

브라우저는 ‘쿠키’라는 간단한 메모장에 세션 ID와 같은 인증용 식별자를 저장합니다. 이 메모장은 사용자의 기기에 안전하게 보관되며, 이후 동일한 도메인으로 요청을 보낼 때마다 브라우저가 자동으로 서버에 함께 전송합니다.

쿠키에 담기는 정보는 최소화해야 합니다(세션 ID만!).
주요 보안 속성(HttpOnly, Secure, SameSite)을 적절히 설정하면 XSS, CSRF, 중간자 공격으로부터 어느 정도 방어할 수 있습니다.
쿠키 하나로 “나는 이미 로그인 상태”라는 사실을 서버에 알려주는 역할을 합니다.

Cookie 주요속성

Name / Value : 식별자와 값
Domain / Path : 어느 요청에 포함될 지 범위 지정
Expires / Max-Age : 쿠키 유효 기간 지정 -> 세션 타임 아웃 설정
HttpOnly : 자바스크립트 접근 차단 -> XSS 공격 완화
Secure : HTTPS 연결에서만 전송 -> 중간자 공격 방어
SameSite : CSRF 방어 정책

세션(Session): 서버의 기록실

서버는 클라이언트가 보낸 세션 ID를 키(Key) 삼아, 내부의 세션 저장소에서 사용자별 상태 정보(프로필, 권한, 로그인 시간 등)를 관리합니다. 세션 저장소는 메모리나 Redis, 데이터베이스 등 어디든 될 수 있고, 다음과 같은 흐름으로 작동합니다:

사용자가 로그인 → 서버가 고유 세션 ID 생성
서버는 세션 저장소에 { sessionId: { userId, roles, ... } } 형태로 저장
브라우저가 이후 요청에 세션 ID 쿠키를 자동 포함
서버는 세션 ID로 사용자를 식별하고, 저장된 상태 정보를 꺼내서 한 번만 로그인해도 계속 인증된 상태 유지

정리

쿠키는 클라이언트(브라우저)에 저장되는 ‘인증용 키’
세션은 서버에 저장되는 ‘인증된 사용자 정보’

💡 쿠키 : 놀이공원에서 받는 손목 밴드로 "입장권이 유효하다"는 표시 세션 : 그 손목밴드를 보고 "이 손목밴드는 VIP 티켓이야" 혹은 "어린이용 입장권이야" 같은 상세 정보를 관리

2. 인증 (Authentication) : 신원 확인의 모든 것

인증은 "당신은 누구인가요"라는 질문에 답하는 과정입니다. 아이디, 비밀번호,OTPm 소셜 로그인 등 다양한 방법으로 사용자의 신원을 검증하죠, 인증이 제대로 작동하지 않으면 악의적인 사용자가 타인의 계정에 접근해 개인정보를 탈취하거나 불법 행위를 할 수 있습니다.

인증하는 방식에는 크게 세션(Session), JWT 방식이 있습니다.

2.1 세션 기반 인증

클라이언트 : POST /login with {username, password}
서버 : 사용자 정보 검증 -> 성공 시 세션 ID 생성 및 Set-Cookie: sessinId=XYZ; HttpOnly 응답
브라우저 : 쿠키에 세션 ID 저장
이후 요청 : 자동으로 Cookie: sessionId=XYZ 포함
서버 : 세션 저장소에서 ID 조회 후 사용자 확인

💡 비밀번호는 해시 (SHA-256, bcrypt 등)로 저장하고, 로그인 시 비교해야 안전합니다.

2.2 JWT 기반 인증

클라이언트 : Post /login with {username, password}
서버 : 사용자 정보 검증 -> 성공 시 JWT 생성 후 응답 본문 또는 Authorization 헤더 (Bearer )에 토큰 전달
클라이언트 : 로컬 스토리지나 쿠키 (HttpOnly, Secure)에 토큰 저장
이후 요청 : Authorization: Bearer 헤더 포함
서버 : 토큰 유효성(서명, 만료) 검증 후 사용자 정보 추출

💡 JWT는 무상태(stateless)로 확장성이 뛰어나지만, 탈취 시 위험하므로 Secure, HttpOnly 속성과 짧은 만료 시간을 권장합니다.

3. 인가 (Authorization) : 권한 관리의 정석

인가란 사용자가 '어떤 행동'을 할 수 있는지를 결정하는 과정입니다. 한 집에 손님을 초대하면 현과문을 열어주는 것이 인증이라면, 집 안 어디까지 들어갈 수 있는지를 정하는 것이 인가입니다. 예를 들어, 손님에게 거실은 모두 개방하지만, 침실이나 금고가 있는 방은 금지 구역으로 설정할 수 있습니다. 인가를 설정하는 방법에는 역할 기반(RBAC), 속성 기반 (ABAC), 정책 기반 (Policy-Based Access Contorl) 이 있습니다. 각각의 특징에 대해서 한 번 알아볼까요?

3.1 역할기반 인가 (RBAC, Role-Based Access Control)

역할기반 인가는 회사 조직도처럼 사람마다 역할(role)을 부여하는 방식입니다. 예를 들면 관리자(Admin)은 모든 메뉴에 접속이 가능하고, 일반 사용자 (User) 는 내 정보만 조회 가능하도록 하는 거죠. 설계가 단순하고 이해하기 쉽다는 장점은 있지만 역할이 많이질 수록 관리가 복잡해지는 단점이 있습니다.

3.2 속성기반 인가 (ABAC, Attribute-Based Access Control)

속성기반 인가는 사용자, 리소스, 환경의 속성(Attribute)을 조합해 권한을 결정합니다. 예를 들면 나이는 18세 이상이면서 구독 등급은 프리미엄인 사용자만 동영상 시청 가능 이렇게 설정하는 거죠. 보통 조건문 형태로 코드나 미들웨어 안에 직접 구현 되는 경우가 많습니다. ABAC는 세밀한 정책 운영이 가능하지만 정책 작성과 유지보수가 다소 까다로울 수 있습니다.

3.3 정책기반 인가 (Policy-Based Access Control)

정책기반 인가는 중앙 정책 엔진 (Policy Engine)을 두고, 선언형(Declarative) 규칙을 정의해 런타임에 평가합니다. 예를 들면 휴가 중인 직원은 업무 시스템 접근 불가와 같은 동적인 규칙을 적용하는데요, 코드 수정 없이 수정 가능하고 중앙에서 일관된 정책을 관리, 버전 관리에는 뛰어나지만 정책 엔진 도입과 학습에 시간이 필요하게 됩니다.

- id: forbid_on_leave
  description: "휴가 중인 직원은 시스템 접근 금지"
  target:
    attributes:
      user.status: "on_leave"
  effect: "deny"

💡 작은 프로젝트나 단순 서비스라면 RBAC을, 다양한 조건과 복잡한 요구사항이 있으면 ABAC나 , 정책 기반 방식을 고려해야합니다.

4. 세션 보안 : 공격 시나리오 방어 전략

웹 서비스의 세션은 사용자 경험을 매끄럽게 하는 중요한 기능이지만, 이를 노리는 다양한 공격 기법이 있습니다. 네 가지 주요 세션 공격과 대응 방안에 대해서 알아보겠습니다.

4.1 세션 고정 (Session Fixation)

공격자가 미리 발급받은 세션 Id를 피해자에게 전달하여, 피해자가 로그인하면 공격자가 같은 세션을 통해 접근.

대응 방안

로그인 성공 시 기존 세션을 무효화하고 항상 새로운 세션 ID를 발급합니다.
SameSite=Lax 또는 Strict로 외부 사이트에서 쿠키가 전송되지 않도록 설정합니다.

4.2 세션 탈취 (Session Hijacking)

공격자가 네트워크 스니핑, XSS 등을 통해 사용자의 세션 쿠키를 훔쳐서, 그 쿠키를 사용해 로그인 우회

대응 방안

HttpOnly 속성으로 자바스크립트가 쿠키에 접근하지 못하도록 차단하여 XSS 공격을 원화합니다.
Secure 속성으로 HTTPS 연결에서만 쿠키가 전송되게 합니다.
Content Security Policy(CSP)와 철저한 입력 검증으로 XSS 근본 방어를 강화합니다.

4.3 세션 재생 (Session Replay)

공격자가 이전에 가로챈 세션 ID나 요청 데이터를 재전송하여 세션을 재 사용. 예) 로그아웃 이후에도 동일한 요청을 반복하면 여전히 유효한 세션으로 인식 될 수 도 있음

대응 방안

토큰 일회용성(Nonce) 을 도입해, 각 요청에 고유 토큰을 포함하고 검증 후 무효화합니다.
세션 사용 이력을 기록하고, 예기치 않은 재전송 요청이 감지되면 세션을 종료합니다.

4.4 세션 사이드재킹(Session Sidejacking)

공격자가 공개 Wi-fi같은 안전하니 않은 네트워크 패킷 스니핑 도구를 사용해 세션 쿠키를 가로채로 이를 악용

대응 방안

모든 트랙픽을 HTTPS로 암호화하여 중간자 (Main-in-the-Middle) 공격을 방지합니다.
세션 타임아웃(유효 시간)을 짧게 설정하여, 탈취된 세션을 사용할 수 있는 시간을 최소화 합니다.

💡 중요한 API호출 (환전, 결제 등)에는 재인증(비밀번호 재입력, OTP)을 요구해 보안을 한층 강화하세요.

부록 - JWT (Json Web Token)

도입 배경

전통적인 세션 기반 인증은 서버에 사용자 상태를 저장하고 관리하기 때문에, 서버 스케일링 (서버 추가 확장)이 어려울 수 있습니다. 특히 마이크로서비스 아키텍처나 서버리스 환경에서는 무상태(stateless) 인증이 더 유연하죠. 이때 등장한 것이 바로 JWT입니다. JWT는 서버가 상태를 저장하지 않아도, 자체적으로 사용자 정보를 담은 토큰을 클라이언트에 보내고, 매 요청에 그 토큰이 포함되어 인증 정보를 검증합니다.

JWT 구조

JWT는 세 부분으로 구성된 문자열입니다. HEADER.PAYLOAD.SIGNATURE

토큰 타입 (typ: JWT)과 서명 알고리즘 (alg: HS256 등 ) 정보를 담고 있습니다.
예
```
{
"alg": "HS256",
"typ": "JWT"
}
```

PAYLOAD(페이로드)

사용자 정보 (클레임, claims)를 포함합니다. 예: sub(주제, 사용자 ID), iat(발급 시간), exp (만료 시간), roles (권한)

예

{
"sub": "user123",
"iat": 1615123456,
"exp": 1615127056,
"roles": ["User","Admin"]
}

SIGNATURE(서명)

1.클라이언트가 자격 증명(아이디·비밀번호)을 서버에 전송합니다. 2. 서버는 검증 후, 페이로드에 클레임을 담아 JWT를 생성합니다. 3. 서버는 JWT를 클라이언트에 응답으로 전달합니다(Authorization 헤더 또는 응답 바디). 4. 클라이언트는 JWT를 로컬스토리지나 안전한 쿠키에 저장합니다. 5. 이후 요청 시, 클라이언트는 Authorization: Bearer 헤더를 포함하여 요청합니다. 6. 서버는 토큰 서명과 만료 시간을 검증한 뒤, 페이로드의 클레임으로부터 사용자 정보를 추출하여 인증을 수행합니다.

장단점 및 주의사항

장점:

무상태(stateless): 서버에 세션 저장 필요 없음
확장성: 여러 서버 간 토큰만 공유하면 됨
유연성: 클레임에 필요한 다양한 정보를 담아 전달 가능

단점:

토큰 탈취 위험: 탈취될 경우 만료 전까지 악용될 수 있음
토큰 회수 어렵다: 블랙리스트나 단축된 만료 시간, 리프레시 토큰 전략 필요
토큰 크기: 세션 ID보다 크기가 커 네트워크 오버헤드 발생 가능

💡 JWT를 안전하게 사용하려면, 토큰 저장 위치(HttpOnly 쿠키 권장), 짧은 만료 시간, 리프레시 토큰, HTTPS 적용을 꼭 고려하세요.

웹 요청 정복 : HTTP 구조부터 에러 코드까지

Tue, 15 Jul 2025 23:05:29 GMT

들어가기 전

웹 개발의 시작은 HTTP(HyperText Transfer Protocol)를 이해하는 것에서부터 시작됩니다. HTTP는 클라이언트와 서버가 서로 "말"을 주고받는 약속이자 규칙인데요, 이번 글에서는 HTTP의 기본 구조와 동작 원리, 그리고 웹 요청-응답 과정에서 마주하게 되는 다양한 상태 코드(status code)를 함께 살펴보겠습니다. 간단한 예시와 다이어그램을 통해 HTTP가 어떻게 동작하는지 감을 잡고, 에러 상황별 발생 원인과 해결책을 이해하면 웹 서비스를 설계·개발·디버깅할 때 많은 도움이 될 거예요.

1. HTTP의 구조와 동작 원리

1-1. 클라이언트-서버 모델

HTTP는 웹 브라우저(클라이언트)와 웹 서버가 데이터를 주고받는 통신 규약입니다. 클라이언트가 서버에 요청(request)을 보내면, 서버는 그에 대한 응답(response)을 돌려줍니다.

1-2. 통신 과정 요약

아래 다이어그램은 DNS 조회부터 TCP 연결, HTTP 요청·응답, 그리고 연결 종료 또는 재사용까지의 전체 흐름을 보여줍니다.

DNS 조회
- 도메인 이름(예: www.example.com)을 IP 주소로 변환하기 위해 DNS 서버에 질의합니다.
TCP 연결
- 클라이언트와 서버 간에 TCP 3-way 핸드셰이크(SYN→SYN-ACK→ACK)를 수행하여 안정적인 전송 채널을 만듭니다.
HTTP 요청 (GET /index.html HTTP/1.1 예시)
- 요청 메시지 구조:
  - Start Line: 프로토콜 버전, 상태코드, 상테 메시지 (GET /index.html HTTP/1.1)
  - Headers: 응답 메타 정보 (예: Host: www.example.com, User-Agent: ..., Accept: ...)
  - Empty Line: 헤더와 Body 구분
  - Body: POST나 PUT 요청 시 전송할 데이터 (HTML, JSON 등)
HTTP 응답 (HTTP/1.1 200 OK 예시)
- 서버가 요청을 처리한 뒤 응답 메시지를 반환하고, Body에 리소스(HTML, JSON 등)를 담습니다.
연결 종료/재사용
- 기본적으로 HTTP/1.1은 Connection: keep-alive로 설정되어 동일한 TCP 연결을 재사용합니다.
- 필요 시 Connection: close로 연결을 종료하여 리소스를 해제합니다.

2. 상태 코드(Status Code)별 이해

2.1 2xx: 성공 응답

서버가 클라이언트의 요청을 성공적으로 처리했음을 의미합니다.

코드	설명	예시 상황 & 해결책
`200 OK`	요청 성공	예시: `GET` 요청 후 정상 리소스 반환 해결: 클라이언트 로직 검증, API 문서 확인
`201 Created`	리소스 생성	예시: `POST /users`로 신규 사용자 생성 해결: `Location` 헤더의 새 리소스 확인
`202 Accepted`	비동기 처리	예시: 대용량 작업 큐 등록 해결: 상태 체크 API 폴링 또는 Webhook 활용
`204 No Content`	본문 없는 성공	예시: `DELETE /items/123` 삭제 완료 해결: UI 리스트 갱신 반영

2.2 3xx: 리다이렉트

클라이언트를 다른 URL로 안내합니다.

코드	설명	예시 상황 & 해결책
`301 Moved Permanently`	영구 이동	예시: 도메인 A → B 리다이렉트 해결: 캐시 삭제, 검색엔진 재색인 요청
`302 Found`	임시 이동	예시: 유지보수 페이지 임시 안내 해결: 원래 URL 자동 재접근
`303 See Other`	POST→GET 리디렉션	예시: 폼 제출 후 결과 페이지 이동 해결: 클라이언트 GET 요청 수행
`307 Temporary Redirect`	임시 이동(메서드 유지)	예시: A/B 테스트용 임시 서버 해결: 원 메서드 그대로 재요청
`308 Permanent Redirect`	영구 이동(메서드 유지)	예시: API 버전 업그레이드 영구 리다이렉트 해결: 클라이언트 코드 업데이트

2.3 4xx: 클라이언트 에러

클라이언트의 잘못된 요청으로 인해 처리할 수 없음을 나타냅니다.

코드	설명	예시 상황 & 해결책
`400 Bad Request`	잘못된 요청	예시: 필수 필드 누락, 잘못된 JSON 해결: 요청 데이터 검증 추가
`401 Unauthorized`	인증 필요	예시: 토큰 미제공/만료 해결: 로그인 후 토큰 발급/갱신
`403 Forbidden`	권한 없음	예시: 관리자 리소스 무단 접근 해결: 권한 정책 검토
`404 Not Found`	리소스 없음	예시: 잘못된 URL/삭제된 리소스 해결: URL/ID 확인
`429 Too Many Requests`	요청 과다	예시: 단시간 내 과도한 호출 해결: Retry-After 로직 도입

2.4 5xx: 서버 에러

서버 내부 문제로 요청을 처리하지 못할 때 발생합니다.

코드	설명	예시 상황 & 해결책
`500 Internal Server Error`	서버 일반 오류	예시: 예외 미처리 해결: 로그 확인, 예외 처리 보강
`502 Bad Gateway`	게이트웨이 오류	예시: 프록시 문제 해결: 상위 서버 상태 점검
`503 Service Unavailable`	서비스 중단/과부하	예시: 유지보수/스케일링 부족 해결: 오토스케일링 설정, 안내 페이지 제공
`504 Gateway Timeout`	게이트웨이 타임아웃	예시: 응답 지연 해결: 타임아웃 설정 최적화

이번 글에서는 HTTP의 기본 구조와 동작 원리, 그리고 상태 코드별 의미와 해결 방법을 살펴보았습니다. 다음 포스트에서는 인증·인가와 세션 관리에 대해 자세히 다뤄보겠습니다.

부록: TCP 3-way 핸드셰이크란?

TCP 연결을 시작하기 전에 클라이언트와 서버가 서로 신뢰성 있는 채널을 마련하는 과정을 TCP-3-way 핸드셰이크라고 합니다. 이 과정을 통해 각 측이 제대로 준비됐는 지 확인하고, 데이터 전송의 순서를 관리할 초기 시퀀스 번호를 교환합니다.

클라이언트 -> 서버 : SYN (seq = x)

클라이언트가 새로운 연결 요청을 의미하는 SYN(Synchronize) 플래그를 켠 TCP 패킷을 보냅니다.
seq=x는 클라이언트가 사용할 첫 번째 데이터 바이트 번호를 의미합니다.

서버 -> 클라이언트 : SYN-ACK (seq=y, ack=x+1)

서버는 클라이언트 요청을 수락한다는 의미로 SYN과 ACK(Acknowledgment) 플래그를 모두 켠 패킷으로 응답합니다.
seq=y 는 서버가 사용할 첫 번째 데이터 바이트 번호,
ack=x+1은 클라이언트의 SYN에 대한 확인 응답 번호입니다.

클라이언트 -> 서버 : ACK (ack = y+1)

클라이언트는 서버의 SYN-ACK에 대한 확인 응답으로 ACK 플래그를 켠 패킷을 보냅니다.
ack=y+1은 서버가 보낸 SYN에 대한 확인 응답 번호입니다.

왜 3-way 핸드셰이크가 필요할까요

양방향 준비 확인 : 단방향 SYN/ACK만으로는 한쪽이 준비되지 않을 수 있기 때문에, 양쪽이 서로 준비되었음을 모두 확인합니다.
시퀀스 번호 설정 : 이후 전송할 데이터의 순서를 맞추기 위해 초기 시쿼스 번호를 교환합니다.
중복 연결 방지 : 이전 세션의 잘못된 패킷(지연된 SYN 등)이 새 연결로 오인되는 것을 방지합니다.

Client                  Server
   | --- SYN, seq=x ---> |
   | <--- SYN-ACK ------ |
   |     seq=y, ack=x+1  |
   | --- ACK, ack=y+1--->|
   |                     |
 [이제 데이터 전송 가능]

[php] array_flip(), array_intersect_key(),array_reduce(), use()

Fri, 04 Oct 2024 02:54:39 GMT

array_flip()

배열의 키와 값을 뒤집는 함수

$fruits = ['apple' => 'red', 'banana' => 'yellow', 'grape' => 'purple'];
$flipped = array_flip($fruits);
print_r($flipped);

결과

Array
(
    [red] => apple
    [yellow] => banana
    [purple] => grape
)

array_intersect_key()

두 배열의 공통된 키를 가진 요소만 추출

$array1 = ['a' => 1, 'b' => 2, 'c' => 3];
$array2 = ['a' => 'apple', 'c' => 'cat'];
$commonKeys = array_intersect_key($array1, $array2);
print_r($commonKeys);

결과

Array
(
    [a] => 1
    [c] => 3
)

array_reduce()

배열을 순회하며 누적해서 하나의 값으로 변환하는 함수

$numbers = [1, 2, 3, 4, 5];
$sum = array_reduce($numbers, function ($carry, $item) {
    return $carry + $item;
}, 0);
echo $sum; // 출력: 15

# $carry: 이전까지의 누적 값. 초기 값은 0.
# $item: 배열의 현재 요소 값.
#각 반복마다 $carry + $item을 누적하여 최종적으로 모든 숫자의 합을 구함.

use()

클로저(익명 함수)에서 바깥 스코프에 있는 변수를 가져와 사용할 때 사용

$greeting = "Hello";

$closure = function ($name) use ($greeting) {
    echo $greeting . ', ' . $name . '!';
};

$closure('World'); // 출력: Hello, World!

Rocky Linux 8 & PostgreSQL 15 설치

Sat, 31 Aug 2024 08:52:52 GMT

Rocky Linux 설치

1. Download

공식홈페이지

Document

2. network 설정

nmcli con show

nmcli connection add type ethernet ifname eth0 con-name MyConnection
nmcli connection modify MyConnection ipv4.addresses "192.168.1.100/24" ipv4.gateway "192.168.1.1" ipv4.dns "8.8.8.8"
nmcli connection up MyConnection

nmcli con modify eth0 ipv4.method manual ipv4.address ${ip address} ipv4.gateway ${gateway} ipv4.dns 168.126.63.1 connection.autoconnect yes

nmcli con reload

vi /etc/sysconfig/network-scripts/ifcfg-eth0

BOOTPROTO=none
ONBOOT=yes
IPADDR=${ip address}
GATEWAY=${gateway}
DNS1=168.126.63.1

systemctl restart NetworkManager

${ip address} = 사용할 아이피 주소

${gateway} = 사용할 게이트웨이 주소

3. update

dnf update -y

sudo dnf install epel-release
sudo dnf install -y rsync telnet cronolog wget
sudo dnf install -y qrencode ImageMagick

epel-release: EPEL 저장소를 활성화하여 추가 패키지를 설치할 수 있도록 함.

rsync: 파일 및 디렉토리 동기화 및 복사 도구.
telnet: 원격 서버 접속 및 네트워크 진단 도구.
cronolog: 로그 파일을 날짜/시간에 따라 회전시키는 도구.
wget: 웹에서 파일을 다운로드하는 도구.
qrencode: QR 코드 생성 도구.
ImageMagick: 이미지 변환 및 편집 도구

4. firewall 설정

vi /etc/selinux/config
> #SELINUX=enforcing
> SELINUX=disabled

vi /etc/sysctl.conf
> kernel.msgmni = 1024 추가

setenforce 0

firewall-cmd --zone=public --add-service=ssh --permanent
firewall-cmd --zone=public --add-service=http --permanent
firewall-cmd --zone=public --add-service=https --permanent
firewall-cmd --zone=public --add-service=mysql --permanent
firewall-cmd --zone=public --add-service=postgresql --permanent

firewall-cmd --zone=public --add-port=8000/tcp --permanent

firewall-cmd --reload

firewall-cmd --state
firewall-cmd --list-all

systemctl enable firewalld
systemctl restart firewalld

5. 트래픽 체크

sudo dnf install vnstat
sudo vnstat --init
sudo systemctl start vnstat
sudo systemctl enable vnstat

vnstat -d    # 일간 통계
vnstat -w    # 주간 통계
vnstat -m    # 월간 통계
vnstat -l    # 실시간 트랙픽 확인

6. 시간 동기화

sudo dnf install chrony
sudo systemctl start chronyd
sudo systemctl enable chronyd

chronyc tracking

crontab -e
0 0 * * * systemctl restart chronyd

PostgreSQL 설치

sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-8-x86_64/pgdg-redhat-repo-latest.noarch.rpm
sudo dnf -qy module disable postgresql
sudo dnf install -y postgresql15-server
sudo /usr/pgsql-15/bin/postgresql-15-setup initdb

vi /var/lib/pgsql/15/data/postgresql.conf
> listen_addresses = '*'

vi /var/lib/pgsql/15/data/pg_hba.conf
# "local" is for Unix domain socket connections only
local   all             all                                     md5
# IPv4 local connections:
host    all             all             127.0.0.1/32            md5
host    all             all             0.0.0.0/0                md5
# IPv6 local connections:
host    all             all             ::1/128                 md5
# Allow replication connections from localhost, by a user with the
# replication privilege.
#local   replication     all                                     peer
#host    replication     all             127.0.0.1/32            ident
#host    replication     all             ::1/128                 ident

sudo systemctl enable postgresql-15
sudo systemctl start postgresql-15

# localhost postgresql 접속
sudo -i -u postgres
psql

# postgresql
ALTER USER postgres WITH PASSWORD '1q2w3e4r';
CREATE USER ${USER ID} WITH PASSWORD '${USER PASSWD}' superuser;
CREATE DATABASE "${DATABASE_NAME}" OWNER ${USER ID} ENCODING 'UTF-8';
GRANT ALL PRIVILEGES ON DATABASE "${DATABASE_NAME}" TO ${USER ID};

[PHP + jQuery] Get 방식으로 가져온 값과 li>a의 class 값이 일치할 때 li에 class 부여하기

Tue, 21 Mar 2023 00:23:52 GMT

    $(function () {
        const $category = "";
        $(".category_list li a").each(function (){
            if ($(this).hasClass($category)) { // class 비교
                $(this).parent().addClass("on"); // li에 클래스 추가
            }
        })
    })

ReferenceError: __dirname is not defined in ES module scope

Thu, 19 Jan 2023 02:51:12 GMT

Express에서 ES 모듈에서 path를 사용했을 때, 다음과 같은 오류가 발생합니다.

ReferenceError: __dirname is not defined in ES module scope. This file is being treated as an ES module because it has a .js file extention ....

다음과 같이 사용할 경우 위 에러를 해결할 수 있습니다.

import path from 'path';
const __dirname = path.resolve();

[React] 장바구니 페이지 만들기 프로젝트 (2)

Tue, 29 Nov 2022 07:59:54 GMT

1. 들어가기 전

이번에는 본격 상품 리스트에 있는 상품을 클릭하여 장바구니에 넣어보도록 하겠습니다.

자료출처 : https://brand.naver.com/linefriends/category/b4f7430d419e4e729c8eae3093b37e21?cp=1 저작권 : 라인 프렌즈 위 데이터는 공부 목적으로 사용했으며 어떠한 결제 시스템이 없음을 사전에 공지합니다

2.목표

상품 리스트에 있는 상품을 클릭하면 장바구니에 상품을 추가한다.

장바구니에 담긴 총 아이템 갯수를 오른쪽 상단 뱃지에 출력한다.

장바구니에 담긴 상품 리스트를 출력한다.

장바구니 리스트에서 상품의 갯수를 추가하거나 제거할 수 있다.

3. handle 함수 만들기

앱 전반적으로 상품을 추가, 제거하거나 장바구니 총 갯수를 가져오기 위해 글로벌 함수를 만들어 보겠습니다.

src/App.tsx

import React, {useState} from 'react';
import {database} from "./database/products";
import {ShoppingCartItem} from "./interfaces/item.interface";
import {AppRouter} from "./routers/AppRoutes";
import './App.css'

// SET CATEGORY
const arr = database.map((item) => {
    return item.category
});
arr.push('ALL');
const category = Array.from(new Set(arr)).sort();

const App = () => {
// NOTE - 1 
    const [cartItem, setCartItem] = useState([]);

// NOTE - 2 
    const handleAddToCart = (clickedItem: ShoppingCartItem) => {
        setCartItem((prev) => {
            const isItemInCart = cartItem.find((item) => item.id === clickedItem.id);
            if (isItemInCart) {
                return prev.map((item) => (item.id === clickedItem.id ? {...item, amount: item.amount + 1} : item));
            }
            return [{...clickedItem, amount: 1}, ...prev];
        });
    };

// NOTE - 3
    const handleRemoveFromCart = (id: number) => {
        setCartItem((prev) =>
            prev.reduce((acc, item) => {
                if (item.id === id) {
                    if (item.amount === 1) return acc;
                    return [...acc, {...item, amount: item.amount - 1}]
                } else {
                    return [...acc, item]
                }
            }, [] as ShoppingCartItem[])
        )
    }

// NOTE - 4
    const getTotalItems = (items: ShoppingCartItem[] | null) => {
        return items?.reduce((acc, item) => acc + item.amount, 0)
    }

    return (
        <>
            
        


    );
}

export default App;

💡 NOTE - 1 앱 전반적으로 사용할 장바구니 리스트 입니다.

💡 NOTE - 2 handleAddToCart 장바구니에 상품을 추가하는 함수입니다. 상품을 클릭하면 상품 id가 기존의 상품 리스트에 있는지 확인합니다. 기존에 상품이 없으면 amount = 1로, 있으면 amount += 1 합니다.

💡 NOTE - 3 handleRemoveFromCart 장바구니 리스트에서 상품을 제거하는 함수입니다. 함수를 실행할 때마다 amount 값을 줄이고, amount = 0 이 되면 장바구니 리스트에서 제거합니다.

💡 NOTE - 4 getTotalItems 총 장바구니에 담긴 상품 갯수를 가져오는 함수입니다.

각 함수들을 이제 AppRouter에 전달하겠습니다.

src/routers/AppRoutes.tsx

import React from "react";
import {BrowserRouter, Routes, Route} from "react-router-dom";
import {Main} from "../pages/main";
import {MenuListInterface} from "../interfaces/item.interface";
import {Navbar} from "../components/Navbar";
import {Home} from "../pages/Home";
import {Header} from "../components/Header";


type AppRoutesType = {
    menuList: MenuListInterface[] | null
    category: string[] | null
    cartItem: ShoppingCartItem[] | null
    addToCart: (item: ShoppingCartItem) => void
    removeFromCart: (id: number) => void
    getTotalItem: (items: any) => any
}

export const AppRouter = ({menuList, category, cartItem, addToCart, removeFromCart, getTotalItem}: AppRoutesType) => {
    return <>
        
        {/*NOTE - 5*/}
            
            
            
                }>
                }>
            
        
    


}

💡 NOTE - 5 아직 헤더를 만들진 않았지만 미리 헤더 컴포넌트에 필요한 값을 전달하도록 하겠습니다.

4. header 만들기

src/components/Header.tsx

import React, {useState} from "react";

// INTERFACES
import {ShoppingCartItem} from "../interfaces/item.interface";

import {HeaderWrap} from "../styles/header.styled,ts";
import {Drawer} from "@mui/material";
import SearchIconfrom "@mui/icons-material/Search";
import ShoppingBasketOutlinedIconfrom "@mui/icons-material/ShoppingBasketOutlined";
import ViewHeadlineIconfrom "@mui/icons-material/ViewHeadline";
import Badgefrom "@mui/material/Badge";

type HeaderType = {
    cartItem: ShoppingCartItem[] | null
    addToCart: (item: ShoppingCartItem) => void
    removeFromCart: (id: number) => void
    getTotalItem: (items: any) => any
}

export const Header = ({cartItem, addToCart, removeFromCart, getTotalItem}: HeaderType) => {
    const [cartOpen, setCartOpen] = useState(false);

    return 
         setCartOpen(false)}>
        
        
            
                R
            
            
                RINE FRIENDS
            
        
        
            
                
            
             setCartOpen(true)}>
                
                
            
            
                
            
        
    
}

장바구니 아이콘을 클릭하니 이벤트가 발생하는 것을 볼 수 있습니다.

이제 장바구니 아이콘을 클릭했을 때 장바구니 리스트가 출력하도록 해보겠습니다.

5. 장바구니 리스트 만들기

상품 목록 리스트를 만들 때와 마찬가지로 상품 하나 당 출력되는 컴포넌트 먼저 만들어보겠습니다.

src/components/CartItem.tsx

import React from "react";
import {numberFormat} from "../common";

// INTERFACES
import {ShoppingCartItem} from "../interfaces/item.interface";

// CSS
import {CartItemWrap} from "../styles/cartItem.styled";
import { Button } from "@mui/material";

type CartItemType = {
    item: ShoppingCartItem
    addToCart: (item: ShoppingCartItem) => void
    removeFromCart: (id: number) => void
}

export const CartItem = ({item, addToCart, removeFromCart}: CartItemType) => {

    return 
        
            
        
        
            {item.title}
            Price : {numberFormat(item.price)}원
            Total : {numberFormat(item.amount * item.price)}원
        
        
            
            {item.amount}
            
        
    
}

결과 나중에 데이터를 받으면 다음과 같이 출력합니다.

이제 상품 리스트 만들어 보겠습니다.

나중에 헤더에서 클릭한 장바구니 리스트 (cartItem)를 받으면 반복문을 돌면서 위에서 만든 CartItem 컴포넌트에 값을 전달하겠습니다.

src/components/CartList.tsx

import React from "react";
import {numberFormat} from "../common";
import {CartListWrap} from "../styles/cartList.styled";
import {ShoppingCartItem} from "../interfaces/item.interface";
import {CartItem} from "./CartItem";


type CartList = {
    cartItem: ShoppingCartItem[] | null
    addToCart: (item: ShoppingCartItem) => void
    removeFromCart: (id: number) => void
}

export const CartList = ({cartItem, addToCart, removeFromCart}: CartList) => {

        {/* NOTE - 6 */}
    const totalPrice = (items: ShoppingCartItem[]) => {
        return items?.reduce((count, item) => count + item.amount * item.price, 0);
    }

    const hidden = cartItem?.length === 0 ? 'hidden' : "";


    return 
        
            Your Shopping Cart
        
        
            {cartItem?.map((item) => (
                
            ))}
            
                
                    TOTAL : {numberFormat(totalPrice(cartItem?  cartItem : []))}원
                
            
        
    
}

💡 NOTE - 6 - totalPrice 장바구니에 담긴 모든 상품의 최종 가격을 출력합니다.

CartList가 만들어졌으니 헤더에 추가하겠습니다.

src/components/Header.tsx

import React, {useState} from "react";

// COMPONENTS
import {CartList} from "./CartList";

// INTERFACES
import {ShoppingCartItem} from "../interfaces/item.interface";

import {HeaderWrap} from "../styles/header.styled,ts";
import {Drawer} from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";
import ShoppingBasketOutlinedIcon from "@mui/icons-material/ShoppingBasketOutlined";
import ViewHeadlineIcon from "@mui/icons-material/ViewHeadline";
import Badge from "@mui/material/Badge";

type HeaderType = {
    cartItem: ShoppingCartItem[] | null
    addToCart: (item: ShoppingCartItem) => void
    removeFromCart: (id: number) => void
    getTotalItem: (items: any) => any
}

export const Header = ({cartItem, addToCart, removeFromCart, getTotalItem}: HeaderType) => {
    const [cartOpen, setCartOpen] = useState(false);

    return 
         setCartOpen(false)}>
            {/* NOTE - 7 */}
            
        
        
            
                R
            
            
                RINE FRIENDS
            
        
        
            
                
            
             setCartOpen(true)}>
                
                
            
            
                
            
        
    
}

💡 NOTE - 7 CartList 컴포넌트를 추가하고 필요한 인자들을 전달하겠습니다.

자 이제 장바구니가 만들어졌습니다. 이제 장바구니에 아이템을 추가해 보도록 하겠습니다.

6. 장바구니에 상품 추가하기

src/components/Item.tsx

import React from "react";
import {ShoppingCartItem} from "../interfaces/item.interface";
import Swal from "sweetalert2";
import {numberFormat} from "../common";

// CSS
import {Button} from "@mui/material";
import {ItemWrap} from "../styles/item.styled,ts";



type ItemType = {
    item: ShoppingCartItem
    addToCart: (item: ShoppingCartItem) => void
}


export const Item = ({item,addToCart}: ItemType) => {
    const onClick = (clickedItem : ShoppingCartItem) => {
        Swal.fire({
            title:"장바구니에 추가하시겠습니까?",
            showDenyButton:true,
            confirmButtonText: "ADD",
            denyButtonText:"CANCLE"
        }).then((result) => {
            if(result.isConfirmed) {
                addToCart(clickedItem)
                Swal.fire('추가했습니다.', "", "success");
            } else {
                Swal.fire('취소했습니다.', "", "error");
            }
        })
    }


    return 
        
            
                
                    
                
                
                    {item.title}
                    {numberFormat(item.price)}원
                
                
            
        
    
}

src/AppRoutes.tsx

import React from "react";
import {BrowserRouter, Routes, Route} from "react-router-dom";

// PAGES
import {Main} from "../pages/main";
import {Home} from "../pages/Home";

// COMPONENTS
import {Navbar} from "../components/Navbar";
import {Header} from "../components/Header";

// INTERFACES
import {MenuListInterface, ShoppingCartItem} from "../interfaces/item.interface";



type AppRoutesType = {
    menuList: MenuListInterface[] | null
    category: string[] | null
    cartItem: ShoppingCartItem[] | null
    addToCart: (item: ShoppingCartItem) => void
    removeFromCart: (id: number) => void
    getTotalItem: (items: any) => any
}

export const AppRouter = ({menuList, category, cartItem, addToCart, removeFromCart, getTotalItem}: AppRoutesType) => {
    return <>
        
            
            
            
                }>
                {/* NOTE - 1*/}
                }>
            
        
    
}

💡 NOTE - 8 Main 컴포넌트에 addToCart 를 전달하겠습니다.

7. 완성

리액트로 장바구니 페이지 만들기가 끝났습니다. 다음에도 간단한 리액트 프로젝트로 찾아오겠습니다.

전체코드 보기

[React] 장바구니 페이지 만들기 프로젝트 (1)

Thu, 24 Nov 2022 07:38:53 GMT

1. 들어가기 전

인터넷으로 많이 사용하는 페이지 중 하나는 장바구니 페이지가 아닐까 하는 생각이 듭니다. 리액트를 공부하면서 장바구니 페이지를 어쭙게나마 흉내를 내고 싶다는 생각이 들었습니다. 그래서 이번에는 리액트로 간단한 장바구니 페이지를 만들어보고자 합니다. 프로젝트를 통해 상품 리스트를 출력하고 원하는 상품을 장바구니에 넣는 과정까지 구현해보겠습니다.

이번에는 데이터베이스를 사용하지 않고 하드 코딩으로 데이터를 가져오겠습니다.

자료 출처 : https://brand.naver.com/linefriends/category/b4f7430d419e4e729c8eae3093b37e21?cp=1
저작권 : 라인 프렌즈
위 데이터는 공부 목적으로 사용했으며 어떠한 결제 시스템이 없음을 사전에 공지합니다.

그러면 장바구니 페이지 만들기 첫 번째 여정을 시작하겠습니다.

2. 목표

데이터베이스에 있는 상품 목록을 출력한다.

Navbar의 값에 따라 알맞은 상품을 목록에 출력한다.

3. 필요한 패키지 설치

$ npm install sweetalert2
$ npm install @mui/icons-material
$ npm install @mui/material @emotion/react @emotion/styled
$ npm install @mui/material @mui/styled-engine-sc styled-components
$ npm i react-router-dom

4. 데이터베이스 만들기

먼저 상품 리스트를 하드 코딩으로 입력하겠습니다.

export const database = [
    {
        id: 6876937251,
        category: "COOKY",
        description: "머그컵이나 텀블러를 받쳐주는 코스터입니다. 투명한 아크릴에 쿠키 얼굴이 선명하게 새겨졌어요. 테이블을 화사한 분위기로 만들어줍니다",
        image: "https://shop-phinf.pstatic.net/20220705_37/1656985010822HLcmJ_JPEG/21562010_76204184.jpg?type=m510",
        price: 6000,
        title: "BT21 COOKY 페이스 아크릴 코스터",
    },
    {
        id: 6876937252,
        category: "TATA",
        description: "머그컵이나 텀블러를 받쳐주는 코스터입니다. 투명한 아크릴에 타타 얼굴이 선명하게 새겨졌어요. 테이블을 화사한 분위기로 만들어줍니다",
        image: "https://shop-phinf.pstatic.net/20220705_261/1656985006709b6YuD_JPEG/21561956_76204183.jpg?type=m510",
        price: 6000,
        title: "BT21 TATA 페이스 아크릴 코스터",
    },
    {
        id: 6876937253,
        category: "CHIMMY",
        description: "머그컵이나 텀블러를 받쳐주는 코스터입니다. 투명한 아크릴에 치미 얼굴이 선명하게 새겨졌어요. 테이블을 화사한 분위기로 만들어줍니다",
        image: "https://shop-phinf.pstatic.net/20220705_46/1656985002552vE8wt_JPEG/21561923_76204182.jpg?type=m510",
        price: 6000,
        title: "BT21 CHIMMY 페이스 아크릴 코스터",
    },
    {
        id: 6876937254,
        category: "MANG",
        description: "머그컵이나 텀블러를 받쳐주는 코스터입니다. 투명한 아크릴에 망이 얼굴이 선명하게 새겨졌어요. 테이블을 화사한 분위기로 만들어줍니다",
        image: "https://shop-phinf.pstatic.net/20220705_298/1656984998573xl211_JPEG/21561905_76204181.jpg?type=m510",
        price: 6000,
        title: "BT21 MANG 페이스 아크릴 코스터",
    },
    {
        id: 6876937255,
        category: "KOYA",
        description: "머그컵이나 텀블러를 받쳐주는 코스터입니다. 투명한 아크릴에 코야 얼굴이 선명하게 새겨졌어요. 테이블을 화사한 분위기로 만들어줍니다",
        image: "https://shop-phinf.pstatic.net/20220705_27/1656984986653gPodo_JPEG/21561851_76204172.jpg?type=m510",
        price: 6000,
        title: "BT21 KOYA 페이스 아크릴 코스터",
    },
    {
        id: 6876937256,
        category: "SHOOKY",
        description: "머그컵이나 텀블러를 받쳐주는 코스터입니다. 투명한 아크릴에 슈키 얼굴이 선명하게 새겨졌어요. 테이블을 화사한 분위기로 만들어줍니다",
        image: "https://shop-phinf.pstatic.net/20220705_108/1656984994540exhfb_JPEG/21561869_76204180.jpg?type=m510",
        price: 6000,
        title: "BT21 SHOOKY 페이스 아크릴 코스터",
    },
    {
        id: 6876937257,
        category: "RJ",
        description: "머그컵이나 텀블러를 받쳐주는 코스터입니다. 투명한 아크릴에 RJ 얼굴이 선명하게 새겨졌어요. 테이블을 화사한 분위기로 만들어줍니다",
        image: "https://shop-phinf.pstatic.net/20220705_191/16569849906726A3mM_JPEG/21561803_76204179.jpg?type=m510",
        price: 6000,
        title: "BT21 RJ 페이스 아크릴 코스터",
    },
    {
        id: 6876937258,
        category: "COOKY",
        description: "내 차의 힐링템 BT21 KOOKY 차량용 고속 무선 충전 거치대",
        image: "https://shop-phinf.pstatic.net/20220524_179/1653354840728iQSSm_JPEG/21371561_74732033.jpg?type=m510",
        price: 49500,
        title: "라인프렌즈 BT21 COOKY BABY 차량용 스마트폰 고속 충전 거치대",
    },
    {
        id: 6876937259,
        category: "TATA",
        description: "내 차의 힐링템 BT21 KOOKY 차량용 고속 무선 충전 거치대",
        image: "https://shop-phinf.pstatic.net/20220524_225/1653354836389IdVwn_JPEG/21371552_74731942.jpg?type=m510",
        price: 49500,
        title: "라인프렌즈 BT21 TATA BABY 차량용 스마트폰 고속 충전 거치대",
    },
    {
        id: 6876937260,
        category: "CHIMMY",
        description: "내 차의 힐링템 BT21 CHIMMY 차량용 고속 무선 충전 거치대",
        image: "https://shop-phinf.pstatic.net/20220524_141/1653354832143VnuLs_JPEG/21371496_74731941.jpg?type=m510",
        price: 49500,
        title: "라인프렌즈 BT21 CHIMMY BABY 차량용 스마트폰 고속 충전 거치대",
    },
    {
        id: 6876937261,
        category: "MANG",
        description: "내 차의 힐링템 BT21 MANG 차량용 고속 무선 충전 거치대",
        image: "https://shop-phinf.pstatic.net/20220524_232/1653354827951Bywn3_JPEG/21371368_74731940.jpg?type=m510",
        price: 49500,
        title: "라인프렌즈 BT21 MANG BABY 차량용 스마트폰 고속 충전 거치대",
    },
    {
        id: 6876937262,
        category: "SHOOKY",
        description: "내 차의 힐링템 BT21 SHOOKY 차량용 고속 무선 충전 거치대",
        image: "https://shop-phinf.pstatic.net/20220524_136/16533548234444B97i_JPEG/21371319_74731939.jpg?type=m510",
        price: 49500,
        title: "라인프렌즈 BT21 SHOOKY BABY 차량용 스마트폰 고속 충전 거치대",
    },
    {
        id: 6876937263,
        category: "RJ",
        description: "내 차의 힐링템 BT21 RJ 차량용 고속 무선 충전 거치대",
        image: "https://shop-phinf.pstatic.net/20220524_139/1653354819422z0hGl_JPEG/21371284_74731848.jpg?type=m510",
        price: 49500,
        title: "라인프렌즈 BT21 RJ BABY 차량용 스마트폰 고속 충전 거치대",
    },
    {
        id: 6876937264,
        category: "KOYA",
        description: "내 차의 힐링템 BT21 KOYA 차량용 고속 무선 충전 거치대",
        image: "https://shop-phinf.pstatic.net/20220524_29/1653354814805jjY1A_JPEG/21371229_74731737.jpg?type=m510",
        price: 49500,
        title: "라인프렌즈 BT21 KOYA BABY 차량용 스마트폰 고속 충전 거치대",
    },
];

출처 : 라인프렌즈 | 저작권 : 라인프렌즈

5. 인터페이스 설정

src/interfaces/item.interface.ts

export interface MenuListInterface {
    id: number;
    category: string;
    description: string;
    image: string;
    price: number;
    title: string;
}

export interface ShoppingCartItem{
    id: number;
    category: string;
    description: string;
    image: string;
    price: number;
    title: string;
    amount: number;
}

6. 상품 리스트 데이터

6.1 상품 리스트를 가져올 페이지 만들기

src/pages/main.tsx

import React, {useState} from "react";
import {MainWrap} from "../styles/main.styled";

export const Main = () => {
    return 
    
}

6.2 각 상품 별 데이터를 출력할 컴포넌트 준비

src/components/Item.tsx

import React from "react";
import {ShoppingCartItem} from "../interfaces/item.interface";
import {numberFormat} from "../common";

// CSS
import {Button} from "@mui/material";
import {ItemWrap} from "../styles/item.styled,ts";


type ItemType = {
    item: ShoppingCartItem
}


export const Item = ({item}: ItemType) => {
    return 
        
            
                
                    
                
                
                    {item.title}
                    {numberFormat(item.price)}원
                
                
            
        
    
}

const numberFormat = (price: number): string => {
    return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

item 인자를 받으면 개별 아이템 폼을 만들어 줍니다.

(결과)

src/components/Navbar.tsx

import React from "react";
import {NavWrap} from "../styles/navbar.styled";

export const Navbar = () => {
    return 
    
}

6.4 라우터 설정

Navbar와 Main 컴포넌트를 import 합니다. 후에 category 별로 데이터를 가져올 예정이라 미리 category를 param으로 설정하도록 하겠습니다.

import React from "react";
import {BrowserRouter, Routes, Route} from "react-router-dom";
import {Main} from "../pages/main";
import {Navbar} from "../components/Navbar";

export const AppRouter = () => {
    return <>
        
                
            
                }>
            
        
    
}

자 이제 프로젝트를 시작할 최소한의 준비를 마쳤습니다. 지금부터 본격 상품 리스트를 출력하도록 하겠습니다.

6.5 데이터 출력

src/App.tsx

import React, {useState} from 'react';
import {database} from "./database/products";

import {AppRouter} from "./routers/AppRoutes";

import './App.css'

// SET CATEGORY
const arr = database.map((item) => {
    return item.category
});
arr.push('ALL');
const category = Array.from(new Set(arr)).sort();

const App = () => {
    return (
        <>
            
        
    );
}

export default App;

💡 'category'는 데이터베이스에 있는 category 목록을 중복 없이 가져온 배열입니다. 위 변수는 Navbar에서 사용합니다.

앱 전반적으로 사용할 database와 category 값을 AppRouter에 넘겨주도록 하겠습니다.

src/routers/AppRouter.tsx

import React from "react";
import {BrowserRouter, Routes, Route} from "react-router-dom";
import {Main} from "../pages/main";
import {Navbar} from "../components/Navbar";


type AppRoutesType = {
    menuList: MenuListInterface[] | null
    category: string[] | null
}

export const AppRouter = ({menuList, category}: AppRoutesType) => {
    return <>
        
            
            
                }>
            
        
    
}

전달받은 prop을 각각 Navbar와 Main 컴포넌트에 전달하겠습니다.

src/pages/main.tsx

import React from "react";
import {useParams} from "react-router-dom";
import {Item} from "../components/Item";


import {MenuListInterface} from "../interfaces/item.interface";
import {MainWrap} from "../styles/main.styled";
import {Grid} from "@mui/material";

type MainType = {
    menuList: MenuListInterface[] | null
}

export const Main = ({menuList}: MainType) => {
    const {category} = useParams();
    let list ;
    if (category === 'ALL') {
        list = menuList
    } else {
        list = menuList?.filter((item:any) => (item.category === category));
    }

    return 
        
            {list?.map((item: any) => (
                
                    
                
            ))}
        
    
}

💡 useParmas() 을 사용하여 parm 값을 가져옵니다. 방금 라우터 설정할 때 /:category 에서 받은 category 값입니다.
category 값이 'ALL' 일 경우에는 모든 상품 리스트를 출력하고, 나머지는 category 별로 상품 리스트가 출력하도록 했습니다.
list 배열이 만들어지면 반복문을 돌려 아까 만든 Item 컴포넌트에 각각 상품을 전달합니다.

💡 주소창에 category를 입력하면 category 별로 필터 되어 데이터가 출력됨을 알 수 있습니다.

매번 주소창에 category를 칠 순 없으니 Navbar를 사용하여 category를 누르면 각각에 맞는 데이터가 출력하도록 하겠습니다.

src/components/Navbar.tsx

import React from "react";
import {Link} from "react-router-dom";
import {NavWrap} from "../styles/navbar.styled";

type NavbarType = {
    category: string[] | null

}

export const Navbar = ({category}: NavbarType) => {
    const renderLi = (cate: string, index: number) => {
        let key = `${cate}-${index}`
        return 
            {cate}
        
    }


    return 
        {category?.map((item, index: number) => renderLi(item, index))}
    
}

💡 AppRouter에서 전달받은 category 파라미터를 사용하여 각각 페이지로 이동할 수 있는 li를 만들었습니다.

6.7 확인

이제 Navbar을 클릭하여 데이터가 필터되는 지 확인해보겠습니다.

카테고리별로 필터 되어 데이터가 잘 출력되고 있습니다.

상품 목록 가지고 오는 작업이 끝났습니다. 다음 편에서는 장바구니에 상품을 추가하는 작업을 해보도록 하겠습니다.

[React] TODO LIST 만들기 (6) - Firestore에서 데이터 가져와서 todo list 완성하기

Wed, 23 Nov 2022 06:09:20 GMT

1. 들어가기 전

이제 드디어 끝이 보입니다. task 입력까지 했으니 이번 시간에는 firestore에서 데이터를 가져오도록 하겠습니다. 그냥 가져오면 심심하니 onSnapshot을 사용하여 실시간으로 데이터를 가져오도록 하겠습니다. 또한, 완료 버튼을 클릭하면 해당 task는 화면에서 지우는 작업까지 해보도록 하겠습니다.

2. 목표

task를 입력하면 실시간으로 데이터를 화면에 출력한다.

완료 버튼을 클릭하면 실시간으로 화면에서 지운다.

3. Todo List 만들기

이번에도 코드 복잡성을 방지하기 위해 todo list는 따로 컴포넌트를 만들어 관리하도록 하겠습니다.

3.1 데이터 가져오기

src/Components/todoList.tsx

import React, { useEffect, useState } from "react";

// FIREBASE
import { fireStoreJob } from "../initFirebase";
import {
  collection,
  query,
  where,
  orderBy,
  onSnapshot,
  updateDoc,
  doc,
} from "firebase/firestore";

// INTERFACE
import { UserInterface } from "../interfaces/user.interface";
import { TodoInterface } from "../interfaces/todo.interface";

// CSS
import { TodoListWrap,StyledTableCell } from "../styles/todoList.styled";
import Paper from "@mui/material/Paper";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Checkbox from "@mui/material/Checkbox";

type TodoListType = {
  userInfo: UserInterface;
};

export const TodoList = ({ userInfo }: TodoListType) => {
  const firestore_path = "tasks";
  const [list, setList] = useState([]);

  // NOTE - 1 
  useEffect(() => {
    const q = query(
      collection(fireStoreJob, firestore_path),
      where("uid", "==", userInfo.uid),
      where("status", "==", "READY"),
      orderBy("date_created", "desc")
    );
    const unsubscribe = onSnapshot(q, (querySnapshot) => {
      const arr = querySnapshot.docs.map((doc) => {
        return {
          id: doc.id,
          ...doc.data(),
        };
      });
      // @ts-ignore
      setList(arr);
    });

    return () => {
      unsubscribe();
    };
  }, []);

  // NOTE - 2
  const onClick = async (e: any) => {
    const doc_id = e.target.id;
    const ref = doc(fireStoreJob, firestore_path, doc_id);
    await updateDoc(ref, {
      status: "DONE",
    });
  };

  return (
    
      
        
          
              
                Task
                Dead Line
                Done
              
            
              {list.map((data) => {
                return (
                  
                    {data.task}
                    {data.date}
                    
                      
                    
                  
                );
              })}
            
            
            
          
        
      
    
  );
};

💡 NOTE -1 메인 화면에 접속하면 유저가 작성한 task를 가져옵니다. 이때 유저별로 status == 'READY' 인 데이터를 최신 순으로 가져 옵니다.

저번 포스팅에서 작성한 task가 출력된 것을 볼 수 있습니다.

📌 Firebase 공식문서 - Cloud Firestore로 실시간 업데이트 받기

📌 Firebase 공식문서 - 문서 업데이트

3.2 실시간으로 입력한 데이터 출력하기

onSnapshot을 사용했기 때문에 변화가 감지될 때마다 새로운 데이터를 출력하고 있는 것을 볼 수 있습니다.

4. 완료 처리하기

할 일을 입력했으니 완료 처리도 해보도록 하겠습니다.

4.1 완료 버튼 누르기

💡 NOTE -2 체크 박스를 클릭하면 해당 데이터를 찾아 status = 'DONE'으로 업데이트하고 화면에는 출력하지 않도록 하겠습니다.

4.2 Firestore 확인

status 가 DONE으로 바뀐 걸 확인할 수 있습니다.

React와 Firebase를 통해 간단한 Todo List 만들기 프로젝트가 끝났습니다. 다음에도 간단하게 만들 수 있는 프로그램으로 찾아오겠습니다.

전체코드 보기

[React] TODO LIST 만들기 (5) - task 입력하고 Firestore에 저장하기

Wed, 23 Nov 2022 05:31:15 GMT

1. 들어가기 전

Firebase을 통한 계정 생성이 끝났습니다. 지금부터 본격적으로 Todo List를 만들어 보도록 하겠습니다. 이번 포스팅에서는 task 와 deadline 을 입력하여 Firestore에 잘 저장되는 지 확인하도록 하겠습니다.

(+) 이번 포스팅에서는 css 코드는 작성하지 않았습니다.

2. 목표

해야할 일과 마감일을 입력받는다.

Firestore에 데이터를 저장한다.

3. Todo input 만들기

코드가 복잡해지는 것을 방지하기 위해 todo input 은 따로 컴포넌트를 만들어 관리하겠습니다.

src/Components/todoForm.tsx

import React, { ChangeEvent, useState } from "react";
import moment from "moment";

// FIREBASE
import { fireStoreJob } from "../initFirebase";
import { collection, addDoc } from "firebase/firestore";

// INTERFACE
import { TodoInputInterface } from "../interfaces/todo.interface";
import { UserInterface } from "../interfaces/user.interface";
import { Button, Input } from "@mui/material";

// CSS
import { TodoFormWrap } from "../styles/todoForm.styled";

type TodoFormType = {
  userInfo: UserInterface;
};

export const TodoForm = ({ userInfo }: TodoFormType) => {
  const firestore_path = "tasks";
  const [inputs, setInputs] = useState({
    task: "",
    date: "",
  });

  const { task, date } = inputs;

  const onChange = (e: ChangeEvent) => {
    const { name, value } = e.currentTarget;
    setInputs({ ...inputs, [name]: value });
  };

  // NOTE - 1
  const onClick = async (e: any) => {
    if (task === "") {
      alert("Please write task");
      return false;
    }

    await addDoc(collection(fireStoreJob, firestore_path), {
      uid: userInfo.uid,
      task: task,
      status: "READY",
      date: date,
      date_created: moment().utc().format(),
    });
    setInputs({ task: "", date: "" });
  };

  return (
    
      
        Enter Your Task
      
      
        
          
        
        
          
        
        
          
        
      

    
  );
};

💡 NOTE - 1 Submit 버튼을 클릭하면 자동으로 firestore에 doc을 만듭니다.

📌 Firebase 공식문서 - 문서추가

이 컴포넌트를 main 페이지에 import 하도록 하겠습니다.

src/pages/main.tsx

import React from "react";

// COMPONENT
import { TodoForm } from "../Components/todoForm";

// CSS
import { MainWrapper } from "../styles/main.styled";


export const Main = ({ userInfo }: any) => {
  return (
    
      
        
          
            TODO LIST
          
          
            // NOTE - 2
            Hello 
              {userInfo.displayName
            
          
        
        

          // NOTE - 3    
          
        
      
    
  );
};

💡 NOTE - 2 AppRouter 에서 받은 userInfo 을 사용하여 유저의 displayName을 출력해줍니다.

💡 NOTE - 3 TodoForm 컴포넌트를 import 하고 userInfo 값을 넘겨 줍니다.

완성 페이지

이제 task 와 date를 입력해보겠습니다.

4. Firestore 확인

Firestore에 데이터가 제대로 입력된 것을 확인할 수 있습니다.

다음 시간에는 방금 입력한 데이터를 가져와 todo list를 만들어보도록 하겠습니다.

[React] TODO LIST 만들기 (4) - 구글 계정으로 로그인 하기

Mon, 21 Nov 2022 07:33:11 GMT

1. 들어가기 전

이제 로그인의 마지막 파트 구글 계정으로 로그인을 해보겠습니다.

2. 목표

firesbase의 GoogleAuthProvider 을 사용하여 구글 계정으로 로그인 한다.

구글계정으로 로그인 한 유저 정보를 user collection에 저장한다.
로그인 후 메인 페이지로 이동한다.

3. 로그인 페이지 수정

src/pages/login.tsx

추가한 부분만 작성하겠습니다.


...

// FIREBASE
import { firebaseAuth, fireStoreJob } from "../initFirebase";
import {
  signInWithEmailAndPassword,
  signInWithPopup,
  GoogleAuthProvider,
} from "firebase/auth";
import { collection, addDoc } from "firebase/firestore";

// CSS
import GoogleIcon from "@mui/icons-material/Google";


export const Login = () => {
 // ... 기존 코드 
    const onClickGoogle = async (e: any) => {
    const provider = new GoogleAuthProvider();
    await signInWithPopup(firebaseAuth, provider)
      .then(async (result) => {
        const credential = GoogleAuthProvider.credentialFromResult(result);
        const token = credential?.accessToken;
        const user = result.user;

        await addDoc(collection(fireStoreJob, firestore_path), {
          uid: user.uid,
          displayName:user.displayName,
          date_created: moment().utc().format(),
        });
        navigate("/");
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        console.warn(`${errorCode - errorMessage}`);
      });
  };
}

  return (
    
      
        Login
      
      
        
          

            

            
              
            
          
        
      
    
  );

📌 Firebase 공식문서 - Google을 사용하여 인증

드디어 계정 생성 부분을 완료했습니다. 다음 시간부터는 TODO LIST를 만들어보도록 하겠습니다.

[React] TODO LIST 만들기 (3) - Firebase (signInWithEmailAndPassword)로 로그인 하기

Mon, 21 Nov 2022 06:41:28 GMT

1. 들어가기 전

저번 포스팅에서 이메일과 비밀번호를 사용하여 계정을 만들어보았습니다. 이번 시간에는 만든 이메일과 비밀번호를 사용하여 로그인을 해보겠습니다.

2. 목표

firebase signInWithEmailAndPassword 을 사용하여 로그인을 한다.

로그인 정보를 가져와서 전역에서 사용할 수 있도록 한다.

3. 로그인

3.1 로그인 폼 만들기

src/pages/login.tsx

import React, { ChangeEvent, useState } from "react";
import { Link, useNavigate} from "react-router-dom";

// INTERFACE
import { UserInputInterface } from "../interfaces/user.interface";

// CSS
import { UserForm } from "../styles/userForm.styled";
import { Button, TextField } from "@mui/material";


export const Login = () => {
  const [inputs, setInputs] = useState({
    email: "",
    password: "",
  });

  const { email, password } = inputs;

  const onChange = (e: ChangeEvent) => {
    const { name, value } = e.currentTarget;
    setInputs({ ...inputs, [name]: value });
  };

  return (
    
      
        Login
      
      
        
          
            
              
              
              
            
          
          
            
              Not a member yet?
            
          
        
      
    
  );
};

💡 onChange 함수까지는 회원가입 절차와 동일하기 때문에 그대로 사용하겠습니다. 회원가입 때와 마찬가지로 모든 input에 값이 있을 때 버튼이 활성화 됩니다.

3.2 onSubmit

이제 본격적으로 로그인 폼을 submit 해보겠습니다. 폼을 제출할 때 firebase의 signInWithEmailAndPassword 을 사용하여 유저 정보를 가져오겠습니다. 유저 정보를 성공적으로 가져왔다면 '/' 경로로 이동하도록 하겠습니다.

추가 부분만 작성하겠습니다.

// FIREBASE
import { firebaseAuth } from "../initFirebase";
import { signInWithEmailAndPassword } from "firebase/auth";

export const Login = () => {

// ...기존 내용 

  const onSubmit = async (e: ChangeEvent) => {
    e.preventDefault();
    await signInWithEmailAndPassword(firebaseAuth, email, password)
      .then((userCredential) => {
        const user = userCredential.user;
        console.log(user);
        navigate("/");
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        console.warn(`${errorCode} = ${errorMessage}`);
      });
  };

   // .. return 부분
}

📌 [Firebase 공식 문서 - 이메일 주소와 비밀번호로 사용자 로그인] (https://firebase.google.com/docs/auth/web/password-auth)

이제 이메일 / 비밀번호를 사용하여 로그인을 할 수 있습니다. 로그인 한 회원의 정보를 앱 전반적으로 사용하면 더 편리하게 사용할 수 있을 것 같습니다. 지금부터 앱 전반적으로 유저 정보를 사용하는 방법에 대해 알아보겠습니다.

4. 로그인 한 유저 정보 받아오기

4.1 App.tsx 수정

앱이 실행할 때 Firebase의 onAuthStateChanged을 사용하여 현재 로그인한 유저의 uid 값을 가져옵니다. 그 다음 Firestore에 저장한 user 정보를 가져와서 userInfo 변수에 넣어두겠습니다. 앞으로 이 userInfo가 앱 전반적으로 사용하게 될 유저의 정보입니다.

src/App.tsx

import React, { useEffect, useState } from "react";

// FIREBASE
import { firebaseAuth, fireStoreJob } from "./initFirebase";
import { onAuthStateChanged } from "firebase/auth";
import { collection, query, where, getDocs } from "firebase/firestore";

// COMPONENTS
import { AppRouter } from "./routes/Router";

import "./styles/App.css";
import { UserInterface } from "./interfaces/user.interface";

const App = () => {
  const [init, setInit] = useState(false);
  const [isLogin, setIsLogin] = useState(false);
  const [userInfo, setUserInfo] = useState(null);
  useEffect(() => {
    onAuthStateChanged(firebaseAuth, async (user) => {
      if (user) {
        // 'users' collection에서 유저 정보 가져오기
        const q = query(
          collection(fireStoreJob, "users"),
          where("uid", "==", user.uid)
        );
        const querySnapshot = await getDocs(q);
        querySnapshot.forEach((doc) => {
          const data = doc.data();
          // 유저 정보 저장
          setUserInfo({
            uid: data.uid,
            email: data.email,
            displayName: data.displayName,
            date_created: data.date_created,
          });
        });
        setIsLogin(true);
      } else {
        setIsLogin(false);
      }
      setInit(true);
    });
  }, []);

  return (
    <>
      {" "}
      {init ? (
        
      ) : (
        "Initializing..."
      )}
    
  );
};

export default App;

앱이 실행될 때 로그인한 유저가 있는 지 확인한 후 AppRouter에 isLogin 값과 userInfo를 전달하겠습니다.

📌 [Firebase 공식 문서 - 현재 로그인한 사용자 가져오기] (https://firebase.google.com/docs/auth/web/manage-users?hl=ko)

5. 라우터 수정

src/routes/Router.tsx

로그인 여부에 따라 다음과 같이 설정하겠습니다.

로그인 한 경우 : 메인 페이지로 이동 (유저 정보 전달) 로그인 하지 않은 경우 : 로그인 페이지로 이동

import React from "react";
import {BrowserRouter, Routes, Route} from "react-router-dom";

// INTERFACE
import {UserInterface} from "../interfaces/user.interface";

// COMPONENTS
import {SignUp} from "../pages/signUp";
import {Login} from "../pages/login";
import {Main} from "../pages/main";

type AppRouterType = {
    isLogin: boolean;
    userInfo: UserInterface | null;
};

export const AppRouter = ({isLogin, userInfo}: AppRouterType) => {
    return (
        
            
                {isLogin ? (
                    <>
                        }>
                    
                ) : (
                    <>
                        }>
                        }>

                    
                )}
            
        
    );
};

로그인 여부에 따라 각 pages에 다른 값을 전달하도록 했습니다. 이제 로그인 한 유저의 정보를 main에서도 받을 수 있습니다. main에서 어떻게 사용할 지는 다음 포스팅에서 자세히 작성하도록 하겠습니다.

[React] TODO LIST 만들기 (2) - Firebase로 회원가입 하기

Sun, 20 Nov 2022 13:07:51 GMT

1. 들어가기전

저번 포스팅에서 이번 프로젝트에서 사용할 firebase 사용을 위한 설정을 했습니다. 이번에는 firebase로 회원가입을 해보도록 하겠습니다.

2. 목표

firebase 의 createUserWithEmailAndPassword 을 사용하여 계정을 생성 한다.

생성된 계정을 firestore 에 저장한다.
회원가입 후 로그인 페이지로 이동한다.
MUI을 사용하여 UI를 만든다.

3. 필요한 패키지 설치

$ npm install react-router react-router-dom 
$ npm install -D @types/react-router @types/react-router-dom
$ npm install --save styled-components
$ npm install @mui/material @emotion/react @emotion/styled
$ npm install @mui/icons-material

4. 파일 생성

먼저 회원가입과 로그인 페이지를 만들어 보겠습니다.

4.1 signUp.tsx 파일 생성

src/pages/signUp.tsx

import React from "react";

export const SignUp = () => {
    return (
        <>
            Sigin Up Page
        
    )
}

4.2 login.tsx 파일 생성

src/pages/login.tsx

import React from "react";

export const Login = () => {
    return (
        <>
            Login Page
        
    )
}

4.3 userForm styled 파일 생성

src/styles/userForm.styled.ts

import styled from "styled-components";

export const UserForm = styled.div``;

5. 라우터 설정

http://localhost:3000/signup 에 접속했을 때 회원가입 페이지가 나올 수 있도록 라우터를 설정하도록 하겠습니다.

src/routes/Router.tsx

import React from "react";
import {BrowserRouter, Routes, Route} from "react-router-dom";

// COMPONENTS
import {SignUp} from "../pages/signUp";
import {Login} from "../pages/login"

export const AppRouter = () => {
    return (
        
            
                }>
                }>
            
        
    )
}

💡 회원가입 후 바로 로그인 페이지로 이동할 예정이라 로그인 페이지에 접속할 수 있도록 미리 작성했습니다.

6. 회원가입

6.1 Interface 설정

src/interfaces/user.interface.ts

export interface UserInterface {
    uid: string,
    email: string,
    displayName: string,
    date_created: string,
}

export interface UserInputInterface {
    email: string,
    displayName?: string,
    password: string
}

6.2 회원가입 form 만들기

src/pages/signUp.tsx

import React from "react";

// INTERFACE
import {UserInputInterface} from "../interfaces/user.interface";

// CSS
import {UserForm} from "../styles/userForm.styled";
import {Button, TextField} from "@mui/material";


export const SignUp = () => {
    return 
        
            TODO LIST
        
        
            
                
                    
                        
                        
                        
                        
                    
                
            
        
    
}

6.3 userForm styled 설정

src/styles/userForm.styled.ts

import { styled } from "@mui/material";

export const UserForm = styled("div")`
  .doc-title {
    padding-top: 50px;
    display: block;
    width: 580px;
    height: 27px;
    margin: 0 auto;
    background-size: 100px 80px;
    font-size: 19px;
    line-height: 27px;
    text-align: center;
    vertical-align: top;
  }

  .user-form-article {
    box-sizing: border-box;
    width: 580px;
    height: 100%;
    margin: 40px auto 42px;
    padding: 0 69px;
    border: 1px solid rgba(0, 0, 0, .12);
    font-size: 12px;
  }

  .user-form-article > .user-form-wrap {
    word-wrap: break-word;
    position: relative;
    padding: 10px 0px
  }

  .user-form {
    padding: 50px;
  }

  .user-form > form {
    display: flex;
    flex-direction: column;
  }

  .user-form > form div {
    margin : 8px 0px;
  }

  .user-form > form button {
    margin-top: 10px;
    padding: 15px;
    margin-bottom: 20px;
  }
`;

결과

회원가입 폼을 다 만들었습니다. 지금부터 기능을 하나씩 붙여보도록 하겠습니다.

6.4 onChange

input에 값이 입력될 때마다 handle 하는 함수 onChange 함수를 만들어보겠습니다.

(+) Button은 모든 input에 값이 있을 때 활성화하도록 했습니다.

import React, {ChangeEvent, useState} from "react";

// INTERFACE
import {UserInputInterface} from "../interfaces/user.interface";

// CSS
import {UserForm} from "../styles/userForm.styled";
import {Button, TextField} from "@mui/material";


export const SignUp = () => {
    const [inputs, setInputs] = useState({
        email: "",
        displayName: "",
        password: ""
    });

    const {email, displayName, password} = inputs;

    const onChange = (e: ChangeEvent): void => {
        const {name, value} = e.currentTarget;
        setInputs({...inputs, [name]: value});
    }

    return 
        
            TODO LIST
        
        
            
                
                    
                        
                        
                        
                        
                    
                
            
        
    
}

6.5 onSubmit

form을 제출을 handle 하는 onSubmit 함수입니다. onSubmit 를 할 때 firebase auth 와 firestore에 데이터를 저장합니다.

import React, {ChangeEvent, useState} from "react";
import {useNavigate} from 'react-router-dom'
import moment from "moment";

// FIREBASE
import {firebaseAuth, fireStoreJob} from "../initFirebase";
import {createUserWithEmailAndPassword} from "firebase/auth";
import {collection, addDoc} from "firebase/firestore";

// INTERFACE
import {UserInputInterface} from "../interfaces/user.interface";

// CSS
import {UserForm} from "../styles/userForm.styled";
import {Button, TextField} from "@mui/material";


export const SignUp = () => {
    const firestore_path = 'users'; // firebase collection 이름
    const navigate = useNavigate();
    const onSubmit = async (e: ChangeEvent) => {
        e.preventDefault();
        await createUserWithEmailAndPassword(firebaseAuth, email, password)
            .then(async (userCredential) => {
                const user = userCredential.user;
                console.log(user)
          // 계정 생성을 하고 나면 firestore에 데이터를 저장합니다. 
                await addDoc(collection(fireStoreJob, firestore_path), {
                    uid: user.uid,
                    ...inputs,
                    date_created: moment().utc().format()
                })
          // 모든 과정이 끝나면 login 페이지로 이동합니다. 
                navigate("/");

            })
            .catch((error) => {
                const errorCode = error.code;
                const errorMessage = error.message;
                console.warn(`${errorCode} - ${errorMessage}`)
            })
    }

    return 
        
            TODO LIST
        
        
            
                
                    
                        
                        
                        
                        
                    
                
            
        
    
}

6.6 전체코드

import React, {ChangeEvent, useState} from "react";
import {useNavigate} from 'react-router-dom'
import moment from "moment";

// FIREBASE
import {firebaseAuth, fireStoreJob} from "../initFirebase";
import {createUserWithEmailAndPassword} from "firebase/auth";
import {collection, addDoc} from "firebase/firestore";

// INTERFACE
import {UserInputInterface} from "../interfaces/user.interface";

// CSS
import {UserForm} from "../styles/userForm.styled";
import {Button, TextField} from "@mui/material";


export const SignUp = () => {
    const firestore_path = 'users';
    const navigate = useNavigate();
    const [inputs, setInputs] = useState({
        email: "",
        displayName: "",
        password: ""
    });

    const {email, displayName, password} = inputs;

    const onChange = (e: ChangeEvent): void => {
        const {name, value} = e.currentTarget;
        setInputs({...inputs, [name]: value});
    }

    const onSubmit = async (e: ChangeEvent) => {
        e.preventDefault();
        await createUserWithEmailAndPassword(firebaseAuth, email, password)
            .then(async (userCredential) => {
                const user = userCredential.user;
                console.log(user)
                await addDoc(collection(fireStoreJob, firestore_path), {
                    uid: user.uid,
                    ...inputs,
                    date_created: moment().utc().format()
                })
                navigate("/login");

            })
            .catch((error) => {
                const errorCode = error.code;
                const errorMessage = error.message;
                console.warn(`${errorCode} - ${errorMessage}`)
            })
    }

    return 
        
            TODO LIST
        
        
            
                
                    
                        
                        
                        
                        
                    
                
            
        
    
}

6.7 firebase 확인

firebase에 방금 입력한 내용이 저장된 것을 확인할 수 있습니다.

[React] TODO LIST 만들기 (1) - 프로젝트 생성 및 Firebase 설정

Sun, 20 Nov 2022 01:17:45 GMT

1. 들어가기 전

처음에 리액트를 공부했을 때 Todo-list 프로그램을 만든 적이 있습니다. 그때는 데이터베이스 없이 로컬스토리지에 저장하여 Todo 리스트를 만들었는데, 이번에는 한 단계 올려서 firebase 를 사용하여 Todo-list 프로그램을 만들어보고자 합니다.

2. 목표

프로젝트를 생성한다.

프로젝트에 Firebase를 사용할 수 있도록 준비한다.

3. 프로젝트 생성

npx create-react-app react-todo-list --template typescript

4. 필요한 패키지 설치

npm install moment
npm install firebase

5. Firebase 설치

5.1 Firebase 접속

https://firebase.google.com/?hl=ko

5.2 프로젝트 추가 클릭

5.3 프로젝트 만들기

5.4 Authentication 설정

5.5 Authentication 시작하기

5.6 기본 제공업체 > 이메일/비밀번호 클릭

5.7 완료 후 새 제공업체 추가 클릭 > Google 추가

5.8 로그인 정보 제공 확인

5.9 Firebase APP 설정

5.10 configue 확인

5.11 Firestore 설치

💡 Cloud Firestore 위치 : asia-northeast3 (Seoul)

6. `.env` 파일 작성

6.1 root에 .env 파일 만들기

.env

REACT_APP_FIREBASE_API_KEY=Your Config info
REACT_APP_FIREBASE_AUTH_DOMAIN=Your Config info
REACT_APP_FIREBASE_PROJECTID=Your Config info
REACT_APP_FIREBASE_STORAGEBUCKET=Your Config info
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=Your Config info
REACT_APP_FIREBASE_APP_ID=Your Config info

💡 리액트에서 .env 변수를 사용하기 위해서 REACT_APP 을 앞에 붙여줘야 합니다.

6.2 .gitignore 에 .env 추가

6.3 src/initFirebase.ts 생성

src/initFirebase.ts

import {initializeApp} from "firebase/app";
import {getAuth} from "firebase/auth";
import {getFirestore} from "firebase/firestore";


const firebaseConfig = {
    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.REACT_APP_FIREBASE_PROJECTID,
    storageBucket: process.env.REACT_APP_FIREBASE_STORAGEBUCKET,
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_FIREBASE_APP_ID
};

const firebaseApp = initializeApp(firebaseConfig);

export const firebaseAuth = getAuth(firebaseApp);
export const fireStoreJob = getFirestore(firebaseApp);

firebase와 관련한 기본 준비를 마쳤습니다. 다음 포스팅에는 firebase을 통해 회원가입 기능을 만들어보고도록 하겠습니다.

[NestJS] Multer을 이용하여 사진 여러 장 업로드하기

Thu, 03 Nov 2022 06:44:02 GMT

들어가기 전

이번 포스팅에서는 NestJs에서 multer을 사용하여 이미지 업로드를 해보고자 한다.

1. 프로젝트 생성

$ npm i -g @nestjs/cli
$ nest new file-upload

2. 관련 폴더 및 파일

폴더 및 파일 생성

$ nest g controller file
$ nest g service file
$ nest g module file

Multer options 설정하기

패키지 설치

$ npm i -D @types/multer

src/lib/multerOptions.ts


// 업로드 가능한 확장자 설정
export const imageFileFilter = (req, file, callback) => {
  if (!file.originalname.match(/\.(jpg|jpeg|png)$/)) {
    return callback(new Error("Only image files are allowed!"), false);
  }
  callback(null, true);
};

// 파일명 중복을 피하기 위해 파일명 수정
export const editFileName = (req, file, callback) => {
  const name = file.originalname.split(".")[0];
  const fileExtName = file.originalname.slice(((file.originalname.lastIndexOf(".") - 1) + 2));
  const time = Date.now();
  const randomName = `${name}-${time}`
  callback(null, `${randomName}.${fileExtName}`);
};

💡 파일 업로드할 때 필요한 설정이다. 참고로 파일명을 재설정 하는 작업에서 Timestemp로 random 값을 만들었는데 다양한 방법으로 설정해도 상관없다.

File Upload 하기 (이미지 여러장)

src/file/file.moudle.ts

import { Module } from "@nestjs/common";
import { MulterModule } from "@nestjs/platform-express";
import { FileController } from "./file.controller";
import { FileService } from "./file.service";

@Module({
  imports: [
    MulterModule.register({
      dest: "./upload"
    })
  ],
  controllers: [FileController],
  providers: [FileService]
})
export class FileModule {
}

💡 MulterModule.register() improt 하고 업로드할 경로 설정하기

src/file.controller.ts

import {
  Controller, Get, Param,
  Post, Res,
  UploadedFiles,
  UseInterceptors
} from "@nestjs/common";
import { FileService } from "./file.service";
import { FilesInterceptor } from "@nestjs/platform-express";
import { diskStorage } from "multer";
import { editFileName, imageFileFilter } from "../lib/multerOptions";


// @ts-ignore
@Controller("file")
export class FileController {
  constructor(private readonly fileService: FileService) {
  }

  @Post("/")
  // @ts-ignore
  @UseInterceptors(FilesInterceptor("files", 5, {
    storage: diskStorage({
      destination: './upload',
      filename: editFileName
    }),
    fileFilter: imageFileFilter
  }))
  uploadFile(@UploadedFiles() files: Array) {
    return this.fileService.uploadFiles(files);
  }

}

💡 files 필드명으로 5개까지 업로드 할 수 있도록 설정했다. filename 과 fileFilter 은 방금 만든 src/lib/multerOptions.ts 에서 import 했다.

src/file/file.service.ts

import { Injectable } from "@nestjs/common";


@Injectable()
export class FileService {
  public uploadFiles(files: Array) {
    const result = [];

    files.forEach((file) => {
      const res = {
        originalname: file.originalname,
        filename: file.filename
      };
      result.push(res);
    });

    return result;
  }
}

src/main.ts

import { NestFactory } from "@nestjs/core";
import { NestExpressApplication } from "@nestjs/platform-express";
import { join } from "path";
import { AppModule } from "./app.module";


async function bootstrap() {
  const app = await NestFactory.create(
    AppModule
  );

  app.useStaticAssets(join(__dirname, "..", "upload"));
  await app.listen(9001).then(() => {
    console.log(`http://localhost:9001`);
  });
}

bootstrap();

💡 정적 파일 경로 설정해주기

3. Postman

파일 업로드 하기

upload 폴더 확인

파일 찾기

src/file/file.controller.ts

// 기존 코드에 추가하기
  @Get("/:imgpath")
  seeUploadedFile(@Param("imgpath") image, @Res() res) {
    return res.sendFile(image, { root: "./upload" });
  }

전체 코드 보기

Kylie's Archive

웹 최적화, 왜 중요하고 어떻게 할까?

들어가기 전

1. 이미지 최적화

2. 코드 최적화

3. 캐싱 활용

4. 서버 응답 시간 단축

5. 렌더링 최적화

부록: 웹 최적화 도구 및 지표

웹 접근성과 SEO

들어가기 전

1. 의미 있는 HTML (Semantic HTML) 사용하기

2. 이미지에는 alt 속성을!

3. 명확한 제목 계층 (Heading Structure) 활용하기

태그는 페이지당 하나만 사용하여 가장 중요한 제목을 나타내세요.

, , 등을 순서에 맞게 사용하여 콘텐츠의 논리적인 계층을 만듭니다.

, 등을 순서에 맞게 사용하여 콘텐츠의 논리적인 계층을 만듭니다.

등을 순서에 맞게 사용하여 콘텐츠의 논리적인 계층을 만듭니다.

4. 키보드 탐색 가능하게 만들기

5. 반응형 웹 디자인

부록

보안 헤더 & 암호화로 철통 방어하기

들어가기 전

1. HTTPS와 TLS: 안전한 웹의 시작

1-1. SSL vs TLS: 이름은 다르지만 결국 '그 기술'이 발전한 거예요!

1-2. HTTPS 적용 과정: 내 웹사이트에 자물쇠 달아주기

2. HTTP/2 & HTTP/3: 웹사이트를 더 빠르고 안전하게!

2-1. HTTP/2의 보안 및 성능 이점

2-2. HTTP/3 & QUIC: 차세대 웹의 주인공

2-3. 내 웹사이트에 HTTP/2와 HTTP/3 적용하기

3. 웹사이트를 더 안전하게 만드는 '보안 헤더'들

3-1. Strict-Transport-Security (HSTS)

3-2. X-Frame-Options

3-3. X-Content-Type-Options

3-4. Referrer-Policy

3-5. Permissions-Policy (구 Feature-Policy)

3-6. Content-Security-Policy (CSP)

4. 데이터 암호화 전략: 꼼꼼하게 잠그기

4-1. 전송 중 암호화 (In Transit)

4-2. 저장 시 암호화 (At Rest)

부록: 더 깊이 알아보기

A. 보안 헤더 Express.js에서 쉽게 설정하기

B. 암호화에 유용한 도구들

C. 용어 정리: SSL vs TLS (더 자세히 알아볼까요?)

D. 왜 아직도 'SSL'이라는 말을 많이 쓸까요? (용어 혼동의 역사)

XSS 완전정복 & 입력 검증으로 안전한 웹 만들기

들어가기 전

1. XSS 기초: 왜 위험할까?

2. XSS 유형별 사례

2-1. Stored XSS (영구 저장형)

2-2. Reflected XSS (반사형)

검색 결과: "<%= req.query.q %>"

2-3. DOM-based XSS (클라이언트 측)

3. 방어 기법: 다양한 XSS 공격 차단하기

3-1. 입력 검증(Validation)

3-2. 출력 인코딩·이스케이프(Escaping)

3-3. 자동 이스케이프 기능 활용

3-4. HTML Sanitization

3-5. 보안 HTTP 헤더 설정

3-6. Content Security Policy (CSP)

3-7. 서버 측 XSS 방어 추가 기법

3-7-1. 전역 출력 인코딩 적용

3-7-2. 서버 측 Sanitization

3-7-3. HTTP 응답 시 자동 헤더 적용

3-7-4. 라우터별 세부 방어 정책

부록

A. 주요 XSS 방어 함수·태그 정리

B. 테스트 및 디버깅 도구

교차 출처(CORS) & 요청 위조(CSRF)

들어가기 전

1. CORS(Cross-Origin Resource Sharing)

2. CSRF(Cross-Site Request Forgery) 공격

공격 시나리오 (실제 코드 동작 흐름)

방어 기법

1. CSRF 토큰 사용 (Synchronizer Token Pattern)

2. SameSite 쿠키 설정

3. Custom Header 확인

4. Referer/Origin 헤더 검증

SameSite 쿠키와 토큰 전략 심화

인증·인가 & 세션 관리 A to Z

2. 이미지에는 `alt` 속성을!

,
,
등을 순서에 맞게 사용하여 콘텐츠의 논리적인 계층을 만듭니다.

,
등을 순서에 맞게 사용하여 콘텐츠의 논리적인 계층을 만듭니다.