범데이의 개발노트 📄

이 포스팅은 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의 장점..

내 웹사이트를 개발하고 빌드하는 도중, 아래와 같은 경고가 뜨기 시작했다. 이에대해 원인을 찾아보니, Visual Studio의 Web Compliter extension인 browserslist* 를 사용하는데, 이는 caniuse-lite라는 정적인 데이터(브라우저 사용 통계나 버전 정보)를 사용한다. 그래서 이 데이터의 기한이 오래되었을때에 업데이트 하라고 경고 문구가 뜨는 것이다. (*browserlist란?: https://bumday.tistory.com/169 포스팅 참고) 해결방법은 위에서 안내된 대로 아래의 명령어를 입력하면 된다. (*참고: npx는 npm 패키지를 시스템에 저장하지 않고 직접 실행하는 명령어이다) npx browserslist@latest --update-db 그러면 ..

1. 개요 언제부턴가 브라우저스리스트(browserslist)라는 개념이 자주 눈에 띄더니, 이제는 프론트엔드 개발 환경에서 뺄 수 없는 도구가 되었다. 아마도 바벨(Babel)이라는 프론트엔트 계의 걸출한 스타 프로젝트에서 도입했기 때문일 것이라는 관측이 있다. 2.Browserslist란? browserslist는 브라우저를 선택하는 옵션 기능만 따로 뽑아 놓은 도구라고 생각하면 된다. 어떤 프로그램이 브라우저에 대응해 내부에서 처리해야 할 작업이 다르다면 옵션으로 지원 브라우저 환경을 입력받을 수 있듯이, 프론트엔드는 그런 옵션이나 설정이 필요한 경우가 많다. 반복해서 만들게 되는 그 설정 기능만 따로 떼서 브라우저 환경을 쉽게 정의할 수 있고 또 쉽게 코드에서 사용할 수 있도록 만든 도구이다. 그..

1. 상태(state)란? 상태는 한국어로 번역하면 잘 와닿지 않을 것이다. 대신 '데이터' 라는 말로 이해하기 쉬울 것이다. 객체 지향 프로그래밍에서는 프로그램의 기본 단위가 객체이고, 객체 간의 메시지 상호작용을 통해 프로그램을 구현하게 된다. 이때 객체가 가지고 있는 데이터 또한 상태라고 할 수 있다. (예를 들어 Employee 클래스를 만든다고 가정하면 Employee의 상태는 name과 age가 될 수 있다.) 상태에서 중요한 부분은 바로 값이 변한다는 것이다. 이 값이 변하는데 예측된 값으로 변해야 의도한 대로 동작을 수행할 수 있으니, 예측 범위 내에서 변하게 하는 것이 중요하다. 그래서 그 예측된 범위를 만들기 위해서, 여러 가지 제약조건이나 구조적인 설계를 고민할 수 있을 것이다. 또한..

1. 개요 때는 웹사이트를 개발할 때였다. 데스크탑 환경에서는 잘 보이던 글씨가, 모바일 환경에서는 너무 크게 보이는 문제가 있었다. 이를 해결하기 위해 font-size의 단위를 vw로 바꾸어주었더니, 글씨가 다음과 같이 보여지게 되었다. 당연하게도, 고정값을 지정하는 em단위를 상대적 크기 단위인 vw로 지정하니, 위와 같이 작아진 mobile해상도에서는 글씨가 알맞게 작게 보여지게 되었다. 그렇다면 오늘은 크기를 지정하는 단위 중 vw, wh가 무엇인지 알아보자. 2. vw와 vh vw = viewport width vh = viewport height viewport란 화면 Display상의 표시 영역을 뜻한다. 즉, vw와 vh는 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환한다. 100..

반응형 웹디자인이 대두되면서 점점 많은 웹사이트들이 em과 rem라고 불리는 CSS단위를 이용해서 스타일링이 되고 있다. 이번 포스팅에서는 상대 단위가 뭔지, em과 rem단위가 실제로 브라우저에서 어떻게 동작하는지 정확히 알고 좀 더 적재적소에 사용하는 방법에 대해 알아보고자 한다. 1. 상대 단위란? 상대(relative)단위란 고정되지 않고 어떤 기준에 따라 유동적으로 바뀔 수 있는 길이를 나타내는 단위이다. 본 포스팅에서 다룰 em, rem을 포함해 %, vw, vh등이 대표적인 CSS의 상대 단위이다. 반면 절대(absolute)단위는 어떤 상황에서든 항상 고정된 길이를 나타내는 단위이다. 대표적으로 예전부터 현재까지 많이 사용되는 px와 pt를 들 수 있고, cm나 in와 같은 실생활에서 많이..