본문 바로가기
728x90

TECH49

비동기와 observing ⋲ 비동기 (Asynchronouse)어떤 작업이 즉시 완료되지 않고, 나중에 완료될 수 있도록 예약해 두는 방식을 말한다. 기다리지 않고 다음 코드를 계속 실행할 수 있어 병렬적 처리나 응답 지연 처리에 적합하다.실행 흐름을 블로킹(어떤 작업이 완료될 때까지 해당 작업의 실행 흐름을 멈추고 대기하는 것)하지 않는다.Promise, async/await, 콜백(callback) 등이 대표적인 비동기 처리 방식주로 "작업의 완료 시점"에 관심이 있다. 옵저빙 (Observing)값이나 상태의 변화를 관찰(watch)하고, 그 변화가 발생할 때마다 반응하는 것을 말한다.비동기와 달리, "이벤트의 스트림(흐름)"을 지속적으로 감시하는 데 초점을 두고 있다.시간이 흐르면서 발생하는 여러 개의 이벤트(스트림)를 감시.. 2025. 6. 30.
BEM 방법론 📚 CSS 클래스 작명을 체계화하여 코드의 재사용성과 유지보수성을 높이는 방법론을 말한다.BEM은 Block, Element, Modifier의 약자로, 각 구성 요소를 명확히 구분하여 대규모 프론트엔드 프로젝트에서 혼란 없이 스타일을 적용할 수 있도록 도와준다. BEM의 구성1️⃣ Block (블록)독립적인 UI 구성 요소를 말한다.예: button, form, nav, modal 등... 2️⃣ Element (엘리먼트)블록의 구성 요소블록 없이 독립적으로 존재할 수 없다.__로 구분한다.제목내용 3️⃣ Modifier (수정자)블록이나 엘리먼트의 변형된 상태나 스타일을 정의한다.--로 구분...큰 제목 전체적인 BEM 스타일 예시 공지사항 중요한 내용을 확인하세요. 확인.card { pad.. 2025. 6. 27.
Reflow와 Repaint 🎨 Reflow와 Repaint는 웹 브라우저의 렌더링 엔진이 HTML, CSS 등의 내용을 시각적으로 화면에 표시하는 과정에서 중요한 역할을 하는 두 가지 개념이다.특히 성능 최적화와 관련해 매우 중요한 요소 중 하나다. Reflow (Layout 또는 Relayout)Reflow는 문서의 레이아웃을 계산하고 요소의 위치와 크기를 결정하는 과정이다.DOM이나 CSS 스타일에 변화가 생겼을 때 브라우저는 요소들의 위치와 크기를 다시 계산해야 하는데 이 과정이 바로 Reflow다. 트리거되는 경우 (다음과 같은 변화에서 발생)DOM 요소 추가/제거요소의 크기나 위치 변경 (예: width, height, top, left, margin, padding, border, font-size 등)창 크기 조정 (re.. 2025. 6. 26.
딥링크 🔗 딥링크(Deep Link)는 사용자를 모바일 앱 내의 특정 위치로 직접 이동시키는 링크다.웹사이트의 하이퍼링크처럼 작동하지만, 일반적인 앱 실행이 아닌 특정 콘텐츠나 화면으로 이동시켜주는 것이 핵심이다. 일반 URL: https://new.com/article/123 => 웹사이트 열림딥링크: myapp://article/123 => 앱의 특정 화면으로 이동 딥링크의 종류에는 3가지가 있다. 1️⃣ URL Scheme 방식 (Custom URI Scheme)앱이 설치되어 있는 경우: URL이 앱에서 처리앱이 설치되어 있지 않으면 아무 반응이 없거나 오류예시: myapp://product/99 2️⃣ Universal Link (iOS) / App Link (Android)웹 URL을 사용하.. 2025. 6. 25.
728x90

티스토리툴바