728x90
1️⃣ 웹사이트에서 assets/resources를 최적화하는 방법
웹사이트 성능을 향상시키기 위해 다음과 같은 자원 최적화 방법
- 이미지 최적화: WebP, AVIF와 같은 최신 포맷 사용, lazy loading 적용, SVG 활용
- CSS/JS Minification: 주석과 공백을 제거하여 파일 크기 최소화
- Code Splitting & Tree Shaking: 필요한 코드만 로딩되도록 하여 초기 로딩 속도 향상
- 캐싱 전략 설정: 적절한 cache-control 헤더를 통해 정적 파일을 브라우저에 캐시
- CDN 활용: 전 세계적으로 분산된 서버에서 자산을 제공하여 로딩 속도 향상
2️⃣ 페이지 로드 시간을 줄이는 세 가지 방법
- Lazy Loading: 필요할 때만 이미지나 리소스를 로드
- Critical CSS Inlining: 첫 번째 렌더에 필요한 CSS만 인라인으로 포함시켜 렌더링 지연 방지
- Resource Preloading / Preconnect: 필요한 자원을 미리 연결하여 DNS lookup, handshake를 단축
3️⃣ Flash of Unstyled Content (FOUC) 설명 및 방지 방법
- FOUC는 페이지가 렌더링되기 전에 스타일이 적용되지 않은 상태로 보이는 현상
- 원인: CSS가 비동기적으로 로드되거나, 웹 폰트 적용이 느릴 때 발생
- 방지 방법:
- <link rel="stylesheet">는 상항 <head>에 배치
- 웹 폰트 로딩 시 font-display: swap 사용
- JS 프레임워크 사용 시, SSR(Server Side Rendering)을 활용하여 초기 HTML에 스타일을 포함
4️⃣ ARIA와 Screen Reader 및 접근성 있는 웹사이트 구성 방법
- ARIA (Accessible Rich Internet Applications)는 스크린 리더 사용자들이 복잡한 UI를 이해할 수 있도록 도와주는 HTML 속성
- Screen Reader는 시각 장애인을 위한 보조기기로 웹 페이지 텍스트를 음성으로 읽어줌
- 접근성 향상을 위한 웹사이트 구현 방법:
- 적절한 시맨틱 태그 사용 (예-<nav>, <main>, <button>
- 키보드 내비게이션 가능하도록 설계
- 대비 충분한 색상과 명확한 포커스 상태 표시
- 이미지에 alt 속성 추가
5️⃣ CSS 애니메이션 vs JavaScript 애니메이션
| 항목 | CSS 애니메이션 | JavaScript 애니메이션 |
| 성능 | GPU 가속에 유리 | 복잡한 연산 시 성능 저하 |
| 제어 | 시작/종료 시점만 제어 | 중간 상태, 루프, 물리 기반 제어 용이 |
| 사용 용도 | 간단한 트랜지션, 호버 효과 | 스크롤 연동, 드래그, 정교한 타이밍 |
6️⃣ Doctype의 역할
- <!DOCTYPE html>은 브라우저에 HTML5 문서임을 알려주는 선언
- 이는 브라우저가 **표준 모드(standards mode)**로 렌더링하게 하여 예상된 CSS/JS 동작을 보장
7️⃣ 표준모드 vs 쿽스모드
- 표준모드: W3C와 WHATWG의 웹 표준을 기반으로 정확하게 렌더링
- 쿽스모드(Quirks Mode): 과거 브라우저의 버그나 호환성 문제를 감안한 모드로, 예측 불가능한 렌더링 결과를 낼 수 있음
- DOCTYPE 선언 유무로 브라우저가 결정
8️⃣ <script>, <script async>, <script defer>의 차이
| 속성 | 설명 | 실행 시점 |
| <script> | HTML 파싱 중 멈추고 실행 | 즉시 |
| <script async> | 병렬 다운로드 후 즉시 실행 | 파싱 도중 실행 |
| <script defer> | 병렬 다운로드 후 HTML 파싱 완료 후 실행 | DOMContentLoaded 전에 실행 |
9️⃣ Progressive Rendering이란?
- 사용자가 전체 페이지가 로드되기 전이라도 콘텐츠 일부를 볼 수 있도록 하는 기법
- 예: lazy loading, skeleton screen, SSR
🔟 BFC (Block Formatting Context)
- BFC는 요소 박스의 배치 기준이 되는 독립적인 렌더링 영역
- BFC를 생성하는 조건:
- float, overflow: hidden|auto, display: flow-root 등
- 사용 목적:
- margin, collapse 방지
- 레이아웃 독립성 유지
- float 요소 감싸기
1️⃣1️⃣ 클리어링(Clearing) 기술과 사용 예시
- float 요소로 인해 부모 요소의 높이가 무시될 때 사용
- 방법들:
- clearfix 클래스 (::after에 content: ""; display: table; clear: both;)
- 부모에 overflow: hidden 또는 auto 설정
- display: flow-root 사용 (현대적인 방법)
1️⃣2️⃣ Image Replacement 기술과 선호하는 방법
- 이미지 대신 텍스트 콘텐츠를 숨기고 이미지로 대체
- 접근성 및 SEO를 위해 시멘틱 HTML 유지 필수
- 선호 기술:
- text-indent: -9999px (구식이지만 널리 사용)
- visibility: hidden과 ARIA를 함께 사용
- background-image와 aria-label 조합
1️⃣3️⃣ inline과 inline-block의 차이
| 항목 | inline | inline-block |
| 박스 크기 지정 | 불가능 (width/height 무시) | 가능 |
| 줄 바꿈 | 안됨 | 안됨 |
| 마진/패딩 | 좌우만 반영 | 상하좌우 모두 반영 |
1️⃣4️⃣ 익명 함수(anonymous functions)의 사용처
- 이름 없이 정의되는 함수로, 일회성 사용이나 콜백 함수에서 주로 사용
- 사용 예:
- setTimeout(function() { ... }, 1000);
- .map((item) => item * 2);
1️⃣5️⃣ 호스트 객체 vs 네이티브 객체
| 객체 유형 | 설명 | 예시 |
| 네이티브 객체 | ECMAScript에 정의된 표준 객체 | Array, Object, Function |
| 호스트 객체 | 실행 환경(브라우저, Node.js 등)이 제공 | window, document, console |
1️⃣6️⃣ == vs ===의 차이
| 연산자 | 의미 | 타입 비교 여부 | 예시 결과 |
| == | 느슨한 동등 | 아니오 | `'5' == 5 → true` |
| === | 엄격한 동등 | 예 | `'5' === 5 → false` |
다들 도움되셔서 취뽀하셨으면 좋겠습니다 💪🏻
이상 스텔라였습니다. ✍️
728x90
'TECH' 카테고리의 다른 글
| 접근성과 인클루시브 디자인 👩🏻🎨 (2) | 2025.07.07 |
|---|---|
| 이벤트 전파 🖐🏻 (4) | 2025.07.04 |
| 이벤트 트래킹과 헤비포인트 🎭 (7) | 2025.07.02 |
| 도메인이 다를 때 Cookie 인식 방법 🍪 (13) | 2025.07.01 |
| 비동기와 observing ⋲ (2) | 2025.06.30 |
