범데이의 개발노트 📄

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 비활성화 (개발자 도구 사용 필요..

1. 문제 상황 만약 jQuery를 사용하여 동적으로 element를 추가한 후에 $(document).ready() 이벤트가 작동하지 않는다면, 이는 이벤트가 DOM에 새로운 요소가 추가되기 전에 바인딩 되었기 때문일 수 있다. 이를 쉽게 설명하기 위해 예시를 들어보겠다. 아래는 일반적으로 jQuery에서 on() 메서드로 이벤트 핸들러를 연결하는 코드이다. $(document).ready(function() { // 이벤트 핸들러를 특정 요소에 연결한다. $('.itemCheckBox').on('click', function() { // 이벤트 처리 코드 // ... }); }); 이렇게 이벤트 핸들러를 연결하고 나면, jQuery를 사용하여 나중에 동적으로 추가된 .itemCheckBox 요소에 대..

1. 개요 AJAX (Asynchronous JavaScript and XML) 또는 SPA(Single Page Application) 프레임워크를 사용할지 여부는 다양한 요소와 웹사이트 개발 프로젝트의 구체적인 요구사항에 따라 결정된다. 오늘 포스팅에서는 이 두 가지 옵션을 살펴보려고 한다. 2. AJAX AJAX는 전체 페이지를 다시 로드하지 않고 웹 페이지의 일부분을 업데이트할 수 있는 기술이다. 브라우저와 서버 간 비동기 통신을 가능하게 하여 백그라운드에서 데이터를 가져와 콘텐츠를 동적으로 업데이트할 수 있다. AJAX는 전체 페이지를 새로고침하지 않고도 자주 업데이트해야 하는 웹사이트의 특정 기능이나 섹션에 유용하다. 이는 전통적인 다중 페이지 웹사이트에서 일반적으로 사용된다. AJAX의 장점..