이 글은 KUIT Web 파트 부원분들을 대상으로 작성한 글입니다.
한 주 동안 스터디하시느라 다들 수고하셨습니다! 이번 주 부원님들께서 워크북 발표하시는 내용을 듣고 추가적으로 보충 설명을 했었는데요. 한 번 글로 정리해서 공유해보려 합니다.
LocalStorage
HTML Web Storage API는 localStorage와 sessionStorage를 포함합니다.
그 중 localStorage는 브라우저가 닫히고 다시 열려도 데이터가 지워지지 않습니다. 데이터는 만료 날짜가 없으며, JavaScript를 통해 브라우저 캐시/로컬 저장된 데이터를 지우는 것을 통해서만 지워집니다.
localStorage는 로그인 여부를 확인할 때 사용됩니다.
만약에 토큰 방식을 활용하여 로그인을 한다면, 우리는 백엔드로부터 토큰을 받아와서 localStorage에 저장합니다.
그리고 새로고침을 하거나 페이지 이동을 할 때, 프론트에서는 localStorage에 토큰이 있는지 검사하고 토큰이 있으면 로그인을 유지하고, 만약 없다면 로그아웃을 합니다.
위에 언급했듯이 localStorage는 브라우저가 닫히고 다시 열려도 데이터가 지워지지 않으므로 로그인 유지 여부를 확인하기에 적절합니다.
meta viewport에 관하여
기본적으로, meta viewport 태그는 다음과 같이 설정됩니다.
<meta name="viewport" content="width=device-width, initial-scale=1">
이 설정은 웹 페이지가 디바이스의 너비에 맞게 렌더링되고, 초기 확대/축소 레벨이 1로 설정되도록 합니다. 이는 모바일 디바이스에서 웹 페이지가 올바르게 보이도록 하는 데 도움이 됩니다.
하지만 모바일을 고려하지 않고 설정할 수도 있습니다. width 속성을 그냥 특정 픽셀 값으로 설정하면 됩니다.
<meta name="viewport" content="width=1024">
이렇게 하면 웹 페이지가 항상 1024픽셀의 너비로 렌더링됩니다. 이렇게 하면 모바일 화면에서도 pc화면과 동일하게 렌더링이 됩니다. 하지만 모바일에서 웹 페이지가 제대로 보이지 않을 수 있으므로 되도록이면 이 설정은 사용하지 않는게 좋은것 같습니다!
스켈레톤 UI
스켈레톤 UI는 페이지나 앱의 콘텐츠가 로드되는 동안 사용자에게 표시되는 비어있는 버전의 페이지(레이아웃)입니다. 일반적으로 흰색 배경에, 로딩이 진행중인 듯 한 CSS 애니메이션을 적용하여 보여줍니다.
→ 사용자의 이탈율을 줄일 수 있습니다.
→ 하지만, 구현하려면 원래 콘텐츠들이 있는 자리에 하나하나씩 배치를 해야되니 살짝 귀찮을 수도?
<html lang=”ko”>에 대해서
<html lang=”ko”>는 HTML 문서가 한국어로 작성되었음을 나타내는 태그입니다.
lang 속성은 웹 페이지의 주 언어를 명시합니다. → 웹 접근성 향상
lang의 역할
- 스크린 리더나 점자 정보 단말기, 모바일의 VoiceOver, TalkBack 등을 통해 웹에 접근하는 사용자들에게 올바른 언어로 번역되어 정보를 전달할 수 있게 합니다.
- 검색 엔진이 웹 페이지의 내용을 이해하고 적절하게 인덱싱하는 데 도움이 됩니다.
SSR(서버 사이드 렌더링)이 SEO에 유리한 이유
- 완전한 HTML 제공: SSR은 초기 페이지 로드 시에 검색 엔진이 수집할 콘텐츠를 포함한 완전한 HTML을 제공합니다 이로 인해 검색 엔진은 페이지의 콘텐츠를 효과적으로 수집할 수 있습니다.
- 크롤러 호환성: 검색 엔진 크롤러는 JavaScript를 실행하는 데 어려움이 있을 수 있습니다 SSR을 사용하면, 서버는 HTML을 완전히 로딩한 상태로 크롤러에게 제공합니다 이는 크롤러가 더 많은 정보를 인식하고, 그 결과로 더 높은 검색 결과 순위를 얻을 수 있습니다
- 메타 태그 최적화: SSR은 메타 태그를 미리 정의할 수 있도록 해 SEO 최적화에 유리합니다. 메타 태그는 웹 페이지의 주요 정보를 담고 있어, 이를 통해 크롤러는 페이지의 내용을 더욱 정확하게 이해하게 됩니다
- Bounce Rate(이탈율) 감소: SSR은 사용자가 빠르게 콘텐츠를 볼 수 있게 해서 bounce rate를 줄이는데 기여합니다. 이는 사용자 경험을 향상시키며, 고급 SEO 지표로 간주되기 때문에 검색 엔진 결과 페이지 (SERP) 순위에도 긍정적인 영향을 끼칩니다.
SSR(서버 사이드 렌더링)에서도 SPA(싱글 페이지 어플리케이션) 구현이 가능한가요?
네, 가능합니다. 싱글 페이지 애플리케이션(Single Page Application, SPA)은 일반적으로 클라이언트 사이드 렌더링(Client Side Rendering, CSR)을 사용하지만, 서버 사이드 렌더링(Server Side Rendering, SSR)을 사용하여 구현할 수도 있습니다.
부연설명(by MicroSoft Copilot)
SSR을 사용하는 SPA는 초기 페이지 로드 시에 서버에서 완전한 HTML을 생성하고 클라이언트로 전송합니다. 이렇게 하면 CSR만 사용하는 SPA에 비해 SEO 최적화와 초기 페이지 로딩 속도 개선 등의 이점을 얻을 수 있습니다.
예를 들어, Vue.js의 SSR 프레임워크인 Nuxt.js는 이러한 SSR 기반의 SPA를 구현하는 데 사용됩니다. Nuxt.js를 사용하면 Vue.js 기반의 SPA에서 SEO 최적화와 빠른 초기 페이지 로딩 속도를 제공하면서 동시에 SPA의 장점인 빠른 페이지 전환 등을 유지할 수 있습니다.
따라서, SPA를 SSR에서 구현하는 것은 충분히 가능하며, 이를 통해 SPA의 사용자 경험을 향상시키고 웹 애플리케이션의 성능을 개선할 수 있습니다.
API가 무엇인가요?
API는 애플리케이션 프로그래밍 인터페이스(Application Programming Interface)의 약자로, 두 소프트웨어 구성 요소가 서로 통신할 수 있게 하는 메커니즘입니다.
API는 서로 다른 소프트웨어 간의 '대화’를 가능하게 합니다. 예를 들어, 휴대폰의 날씨 앱은 API를 통해 기상청의 소프트웨어 시스템과 통신하여 휴대폰에 매일 최신 날씨 정보를 표시합니다.
inline에서 margin과 padding은 좌우에만 적용되고, 상하에는 적용이 되지 않습니다.
라이브러리 vs 프레임워크
라이브러리는 라이브러리를 가져다가 사용하고 호출하는 측에 전적으로 주도성이 있으며 프레임워크는 그 틀안에 이미 제어 흐름에 대한 주도성이 내재(내포)하고 있습니다.프레임워크는 가져다가 사용한다기보다는 거기에 들어가서 사용한다는 느낌/관점으로 접근할 수 있습니다.
'KUIT' 카테고리의 다른 글
| [KUIT] 실행 컨텍스트와 this, 클로저, 호이스팅 (0) | 2024.03.30 |
|---|---|
| [KUIT] 2주차 워크북 보충(CSS) (0) | 2024.03.28 |
| [KUIT] CSS 전처리기, SaSS의 특징 (0) | 2024.03.26 |
| [KUIT] id와 class의 차이, css 우선순위, BEM (0) | 2024.03.24 |
| [KUIT] htmx 소개 (0) | 2024.03.22 |
