범데이의 개발노트 📄

CSS 우선순위를 이해했다고 해서 실전에서 모든 충돌을 해결할 수 있는 건 아니다.특히 수십~수백 개의 CSS 파일이 섞여 있는 레거시 프로젝트에서는 "어디서 온 스타일인지 찾는 것" 자체가 가장 큰 문제다. 이 포스팅에서는 복잡한 실무 환경에서 CSS 우선순위 문제를 관리하고 해결하는 실제 전략만 모아 정리했다.(혹시 CSS 우선순위에 대한 기본 개념이 부족하다면, 이 포스팅을 먼저 보는 것을 추천한다.) 1. 어디서 적용되는 스타일인지 빠르게 찾는 방법실무에서 가장 중요한 건 출처 추적이다. 1) Chrome DevTools "Computed" 패널 활용 요소를 검사하고 "Computed" 탭을 보면:현재 적용된 스타일어떤 파일 / 몇 번째 줄에서 왔는지우선순위 승패 여부까지 모두 확인 가능하다. 2..

HTML에서 어떤 스타일이 최종적으로 적용되는지 헷갈린다면,이 포스팅 하나로 모두 정리할 수 있다. 1. CSS 우선순위란?HTML 요소에 여러 CSS 규칙이 동시에 적용될 경우, 브라우저는 특정 규칙을 선택해 적용한다.이때 어떤 규칙을 우선할지 결정하는 기준이 바로 우선순위(Specificity & Cascade) 이다. CSS 우선순위는 다음 4가지 요소로 결정된다.중요도(!important)명시도 (Specificity)소스(origin)와 선언 위치선언된 순서 (Order) 각 요소별로 자세히 정리해보자. 2. 우선순위 1순위: !important동일 속성끼리 충돌할 때, !important는 모든 요소보다 우선한다..box { color: red !important;}단, !importan..

1. 모듈 번들러의 개념모듈 번들러(Module Bundler)는 여러 개의 자바스크립트, CSS, 이미지 파일 등을 하나 또는 여러 개의 번들 파일로 묶어주는 도구이다.브라우저는 원래 여러 개의 파일을 각각 요청해야 했기 때문에 요청 수가 늘어나면 성능이 저하되고, 파일 간 의존성 관리가 어려워지는 문제가 있었다. 이 문제를 해결하기 위해 등장한 것이 모듈 번들러이며, 대표적인 예로 Webpack이 있다.모듈 번들러를 사용하면 여러 개의 소스 파일을 하나의 패키지로 묶어 네트워크 요청을 최소화하고, 코드 의존성을 체계적으로 관리할 수 있다. 2. Babel의 개념Babel은 최신 자바스크립트(ES6 이상) 문법을 구버전 브라우저에서도 동작하도록 변환해주는 트랜스파일러(Transpiler)이다.즉, 새..

웹 페이지를 개발하다 보면 페이지가 로드될 때 잠깐 스타일이 적용되지 않은 채 기본 브라우저 스타일로 보였다가 이후 CSS가 적용되면서 확 달라지는 경험을 느껴본 적이 있을 것이다. 이를 흔히 FOUC(Flash of Unstyled Content, 스타일 미적용 콘텐츠 깜빡임) 이라고 부른다. 왜 FOUC가 발생할까?FOUC는 주로 CSS가 늦게 적용되면서 발생한다.브라우저는 HTML을 먼저 파싱하고 DOM을 만든다.CSS 파일은 외부 리소스로, 네트워크를 통해 추가로 다운로드해야 한다.CSS가 아직 로드되지 않았는데도 브라우저는 일단 기본 스타일로 화면을 그린다.CSS가 로드되면 스타일이 다시 적용되면서 레이아웃과 디자인이 "훅" 바뀐다.즉, 렌더링과 CSS 로딩 시점이 맞지 않아서 발생하는 문제이..

웹 애플리케이션을 개발할 때 화면을 어디서 렌더링할 것인지는 중요한 설계 요소이다. 서버에서 HTML을 생성해 클라이언트로 전달하는 SSR(Server Side Rendering) 방식과,클라이언트에서 데이터를 받아 화면을 구성하는 CSR(Client Side Rendering) 방식은 서로 다른 특징과 장단점을 가진다. 1. 렌더링 방식의 차이서버 사이드 렌더링(SSR) 은 사용자의 요청이 있을 때, 서버가 HTML 페이지를 완성해서 클라이언트로 전달하는 방식이다. 서버에서 템플릿과 데이터를 조합하여 렌더링이 완료된 HTML을 보내므로, 브라우저는 이를 그대로 표시하면 된다. 클라이언트 사이드 렌더링(CSR) 은 서버가 초기 요청에 대해 최소한의 HTML과 JavaScript 파일만 전송하고, 이..

1. Metadata란?Metadata는 웹페이지의 콘텐츠에 대한 정보를 담는 데이터이다.HTML 문서의 태그 내부에 작성되며, 사용자가 직접 보지는 않지만브라우저, 검색엔진, 소셜미디어가 페이지를 해석하는 데 사용하는 정보다. 대표적인 메타태그 예시나의 블로그 주요 특성사람보다 시스템을 위한 데이터이다.페이지의 주제, 설명, 이미지 등을 알려준다.검색 결과, SNS 공유 카드, 브라우저 탭 제목 등에 사용된다. 2. SEO란?SEO(Search Engine Optimization) 는 검색 엔진 최적화라는 뜻이다.검색엔진이 내 웹사이트를 더 잘 이해하고, 더 높은 위치에 노출되도록 돕는 전략이다. 구성 요소title: 페이지 제목. 검색 결과의 제목으로 사용됨meta description: 검색 결과..

이 포스팅에서는 프론트엔드 개발자라면 참고할만한 중요한 팁 37가지를 잘 정리한 포스팅이 있어서, 영어 원문을 번역하여 가져오게 되었다.(원문 사이트: https://dev.to/_ndeyefatoudiop/37-tips-from-a-senior-frontend-developer-251b)  프론트엔드 개발을 하는데에 있어서 좋은 양분이 되는 내용이 될 것이다.1. 기본을 마스터하자흔들리는 땅 위에 지어진 집은 작은 문제에도 무너진다.마찬가지로, 강력한 기본 사항이 없는 경우JavaScript 프레임워크로 어려움을 겪을 것이다.익숙하지 않은 첫 번째 문제에 막히게 될 것이다.일부 문제 사이의 공통 주제를 파악하지 못할 것이다.따라서 프론트엔드 개발자로서 발전하고 싶다면 먼저 HTML, CSS, JavaS..

이 포스팅은 dev.to사이트를 둘러보다가, 참고하면 좋을만한 CSS관련 포스팅이 있어서 영어 원문에서 번역하여 작성하였다. (원본 포스팅) 대부분의 웹 개발자가 하는 일반적인 실수들과 이를 식별하고 피하는 것이 더 나은 웹 개발과 유용한 코드 작성을 도울 수 있는 방법에 대한 내용이다. 1. Shorthand 사용 CSS의 Shorthand는 여러 속성의 값을 동시에 설정할 수 있는 CSS 속성 그룹이다. 이 값들은 공백으로 구분된다. 예를 들어, border 속성은 margin-top, margin-right, margin-left 및 margin-bottom 속성을 대표하는 Shorthand이다. // Shorthand를 사용하지 않는 경우 .example { margin-top: 10px; mar..

JavasScript에서는 특히 jQuery를 사용하는 맥락에서 변수 이름 앞에 $를 붙이는 관례가 일반적이다. 엄격한 규칙은 아니지만 변수가 jQuery객체를 보유하고 있음을 나타내는 것이 관례가 되었다. 이 규칙을 사용하는 몇 가지 이유는 다음과 같다. 가독성: 변수가 jQuery 객체라는 신호를 빠르게 보내 코드를 더 읽기 쉽게 만든다. 이는 대규모 코드베이스나 코드를 빠르게 스캔할 때 특히 유용하다. 충돌 방지: JavaScript에서는 변수에 거의 모든 이름을 지정할 수 있다. jQuery와 함께 다른 라이브러리나 프레임워크를 사용하는 경우 이 규칙은 이름 충돌을 방지하는 데 도움이 된다. 자체 문서화 코드: 자체 문서화의 한 형태로 사용된다. 다른 사람(또는 자신)이 코드를 읽을 때 $ 접두사..

종종 웹 프로젝트를 진행하면서, 새로운 JS나 CSS 파일을 서버에 반영했음에도 불구하고 브라우저에서 이전 파일이 여전히 사용되는 문제가 발생된다. 이러한 문제가 발생하는 주된 이유는 브라우저가 이전에 다운로드한 파일을 캐싱하여 재사용하기 때문이다. 캐시는 성능 향상을 위해 사용되지만, 개발 중에는 새로운 코드나 리소스를 반영하기 위해 캐시를 무효화하는 것이 필요할 수 있다. 이러한 문제를 해결하기 위해 몇 가지 효과적인 해결 방법들을 소개한다. 1. 새로고침(F5) or 강력 새로고침(Ctrl + F5): 웹 페이지를 갱신하여 브라우저가 최신 파일을 가져오도록 하는 간단하면서도 효과적인 방법이다. 사용자 경험이나 앱 환경에서도 유용한 방법 중 하나이다. 2. Cache 비활성화 (개발자 도구 사용 필요..