React

[TIL/React] 2024/08/29

๐ŸŒฟ 1. Naiveํ•œ ๊ธฐํš์ง‘์—์„œ ๋ฐฐ๋ฅผ ๋ฒ…๋ฒ… ๊ธ๋‹ค๊ฐ€ '๋Œ€์กธ ๋ฐฑ์ˆ˜ 400๋งŒ ์‹œ๋Œ€'๋ผ๋Š” ํญ๋ ฅ์ ์ธ ์ œ๋ชฉ์˜ ๊ธฐ์‚ฌ๋ฅผ ์ฝ๊ฒŒ ๋˜์—ˆ๋‹ค. ๋‹จ์–ด๋Š” ์ฒ ํ•™์„ ๋ฐ˜์˜ํ•œ๋‹ค. '์ฑ„์šฉ'์—์„œ '์˜์ž…'์œผ๋กœ, '๊ณต๊ฐœ ์ฑ„์šฉ'์—์„œ '์ˆ˜์‹œ ์ฑ„์šฉ'์œผ๋กœ, '์ธ์‚ฌํŒ€'์—์„œ '์ง์›๊ฒฝํ—˜ํŒ€'์œผ๋กœ, ์‚ฌํšŒ์—์„œ ์‚ฌ์šฉํ•˜๋Š” ์šฉ์–ด๊ฐ€

2024๋…„ 8์›” 29์ผ5min read

๐ŸŒฟ 1. Naiveํ•œ ๊ธฐํš

์ง‘์—์„œ ๋ฐฐ๋ฅผ ๋ฒ…๋ฒ… ๊ธ๋‹ค๊ฐ€ ``๋Œ€์กธ ๋ฐฑ์ˆ˜ 400๋งŒ ์‹œ๋Œ€``๋ผ๋Š” ํญ๋ ฅ์ ์ธ ์ œ๋ชฉ์˜ ๊ธฐ์‚ฌ๋ฅผ ์ฝ๊ฒŒ ๋˜์—ˆ๋‹ค.

๋‹จ์–ด๋Š” ์ฒ ํ•™์„ ๋ฐ˜์˜ํ•œ๋‹ค. ``์ฑ„์šฉ์—์„œ ์˜์ž…`์œผ๋กœ, `๊ณต๊ฐœ ์ฑ„์šฉ์—์„œ ์ˆ˜์‹œ ์ฑ„์šฉ`์œผ๋กœ, `์ธ์‚ฌํŒ€์—์„œ ์ง์›๊ฒฝํ—˜ํŒ€``์œผ๋กœ, ์‚ฌํšŒ์—์„œ ์‚ฌ์šฉํ•˜๋Š” ์šฉ์–ด๊ฐ€ ๋ณ€๊ฒฝ๋˜๊ณ  ์žˆ๋‹ค. ์•„๋‹ˆ, ์ด๋ฏธ ๋งŽ์ด ๋ณ€๊ฒฝ๋˜์—ˆ๋‹ค. ๋Œ€ํ•™ ๊ฐ„ํŒ, ํ•™์ , ํ† ์ต ์ ์ˆ˜์™€ ๊ฐ™์€ ์ •๋Ÿ‰์  ์ง€ํ‘œ๋งŒ ์‚ด์ง ๋“ค์ถฐ๋ณด๊ณ , "์šฐ๋ฆฌ๊ฐ€ ํ‚ค์›Œ์ค„๊ฒŒ!" ํ•˜๋˜ ๊ทนํ•œ ํšจ์œจ ์‹œ๋Œ€์˜ ๋์ด ๋„๋ž˜ํ•œ ๊ฒƒ.

๋Œ€ํ•™์—์„œ๋„ ์ง์žฅ์—์„œ๋„ ``์—ญ๋Ÿ‰ ๊ฐ•ํ™”`๋ฅผ ๋„์™€์ฃผ์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์—, "๋‚˜ ๊ฐ™์€ ์‹ ์ž…์€ ์–ด๋””์„œ ๊ฒฝํ—˜์„ ์Œ“๋‚˜"๋ผ๋Š” ๋ง์ด ๋‚˜์˜ฌ ์ˆ˜๋ฐ–์— ์—†๋‹ค. ๊ทธ๋ž˜์„œ `์™ธ๋ถ€ ํ™˜๊ฒฝ`์„ ๋งŒ๋“ค๊ธฐ๋กœ ๊ฒฐ์ •ํ–ˆ๋‹ค. ์ด๋ฆ„ํ•˜์•ผ `ํ† ํ‹ฐ(TORTEE)``.

๋ณธ์—… ์™ธ ์ˆ˜์ต ์ฐฝ์ถœ์„ ํฌ๋งํ•˜๋Š” ํ˜„์ง ๊ฐœ๋ฐœ์ž์™€, ๊ฒ€์ฆ๋œ ํ˜„์ง ๊ฐœ๋ฐœ์ž์™€์˜ ๊ต๋ฅ˜๋ฅผ ํ†ตํ•ด ์—ญ๋Ÿ‰์„ ๊ฐ•ํ™”ํ•˜๊ณ  ์‹ถ์–ด ํ•˜๋Š” ์ทจ์ค€์ƒ์„ ์—ฐ๊ฒฐํ•˜๋Š” ํ”Œ๋žซํผ์„ ๋งŒ๋“ค์–ด๋ณด๋ฉด ์–ด๋–จ๊นŒ ์ƒ๊ฐํ•ด ๋ณธ ๊ฒƒ.

๋Œ€๊ฐ• ์•„๋ž˜์™€ ๊ฐ™์€ ๋ชฉ์ ์„ ๋‹ด์€ ํ”Œ๋žซํผ์ด ๋˜๊ฒ ๋‹ค. ๊ธฐํš์ด ๋””ํ…Œ์ผํ•ด์ง€๋ฉด, ๋””์ž์ด๋„ˆ๋ฅผ ๋ชจ์‹  ๋’ค, ์ •ํ•ด์ง„ ๋””์ž์ธ์„ ๊ตฌํ˜„ํ•  ์˜ˆ์ •์ด๋‹ค. ๊ฐ๊ฐ์žˆ๊ฒŒ ํƒœ์–ด๋‚ฌ์œผ๋ฉด ๊ฐœ์ž์ด๋„ˆ(๊ฐœ๋ฐœ์ž+๋””์ž์ด๋„ˆ) ํ•˜๋Š” ๊ฑด๋ฐ, ์•„์‰ฝ๋‹ค.

์ด ๊ฐœ๋ฐœ ๊ธฐ๊ฐ„์€ ``45์ผ~60์ผ`` ์ •๋„๋กœ ์˜ˆ์ƒํ•œ๋‹ค. ๋‹ค๋งŒ ์กธ์—… ์ค€๋น„ ๋•Œ๋ฌธ์— ์ผ์ •์„ ๋งž์ถœ ์ˆ˜ ์žˆ์„์ง€๋Š” ์ž์‹ ์ด ์—†๋‹ค๋ฆฌ. ํ•˜์ง€๋งŒ, ๊ณ„ํšํŠน) ์‹คํŒจ๊ฐ€ ๋””ํดํŠธ.

๐ŸŒฟ 2. Mentor

์ด๋ฒˆ ํ”„๋กœ์ ํŠธ์—์„œ ๊ฐ€์žฅ ์ค‘์š”ํ•œ ๋ถ€๋ถ„์ด๋‹ค. ์•„์ง ์ดˆ๊ธฐ ๊ธฐํš ์ƒํƒœ๋ผ, ๋กœ๊ทธ์ธ ์œ ์ € ์ž์ฒด๋ฅผ ๋ฉ˜ํ† ์™€ ๋ฉ˜ํ‹ฐ๋กœ ๋ถ„๋ฆฌํ• ์ง€ ์•„๋‹ˆ๋ฉด ํŽ˜์ด์ง€๋ณ„๋กœ ๋ฉ˜ํ† ์™€ ๋ฉ˜ํ‹ฐ๋ฅผ ๊ตฌ๋ถ„ํ• ์ง€ ์ •ํ•ด์ง„ ๊ฒƒ์€ ์•„๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๊ฒฐ๋ก ์ ์œผ๋กœ ``๋“ฑ๋ก์— ๊ด€ํ•œ CRUD(Create, Read, Update, Delete)``๋Š” ๋ฐ˜๋“œ์‹œ ์–ด๋”˜๊ฐ€์— ์žˆ์–ด์•ผ ํ•  ๊ฒƒ์ด๋‹ค.

์œ„ ํ™”๋ฉด์€ ์ƒ๋‹นํžˆ ๊ฐ„์†Œํ•œ ๋ฒ„์ „์ด๋‹ค. ๋‹น์žฅ ๋ฉ˜ํ†  ๋ถ€๋ถ„๋งŒ ์ƒ๊ฐํ•ด๋„, ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๊ฐ€ ์Ÿ์•„์ ธ ๋‚˜์˜จ๋‹ค.

code
1. id: ๋ฉ˜ํ†  ๊ตฌ๋ถ„์ž(MongoDB ๊ธฐ์ค€)
2. name: ๋ฉ˜ํ†  ์„ฑํ•จ
3. expertise: ๋ฉ˜ํ†  ์ „๋ฌธ ๋ถ„์•ผ
4. experienceLevel: ๋ฉ˜ํ†  ๊ฒฝํ—˜๋„(n๋…„์ฐจ ํ˜น์€ ์ฃผ๋‹ˆ์–ด/์‹œ๋‹ˆ์–ด ๋“ฑ)
5. locationPreference: ์Šคํ„ฐ๋”” ํฌ๋ง ์ง€์—ญ
6. availableTimeSlots: ํฌ๋ง ํƒ€์ž… ์Šฌ๋กฏ
7. profileUrl: ํ”„๋กœํ•„ ์‚ฌ์ง„ url
8. portfolioUrl: ํฌํŠธํด๋ฆฌ์˜ค url

์ด์™ธ์—๋„ ๋ถ„๋ช… ๋” ์žˆ๋‹ค. ๊ธฐํš์€ ๊ณ„์†๋œ๋‹ค. ๊ฐ€๋‹ฅ์„ ์žก์•„๋ณด์ž๋ฉด ์œ„์™€ ๊ฐ™๋‹ค๋Š” ๊ฒƒ.

๐ŸŒฟ 3. Mentee(์นด์นด์˜ค ์•Œ๋ฆผํ†ก, ์ง€๋„)

๋ฉ˜ํ†  ์ฐพ๊ธฐ์—์„œ ์ผ๋ถ€ ๋ฐ์ดํ„ฐ๊ฐ€ ๊ฐ€๊ฐ๋˜๋Š” ์ •๋„์˜ ์ฐจ์ด๋ฐ–์— ์—†๊ฒ ๋‹ค.

๊ทธ๋Ÿฐ๋ฐ ํ˜„์žฌ ๊ธฐํš ๋‹จ๊ณ„์—์„œ ๊ตฌํ˜„ํ•ด ๋ณด๊ณ  ์‹ถ์€ ๊ฒƒ์€ ์นด์นด์˜คํ†ก ์•Œ๋ฆผํ†ก์ด๋‹ค.

code
1. id: ๋ฉ˜ํ‹ฐ ๊ตฌ๋ถ„์ž(MongoDB ๊ธฐ์ค€)
2. name: ๋ฉ˜ํ‹ฐ ์„ฑํ•จ
3. expertise: ๋ฉ˜ํ‹ฐ๊ฐ€ ํฌ๋งํ•˜๋Š” ํ•™์Šต ๋ถ„์•ผ
4. experienceLevel: ๋ฉ˜ํ‹ฐ ๊ฒฝํ—˜๋„(์ฝ”๋”ฉ ๊ฒฝํ—˜, CS ์ „๊ณต ์—ฌ๋ถ€)
5. locationPreference: ์Šคํ„ฐ๋”” ํฌ๋ง ์ง€์—ญ
6. availableTimeSlots: ํฌ๋ง ํƒ€์ž… ์Šฌ๋กฏ
7. profileUrl: ํ”„๋กœํ•„ ์‚ฌ์ง„ url
8. portfolioUrl: ํฌํŠธํด๋ฆฌ์˜ค url

๋ฉ˜ํ‹ฐ๋„ ํฐ ํ‹€์—์„œ๋Š” ์œ„์™€ ์œ ์‚ฌํ•œ ๋ฐ์ดํ„ฐ ๊ตฌ์กฐ๋ฅผ ๊ฐ–๊ฒŒ ๋  ๊ฒƒ์ด๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ๋งŒ์•ฝ ``๋ฉ˜ํ‹ฐ๊ฐ€ ์›ํ•˜๋Š” ์กฐ๊ฑด๊ณผ ๋ฉ˜ํ† ๊ฐ€ ์ œ์‹œํ•œ ์กฐ๊ฑด` ์ค‘ ์ผ๋ถ€(3. ์ „๋ฌธ๋ถ„์•ผ, 4. ๊ฒฝํ—˜๋„, 5. ์Šคํ„ฐ๋”” ํฌ๋ง ์ง€์—ญ, 6. ํฌ๋ง ํƒ€์ž… ์Šฌ๋กฏ)๊ฐ€ `์ผ์น˜`ํ•  ๋•Œ ์„œ๋กœ์—๊ฒŒ `์•Œ๋ฆผํ†ก``์„ ๋ณด๋‚ด์ฃผ๋ฉด ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์ด ๋” ํ–ฅ์ƒ๋˜์ง€ ์•Š์„๊นŒ ํ•˜๋Š” ์ƒ๊ฐ์ด ๋“ ๋‹ค.

์ถ”๊ฐ€์ ์œผ๋กœ, ์ตœ์ดˆ์— ์ง„ํ–‰ํ•˜๋ ค๊ณ  ํ–ˆ๋˜ ๋ฐฉํƒˆ์ถœ ๋ฐ ๋ณด๋“œ๊ฒŒ์ž„ ์นดํŽ˜์˜ ๋ฉ”์ธ ๊ธฐ์ˆ ์ด์—ˆ๋˜ ``์ง€๋„ api ๊ด€๋ จ` ๋‚ด์šฉ์„ `locationPreference``์— ์—ฎ์–ด๋ณด๋Š” ๊ฒƒ๋„ ์ข‹์„ ๊ฒƒ ๊ฐ™๋‹ค.

๐ŸŒฟ 4. Employment Case

ํ•ด๋‹น section๋„ ๊ฒฐ๊ตญ์€ CRUD์— ๊ด€ํ•œ ๋‚ด์šฉ์ด๋‹ค. ํ”Œ๋žซํผ์—์„œ ์—ฐ๊ฒฐ๋œ ๋ฉ˜ํ† -๋ฉ˜ํ‹ฐ์˜ ์ตœ์ข… ์ง€ํ–ฅ์ ์ด๋ผ ํ•  ์ˆ˜ ์žˆ๋Š” ``์ทจ์—… ์‚ฌ๋ก€`๋ฅผ ๊ณต์œ ํ•จ์œผ๋กœ์จ, `์‹ ๊ทœ ์ด์šฉ์ž์˜ ์œ ์ž…`์„ ๋„๋ชจํ•  ์ˆ˜ ์žˆ๊ณ , `๊ฐœ๋ฐœ ์ฑ„์šฉ ์‹œ์žฅ์˜ ์ตœ์‹  ๋™ํ–ฅ``์„ ์‚ดํŽด๋ณผ ์ˆ˜ ์žˆ๊ฒ ๋‹ค.

์ทจ์—…์‚ฌ๋ก€์— ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ ๊ตฌ์กฐ๋Š” ๋‹ค์Œ ์˜ˆ์‹œ์™€ ๊ฐ™๋‹ค.

code
{
  "salary": 4500,                 // ์—ฐ๋ด‰: 4์ฒœ ์ค‘๋ฐ˜
  "isEntryLevel": true,           // ์‹ ์ž… ์—ฌ๋ถ€
  "resumeSubmissions": 60,        // ์ด๋ ฅ์„œ ์ œ์ถœ ๊ฐœ์ˆ˜
  "resumeAcceptanceRate": 0.2,    // ์„œ๋ฅ˜ ํ•ฉ๊ฒฉ๋ฅ  (15~25%)
  "employmentDate": "2024-Q2",    // ์ทจ์—… ๋‚ ์งœ
  "preparationPeriodMonths": 5,   // ์ค€๋น„ ๊ธฐ๊ฐ„ (๊ฐœ์›”)
  "bootcampOrGovernmentTraining": false, // ๋ถ€ํŠธ์บ ํ”„/๊ตญ๋น„ ์—ฌ๋ถ€
  "companyIndustry": "IT Service", // ๊ธฐ์—… ์ข…๋ฅ˜
  "companyLocation": "Seoul",     // ๊ธฐ์—… ์œ„์น˜
  "companySalary": 4500,          // ๊ธฐ์—… ์—ฐ๋ด‰
  "companySize": 75,              // ๊ธฐ์—… ๊ทœ๋ชจ (์ง์› ์ˆ˜)
  "certifications": [],           // ์ž๊ฒฉ์ฆ (์—†์Œ)
  "techStack": ["Java", "Spring Boot"], // ๊ธฐ์ˆ  ์Šคํƒ
  "projectExperienceEmphasized": true, // ํ”„๋กœ์ ํŠธ ๊ฒฝํ—˜ ๊ฐ•์กฐ ์—ฌ๋ถ€
  "technicalBlog": true,          // ๊ธฐ์ˆ  ๋ธ”๋กœ๊ทธ ์ž‘์„ฑ ์—ฌ๋ถ€
  "interviewQuestion": "Explain memory management in Java" // ๋ฉด์ ‘ ์งˆ๋ฌธ: Java์—์„œ์˜ ๋ฉ”๋ชจ๋ฆฌ ๊ด€๋ฆฌ์— ๋Œ€ํ•ด ์„ค๋ช…ํ•ด์ฃผ์„ธ์š”.
}

์œ„ ๊ตฌ์กฐ๋Š” ์œ ํŠœ๋ฒ„ ์–‘๋™์ค€ ๋‹˜์˜ ์ปค๋ฎค๋‹ˆํ‹ฐ ํƒญ์— ๋“ฑ๋ก๋œ ์‚ฌ์ดํŠธ๋ฅผ ์ฐธ๊ณ ํ–ˆ๋‹ค.

๐ŸŒฟ 5. QnA Section

์œ„ ์˜ˆ์‹œ์—์„œ๋Š” '์ฝ”๋“œ๋ฆฌ๋ทฐ'๋ผ๋Š” ํƒญ์œผ๋กœ ์„ค์ •๋˜์–ด ์žˆ์œผ๋‚˜, QnA ํƒญ์œผ๋กœ ๋ณ€๊ฒฝํ•  ์˜ˆ์ •์ด๋‹ค.

'์ปค๋ฆฌ์–ด๋ฆฌ' ์„œ๋น„์Šค์˜ ๊ฐœ๋ฐœ์ž ``Q&A` ํŽ˜์ด์ง€์™€ ๊ฐ™์ด, ๊ฐœ๋ฐœ์ž์™€ ์ทจ์ค€์ƒ์ด ๊ฐœ๋ฐœ์ด๋ผ๋Š” ์ฃผ์ œ์— ๊ด€ํ•ด, `์งˆ๋ฌธ๊ณผ ์งˆ๋ฌธ์— ๋Œ€ํ•œ ํ˜œ์•ˆ์„ ๊ณต์œ ``ํ•˜๋Š” section์ด ๋  ๊ฒƒ์ด๋‹ค.

๋ฉ˜ํ† ๋Š” ์งˆ๋ฌธ์ž์˜ ์งˆ๋ฌธ ๋‚ด์—ญ์„ ํ†ตํ•ด ์ˆ˜์ค€์„ ๊ฐ€๋Š ํ•ด ๋ณผ ์ˆ˜ ์žˆ๊ณ , ๋ฉ˜ํ‹ฐ๋Š” ๋ฉ˜ํ† ์˜ ์งˆ๋ฌธ ๋‹ต๋ณ€ ๋‚ด์—ญ์„ ํ†ตํ•ด ์ž์‹ ๊ณผ ๊ฒฐ์ด ๋งž๋Š” ์‚ฌ๋žŒ์ธ์ง€ ํ™•์ธํ•ด ๋ณผ ์ˆ˜ ์žˆ๋‹ค. MBTI ๊ฐ™์€ ์š”์†Œ๋„ ์ถ”๊ฐ€ํ•ด ๋ณด๋ฉด ์žฌ๋ฐŒ์„ ๊ฒƒ ๊ฐ™๋‹ค.

๐ŸŒฟ 6. Authentication

OAuth```๋ฅผ ์ƒ๊ฐํ•˜๊ณ  ์žˆ๊ณ , ์นด์นด์˜คํ†ก ๋กœ๊ทธ์ธ ์›ํˆด์„ ์ง€ํ–ฅํ–ˆ์œผ๋‚˜, ํ˜น~~~~์‹œ๋‚˜ ํ˜น~~~~~์‹œ๋‚˜ ๋‹ค๊ตญ์–ด ์„œ๋น„์Šค๋ฅผ ๋„์ž…ํ•  ์—ฌ๋ ฅ์ด ์ƒ๊ธด๋‹ค๋ฉด ๊ตฌ๊ธ€ ์ •๋„๋Š” ์ถ”๊ฐ€๋˜์–ด๋„ ์ข‹์ง€ ์•Š์„๊นŒ ์ƒ๊ฐ์ด ๋“ ๋‹ค.

๋ฌผ๋ก  ์š•์‹ฌ๋‚ด์ง€ ์•Š๊ณ  ์ผ๋‹จ ์นด์นด์˜ค ๋กœ๊ทธ์ธ ํ•˜๋‚˜๋งŒ ๊ตฌํ˜„ํ•˜์ž๋Š” ๊ฒƒ์ด ํ˜„์žฌ๋กœ์„œ์˜ ํŒ๋‹จ์ด๋‹ค.

> **๐ŸŒฟ 7. Monetization**

์ทจ์—…์„ ์œ„ํ•œ, ํฌํŠธํด๋ฆฌ์˜ค ๋ชฉ์  ํ”„๋กœ์ ํŠธ๋ผ๊ณ  ํ•ด์„œ '๊ทธ๋ƒฅ' ๋งŒ๋“ค ์ƒ๊ฐ์€ ์—†๋‹ค. ์ฒœ๋ฐ•ํ•˜๊ฒŒ ํ‘œํ˜„ํ•˜๋ฉด, ๊ธฐ์—…์€ ๋ˆ ๋ฒŒ๋ ค๊ณ  ์กด์žฌํ•˜๋Š” ์กฐ์ง์ด๋‹ค. ๊ทธ๋Ÿฌ๋‹ˆ๊นŒ ์ทจ์ค€์ƒ์ธ '๋‚˜'๋Š”, ํ”„๋กœ์ ํŠธ๋ฅผ ํ†ตํ•ด ๊ธฐ์ˆ ์  ์—ญ๋Ÿ‰๊ณผ ๋”๋ถˆ์–ด, ```๋‹น์‹ ๋“ค์—๊ฒŒ ๋ˆ์„ ๋ฒŒ์–ด๋‹ค ์ค„ ๋Šฅ๋ ฅ์ด ์žˆ์Šต๋‹ˆ๋‹ค```๋ผ๋Š” ๊ฒƒ๋„ ๋ณด์—ฌ์ค˜์•ผ ํ•  ์˜๋ฌด๊ฐ€ ์žˆ๋Š” ๊ฒƒ์ด๋‹ค. ์ˆ˜์ตํ™” ๋ชจ๋ธ์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

**1. ์ˆ˜์ˆ˜๋ฃŒ ๊ธฐ๋ฐ˜ ๋ชจ๋ธ**
ํ”Œ๋žซํผ์€, ์„ฑ์‚ฌ๋œ ```์ฒซ ๋‹ฌ ๊ณผ์™ธ๋น„์˜ 20%๋ฅผ ๋ฉ˜ํ† ์—๊ฒŒ ์ˆ˜์ˆ˜๋ฃŒ๋กœ ๋ถ€๊ณผ```ํ•œ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ์ฒซ ๋‹ฌ ๊ณผ์™ธ๋น„๊ฐ€ 50๋งŒ ์›์ด๋ผ๋ฉด, ํ”Œ๋žซํผ์€ 10๋งŒ ์›์„ ์ˆ˜์ˆ˜๋ฃŒ๋กœ ์ฐจ๊ฐํ•˜๊ณ , ๋‚˜๋จธ์ง€ 40๋งŒ ์›์„ ๋ฉ˜ํ† ์—๊ฒŒ ์ง€๊ธ‰ํ•œ๋‹ค. ์ด ๋ชจ๋ธ์€ ๋ฉ˜ํ† ์™€์˜ ์„ฑ๊ณต์ ์ธ ์—ฐ๊ฒฐ์„ ํ†ตํ•ด ์ง€์†์ ์œผ๋กœ ์ˆ˜์ต์„ ์ฐฝ์ถœํ•  ์ˆ˜ ์žˆ๋Š” ๊ตฌ์กฐ๋‹ค.

**2. ๊ตฌ๋… ๊ธฐ๋ฐ˜ ๋ชจ๋ธ**
๋งค๋‹ฌ ์ผ์ • ```๊ตฌ๋…๋ฃŒ```๋ฅผ ์ง€๋ถˆํ•˜๋ฉด, ํŠน์ • ๋ฉ˜ํ† ์— ๊ตญํ•œ๋˜์ง€ ์•Š๊ณ  ๋‹ค์–‘ํ•œ ๋ฉ˜ํ† ๋ฅผ ์ž์œ ๋กญ๊ฒŒ ๋งŒ๋‚  ์ˆ˜ ์žˆ๋Š” ์„œ๋น„์Šค๋ฅผ ์ œ๊ณตํ•œ๋‹ค. ์‚ฌ์šฉ์ž๋Š” React์™€ ๊ฐ™์€ ํŠน์ • ๊ธฐ์ˆ ์„ ๋ฐฐ์šฐ๊ฑฐ๋‚˜, ๊ฐ„๋‹จํ•œ ์ปคํ”ผ์ฑ—์„ ํ†ตํ•ด ์กฐ์–ธ์„ ์–ป๋Š” ๋“ฑ ๋‹ค์–‘ํ•œ ์š”๊ตฌ์— ๋งž๊ฒŒ ๋ฉ˜ํ† ๋ง์„ ์„ ํƒํ•  ์ˆ˜ ์žˆ๋‹ค. ์ด ๋ชจ๋ธ์€ ```์œ ์—ฐ์„ฑ์„ ์ค‘์š”์‹œํ•˜๋Š” ์‚ฌ์šฉ์ž๋“ค```์—๊ฒŒ ํฐ ๋งŒ์กฑ๊ฐ์„ ์ œ๊ณตํ•˜๋ฉฐ, ```๊ตฌ๋…์ž ๊ธฐ๋ฐ˜์˜ ์•ˆ์ •์ ์ธ ์ˆ˜์ต```์„ ํ™•๋ณดํ•  ์ˆ˜ ์žˆ๋‹ค.

**3. ๊ด‘๊ณ  ๋ชจ๋ธ**

4. ์œ ์ง€ ๋ชจ๋ธ ํ˜„์žฌ ํ”Œ๋žซํผ์˜ ๋ฉ˜ํ‹ฐ๋Š” ํ–ฅํ›„ ๋ฉ˜ํ† ๋กœ ์„ฑ์žฅํ•  ๊ฐ€๋Šฅ์„ฑ์ด ๋†’๋‹ค. ์ด ๋ชจ๋ธ์€ ๋ฉ˜ํ‹ฐ๊ฐ€ ์ทจ์—…์— ์„ฑ๊ณตํ•œ ํ›„, ๋ฉ˜ํ† ๋กœ ํ™œ๋™ํ•˜์—ฌ ๋‹ค์‹œ ์ˆ˜์ˆ˜๋ฃŒ ๊ธฐ๋ฐ˜ ์ˆ˜์ต ๊ตฌ์กฐ์— ๊ธฐ์—ฌํ•˜๊ฒŒ ๋งŒ๋“œ๋Š” ``์ง€์† ๊ฐ€๋Šฅํ•œ ์ˆœํ™˜ ๊ตฌ์กฐ``๋ฅผ ํ˜•์„ฑํ•œ๋‹ค. ์ด๋Š” ํ”Œ๋žซํผ์˜ ์„ฑ์žฅ๊ณผ ์œ ์ง€์— ๊ธ์ •์ ์ธ ์˜ํ–ฅ์„ ๋ฏธ์น˜๋ฉฐ, ์ž ์žฌ์ ์ธ ๊ณ ๊ฐ์„ ํ™•๋ณดํ•˜๋Š” ๋™์‹œ์— ๊ธฐ์กด ์ˆ˜์ต ๋ชจ๋ธ์„ ์œ ์ง€ํ•˜๋Š” ๋ฐ ๋„์›€์„ ์ค€๋‹ค.

๋ฒŒ์จ K-LinkedIn์„ ์ฐฝ์—…ํ•œ ๊ธฐ๋ถ„์ด๋‹ค.

๐ŸŒฟ 8. ํšŒ๊ณ 

reference(๋ณ„๋‚œ์‹๋‹น 77ํ™” - ๋ฆฌ๋”์‹ญ): https://comic.naver.com/webtoon/detail?titleId=806189&no=77&week=mon

More to read

Amazon VPC

Amazon VPC Architecture ์ดํ•ดํ•˜๊ธฐ

์ƒˆ๋กœ์šด ํ”„๋กœ์ ํŠธ๋ฅผ ๊ธฐํšํ•˜๋ฉฐ, ๊ฐœ๋ฐœ์—์„œ ๋ฌด์—‡์„ ๊ฐ€์žฅ ๋จผ์ € ๊ณ ๋ฏผํ•ด์•ผ ํ•˜๋Š”์ง€ ๋‹ค์‹œ ๋Œ์•„๋ณด๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.ํ•œ๋•Œ๋Š” ํ”„๋ก ํŠธ์—”๋“œ๊ฐ€ ๋ชจ๋“  ์„ค๊ณ„์˜ ์ถœ๋ฐœ์ ์ด๋ผ๊ณ  ๋ฏฟ์—ˆ์Šต๋‹ˆ๋‹ค. ์œ ์ €๊ฐ€ ๋ฌด์—‡์„ ๋ณด๊ณ , ์–ด๋–ค ํ๋ฆ„์—์„œ ๋จธ๋ฌด๋ฅด๊ณ  ์ดํƒˆํ•˜๋Š”์ง€์— ๋Œ€ํ•œ ์ดํ•ด ์—†์ด ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“ ๋‹ค๋Š” ๊ฑด ๋ถˆ๊ฐ€๋Šฅํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ๊ธฐ

'์›์‚ฌ์ดํŠธ'

ํ”„๋ก ํŠธ์—”๋“œ ๊ด€์ ์œผ๋กœ ์•Œ๊ณ ๋ฆฌ์ฆ˜ ์ดํ•ดํ•˜๊ธฐ

์˜ค๋žœ๋งŒ์— ๋ฐฉ๋ฒ•๋ก ์— ๊ด€ํ•œ ๊ธ€์„ ์“ฐ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ตœ๊ทผ ์ƒํ™ฉ์€ ์ด๋ ‡์Šต๋‹ˆ๋‹ค. SSAFY์—์„œ๋Š” ํ•˜๋ฃจ์— ์—„์ฒญ๋‚œ ์–‘์˜ ์•Œ๊ณ ๋ฆฌ์ฆ˜ ๋ฌธ์ œ๋“ค์„ ๊ณผ์ œ๋กœ ์ˆ˜ํ–‰ํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๊ทธ ๊ณผ์ •์—์„œ, '๊ตฌํ˜„๋ ฅ'์ด ๋งค์šฐ ๋–จ์–ด์ง„๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. ์™„์ „ํžˆ ์–ด๋ ค์šด ๋ฌธ์ œ๋ผ๋ฉด '์•„์‰ฌ์›€'์ด๋ผ๋Š” ๊ฐ์ •์กฐ์ฐจ ๋А๋ผ์ง€

Subnet

VPC ์„ค๊ณ„์˜ ์‹œ์ž‘: IP์™€ Subnet

๋ฐ˜๋ณต๋˜๋Š” ๋ฃจํ‹ด ์†์—์„œ ์–ป์€ ์•ˆ์ •๊ฐ์„ ๋ฐœํŒ ์‚ผ์•„, ์ด์ œ๋Š” ๊ธฐ์ˆ ์  ์ŠคํŽ™ํŠธ๋Ÿผ์„ ๋„“ํžˆ๊ธฐ ์œ„ํ•œ ๊ฐœ์ธ ํ”„๋กœ์ ํŠธ์— ์ฐฉ์ˆ˜ํ•˜๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค.์ด๋ฒˆ ํ”„๋กœ์ ํŠธ์˜ ๋ชฉํ‘œ๋Š” ๋‹จ์ˆœํ•œ ํฌํŠธํด๋ฆฌ์˜ค ๊ตฌ์ถ•์„ ๋„˜์–ด, ์‹ค์ œ ์„œ๋น„์Šค ์ˆ˜์ค€์˜ ๋ธ”๋กœ๊ทธ ์‹œ์Šคํ…œ ๊ตฌํ˜„๊ณผ ๋‹ค๊ตญ์–ด ์ฒ˜๋ฆฌ ์ ์šฉ ๋“ฑ ์‹ค๋ฌด์— ๊ฐ€๊นŒ์šด ์—ญ๋Ÿ‰์„ ํ•œ ๋‹จ๊ณ„