몽땅뚝딱 개발자

보호되어 있는 글입니다.

보호되어 있는 글입니다.

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

XSS, CSRF 등 프론트엔드 취약점을 악용한 공격이 증가하고 있다.콘텐츠 보안 정책(CSP), 쿠키 보안 설정, 정기적인 보안 감사 등의 보안 강화조치가 필요하다. 1. XSS (Cross-Site Scripting)악성 스크립트가 그대로 실행되어, 브라우저에서 악성 코드가 실행되는 공격. 방법:innerHTML을 사용하지 않고 textContent, innerText를 사용한다. 2. CSRF (Cross-Site Request Forgery)사용자가 로그인된 상태에서 악성 사이트가 자동으로 요청을 보내도록 유도한다. 방법:1) CSRF 토큰을 사용하여 각 요청에만 유효한 토큰을 만들어서 제출 시 검증한다.2) SameSite 쿠키 설정: 외부 사이트에서 쿠키를 보내지 못하게 한다.3) R..

보호되어 있는 글입니다.

웹 워커(Web Worker)개념브라우저에서 UI와 분리된 백그라운드 스레드로 무거운 계산을 맡겨서 UI가 멈추지 않게 한다.CPU를 많이 사용하는 계산, 이미지 처리, 암호화 등을 하고 싶을 때 사용한다.DOM에는 접근 불가하다.💡 사용 예시: 이미지 필터 처리, 대규모 정렬 등📄 Web Worker가 없을 때// 이 코드는 브라우저를 몇 초간 멈추게 한다.const bigArray = [...Array(1e8)].map(() => Math.random());const sorted = bigArray.sort(); 📄 Web Worker 사용// main.jsconst worker = new Worker('sortWorker.js');worker.postMessage(bigArray); // 데..

지원되지 않는 브라우저 기능을 흉내내기 위한 코드이다.특정 브라우저에서 지원되지 않는 메서드가 있는 경우 이를 흉내 낸 코드를 포함시켜 기능을 동작하게 한다.요즘은 Babel + core-js 같은 도구가 자동으로 Polyfill을 추가해준다. 📄 Promise를 지원하지 않는 브라우저의 경우if (!window.Promise) { // Polyfill 코드 삽입 window.Promise = myCustomPromiseImplementation;}

React19를 토이프로젝트에 도입하게되면서 공부한 주요 특징들!서버/클라이언트의 경계가 흐려지며 Next.js와의 결합구조가 강화되었다. 1. Actions비동기 상태 업데이트를 간편하게 관리하는 새로운 패턴이다.직접 setState하지 않아도 되며 로딩도 관리할 필요가 없어졌다! 👏🏻👏🏻 기본 형태는 const [state, submitAction, isPending] = useActionState(actionFn, initialState)이다.actionFn: (prevState: StateType, formData: FormData) => PromiseinitialState: state의 초기값 📄 기존 방식 (React 18 이전)import React, { useState } fro..

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) { ..