728x90

๐Ÿ’ป์›น(Web) 29

[React]Firebase๋กœ React ๋ฐฐํฌํ•˜๊ธฐ, Mixed-Content ์—๋Ÿฌ

Netlify๋กœ React ํ”„๋กœ์ ํŠธ๋ฅผ ๋ฐฐํฌํ•œ ์ดํ›„, ์—ฌ๋Ÿฌ๊ฐ€์ง€ ๋ฐฐํฌ๋ฐฉ๋ฒ•์„ ๊ณต๋ถ€ํ•ด๋ณด๊ณ  ์‹ถ์–ด์„œ Firebase๋ฅผ ์ด์šฉํ•ด React ํ”„๋กœ์ ํŠธ๋ฅผ ๋ฐฐํฌํ•˜๋Š” ๋ฐฉ๋ฒ•๋„ ์ •๋ฆฌํ•ด๋ณด์•˜๋‹ค๐Ÿ™Œ๐Ÿป ๐Ÿ”ŽFirebase Firebase๋Š” ๊ฐœ๋ฐœ์„ ํŽธ๋ฆฌํ•˜๊ฒŒ ํ•ด์ฃผ๋Š” ํด๋ผ์šฐ๋“œ ๊ธฐ๋ฐ˜์˜ ๋ชจ๋ฐ”์ผ ๋ฐ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ ํ”Œ๋žซํผ์ด๋‹ค. ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ ๊ณผ์ •์—์„œ ์‚ฌ์šฉ๋˜๋Š” ๊ธฐ๋Šฅ(์˜ˆ: ์‚ฌ์šฉ์ž์ธ์ฆ, DB, ๋ฐฐํฌ)๋“ค์„ ์ •ํ˜•ํ™”๋œ ์„œ๋น„์Šค๋กœ ์ œ๊ณตํ•จ์œผ๋กœ์จ ๊ฐœ๋ฐœ์ž๋“ค์ด ๋” ๋น ๋ฅด๊ณ  ํšจ์œจ์ ์œผ๋กœ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•œ๋‹ค. ๐Ÿ”ŽFirebase๋ฅผ ํ†ตํ•ด React ํ”„๋กœ์ ํŠธ ๋ฐฐํฌํ•˜๊ธฐ Firebase๊ฐ€ ์ œ๊ณตํ•˜๋Š” ๊ธฐ๋Šฅ๋“ค ์ค‘ ๋ฐฐํฌ ์„œ๋น„์Šค๋ฅผ ์ด์šฉํ•ด๋ณด๋„๋ก ํ•˜์ž. 1. ํ”„๋กœ์ ํŠธ ์ƒ์„ฑํ•˜๊ธฐ ์•„๋ž˜ ๋งํฌ์—์„œ โ€œํ”„๋กœ์ ํŠธ ๋งŒ๋“ค๊ธฐโ€๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ ์ƒ์„ฑํ•œ๋‹ค. https://console.firebase.google..

[React]Netlify๋กœ React ๋ฐฐํฌํ•˜๊ธฐ: ์ƒˆ๋กœ๊ณ ์นจ, API ์—ฐ๊ฒฐ ์—๋Ÿฌ ํ•ด๊ฒฐ๋ฐฉ๋ฒ•

์กธ์—… ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ–ˆ์—ˆ์„ ๋•Œ๋Š” ์‹œ๊ฐ„์  ์ œ์•ฝ์œผ๋กœ ์ธํ•ด์„œ ๋ฐฐํฌ๊นŒ์ง€ ๋งˆ์น˜์ง€ ๋ชปํ•˜์—ฌ ํ”„๋กœ์ ํŠธ๋ฅผ ๋๋ƒˆ์—ˆ๋‹ค. ๋กœ์ปฌ์—์„œ๋Š” ํ”„๋กœ๊ทธ๋žจ์ด ์ž˜ ๋™์ž‘ํ•˜์ง€๋งŒ ๋ฐฐํฌํ•˜๋ฉด ๋™์ž‘ํ•˜์ง€ ์•Š์„ ๋•Œ๊ฐ€ ๋งŽ์€ ๊ฒƒ ๊ฐ™๋‹ค. ์ด๋ฒˆ ์ฐฝ์—… ๋™์•„๋ฆฌ ํ™œ๋™์„ ํ•˜๋ฉด์„œ๋„ ๋กœ์ปฌ์—์„œ๋Š” ์ž˜ ๋™์ž‘ํ–ˆ์—ˆ๋Š”๋ฐ, ๋ฐฐํฌ๋ฅผ ํ•˜๋ฉด์„œ ๋ฐฑ์—”๋“œ ์„œ๋ฒ„์™€ API ์—ฐ๊ฒฐ์ด ์ œ๋Œ€๋กœ ์ด๋ฃจ์–ด์ง€์ง€ ์•Š๋Š” ๋ฌธ์ œ๊ฐ€ ์ƒ๊ฒผ์—ˆ๋‹ค. ๋ฐฐํฌ์— ๋Œ€ํ•ด์„œ ๊ณต๋ถ€๋„ ํ•ด๋ณผ๊ฒธ ๊ฒธ์‚ฌ๊ฒธ์‚ฌ ์ •๋ฆฌํ•ด๋ณด์•˜๋‹ค๐Ÿ™Œ๐Ÿป ๐Ÿ”ŽNetlify ์ด๋ฒˆ ์ฐฝ์—… ๋™์•„๋ฆฌ ์ค‘๊ฐ„ ํ”„๋กœ์ ํŠธ๋Š” Netlify๋ฅผ ์ด์šฉํ•ด์„œ ๋ฐฐํฌํ–ˆ๋‹ค. Netlify๋Š” ์ •์  ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋ฐ ์‹ฑ๊ธ€ ํŽ˜์ด์ง€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜(SPA) ๋ฐฐํฌ์— ํŠนํ™”๋˜์–ด ์žˆ๋Š” ์„œ๋น„์Šค์ด๋‹ค. ๐Ÿ”ŽNetlify๋ฅผ ํ†ตํ•œ React ํ”„๋กœ์ ํŠธ ๋ฐฐํฌ ๋ฐฉ๋ฒ• Netfliy๋ฅผ ํ†ตํ•œ React ํ”„๋กœ์ ํŠธ ๋ฐฐํฌ ๋ฐฉ๋ฒ•์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค. 1. React..

[React]์›น ํ‘œ์ค€์„ ์ค€์ˆ˜ํ•˜๋ฉฐ ๊ฐœ๋ฐœํ•˜๋Š” ๋ฐฉ๋ฒ•

์ด๊ฒƒ์ €๊ฒƒ ์ •๋ณด๋ฅผ ์ฐพ๋‹ค ๋ณด๋ฉด "์›น ํ‘œ์ค€"์ด๋ผ๋Š” ์šฉ์–ด๊ฐ€ ์ž์ฃผ ๋“ฑ์žฅํ•˜๋Š”๋ฐ, ํ•ญ์ƒ ๊ทธ ์˜๋ฏธ๋ฅผ ์™„๋ฒฝํžˆ ์ดํ•ดํ•˜์ง€๋Š” ๋ชปํ•˜๊ณ  ๋„˜์–ด๊ฐ”์—ˆ๋‹ค. ๊ฐœ๊ฐ• ์ „์— ์‹œ๊ฐ„์ด ์กฐ๊ธˆ ๋‚จ์€ ์ง€๊ธˆ, โ€œ์›น ํ‘œ์ค€โ€์— ๋Œ€ํ•ด์„œ ๊ณต๋ถ€ํ•˜๊ณ  ์ •๋ฆฌํ•ด๋ณด์•˜๋‹ค!๐Ÿ˜€ ๐Ÿ”Ž์›นํ‘œ์ค€์ด๋ž€? ์›น ํ‘œ์ค€(Web Standard)๋Š” W3C์—์„œ ์‚ฌ์šฉ๋˜๋Š” ๊ธฐ์ˆ ๊ณผ ํ”„๋กœํ† ์ฝœ์— ๋Œ€ํ•œ ๊ทœ์น™๊ณผ ๊ถŒ๊ณ ์•ˆ์˜ ๋ชจ์Œ์„ ๋งํ•œ๋‹ค. ์›น ํ‘œ์ค€์€ ์›น ํŽ˜์ด์ง€์™€ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ฐœ๋ฐœํ•˜๊ณ  ๊ตฌํ˜„ํ•˜๋Š”๋ฐ ์ผ๊ด€์„ฑ์„ ์ œ๊ณตํ•˜๋ฉฐ, ๋‹ค์–‘ํ•œ ์›น ๋ธŒ๋ผ์šฐ์ €์™€ ์žฅ์น˜์—์„œ ๋™์ผํ•œ ๋ฐฉ์‹์œผ๋กœ ์ž‘๋™ํ•˜๋„๋ก ๋ณด์žฅํ•˜๋Š” ์—ญํ• ์„ ํ•œ๋‹ค. ์ฆ‰, ์›น ํ‘œ์ค€์— ๋”ฐ๋ผ ๊ฐœ๋ฐœ๋œ ์›น ์‚ฌ์ดํŠธ๋Š” ์ ‘์†ํ•œ ์‚ฌ์šฉ์ž๊ฐ€ ์–ด๋– ํ•œ ์šด์˜์ฒด์ œ๋‚˜ ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์‚ฌ์šฉํ•˜๋”๋ผ๊ณ  ์›น ํŽ˜์ด์ง€๊ฐ€ ๋™์ผํ•˜๊ฒŒ ๋ณด์ด๊ณ  ์ •์ƒ์ ์œผ๋กœ ์ž‘๋™ํ•ด์•ผ ํ•จ์„ ์˜๋ฏธํ•œ๋‹ค. ๋”ฐ๋ผ์„œ ์›น ํ‘œ์ค€์˜ ์ค€์ˆ˜๋Š” ์›น ์ ‘๊ทผ์„ฑ ์ค€์ˆ˜๋ฅผ ์œ„ํ•œ ํ•ต์‹ฌ์ด๋‹ค...

์ผ๋ฐ˜์ ์œผ๋กœ GET ์š”์ฒญ์—๋Š” Request Body๋ฅผ ์š”์ฒญํ•  ์ˆ˜ ์—†๋‹ค!

Swagger๋ฅผ ํ†ตํ•ด ๋ฐฑ์—”๋“œ-ํ”„๋ก ํŠธ์—”๋“œ ๊ฐ„ API ์—ฐ๊ฒฐํ•˜๋ฉด์„œ ๊ฒช์€ ์˜ค๋ฅ˜์— ๊ด€ํ•œ ์ด์•ผ๊ธฐ๋‹ค. ํ”Œ๋žซํผ๋ณ„ ์›น์†Œ์„ค์„ ์กฐํšŒํ•˜๋Š” API์˜€๋Š”๋ฐ API ์—ฐ๊ฒฐ ๊ณผ์ •์—์„œ ๊ณ„์† ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ์—ˆ๋‹ค. GET ๋ฉ”์†Œ๋“œ์— Request Body๋ฅผ ๋ถ™์—ฌ์„œ ์ „์†กํ•ด์•ผ ํ•˜๋Š”๋ฐ ๊ณ„์† ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ์—ˆ๋‹ค.๐Ÿ˜ข ์ƒ๊ฐํ•ด๋ณด๋‹ˆ๊นŒ ๋ณดํ†ต GET ๋ฉ”์†Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ๋Š” ์ฟผ๋ฆฌ ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ, POST ๋ฉ”์†Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ๋Š” Request body๋ฅผ ์‚ฌ์šฉํ–ˆ๋˜ ๊ฒƒ ๊ฐ™์•„์„œ ์ฐพ์•„๋ดค๋‹ค. ๊ฒฐ๋ก ์€ โ€œ์ผ๋ฐ˜์ ์œผ๋กœ GET ์š”์ฒญ์—๋Š” Request Body๋ฅผ ์ „์†กํ•  ์ˆ˜ ์—†๋‹ค.โ€ ์ด๋‹ค. HTTP ํ”„๋กœํ† ์ฝœ์˜ GET ๋ฉ”์†Œ๋“œ๋Š” ์„œ๋ฒ„์— ์ •๋ณด๋ฅผ ์š”์ฒญํ•  ๋•Œ ์‚ฌ์šฉ๋˜๋ฉฐ, ๋ณดํ†ต ์ฟผ๋ฆฌ ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ์‚ฌ์šฉํ•ด ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•˜๋‹ค. ์ฟผ๋ฆฌ ํŒŒ๋ผ๋ฏธํ„ฐ๋Š” ์ฃผ์†Œ ๋’ค์— ?๋ฅผ ๋ถ™์ด๊ณ  key-value ์Œ์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•˜๋Š” ๋ฐฉ์‹์„..

[React]React ํ”„๋กœ์ ํŠธ์— CSS ์ ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•(Nomad Coders ๊ฐ•์˜ ์ •๋ฆฌ)

Nomad Coders ๊ฐ•์˜๋Š” ์˜ˆ์ „์— ๋“ค์—ˆ์—ˆ๋Š”๋ฐ ๋…ธ์…˜์— ์ •๋ฆฌํ•œ ๋‚ด์šฉ์„ ๋ธ”๋กœ๊ทธ์—๋„ ์ •๋ฆฌํ•˜๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™์•„์„œ ๋ณต์Šต ๊ฒธ ์ •๋ฆฌ๋ฅผ ํ•ด๋ณด์•˜๋‹ค. React ํ”„๋กœ์ ํŠธ์— CSS๋ฅผ ์ ์šฉํ•˜๋Š” ๋ฐฉ์‹์—๋Š” ์ง์ ‘ CSS๋ฅผ ์ ์šฉํ•˜๋Š” ๋ฐฉ์‹, module.css๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ์‹, styled-components๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ์‹ ๋“ฑ์ด ์žˆ๋‹ค. 1. ์ง์ ‘ CSS๋ฅผ ์ ์šฉํ•˜๋Š” ๋ฐฉ์‹ ๊ฐ€์žฅ ๋‹จ์ˆœํ•œ ๋ฐฉ์‹์ธ๋ฐ, hover ๋“ฑ์˜ ์ด๋ฒคํŠธ ๋“ฑ์„ ์ ์šฉํ•  ์ˆ˜ ์—†๋‹ค. function Header(){ return( Header ) } 2. module.css๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ์‹ ๋‚ด๊ฐ€ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•  ๋•Œ ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ์‹์ด๋‹ค. ํŒŒ์ผ์ด๋ฆ„.module.css๋ผ๋Š” ์ด๋ฆ„์„ ๊ฐ€์ง„ ํŒŒ์ผ์„ ๋งŒ๋“ค๊ณ  styles๋ฅผ ๋ถˆ๋Ÿฌ์™€ ์‚ฌ์šฉํ•œ๋‹ค. *Header.tsx ํŒŒ์ผ import s..

[React]Themes๋ฅผ ์ด์šฉํ•œ ์ผ๊ด€์„ฑ ์žˆ๋Š” ์Šคํƒ€์ผ ๊ด€๋ฆฌ

์ด๋ฒˆ ์บก์Šคํ†ค์„ ํ•˜๋ฉด์„œ ์ผ๊ด€์„ฑ ์žˆ๋Š” ์Šคํƒ€์ผ ๊ด€๋ฆฌ์˜ ํ•„์š”์„ฑ์„ ๊นจ๋‹ฌ์•˜๋‹ค. ์ด๋•Œ, ์˜ˆ์ „์— ๋ฐฐ์› ๋˜ Themes๋ฅผ ์ ์šฉํ•˜๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™๋‹ค๊ณ  ์ƒ๊ฐํ•˜์—ฌ ๊ฐ„๋‹จํ•˜๊ฒŒ ๋ณต์Šตํ• ๊ฒธ ์ •๋ฆฌํ•ด๋ณด์•˜๋‹ค. โœจ ๐Ÿ”ŽThemes๋ฅผ React ํ”„๋กœ์ ํŠธ์— ์ ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ• styled-components๋ฅผ ์ด์šฉํ•˜๋ฉด ๋œ๋‹ค. ์„ค์น˜ํ•˜๊ณ  ๋‹ค์Œ๊ณผ ๊ฐ™์ด ํŒŒ์ผ์„ ์ž‘์„ฑํ•œ๋‹ค. 1. theme ํŒŒ์ผ ์ž‘์„ฑํ•˜๊ธฐ theme ํŒŒ์ผ์— ์‚ฌ์šฉํ•  ์Šคํƒ€์ผ์„ ์ž‘์„ฑํ•œ๋‹ค. import { DefaultTheme } from "styled-components"; export const theme: DefaultTheme={ bgColor: "#EFEFEF", subBgColor: "#FFFFFF", textColor: "#2f3542", primaryColor: "#22a6b3", secon..

[React]CORS ์—๋Ÿฌ

์บก์Šคํ†ค ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋ฉด์„œ ๋งˆ์ฃผํ–ˆ๋˜ ์—๋Ÿฌ ์ค‘ ํ•˜๋‚˜๋Š” CORS ์—๋Ÿฌ์˜€๋‹ค. ์ฒ˜์Œ ๋ฐฑ์—”๋“œ ํŒ€์›๋ถ„๋“ค๊ณผ ์—ฐ๋™์„ ์‹œ๋„ํ–ˆ์„ ๋•Œ  CORS ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•˜์—ฌ ์กฐ๊ธˆ ๊ณ ์ƒํ–ˆ๋‹ค ํžˆํžˆ ~ ๐Ÿฅน๐Ÿ˜ข ๐Ÿ“–CORS(Cross Origin Resource Sharing, ๊ต์ฐจ ์ถœ์ฒ˜ ๋ฆฌ์†Œ์Šค ๊ณต์œ )CORS๋ž€ ๋‹ค๋ฅธ ์ถœ์ฒ˜(origin) ๊ฐ„ ๋ฆฌ์†Œ์Šค๋ฅผ ๊ณต์œ ๊ฐ€๋Šฅํ•˜๋„๋ก ํ•˜๋Š” ๋งค์ปค๋‹ˆ์ฆ˜์ด๋‹ค. CORS๋Š” ๋‹ค๋ฅธ ์ถœ์ฒ˜์˜ ์ž์›์˜ ๊ณต์œ ๋ฅผ ๊ฐ€๋Šฅํ•˜๊ฒŒ ๋งŒ๋“ค๋ฉฐ, ํ•œ ์ถœ์ฒ˜์—์„œ ์‹คํ–‰ ์ค‘์ธ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ๋‹ค๋ฅธ ์ถœ์ฒ˜์˜ ์„ ํƒํ•œ ์ž์›์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” ๊ถŒํ•œ์„ ๋ถ€์—ฌํ•˜๋„๋ก ๋ธŒ๋ผ์šฐ์ €์— ์•Œ๋ ค์ค€๋‹ค. ์ด๋•Œ, CORS์—๋Ÿฌ๋ž€ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋ณด์•ˆ ์ •์ฑ… ์ค‘ ํ•˜๋‚˜์ธ SOP ์ •์ฑ…์„ ๋”ฐ๋ฅด๊ธฐ ๋•Œ๋ฌธ์— ๋ฐœ์ƒํ•œ๋‹ค.  ๐Ÿ”ŽSOP(Same Origin Policy, ๋™์ผ ์ถœ์ฒ˜ ์ •์ฑ…)๋ธŒ๋ผ์šฐ์ €๋Š” ๋ณด์•ˆ ์ •์ฑ… ์ค‘ ํ•˜..

[React]์นด์นด์˜คํ†ก ์†Œ์…œ ๋กœ๊ทธ์ธ, ๊ตฌ๊ธ€ ์†Œ์…œ ๋กœ๊ทธ์ธ ๊ตฌํ˜„

https://github.com/seoyoung927/social_login_ex GitHub - seoyoung927/social_login_ex: social login with kakao and google social login with kakao and google. Contribute to seoyoung927/social_login_ex development by creating an account on GitHub. github.com ์บก์Šคํ†ค ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋ฉด์„œ ์†Œ์…œ ๋กœ๊ทธ์ธ์„ ๊ตฌํ˜„ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๊ณต๋ถ€ํ•ด๋ณด์•˜๋‹ค. ์—ฌ๋Ÿฌ ๊ฐ€์ง€ ์ด์œ ๋กœ ๊ฒฐ๊ตญ ์†Œ์…œ ๋กœ๊ทธ์ธ ๋ฐฉ์‹์ด ์•„๋‹Œ ์•„์ด๋””/๋น„๋ฐ€๋ฒˆํ˜ธ ๋ฐฉ์‹์˜ ๋กœ๊ทธ์ธ์œผ๋กœ ์บก์Šคํ†ค ํ”„๋กœ์ ํŠธ ๊ฐœ๋ฐœ์„ ์ง„ํ–‰ํ•˜์˜€์ง€๋งŒ, ๊ณต๋ถ€ํ•œ ๋‚ด์šฉ์„ ๊ฐ„๋‹จํžˆ ์ •๋ฆฌํ•ด๋ณด์•˜๋‹ค. ์†Œ์…œ ๋กœ๊ทธ์ธ์„ ๊ตฌํ˜„ํ•˜๋Š” ๊ณผ์ •..

์„ธ์…˜ ๊ธฐ๋ฐ˜ ์ธ์ฆ, ํ† ํฐ ๊ธฐ๋ฐ˜ ์ธ์ฆ, JWT๋ฅผ ํ†ตํ•œ ์ธ์ฆ ์ ˆ์ฐจ(with Access Token, Refresh Token)

๐Ÿ“–์„ธ์…˜ ๊ธฐ๋ฐ˜ ์ธ์ฆ๐Ÿ”Ž์„ธ์…˜์ด๋ž€?์„ธ์…˜์ด๋ž€ ์„œ๋ฒ„์ธก์— ์ €์žฅ๋˜๋Š” ์ž„์‹œ์ƒํƒœ์ •๋ณด์ด๋‹ค. ์„œ๋ฒ„ ์ธก์— ์ €์žฅ๋˜๋ฏ€๋กœ ๋ณด์•ˆ์„ฑ์ด ๋†’์ง€๋งŒ, ํ™•์žฅ์„ฑ์ด ๋–จ์–ด์ง„๋‹ค๋Š” ๋‹จ์ ์ด ์žˆ๋‹ค.์‚ฌ์šฉ์ž๊ฐ€ ์ ‘์†ํ•˜๋ฉด ์„œ๋ฒ„๋Š” ๊ณ ์œ ํ•œ ์„ธ์…˜ ID๋ฅผ ์ƒ์„ฑํ•ด ์‚ฌ์šฉ์ž์—๊ฒŒ ์ „์†กํ•œ๋‹ค. ์‚ฌ์šฉ์ž๋Š” ์ฟ ํ‚ค/๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€ ๋“ฑ์— ์„ธ์…˜ ID๋ฅผ ์ €์žฅํ•œ๋‹ค. ์„ธ์…˜ ID ์ž์ฒด์—๋Š” ์ค‘์š”ํ•œ ์ •๋ณด๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์ง€ ์•Š์œผ๋ฏ€๋กœ ๋ณด์•ˆ์„ฑ ์ธก๋ฉด์—์„œ ์•ˆ์ „ํ•˜๋‹ค. ๋งŒ์•ฝ, ์„ธ์…˜ ID๊ฐ€ ํƒˆ์ทจ ๋‹นํ–ˆ๋‹ค๋ฉด ์„œ๋ฒ„๋Š” ๋‹จ์ง€ ํ•ด๋‹น ์„ธ์…˜์„ ๋งŒ๋ฃŒ์‹œํ‚ค๋ฉด ๋œ๋‹ค. ์‚ฌ์šฉ์ž๋Š” ์š”์ฒญ์‹œ์— ์„ธ์…˜ ID์™€ ํ•จ๊ป˜ ์š”์ฒญ์„ ์ „๋‹ฌํ•˜๋ฉฐ, ์„œ๋ฒ„๋Š” ์ด๋ฅผ ํ†ตํ•ด ์‚ฌ์šฉ์ž์˜ ์ •๋ณด๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.์„œ๋ฒ„๋Š” ์„ธ์…˜ ์ •๋ณด๋ฅผ ํ†ฐ์บฃ์˜ WAS, DB, ๋ฉ”๋ชจ๋ฆฌ DB ๋“ฑ์— ์ €์žฅํ•  ์ˆ˜ ์žˆ๋‹ค. ๋ฉ”๋ชจ๋ฆฌ DB์—๋Š” Redis ๋“ฑ์ด ์žˆ๋‹ค. โœ๏ธ์ฟ ํ‚ค์™€ ์„ธ์…˜์˜ ๋น„๊ต์ฟ ํ‚ค๋Š” ํด๋ผ์ด์–ธํŠธ์— ์ €์žฅ๋˜๋Š” ์ž‘์€..

1 2 3
728x90