Playwright

E2E 테스트사용자 입장에서 사용자가 사용하는 상황을 가정하고 테스트하는 방식이다.사용자가 서비스를 쓰는 흐름을 처음부터 끝까지 그대로 따라가며 확인하는 테스트이다. E2E 테스트 자동화 도구 필요성 Playwright: MS에서 만든 End To End 테스트 자동화 도구 1. 다양한 브라우저/언어를 지원한다. 또한 모바일 브라우저도 지원한다.2. 네트위크 트래픽을 모니터링하고 수정하는 API를 제공하여 API 기반 테스트 시나리오가 가능하다.3. 자동 대기 매커니즘이 내장되어 있어 테스트 시점에서 DOM 요소가 준비되지 않아 실패하는 문제를 해결한다.4. 병렬 테스트 성능이 우수해 대규모 프로젝트에서 시간 절약 가능하다. 테스트 방법은 아래와 같다. 왜 Playwright인가? 1️⃣ 테스트 실행 구..

• format_list_bulleted ☀️Front-End
• · 2026. 2. 2.
• textsms

[React] Hook

Hook함수 컴포넌트에서 상태(state)나 생명주기(lifecycle) 같은 기능을 쓸 수 있게 해주는 함수다. Hook이 추가된 이유컴포넌트 사이에서 상태 로직을 재사용하기 어렵다. 👉 상태 로직을 “기능 단위”로 분리하기가 힘들었다.복잡한 컴포넌트들은 이해하기 어렵다. 👉 상태 로직과 사이드 이펙트가 생명주기 메서드별로 흩어져 서로 관련 없는 코드들이 하나의 메서드에 섞이기 쉬웠다.사람과 기계를 혼동시킨다. 👉 JavaScript의 this 동작 방식과 이벤트 핸들러 바인딩으로 인해 이해가 어려웠다. 1. 상태(State) 관리 훅: 컴포넌트가 기억해야 할 값을 다루는 훅useState 컴포넌트가 기억해야 하는 값을 저장하고, 그 값을 바꾸면 리렌더링이 발생한다. 2. 사이드 이펙트(Effe..

• format_list_bulleted ☀️Front-End/🌌React
• · 2026. 1. 21.
• textsms

[React] 애플리케이션 구조와 렌더링 전략: SPA, CSR, SSR, SSG

React ➡️ 웹 어플리케이션React Native ➡️크로스 플랫폼이 가능한 모바일 어플리케이션React + Electron ➡️ 데스크탑 어플리케이션 SPA: 페이지 새로고침 없이 화면을 전환하는 애플리케이션 구조 처음에 한 번만 HTML을 로드하고, 이후 화면 전환은 새로고침 없이 자바스크립트로 처리하는 웹 애플리케이션 방식이다. MPA 방식(기존)은 메뉴 클릭 ➡️ 서버에 요청 ➡️ 새 HTML 페이지 전체를 다시 받음 ➡️ 화면이 깜박거림 발생SPA 방식은 메뉴 클릭 ➡️ 서버에 데이터만 요청 ➡️ 자바스크립트가 화면 일부만 변경 ➡️ 페이지 새로고침 ❌ 1️⃣ index.html 하나로 시작해서 화면 전환은 같은 페이지 안에서 이루어진다. 2️⃣ 라우팅을 브라우저에서 처리한다. (자..

• format_list_bulleted ☀️Front-End/🌌React
• · 2026. 1. 13.
• textsms

[브라우저] 렌더링 엔진

1. 렌더링 차단은 언제 발생렌더링 차단은 브라우저가 HTML을 파싱하면서 화면을 그리는 데 필요한 리소스를 아직 못 받은 경우에 발생합니다. 대표적으로 CSS는 렌더링 차단 리소스라서, CSSOM이 완성되기 전에는 화면을 그리지 않으려 하고, 기본 태그는 다운로드·실행 동안 HTML 파싱 자체를 멈춥니다. 그래서 CSS는 head에 두고, JS는 defer나 body 하단에 두어 차단 시간을 줄입니다. 2. 자바스크립트가 렌더링에 미치는 영향1) DOM 조작레이아웃과 페인트 단계를 반복적으로 실행하도록 유도하여 성능에 영향 미칠 수 있음reflow - 레이아웃 단계에서 요소 크기, 위치 등이 변경될 때 전체 레이아웃을 다시 계산repaint - 가시성이 변경되는 순간/ reflow가 실행된 순간 뒤에..

• format_list_bulleted ☀️Front-End/📕HTML
• · 2026. 1. 7.
• textsms

[JS] Callback, Promise, Async/await

비동기란?현재 실행중인 작업과는 별도로 다른 작업을 수행하는 것Callback이란?비동기 작업이 완료되면 호출되는 함수비동기 함수의 매개변수로 함수 객체를 넘기는 기법Promise란?자바스크립트에서 비동기 작업(setTimeout, API 요청)을 다루기 위한 객체pending(대기중(작업중))fulfilled(성공)rejected(실패)const p = new Promise((resolve, reject) => { setTimeout(() => { resolve("성공!"); }, 1000);}).then(value => { console.log(value);}).catch(err => { console.error(err);}).finally(() => { console.log("무조건 ..

• format_list_bulleted ☀️Front-End/📗JavaScript
• · 2026. 1. 7.
• textsms

[JS] 쿠키/ 세션/ JWT / Access Token, Refresh Token 인증 방식

1) 쿠키 인증 방식브라우저에 쿠키를 저장하고, 요청마다 그 쿠키를 서버로 자동 전송해서 인증하는 방식입니다.1. 로그인 성공2. 서버가 쿠키를 내려줌3. 이후 요청마다 브라우저가 자동으로 쿠키를 포함4. 서버가 쿠키 값을 기준으로 사용자 인증브라우저가 자동 전송HttpOnly, Secure, SameSite로 보안 제어 가능CSRF 방어가 필요👉 쿠키는 “전송 수단”이지 인증 로직 그 자체는 아님 2) 세션 인증 방식사용자 인증 상태를 서버가 세션으로 저장하고 클라이언트는 세션 ID만 쿠키로 들고 있는 방식입니다.1. 로그인 성공2. 서버가 세션 생성3. 세션 ID를 쿠키로 내려줌4. 요청 시 쿠키의 세션 ID로 서버가 사용자 조회인증 정보는 서버에만 존재보안에 유리서버 자원 사용 / 확장 시 세션 ..

• format_list_bulleted ☀️Front-End/📗JavaScript
• · 2026. 1. 6.
• textsms