[React] SPA

μœ μ•„ν˜„Β·2022λ…„ 11μ›” 28일
0

React

λͺ©λ‘ 보기
3/28
post-thumbnail

πŸ€” SPAλž€?

1. λ“±μž₯λ°°κ²½

전톡적인 μ›Ήμ‚¬μ΄νŠΈμ—μ„œλŠ” μ‚¬μš©μžκ°€ μ›Ήμ‚¬μ΄νŠΈ λ‚΄μ˜ λ‹€λ₯Έ νŽ˜μ΄μ§€λ‘œ μ΄λ™ν•˜λ©΄, λΈŒλΌμš°μ €κ°€ νŽ˜μ΄μ§€λ₯Ό 보여주기 μœ„ν•΄μ„œ 맀번 HTML 파일둜 된 νŽ˜μ΄μ§€μ˜ 전체λ₯Ό λΆˆλŸ¬μ™€μ•Όλ§Œ ν–ˆλ‹€.

μœ„μ™€ 같은 μ˜ˆμ‹œ 그림처럼 λ™μΌν•œ νŽ˜μ΄μ§€ μ „ν™˜μ„ 보여주고 μžˆλ‹€. 전톡적인 μ›Ήμ‚¬μ΄νŠΈλŠ” νŽ˜μ΄μ§€ 전체λ₯Ό λ‘œλ”©ν•˜κ³ , SPAλŠ” Menu, Footer와 같은 νŽ˜μ΄μ§€ μ „ν™˜ 전후에 μ€‘λ³΅λ˜λŠ” 뢀뢄은 μƒˆλ‘œ λΆˆλŸ¬μ˜€μ§€ μ•ŠλŠ”λ‹€. 전톡적인 μ›Ήμ‚¬μ΄νŠΈμ—μ„œ 이와 같이 νŽ˜μ΄μ§€ 전체λ₯Ό λΆˆλŸ¬μ˜€λŠ” ν–‰μœ„λ₯Ό 보톡 κΉœλΉ‘μΈλ‹€κ³  ν‘œν˜„ν•œλ‹€.

μ›Ήμ‚¬μ΄νŠΈκ°€ λ³΅μž‘ν•΄μ§€κ³  μ• ν”Œλ¦¬μΌ€μ΄μ…˜ ν˜•νƒœλ₯Ό κ°€μ§€κ²Œ λ˜λ©΄μ„œ, μ‚¬μš©μžμ™€ μ„œλΉ„μŠ€ μ‚¬μ΄μ˜ λ”μš± λ§Žμ€ μƒν˜Έμž‘μš©μ΄ μΌμ–΄λ‚˜κ²Œ λμ—ˆλ‹€. ν•˜μ§€λ§Œ 이럴 λ•Œλ§ˆλ‹€ Headerλ‚˜ Navigation Bar와 같이 μ€‘λ³΅λ˜λŠ” μš”μ†Œλ“€μ„ 맀번 λΆˆλŸ¬μ˜€λŠ” 것은 μ„œλ²„μ™€μ˜ λΆˆν•„μš”ν•œ νŠΈλž˜ν”½μ„ λ°œμƒμ‹œμΌ°λ‹€. λ˜ν•œ μ‚¬μš©μž μž…μž₯μ—μ„œλŠ” 맀번 λͺ¨λ“  νŽ˜μ΄μ§€λ₯Ό 뢈러였게 λ˜λ©΄μ„œ 더 느린 λ°˜μ‘μ„±μ„ κ°€μ§€κ²Œ λ˜μ—ˆκ³ , μ• ν”Œλ¦¬μΌ€μ΄μ…˜κ³Ό 같은 μ‚¬μš©μž κ²½ν—˜μ„ μ œκ³΅ν•˜κΈ° μ–΄λ ΅κ²Œ λ§Œλ“€μ—ˆλ‹€.

πŸ”Ή 1990λ…„λŒ€ ν›„λ°˜μ— HTML λ¬Έμ„œ 전체가 μ•„λ‹Œ, μ—…λ°μ΄νŠΈμ— ν•„μš”ν•œ λ°μ΄ν„°λ§Œ μ„œλ²„μ—μ„œ 전달받아 데이터λ₯Ό JSκ°€ λ™μ μœΌλ‘œ HTML μš”μ†Œλ₯Ό μƒμ„±ν•΄μ„œ 화면에 λ³΄μ—¬μ£ΌλŠ” 방식이 개발돼 μ‚¬μš©λ˜κΈ° μ‹œμž‘ν–ˆλ‹€.

πŸ”Ή 2000λ…„λŒ€ μ€‘λ°˜λΆ€ν„° μ΄λŸ¬ν•œ 개발 방식을 μ΄μš©ν•œ μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ΄ λ³΄νŽΈν™”λ˜μ—ˆμœΌλ©°, 이것은 Single Page Application(SPA)이닀.

2. κ°œλ…

μ„œλ²„λ‘œλΆ€ν„° μ™„μ „ν•œ μƒˆλ‘œμš΄ νŽ˜μ΄μ§€λ₯Ό λΆˆλŸ¬μ˜€μ§€ μ•Šκ³  νŽ˜μ΄μ§€ 갱신에 ν•„μš”ν•œ λ°μ΄ν„°λ§Œ λ°›μ•„, κ·Έ 정보λ₯Ό κΈ°μ€€μœΌλ‘œ ν˜„μž¬μ˜ νŽ˜μ΄μ§€λ₯Ό μ—…λ°μ΄νŠΈν•¨μœΌλ‘œμ¨ μ‚¬μš©μžμ™€ μ†Œν†΅ν•˜λŠ” μ›Ή μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜μ΄λ‚˜ μ›Ή μ‚¬μ΄νŠΈ

3. SPA의 μž₯점

μš°λ¦¬κ°€ 많이 μ‚¬μš©ν•˜λŠ” SNS둜 예λ₯Ό λ“€μžλ©΄, μΉœκ΅¬κ°€ 올린 사진에 μ’‹μ•„μš”λ₯Ό λˆ„λ₯΄κ³  λŒ“κΈ€μ„ 달고, κΆκΈˆν•  땐 검색을 ν•˜κΈ°λ„ ν•œλ‹€. 이럴 λ•Œ μ• ν”Œλ¦¬μΌ€μ΄μ…˜κ³Ό μ‚¬μš©μž μ‚¬μ΄μ—μ„œλŠ” μˆ˜μ‹œλ‘œ μƒν˜Έμž‘μš©μ΄ λ°œμƒν•˜λŠ”λ° μ΄λ•Œ νŽ˜μ΄μ§€ 전체λ₯Ό λ Œλ”λ§ν•˜λŠ” 것이 μ•„λ‹Œ ν•„μš”ν•œ λΆ€λΆ„λ§Œ μ—…λ°μ΄νŠΈν•˜κΈ° λ•Œλ¬Έμ— μ‚¬μš©μž 행동에 λΉ λ₯Έ λ°˜μ‘μ„ 보인닀. μ„œλ²„ μž…μž₯μ—μ„œλ„ μš”μ²­λ°›μ€ λ°μ΄ν„°λ§Œ λ„˜κ²¨μ£Όλ©΄ λ˜λ―€λ‘œ 과거와 같은 κ³ΌλΆ€ν•˜ λ¬Έμ œλ„ 쀄일 수 μžˆμ—ˆλ‹€. λ˜ν•œ ν™”λ©΄ 전체λ₯Ό μƒˆλ‘œ λ Œλ”λ§ν•  ν•„μš”κ°€ μ—†μ–΄ 보닀 λ‚˜μ€ UXλ₯Ό μ œκ³΅ν•œλ‹€.

4. SPA의 단점


πŸ’¨ JavaScript 파일 크기가 크고, 첫 ν™”λ©΄ λ‘œλ”© μ‹œκ°„μ΄ 길어진닀.
SPA의 κ²½μš°μ—λŠ” JavaScript 파일의 크기가 크기 λ•Œλ¬Έμ— JS νŒŒμΌμ„ κΈ°λ‹€λ¦¬λŠ” μ‹œκ°„μœΌλ‘œ 첫 ν™”λ©΄ λ‘œλ”© μ‹œκ°„μ΄ 길어진닀. λΈŒλΌμš°μ €λŠ” 첫 화면을 λ‘œλ”©ν•  λ•Œ HTML νŒŒμΌμ„ 읽은 ν›„ κ·Έ μ•ˆμ— μžˆλŠ” script μ•ˆμ˜ Javascript νŒŒμΌμ„ λ‹€μ‹œ λ°›μ•„μ˜€λŠ” 과정을 거치기 λ•Œλ¬Έμ΄λ‹€.


첫 ν™”λ©΄ λ‘œλ”©μ„ ν•  λ•Œ 읽은 HTML νŒŒμΌμ€ 거의 λΉ„μ–΄μžˆκ³ , λŒ€λΆ€λΆ„μ˜ λͺ¨λ“  μ½”λ“œλ“€μ΄ JavaScript 파일 μ•ˆμ— λ“€μ–΄μžˆλ‹€ λ³΄λ‹ˆ μžμ—°μŠ€λŸ½κ²Œ JavaScript 파일이 λ¬΄κ±°μ›Œμ§€λ©°, 이 JS νŒŒμΌμ„ κΈ°λ‹€λ¦¬λŠ” μ‹œκ°„μœΌλ‘œ μΈν•΄μ„œ 첫 ν™”λ©΄ λ‘œλ”© μ‹œκ°„μ΄ 길어진닀.


πŸ’¨ 검색 엔진 μ΅œμ ν™”(SEO)κ°€ 쒋지 μ•Šλ‹€
검색엔진 μ΅œμ ν™”λŠ” κ΅¬κΈ€μ΄λ‚˜ 넀이버 같은 검색엔진이 자료λ₯Ό μˆ˜μ§‘ν•˜κΈ° 쒋도둝 μ›ΉνŽ˜μ΄μ§€λ₯Ό κ΅¬μ„±ν•˜λŠ” 것을 λœ»ν•œλ‹€. 검색 μ—”μ§„μ˜ μž‘λ™ 방식은 검색 λ‘œλ΄‡μ΄ μ›ΉνŽ˜μ΄μ§€μ— μžˆλŠ” 정보λ₯Ό μˆ˜μ§‘ν•˜κ³  λΆ„μ„ν•΄μ„œ κ·Έ κ²°κ³Όκ°’μ˜ 인덱슀λ₯Ό λ§Œλ“€μ–΄μ„œ λ³΄κ΄€ν•˜κ³  μžˆλ‹€κ°€ μ‚¬μš©μžκ°€ 검색어λ₯Ό μž…λ ₯ν•˜λ©΄ λ³΄κ΄€ν•˜λ˜ μΈλ±μŠ€μ—μ„œ 검색어와 κ°€μž₯ μ—°κ΄€μ„± 높은 μ›Ή νŽ˜μ΄μ§€λ“€μ„ μˆœμ„œλŒ€λ‘œ λ³΄μ—¬μ£ΌλŠ” λ°©μ‹μœΌλ‘œ μž‘λ™λœλ‹€. ν•˜μ§€λ§Œ SPA의 κ²½μš°μ—λŠ” HTML νŒŒμΌμ— 별닀λ₯Έ μžλ£Œκ°€ μ—†κΈ° λ•Œλ¬Έμ— 검색 엔진이 μ μ ˆν•˜κ²Œ λ™μž‘ν•˜μ§€ λͺ»ν•œλ‹€. 검색 λ‘œλ΄‡μ΄ 자료λ₯Ό μˆ˜μ§‘ν•  λ•Œ μ›Ή νŽ˜μ΄μ§€μ˜ URL, HTML의 λ¬Έμ„œ λ‚΄μ˜ 각쒅 νƒœκ·Έ, 링크 등을 λΆ„μ„ν•˜λŠ”λ° SPAλŠ” HTML이 거의 λΉ„μ–΄μžˆμ–΄ 검색 λ‘œλ΄‡μ΄ 자료λ₯Ό μΆ©λΆ„νžˆ μˆ˜μ§‘ν•˜μ§€ λͺ»ν•˜κ²Œ λ˜λŠ” 것이닀. μ΄λŸ¬ν•œ 이유 λ•Œλ¬Έμ— 검색 λ…ΈμΆœμ΄ μ€‘μš”ν•œ μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ€ 검색 엔진 μ΅œμ ν™”μ— λŒ€ν•œ λŒ€μ‘μ±…μ„ λ”°λ‘œ λ§ˆλ ¨ν•΄μ•Ό ν•˜λ©°, μ•± μ•ˆμ—μ„œ μ•ž/λ’€λ‘œ κ°€κΈ° λ“±μ˜ μƒνƒœ 관리도 ν•΄μ•Ό 되기 λ•Œλ¬Έμ— 개발의 λ³΅μž‘λ„κ°€ 더 λŠ˜μ–΄λ‚œλ‹€. ν•˜μ§€λ§Œ SPAμ—μ„œλ„ 검색 엔진 μ΅œμ ν™”μ— λŒ€μ‘ν•  수 μžˆλ„λ‘ 검색 엔진이 λ°œμ „ν•˜κ³  μžˆλŠ” 좔세이닀.

좜처: μ½”λ“œμŠ€ν…Œμ΄μΈ 

0개의 λŒ“κΈ€