본문 바로가기
728x90

TECH49

스켈레톤 UI와 Box Model 구성요소 매일 프론트에 대한 공부 + 글을 남겨야 겠다고 생각을 하게 됐는데 아주 기본적인 것부터 차례대로 해보려고 한다!스켈레톤 UI콘텐츠가 아직 로드되지 않았을 때 자리를 미리 차지하는 회색 블록 형태의 플레이스홀더를 화면에 보여주는 기법을 말한다. 효과로딩 중에도 레이아웃 유지: 콘텐츠가 아직 로드되지 않았어도 레이아웃이 미리 고정되어 있음으로써, 화면이 갑자기 바뀌는 플리커링(flickering)을 줄여준다.사용자 인지 속도 향상: "지금 뭔가 로딩되고 있다"는 신호를 주어 사용자 불안을 줄이고, 기다리는 시간을 덜 지루하게 느끼게 해준다.콘텐츠 구조 예측 가능: 유저는 스켈레톤의 형태만 보고도 "여긴 이미지가 올 거고, 여긴 텍스트겠구나"를 예측할 수 있어, 실제 콘텐츠 로딩 후 빠르게 적응 가능하다... 2025. 6. 16.
SSR / CSR / SSG / ISR 🖥️ "SSG?" 신세계 아니고요 🙅‍♀️ 우리가 브라우저에 naver.com을 검색해서 들어가면 네이버 메인 페이지가 보이는데 이때 메인 페이지가 보일 때즉, 렌더링될 때 방식에는 4가지가 있다.SSR (Server-Side Rendering)CSR(Client-Side Rendering)SSG (Static Site Generation)ISR (Incremental Static Regeneration)단어는 알고 있었지만, 분명한 개념과 차이를 설명하라고 하면 버벅이기 때문에 공부하면서 다시 정리해봤다. SSR (Server-Side Rendering)SSR은 서버에서 HTML을 렌더링해서 클라이언트에 전달하는 방식이다.사용자가 웹사이트에 요청을 보내면 서버가 페이지의 HTML을 만들어서 브라우저로 전달.. 2025. 6. 14.
Vue / React / Angular 🛜 프론트엔드 프레임워크•라이브러리로, 요즘 많이 사용되고 있는데나도 개발을 하면서 정확히 모르는 부분이 있는데 공부하면서 정리를 해보았다. Vue진입 장벽이 낮고 학습하기 쉬운 프레임워크로 유명하다. MVVM (Model-View-ViewModel) 패턴 기반이다. 장점1) 간결하고 직관적이다. HTML, CSS, JavaScript만 알면 빠르게 시작 가능2) 양방향 데이터 바인딩이다. v-model을 사용해서 데이터 연결3) 컴포넌트 기반 개발이다. 재사용 가능한 컴포넌트 단위로 UI를 구성 가능4) Vue Router나 Vuex 등이 잘 갖춰져 있다.단점1) 규모가 큰 프로젝트에서는 코드 관리나 아키텍쳐가 다소 난이도가 있다.2) React는 Facebook에서, Angular는 Google에서 만든.. 2025. 6. 13.
canvas canvas란 무엇인가?는 HTML5에서 도입된 그래픽 요소이다. 브라우저 화면에 픽셀 기반의 그래픽을 그릴 수 있게 만들어진 "캔버스(도화지)"이다. 화가가 캔버스에 그림을 그리듯이, 브라우저 안에서 Javascript 코드로 그림을 그릴 수 있도록 만들어주는 요소이다. HTML 코드 안에서 태그를 선언JavaScript를 통해 에 그리기 컨텍스트(CanvasRenderingContext2D 혹은 WebGL)를 연결선, 도형, 텍스트, 이미지 등을 픽셀 단위로 직접 그리기 canvas는 왜 사용하는가?자유롭게 2D 또는 3D 그래픽을 표현할 수 있다.• 게임 그래픽 (예: 2D 게임, 미니맵)• 데이터 시각화 (차트, 그래프)• 이미지 편집 도구• 애니메이션 효과• 시뮬레이션 (예: 물리 엔진)고성.. 2025. 5. 31.
728x90

티스토리툴바