๐Ÿ“ƒ ํ”„๋ก ํŠธ์—”๋“œ ์ธํ„ฐ๋ทฐ ๋ฌธ์ œ ๋‹ตํ•ด๋ณด๊ธฐ #1 ์„ฑ๋Šฅ ๊ฐœ์„ 

jakeseo_meยท2020๋…„ 6์›” 1์ผ
27
post-thumbnail

๐Ÿ“ƒ ํ”„๋ก ํŠธ์—”๋“œ ์ธํ„ฐ๋ทฐ ๋ฌธ์ œ ๋‹ตํ•ด๋ณด๊ธฐ #1 ์„ฑ๋Šฅ ๊ฐœ์„ 

Prologue

๊นƒํ—ˆ๋ธŒ๋ฅผ ๋Œ์•„๋‹ค๋‹ˆ๋‹ค๊ฐ€ ์˜ˆ์ „์— ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž ์ธํ„ฐ๋ทฐ ์งˆ๋ฌธ์ด๋ผ๋Š” ๋ ˆํฌ์ง€ํ† ๋ฆฌ๋ฅผ ๋ณธ์ ์ด ์žˆ๋‹ค. ์‚ฌ์‹ค ๊ทธ ๋‹น์‹œ์—๋Š” ๊ทธ๋ƒฅ ์Šคํƒ€๋งŒ ๋ˆŒ๋Ÿฌ๋†“๊ณ  ํฐ ๊ด€์‹ฌ์ด ์—†์—ˆ์ง€๋งŒ ์ง€๊ธˆ๋ถ€ํ„ฐ ํ•˜๋‚˜์”ฉ ํ’€์–ด๋ณด๋ ค ํ•œ๋‹ค.

๋ฌผ๋ก  ๋งŽ์€ ๋‹ต๋“ค์ด ์ด๋ฏธ ์ด ๋ ˆํฌ์ง€ํ† ๋ฆฌ์— ์ž‘์„ฑ๋˜์–ด ์žˆ๊ธด ํ•œ๋ฐ, ์ž‘์„ฑ๋˜์ง€ ์•Š์€ ๊ฒƒ๋“ค๋„ ์žˆ๊ณ  ๋‚ด ๋‹ต์ด๋ž‘ ๋ชจ๋ฒ”๋‹ต์•ˆ์„ ๋น„๊ตํ•˜๋Š” ๊ฒƒ๋„ ์ข‹์„ ๊ฒƒ ๊ฐ™์•„์„œ ํ•œ๋ฒˆ ํ’€์–ด๋ณด๋ ค ํ•œ๋‹ค.

๋ฌธ์ œ ์„ ์ •

๊ธฐ์กด ๋ ˆํฌ์ง€ํ† ๋ฆฌ์—๋Š” ๋ฌธ์ œ์˜ ๋ถ„๋ฅ˜๊ฐ€ ์•„๋ž˜์™€ ๊ฐ™์ด ๋˜์–ด์žˆ๋‹ค.

  1. General Questions
  2. HTML Questions
  3. CSS Questions
  4. JS Questions
  5. Accessibility Questions (external link)
  6. Testing Questions
  7. Performance Questions
  8. Network Questions
  9. Coding Questions
  10. Fun Questions

๋งค์ผ 1๊ฐ€์ง€์”ฉ ๋Œ์•„๊ฐ€๋ฉฐ ํ’€ ๊ฑด๋ฐ, General Questions ํ•ญ๋ชฉ์—์„œ ๋„ˆ๋ฌด ์ผ๋ฐ˜์ ์ธ ๋ฌธ์ œ๋Š” ํ’€์ง€ ์•Š์„ ๊ฒƒ์ด๋‹ค. ๋„ˆ๋ฌด ์ผ๋ฐ˜์ ์ธ ๋ฌธ์ œ์˜ ์ •์˜๋Š” ์‚ฌ๋žŒ๋งˆ๋‹ค ๋‹ต์ด ๋‹ค๋ฅผ ์ˆ˜ ์žˆ๋Š” ๋ฌธ์ œ์ด๋‹ค.

์ด๋ฅผํ…Œ๋ฉด...

What did you learn yesterday/this week? (์–ด์ œ/์ด๋ฒˆ์ฃผ์— ๋ฌด์—‡์„ ๋ฐฐ์› ๋‚˜์š”)
What excites or interests you about coding? (๋ฌด์—‡์ด ๋‹น์‹ ์„ ์ฝ”๋”ฉํ•˜๊ณ  ์‹ถ๊ฒŒ ๋งŒ๋“œ๋‚˜์š”?)
What is a recent technical challenge you experienced and how did you solve it?(์ตœ๊ทผ์— ๊ฒช์€ ๊ธฐ์ˆ ์ ์ธ ์–ด๋ ค์›€๊ณผ ๊ทธ๊ฒƒ์„ ์–ด๋–ป๊ฒŒ ํ•ด๊ฒฐํ–ˆ๋Š”์ง€ ์•Œ๋ ค์ฃผ์„ธ์š”)

์ด๋Ÿฌํ•œ ๊ฒƒ๋“ค์€ ๋‹ต๋ณ€ํ•˜์ง€ ์•Š๋Š”๋‹ค. ์ด๋Ÿฐ ๋ฌธ์ œ๋Š” ๊ทธ๋•Œ๊ทธ๋•Œ ๋‹ต์ด ๋‹ฌ๋ผ์งˆ ์ˆ˜ ์žˆ๋‹ค.

์ฐธ๊ณ 

๋‚˜์˜ ๋‹ต๋ณ€์€ ๋†’์€ ํ™•๋ฅ ๋กœ ํ‹€๋ฆด ์ˆ˜๋„ ์žˆ์œผ๋ฉฐ, ์•„๋‹ˆ๋ฉด ๋งž๊ฒŒ ๊ฐ€๋‹ค๊ฐ€ ์ค‘๊ฐ„์— ์ด์ƒํ•œ ๊ธธ๋กœ ๋น ์งˆ ์ˆ˜๋„ ์žˆ๋‹ค. ๋Œ“๊ธ€์— ์ž์‹ ๋งŒ์˜ ๋‹ต์„ ์˜ฌ๋ ค์ฃผ๋ฉด ๋งค์šฐ ๊ณ ๋งˆ์šธ ๊ฒƒ ๊ฐ™๋‹ค.

Q: ์ƒˆ๋กœ์šด ์›น์‚ฌ์ดํŠธ๋ฅผ ๋นŒ๋“œํ•˜๊ฑฐ๋‚˜ ์œ ์ง€๋ณด์ˆ˜ํ•  ๋•Œ, ํผํฌ๋จผ์Šค๋ฅผ ํ–ฅ์ƒ์‹œํ‚ค๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ๋œ ๊ธฐ์ˆ ์— ๋Œ€ํ•ด ์„ค๋ช…ํ•  ์ˆ˜ ์žˆ๋Š”๊ฐ€?

์›๋ฌธ : When building a new web site or maintaining one, can you explain some techniques you have used to increase performance?

'ํผํฌ๋จผ์Šค' ์˜ ์˜๋ฏธ๋ฅผ '์„ฑ๋Šฅ' ๊ณผ '์ตœ์ ํ™”' ์˜ ๊ด€์ ์—์„œ ๋ณผ ๋•Œ,

HTML, CSS, JS (Client side)

1. CDN์˜ ์‚ฌ์šฉ

CDN์€ Contents Delivery Network๋กœ ์‚ฌ์šฉ์ž์™€ ๊ฐ€๊นŒ์šด ๊ณณ์— ์œ„์น˜ํ•œ Cache Server์— Content๋ฅผ ์ €์žฅ(์บ์‹ฑ)ํ•ด๋‘์—ˆ๋‹ค๊ฐ€ ์š”์ฒญ ์‹œ์— Cache Server๊ฐ€ ์‘๋‹ต์„ ์ฃผ๋Š” ๋ฐฉ์‹์„ ๋งํ•œ๋‹ค. ์ด ๋ฐฉ์‹์„ ์‚ฌ์šฉํ•˜๋ฉด ๋ฌผ๋ฆฌ์ ์ธ ๊ฑฐ๋ฆฌ์˜ ์ œ์•ฝ์—†์ด ๋‚˜์™€ ๊ฐ€์žฅ ๊ฐ€๊นŒ์šด Cache Server์—์„œ ๋ฆฌ์†Œ์Šค๋ฅผ ๋ฐ›์„ ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋น ๋ฅธ ๋ฆฌ์†Œ์Šค ๋‹ค์šด๋กœ๋“œ๊ฐ€ ๊ฐ€๋Šฅํ•˜๋‹ค.

2. ๋ฆฌ์†Œ์Šค์˜ ์ตœ์†Œํ™”(Minified)

๋ฆฌ์†Œ์Šค์˜ ์ตœ์†Œํ™”๋Š” ๋กœ๋“œ๋˜๋Š” ์ด๋ฏธ์ง€๋“ค์˜ ์‚ฌ์ด์ฆˆ, ํ™”์งˆ์— ๋Œ€ํ•œ ์กฐ์ •๊ณผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ ๋“ฑ ์†Œ์Šค์ฝ”๋“œ์˜ ์ตœ์†Œํ™”๊ฐ€ ์žˆ์„ ์ˆ˜ ์žˆ๊ฒ ๋‹ค.

3. Javascript์˜ ์ง€์—ฐ(Defer)๋กœ๋”ฉ๊ณผ ๋น„๋™๊ธฐ(Asyncronous) ๋กœ๋”ฉ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋กœ๋“œํ•  ๋•Œ, ๋งŒ์•ฝ ์˜์กด์„ฑ์ด ์š”๊ตฌ๋˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์„ ํ•จ๊ป˜ ๋กœ๋“œํ•œ๋‹ค๋ฉด ๋‚˜์ค‘์— ๋กœ๋“œ๋˜์–ด์•ผ ํ•  ๊ฒƒ๋“ค์€ 'defer' ํ‚ค์›Œ๋“œ๋ฅผ ์ด์šฉํ•˜์—ฌ ์ง€์—ฐ๋กœ๋”ฉ์„ ํ•˜๋ฉด ๋ ํ…Œ๊ณ , ๊ทธ๋ ‡์ง€ ์•Š์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” 'async' ํ‚ค์›Œ๋“œ๋ฅผ ํ†ตํ•ด ๋น„๋™๊ธฐ์  ๋กœ๋”ฉ์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค.

๋น„๋™๊ธฐ์  ๋กœ๋“œ๋Š” ์„ฑ๋Šฅ์ƒ ์ด์ ์„ ์ค€๋‹ค.

4. Lazy Loading

Lazy Loading์„ ์ด์šฉํ•˜์—ฌ ํ•œ๋ฒˆ์— ๋ชจ๋“  ์ปจํ…์ธ ๋ฅผ ๋กœ๋“œํ•˜์ง€ ์•Š๊ณ , ์‚ฌ์šฉ์ž์˜ ํ™”๋ฉด์— ์ฆ‰๊ฐ์ ์œผ๋กœ ๋ณด์ด๋Š” ๋ฆฌ์†Œ์Šค๋“ค์„ ๋กœ๋”ฉํ•˜๊ณ , ๋‚˜๋จธ์ง€๋Š” ํ•„์š”ํ•œ ๋•Œ์— ๋กœ๋“œํ•  ์ˆ˜ ์žˆ๋‹ค.

Database, Infrastructure, Network (Server side)

1. Database

๊ฑฐ์˜ ๋Œ€๋ถ€๋ถ„์˜ ๋™์  ์›น์‚ฌ์ดํŠธ์˜ ๊ฒฝ์šฐ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค๋ฅผ ์“ฐ๊ฒŒ ๋œ๋‹ค. ์—ฌ๊ธฐ์„œ ๊ด€๊ณ„ํ˜• DB/๋น„๊ด€๊ณ„ํ˜• DB๋ฅผ ์„ ํƒํ•ด์•ผ ํ•œ๋‹ค.

์ตœ๋Œ€ํ•œ ๊ฐ„๋žตํ•˜๊ฒŒ ๋งํ•˜์ž๋ฉด ์„ฑ๋Šฅ์„ ์œ„ํ•ด์„œ๋Š” ์›ฌ๋งŒํ•˜๋ฉด ๊ด€๊ณ„ํ˜• DB๋ฅผ ์„ ํƒํ•˜๋Š” ๊ฒƒ์ด ์˜ณ๋‹ค๊ณ  ๋ณธ๋‹ค. ์—ฌ๊ธฐ์„œ ๊ด€๊ณ„ํ˜• DB๋ฅผ ์„ ํƒํ•œ ๊ฒฝ์šฐ, DB์„ค๊ณ„๊ฐ€ ๋งค์šฐ ์ค‘์š”ํ•  ์ˆ˜ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค.

ํ•˜์ง€๋งŒ ์‚ฌ์šฉ๋  ๋ฐ์ดํ„ฐ์— ๋ณ€๊ฒฝ์‚ฌํ•ญ์ด ์ž์ฃผ ๋“ฑ์žฅํ•˜๋ฉฐ ์ €์žฅ๋  ๋ฐ์ดํ„ฐ๊ฐ€ ๊ทธ๋ ‡๊ฒŒ ๋ณต์žกํ•˜์ง€ ์•Š๋‹ค๋ฉด ๋น„๊ด€๊ณ„ํ˜• DB๋ฅผ ์„ ํƒํ•˜๋Š” ๊ฒƒ๋„ ์ข‹๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค. (Schemaless์˜ ์ด์  ์ด์šฉ) ๋น…๋ฐ์ดํ„ฐ๋ฅผ ์ฒ˜๋ฆฌํ•˜๋Š” ๊ฒฝ์šฐ์—๋„ ๋น„๊ด€๊ณ„ํ˜• DB๊ฐ€ ์ข‹์„ ์ˆ˜ ์žˆ๋‹ค. ๋‹ค์ค‘ ์„œ๋ฒ„๋ฅผ ๊ตฌ์„ฑํ•ด๋†“๊ณ  ํด๋Ÿฌ์Šคํ„ฐ๋ง์ด ๊ฐ€๋Šฅํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

2. Load Balancing

์ด์šฉ์ž๊ฐ€ ๋งŽ์€ ์„œ๋ฒ„์˜ ๊ฒฝ์šฐ nginx๋‚˜ pm2๋ฅผ ์ด์šฉํ•˜์—ฌ ๋กœ๋“œ๋ฐธ๋Ÿฐ์‹ฑ์„ ๊ตฌ์ถ•ํ•˜๊ณ , ์„œ๋ฒ„์— ๋ถ€ํ•˜๊ฐ€ ์ž˜ ๋‚˜๋ˆ ์ง€๊ฒŒ ํ•  ์ˆ˜ ์žˆ๋‹ค.

3. HTTP ์š”์ฒญ ๋ถ„์„ ๋ฐ ์ตœ์†Œํ™”ํ•˜๊ธฐ

๊ตฌ๊ธ€ ํฌ๋กฌ์˜ ๋„คํŠธ์›Œํฌ ํƒญ์„ ์ด์šฉํ•˜์—ฌ, ํŽ˜์ด์ง€๋ฅผ ๋กœ๋“œํ•  ๋•Œ์— ์–ด๋– ํ•œ ์š”์ฒญ๋“ค์ด ์ฃผ๊ณ ๋ฐ›์•„์ง€๋Š”์ง€ ํ™•์ธํ•˜๊ณ  ์“ธ๋ชจ์—†๋Š” ์š”์ฒญ์€ ์ฐพ์•„์„œ ์ง€์šฐ๊ณ , ๋„ˆ๋ฌด ๋กœ๋”ฉ์ด ์˜ค๋ž˜๊ฑธ๋ฆฌ๋Š” ์š”์ฒญ์€ ๊ทธ ์›์ธ์„ ํŒŒ์•…ํ•ด๋ณด์•„์•ผ ํ•œ๋‹ค.

  1. DNS lookup
  2. Server processing
  3. Response

Time to first byte๋ผ๊ณ  ๋ถˆ๋ฆฌ๋Š” ์œ„ 3๊ฐ€์ง€์˜ factor๋ฅผ ์‚ดํŽด๋ณด๋Š” ๊ฒƒ์ด ๋„์›€์ด ๋  ์ˆ˜ ์žˆ๋‹ค.

ํฌ๋กฌ ๋„คํŠธ์›Œํฌ ๊ฒฐ๊ณผ์—์„œ waterfall์„ ํด๋ฆญํ•ด์„œ ํ™•์ธํ•ด๋ณผ ์ˆ˜๋„ ์žˆ๊ณ , ๋‹ค๋ฅธ ์‚ฌ์ดํŠธ ์Šคํ”ผ๋“œ ์ธก์ • ์›น์‚ฌ์ดํŠธ๋ฅผ ์ด์šฉํ•˜์—ฌ ๋ณผ ์ˆ˜๋„ ์žˆ๋‹ค.

์ฐธ๊ณ ์ž๋ฃŒ

https://www.crazyegg.com/blog/speed-up-your-website/
https://m.blog.naver.com/sef16/70185648139
https://m.blog.naver.com/PostView.nhn?blogId=sef16&logNo=70180201343&proxyReferer=https:%2F%2Fwww.google.com%2F

profile
๋Œ€์ „์— ์žˆ๋Š” (์ฃผ) ์•„์ด์™€์ฆˆ์—์„œ ํ’€์Šคํƒ ์›น๊ฐœ๋ฐœ์ž๋กœ ์ผํ•˜๊ณ  ์žˆ๋Š” ์„œ์ง„๊ทœ์ž…๋‹ˆ๋‹ค. ์ฃผ๋กœ Jake Seo๋ผ๋Š” ๋‹‰๋„ค์ž„์„ ๋งŽ์ด ์”๋‹ˆ๋‹ค. Javascript๋ฅผ ์ข‹์•„ํ•ฉ๋‹ˆ๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€