몽땅뚝딱 개발자

LCP (Largest Contentful Paint) "얼마나 빨리 콘텐츠를 보여줄 수 있냐"가장 큰 콘텐츠가 나타나기까지 걸린 시간으로 사용자가 페이지에 들어갔을 때 메인 컨텐츠라고 느낄만한 가장 큰 이미지나 텍스트 블록이 렌더링 완료되기까지의 시간이다. 좋은 기준은 2.5초 이내이다. 개선 방법이미지 lazy load폰트 preload서버 응답 시간 개선 (백엔드 속도 or SSR 등)CSS/JS 최적화 CLS (Cumulative Layout Shift) "보여주는 동안 화면이 안정적이냐"레이아웃이 갑자기 휙휙 움직이는 정도로 페이지 로딩 도중에 요소들이 예상치 못하게 움직이는 정도를 수치로 표현한다. 예를 들어, 버튼을 클릭하려는 순간, 배너가 늦게 로딩돼서 버튼이 아래로 밀리는 경우이다. 좋..

보호되어 있는 글입니다.

Module Pattern 정의하나의 모듈을 만들어서 내부의 변수나 함수를 외부에 노출할지 말지 선택하는 패턴이다.(=공개/비공개 멤버를 구분해서 관리할 수 있게 해주는 구조) 자바스크립트에서 캡슐화(encapsulation)를 위해 널리 쓰였던 디자인 패턴이다. ES6에서 import/export 문법이 생기기 전에도 변수나 함수가 외부에서 막 사용되지 않도록 정보를 숨기는 데 많이 사용됐다. ES6부터는 모듈 시스템이 내장되어있다. (모듈 패턴이 자바스크립트 언어 차원에서 지원되는 구조로 발전한 케이스) 모듈 패턴은 IIFE를 이용해서 구현되는 대표적인 패턴이다. 즉시 실행 함수(IIFE, Immediately Invoked Function Expression)는 자체적인 스코프를 만들어서 변수나 함..

Observer Pattern 패턴 정의옵저버 패턴 혹은 발행-구독(Pub/Sub) 패턴이라고도 불리는 이 디자인 패턴은 객체 간의 1:N 의존성을 정의해서, 어떤 객체의 상태가 변할 때 그에 의존하는 객체들에게 자동으로 알림이 가도록 설계된 패턴이다. Subject(Publisher): 상태를 가지고 있으며, 변경 사항이 생기면 옵저버(구독자)에게 알림.Observer(Subscriber): Subject를 구독하고 있으며, 상태 변화에 반응함.class Subject { constructor() { this.observers = []; } subscribe(observer) { this.observers.push(observer); } unsubscribe(observer) { ..

오랜만에 쓰는 회고? 일상? 같은 글. 작년 9월부터 올해 초까지 개인적인 일에 큰 이벤트에 건강 이슈까지 겹쳐(🥲) 하루 하루 많은 것들을 처리하고 공부하고 해결하는 바쁜 일상을 보냈다. 당연히 일도 같이 해야해서 정신이 너무나도 없었지만 거의 다 해결이 되었다!! 내 인생에 손에 꼽을 만한 이슈들이었지만 해결 과정이 나름 잘 흘러갔고 그 과정에서 많이 배웠다. 그리고 내 마인드가 바뀐 뒤로 아무리 바쁜 일을 만나도 마음 속에는 여유가 있다는게 가장 좋은 점이다. 가장 좋아하는 계절인 가을과 겨울을 소중한 사람들과 함께 시간을 보내며 사진도 많이 남기고 여행도 다니고 새로운 취미도 생겼다. 2024년 하반기는 큰 의미를 남긴 행복한 시간이었다. 삶이란 고통과 공존하며 때로는 무의미하게 느껴지는 것이다..

플럭스(Flux) 패턴 정의리액트 어플리케이션의 데이터 흐름을 관리하기 위한 디자인 패턴이다. 이 패턴은 옵저버 패턴을 약간 수정한 것으로, 한 객체의 상태 변경이 다른 모든 객체에 알림을 주고 이를 구독해서 확인하는 일련의 메커니즘을 의미한다.플럭스란, 애플리케이션에서 단방향 데이터 흐름을 관리하는 패턴으로 전통적인 MVC 패턴을 대체한다. "데이터를 어떻게 흘릴 것인가"에 대한 구조적 아이디어이다. 프레임워크나 라이브러리가 아니라 클라이언트 사이드 웹 애플리케이션의 상태 관리 복잡성을 해결하기 위한 새로운 종류의 아키텍처다.   데이터 흐름 플럭스의 데이터 흐름에는 액션, 디스패처, 스토어, 뷰가 있다.1) 액션: 데이터 흐름을 트리거하는 디스패처로 보내지는 자바스크립트 객체를 의미2) 디스패처: 스..