둥지

CSS 중앙 정렬은 최근 들어 상당히 쉬워졌음에도 불구하고 어려운 것 중 하나입니다. web.dev에 소개된 탄력성 고리(The Resilience Ringer)라는 5가지 테스트 요소가 있습니다.1. Squished: 중앙 정렬은 너비 변경을 처리할 수 있어야 합니다.2. Squashed: 중앙 정렬은 높이 변경을 처리할 수 있어야 합니다.3. Duplicate: 중앙 정렬은 항목 수에 따라 동적이어야 합니다.4. Edit: 중앙 정렬은 콘텐츠의 길이와 언어에 따라 동적이어야 합니다.5. Flow: 중앙 정렬은 문서 방향 및 쓰기 모드에 독립적이어야 합니다.좋은 중앙 정렬은 위 요소를 모두 만족하는 경우가 탄력적이며, 안정적인 중앙 정렬이라 할 수 있다고 소개되었습니다. 1. 컨텐츠 중앙 정렬 (Con..

HTTPS란 무엇일까?보안은 매우 중요한 요소입니다.이러한 보안을 강화하기 위한 핵심 기술로 HTTPS가 사용되고 있습니다.HTTPS는 " Hypertext transfer protocol secure"의 약자로서 데이터를 암호화하여 전송하는 프로토콜입니다.HTTPS는 SSL/TLS 프로토콜을 사용해 데이터를 암호화함으로써 무결성과 기밀성을 보장하게 됩니다.이러한 특징 때문에 중간자 공격으로부터 보호되기 때문에 대부분의 웹사이트에서 필수적으로 사용되고 있습니다. 왜 로컬에서 HTTPS를 사용해야할까?대부분 로컬에서 HTTPS를 사용할 필요는 없습니다. 하지만 로컬에서 HTTPS를 사용할경우 아래와 같은 이점이 있습니다.- 실제 배포 환경과 유사한 조건에서 개발 및 테스트- 혼합 콘텐츠를 로컬에서 확인 가..

소스 맵이란?자바스크립트는 배포용으로 빌드할 경우 성능을 최적화하기 위해서 원본 파일을 압축하거나 번들링하게 됩니다.이처럼 압축되거나 번들링된 결과물과 원본 파일간의 관계를 기록한 파일을 소스 맵(Source Map)이라고 합니다.소스 맵은 어떤 구성을 가지고 있을까?소스 맵은 JSON 형식으로 작성되며 아래와 같은 요소를 포함하게 됩니다.version : 소스 맵의 기반이 되는 버전 번호file : 변환된 소스 코드의 파일명sources : 원본 소스 코드의 경로sourcesContent : 원본 소스 코드의 내용names : 변환된 소스 코드에서 사용된 식별자의 이름mappings: 원본 소스 코드와 변환된 코드 간의 매핑 정보소스 맵은 언제 필요할까?과연 소스 맵은 언제 필요할까요?소스 맵은 성능 ..