์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- JS#3์ผ์ฐจ๋ฌ๋ฆฌ์#์ด๋ฐ์ธ๋ฐ#์๊ฐ๊ธ๋ฐฉ~
- CSS
- ์๋ฐ์คํฌ๋ฆฝํธ#JS#slice#splice
- cmarket
- ์๋ฐ์คํฌ๋ฆฝํธ#JS#var#let#const#undefined#null
- ์๋ฐ์คํฌ๋ฆฝํธ#์กฐ๊ฑด๋ฌธ#๋ฌธ์์ด
- react
- https://lo-victoria.com/introduction-to-redux-toolkit-for-beginners
- https://www.daleseo.com/js-array-slice-splice/
- ํท๊ฐ๋ฆฐ๋ค~
- User Flow
- removeCookie
- UI
- ๋ ธ๋๊ต๊ณผ์
- for~in/for~of
- ์๋ฐ์คํฌ๋ฆฝํธ
- https://developer-talk.tistory.com/299
- https://dasima.xyz/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%A0%9C%EA%B3%B1-math-pow-%EA%B3%84%EC%82%B0/
- ๋ด์ฅ๊ณ ์ฐจํจ์
- toString#String
- Beesbeesbees
- js
- ใทใ
- dom
- slice/splice/split
- @redux-toolkit
- UX
- redux์ํ์ ์ง
- variable#function
- children vs childrenNodes
- Today
- Total
Daily Front_Minhhk
HTTP/HTTPS ๋ณธ๋ฌธ
๐ HTTP
HTTP
- ํด๋ผ์ด์ธํธ ์๋ฒ ๊ตฌ์กฐ
- Request Response ๊ตฌ์กฐ
- ๋ฌด์ํ ํ๋กํ ์ฝ(Stateless)
- ๋ก๊ทธ์ธ์ด ํ์ ์๋ ๋จ์ํ ์๋น์ค ์๊ฐ ํ๋ฉด ๊ฐ์ ๊ฒฝ์ฐ,,
- ์ฅ์ : ์๋ฒ ํ์ฅ์ฑ ๋์(์ค์ผ์ผ ์์)→(์๋ต ์๋ฒ๋ฅผ ์ฝ๊ฒ ๋ฐ๊ฟ ์ ์์ด ๋ฌดํํ ์๋ฒ ์ฆ์ค ๊ฐ๋ฅ)
- ๋จ์ : ํด๋ผ์ด์ธํธ๊ฐ ์ถ๊ฐ ๋ฐ์ดํฐ ์ ์ก
- ๋น์ฐ๊ฒฐ์ฑ(Connectionless)
- ์์ฒญ์ ์ฃผ๊ณ ๋ฐ์ ๋๋ง ์ฐ๊ฒฐ์ ์ ์งํ๊ณ ์๋ต์ ์ฃผ๊ณ ๋๋ฉด TCP/IP ์ฐ๊ฒฐ์ ๋๋๋ค
- ๋ฐ๋ผ์ ์ต์ํ ์์์ผ๋ก ์๋ฒ์ ์ง ๊ฐ๋ฅ
- HTTP ๋ฉ์ธ์ง
- ๋จ์ํจ, ํ์ฅ ๊ฐ๋ฅ
๐ HTTPS (HTTP Secure)
์ํธํ ๋ฐฉ์
๋ฐ์ดํฐ๋ฅผ ์ํธํ๋ฅผ ํ ๋์๋ ์ํธํํ ๋ ์ฌ์ฉํ ํค, ์ํธํํ ๊ฒ์ ํด์(๋ณตํธํ)ํ ๋ ์ฌ์ฉํ ํค๊ฐ ํ์ํฉ๋๋ค.
์ด ๋ ์ํธํ์ ๋ณตํธํํ ๋ ์ฌ์ฉํ๋ ํค๊ฐ ๋์ผํ๋ค๋ฉด ๋์นญ ํค ์ํธํ ๋ฐฉ์,
๋ค๋ฅด๋ค๋ฉด ๊ณต๊ฐ ํค(๋น๋์นญ ํค) ์ํธํ ๋ฐฉ์์ด๋ผ๊ณ ํฉ๋๋ค.
1. ๋์นญ ํค ์ํธํ ๋ฐฉ์
๋์นญ ํค ์ํธํ ๋ฐฉ์์ ํ๋์ ํค๋ง ์ฌ์ฉํฉ๋๋ค. ์ํธํํ ๋ ์ฌ์ฉํ ํค๋ก๋ง ๋ณตํธํ๊ฐ ๊ฐ๋ฅํฉ๋๋ค.
๋ ๊ฐ์ ํค๋ฅผ ์ฌ์ฉํด์ผํ๋ ๊ณต๊ฐ ํค ๋ฐฉ์์ ๋นํด์ ์ฐ์ฐ ์๋๊ฐ ๋น ๋ฅด๋ค๋ ์ฅ์ ์ด ์์ต๋๋ค.
ํ์ง๋ง ํค๋ฅผ ์ฃผ๊ณ ๋ฐ๋ ๊ณผ์ ์์ ํ์ทจ ๋นํ์ ๊ฒฝ์ฐ์๋ ์ํธํ๊ฐ ์์ฉ์์ด์ง๊ธฐ ๋๋ฌธ์ ํค๋ฅผ ๊ด๋ฆฌํ๋๋ฐ ์ ๊ฒฝ์ ๋ง์ด ์จ์ผ ํฉ๋๋ค.
2. ๊ณต๊ฐ ํค(๋น๋์นญ ํค) ์ํธํ ๋ฐฉ์
๋น๋์นญ ํค ์ํธํ ๋ฐฉ์์ ๋ ๊ฐ์ ํค๋ฅผ ์ฌ์ฉํฉ๋๋ค. ์ํธํํ ๋ ์ฌ์ฉํ ํค์ ๋ค๋ฅธ ํค๋ก๋ง ๋ณตํธํ๊ฐ ๊ฐ๋ฅํฉ๋๋ค.
์ฌ๊ธฐ์ ๋ ๊ฐ์ ํค๋ฅผ ๊ฐ๊ฐ ๊ณต๊ฐ ํค, ๋น๋ฐ ํค ๋ผ๊ณ ๋ถ๋ฆ ๋๋ค.
์ฌ๊ธฐ์ ๊ณต๊ฐ ํค๋ ์ด๋ฆ ๊ทธ๋๋ก ๊ณต๊ฐ๋์ด ์๊ธฐ ๋๋ฌธ์ ๋๊ตฌ๋ ์ง ์ ๊ทผ ๊ฐ๋ฅํฉ๋๋ค.
๋๊ตฌ๋ ์ด ๊ณต๊ฐ ํค๋ฅผ ์ฌ์ฉํด์ ์ํธํํ ๋ฐ์ดํฐ๋ฅผ ๋ณด๋ด๋ฉด, ๋น๋ฐ ํค๋ฅผ ๊ฐ์ง ์ฌ๋๋ง ๊ทธ ๋ด์ฉ์ ๋ณตํธํํ ์ ์์ต๋๋ค.
๋ณดํต ์์ฒญ์ ๋ณด๋ด๋ ์ฌ์ฉ์๊ฐ ๊ณต๊ฐ ํค๋ฅผ, ์์ฒญ์ ๋ฐ๋ ์๋ฒ๊ฐ ๋น๋ฐ ํค๋ฅผ ๊ฐ์ง๋๋ค. ์ด ๋, ๋น๋ฐ ํค๋ ์๋ฒ๊ฐ ํดํน๋นํ๋ ๊ฒ ์๋ ์ด์ ํ์ทจ๋์ง ์์ต๋๋ค.
์ด๋ฌํ ๊ณต๊ฐ ํค ๋ฐฉ์์ ๊ณต๊ฐ ํค๋ฅผ ์ฌ์ฉํด ์ํธํํ ๋ฐ์ดํฐ๊ฐ ํ์ทจ ๋นํ๋ค๊ณ ํ๋๋ผ๋, ๋น๋ฐ ํค๊ฐ ์๋ค๋ฉด ๋ณตํธํํ ์ ์์ผ๋ฏ๋ก ๋์นญ ํค ๋ฐฉ์๋ณด๋ค ๋ณด์์ฑ์ด ๋ ์ข์ต๋๋ค.
ํ์ง๋ง ๋์นญ ํค ๋ฐฉ์ ๋ณด๋ค ๋ ๋ณต์กํ ์ฐ์ฐ์ด ํ์ํ์ฌ ๋ ๋ง์ ์๊ฐ์ ์๋ชจํ๋ค๋ ๋จ์ ์ด ์์ต๋๋ค.
SSL/TLS ํ๋กํ ์ฝ
HTTPS๋ HTTP ํต์ ์ ํ๋ ์์ผ ๋ถ๋ถ์์ SSL ํน์ TLS๋ผ๋ ํ๋กํ ์ฝ์ ์ฌ์ฉํ์ฌ ์๋ฒ ์ธ์ฆ๊ณผ ๋ฐ์ดํฐ ์ํธํ๋ฅผ ์งํํฉ๋๋ค.
์ฌ๊ธฐ์ SSL์ด ํ์คํ๋๋ฉฐ ๋ฐ๋ ์ด๋ฆ์ด TLS์ด๋ฏ๋ก ๊ฐ์ ์ฌ์ค์ ๊ฐ์ ํ๋กํ ์ฝ์ด๋ผ๊ณ ์๊ฐํ์๋ฉด ๋ฉ๋๋ค.
SSL/TLS๋ ๋ค์๊ณผ ๊ฐ์ ํน์ง์ ๊ฐ์ง๋๋ค.
- CA๋ฅผ ํตํ ์ธ์ฆ์ ์ฌ์ฉ
- ๋์นญ ํค, ๊ณต๊ฐ ํค ์ํธํ ๋ฐฉ์์ ๋ชจ๋ ์ฌ์ฉ
์ธ์ฆ์์ CA(Certificate Authority)
HTTPS๋ฅผ ์ฌ์ฉํ๋ฉด ๋ธ๋ผ์ฐ์ ๊ฐ ์๋ฒ์ ์๋ต๊ณผ ํจ๊ป ์ ๋ฌ๋ ์ธ์ฆ์๋ฅผ ํ์ธํ ์ ์์ต๋๋ค.
์ด๋ฌํ ์ธ์ฆ์๋ ์๋ฒ์ ์ ์์ ๋ณด์ฆํด์ค๋๋ค.
์ด๋ ์ธ์ฆ์๋ฅผ ๋ฐ๊ธํด์ฃผ๋ ๊ณต์ธ๋ ๊ธฐ๊ด๋ค์ Certificate Authority, CA๋ผ๊ณ ๋ถ๋ฆ ๋๋ค.
1. ์๋ฒ๋ ์ธ์ฆ์๋ฅผ ๋ฐ๊ธ๋ฐ๊ธฐ ์ํด์ CA๋ก ์๋ฒ์ ์ ๋ณด์ ๊ณต๊ฐ ํค๋ฅผ ์ ๋ฌํฉ๋๋ค.
2. CA๋ ์๋ฒ์ ๊ณต๊ฐ ํค์ ์ ๋ณด๋ฅผ CA์ ๋น๋ฐ ํค๋ก ์ํธํํ์ฌ ์ธ์ฆ์๋ฅผ ๋ฐ๊ธํฉ๋๋ค.
3. ์๋ฒ๋ ํด๋ผ์ด์ธํธ์๊ฒ ์์ฒญ์ ๋ฐ์ผ๋ฉด CA์๊ฒ ๋ฐ๊ธ๋ฐ์ ์ธ์ฆ์๋ฅผ ๋ณด๋ด์ค๋๋ค.
4. ์ด ๋, ์ฌ์ฉ์๊ฐ ์ฌ์ฉํ๋ ๋ธ๋ผ์ฐ์ ๋ CA๋ค์ ๋ฆฌ์คํธ์ ๊ณต๊ฐ ํค๋ฅผ ๋ด์ฅํ๊ณ ์์ต๋๋ค.
5. ์ฐ์ ํด๋น ์ธ์ฆ์๊ฐ ๋ฆฌ์คํธ์ ์๋ CA๊ฐ ๋ฐ๊ธํ ์ธ์ฆ์์ธ์ง ํ์ธํ๊ณ , ๋ฆฌ์คํธ์ ์๋ CA๋ผ๋ฉด ํด๋นํ๋ CA์ ๊ณต๊ฐ ํค๋ฅผ ์ฌ์ฉํด์ ์ธ์ฆ ์์ ๋ณตํธํ๋ฅผ ์๋ํฉ๋๋ค.
6. CA์ ๋น๋ฐ ํค๋ก ์ํธํ๋ ๋ฐ์ดํฐ(์ธ์ฆ์)๋ CA์ ๊ณต๊ฐ ํค๋ก๋ง ๋ณตํธํ๊ฐ ๊ฐ๋ฅํ๋ฏ๋ก, ์ ๋ง๋ก CA์์ ๋ฐ๊ธํ ์ธ์ฆ์๊ฐ ๋ง๋ค๋ฉด ๋ณตํธํ๊ฐ ์ฑ๊ณต์ ์ผ๋ก ์งํ๋์ด์ผ ํฉ๋๋ค.
- ๋ณตํธํ๊ฐ ์ฑ๊ณต์ ์ผ๋ก ์งํ ๋๋ค๋ฉด, ํด๋ผ์ด์ธํธ๋ ์๋ฒ์ ์ ๋ณด์ ๊ณต๊ฐ ํค๋ฅผ ์ป๊ฒ ๋จ๊ณผ ๋์์ ํด๋น ์๋ฒ๊ฐ ์ ๋ขฐํ ์ ์๋ ์๋ฒ์์ ์ ์ ์๊ฒ ๋ฉ๋๋ค.
- ๋ณตํธํ๊ฐ ์คํจํ๋ค๋ฉด, ์ด๋ ์๋ฒ๊ฐ ๋ณด๋ด์ค ์ธ์ฆ์๊ฐ ์ ๋ขฐํ ์ ์๋ ์ธ์ฆ์์์ ํ์ธํ๊ฒ ๋ฉ๋๋ค.
์ ๋ฆฌํ์๋ฉด, ์ด๋ ๊ฒ ์๋ฒ์ ํด๋ผ์ด์ธํธ๊ฐ์ CA๋ฅผ ํตํด ์๋ฒ๋ฅผ ์ธ์ฆํ๋ ๊ณผ์ ๊ณผ ๋ฐ์ดํฐ๋ฅผ ์ํธํํ๋ ๊ณผ์ ์ ์์ฐ๋ฅธ ํ๋กํ ์ฝ์ SSL ๋๋ TLS์ด๋ผ๊ณ ๋งํ๊ณ , HTTP์ SSL/TLS ํ๋กํ ์ฝ์ ๋ํ ๊ฒ์ HTTPS๋ผ๊ณ ํฉ๋๋ค.
HTTPS ์ฌ์ค ์ธ์ฆ์ ๋ฐ๊ธ ๋ฐ ์๋ฒ ๊ตฌํ
Homebrew๋ฅผ ํตํด ์ค์น(macOS)
brew install mkcert
์ธ์ฆ์ ์์ฑ
- ๋ก์ปฌ์ ์ธ์ฆ๋ ๋ฐ๊ธ๊ธฐ๊ด์ผ๋ก ์ถ๊ฐ
mkcert -install
//๋น๋ฒ -> ์ปดํจํฐ ๋น๋ฒ
⇒
- ๋ก์ปฌํ๊ฒฝ์ ๋ํ ์ธ์ฆ์ ๋ง๋ค๊ธฐ → ์๋ ๋ช ๋ น์ด ์ ๋ ฅ
mkcert -key-file key.pem -cert-file cert.pem localhost 127.0.0.1 ::1
localhost, 127.0.0.1(IPv4), ::1(IPv6)์์ ์ฌ์ฉํ ์ ์๋ ์ธ์ฆ์cert.pem, key.pem์ด๋ผ๋ ํ์ผ์ด ์์ฑ๋์๋ค.
โ ๏ธ key.pem์ ๊ฐ์ธํค๋ผ์. git์ ์ปค๋ฐํ์ง๋ง๊ณ , ์ํธ์ฒ๋ผ ๋ค๋ฃจ์ด์ผํ๋ค.
HTTPS ์๋ฒ ์์ฑ
node.js ํ๊ฒฝ์์ https ๋ด์ฅ ๋ชจ๋์ ์ด์ฉํด์ ์์ฑ ๊ฐ๋ฅํ๋ค.
express.js๋ฅผ ํตํด์ ๋ง๋ค์๋ ์๋ค.
๋ฐฉ๊ธ ์์ฑํ ์ธ์ฆ์ ํ์ผ๋ค์ HTTPS ์๋ฒ์ ์ ์ฉํด์ฃผ๋ ์์ ์ด ์ ํ๋์ด์ผํ๋ค.
__dirname์ ํ์ฌ ์คํ ์ค์ธ ํ์ผ ๊ฒฝ๋ก๋ฅผ ๋งํ๋ ๊ฒ์ผ๋ก, ์ ๋๊ฒฝ๋ก๋ฅผ ๋ฃ์ด์ฃผ๋ฉด ๋๋ค.
๋ก์ปฌ์ ์ธ์ฆ๋ ๋ฐ๊ธ๊ธฐ๊ด์ผ๋ก ๋ฑ๋ก์ด ๋์ด์๊ณ , ์ธ์ฆ์๋ ์๋ฒ์ ๊ฐ์ ๊ฒฝ๋ก์ ์์ด์ผ ํ๋ค.
Node.js https ๋ชจ๋ ์ด์ฉ
const https = require('https');
const fs = require('fs');
https
.createServer(
{
key: fs.readFileSync(__dirname + '/key.pem', 'utf-8'),
cert: fs.readFileSync(__dirname + '/cert.pem', 'utf-8'),
},
function (req, res) {
res.write('Congrats! You made https server now :)');
res.end();
}
)
.listen(3001);
์ด์ ์๋ฒ๋ฅผ ์คํํ ํ https://localhost:3001๋ก ์ ์ํ๋ฉด ๋ธ๋ผ์ฐ์ ์ url ์ฐฝ ์ผ์ชฝ์ ์๋ฌผ์ ๊ฐ ์ ๊ฒจ์๋ HTTPSํ๋กํ ์ฝ์ ์ด์ฉํ๋ค๋ ๊ฒ์ ์ ์ ์๋ค!
console.log(req.body);
console.log(userInfo);
express.js ์ด์ฉ
const https = require('https');
const fs = require('fs');
const express = require('express');
const app = express();
https
.createServer(
{
key: fs.readFileSync(__dirname + '/key.pem', 'utf-8'),
cert: fs.readFileSync(__dirname + '/cert.pem', 'utf-8'),
},
app.use('/', (req, res) => {
res.send('Congrats! You made https server now :)');
})
)
.listen(3001);
๋ง์ฝ express.js ๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ,
๋ค์๊ณผ ๊ฐ์ด https.createServer์ ๋ ๋ฒ์งธ ํ๋ผ๋ฏธํฐ์ ๋ค์ด๊ฐ callback ํจ์๋ฅผ Express ๋ฏธ๋ค์จ์ด๋ก ๊ต์ฒด!
ngrok์ผ๋ก ํฐ๋๋ง๋ ๊ฐ๋ฅํ๋ค.
HTTP๋ก ๋ง๋ค์ด์ง ์๋ฒ๋ฅผ HTTPS ํ๋กํ ์ฝ๋ก ํฐ๋๋ง ํด์ฃผ๋ ํ๋ก๊ทธ๋จ์ด๋ผ๊ณ ํจ!
ngrok - Online in One Line
Zero Trust Add SSO, Mutual TLS, IP Policy, and webhook signature verification.
ngrok.com
'Code๊ฐ๋ฐ์ผ์ง' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[cookie] sprint-auth-cookie (0) | 2023.01.07 |
---|---|
Cookie (0) | 2023.01.07 |
๋คํธ์ํฌ[TCP/UDP, OSI 7] (0) | 2023.01.06 |
์น ์ ๊ทผ์ฑ, WAI-ARIA (1) | 2023.01.02 |
์น ํ์ค, SE (0) | 2022.12.30 |