전체 글

📌 E2E 테스트란?`E2E(End-to-End) 테스트`는 애플리케이션의 전체적인 흐름을 사용자 관점에서 테스트하는 방식입니다. 실제 사용자처럼 애플리케이션을 처음부터 끝까지 사용하면서 모든 기능이 올바르게 작동하는지 확인합니다.주요 특징실제 브라우저 환경에서 테스트 진행사용자 행동을 시뮬레이션버튼 클릭페이지 이동데이터 입력 등`Cypress`, `Playwright` 등의 도구 사용E2E 테스트의 장점사용자 관점의 테스트실제 사용자 경험과 동일한 방식으로 테스트사용자에게 영향을 미치는 오류를 조기 발견통합적 검증UI 상호작용API 호출화면 전환여러 구성 요소의 통합 동작 확인신뢰성 향상프로덕트 안정성 증가배포 후 발생할 수 있는 리스크 감소  📌 E2E 테스트 vs 유닛 테스트유닛 테스트의 한계개..

1. 타입 변환이란?자바스크립트의 타입 변환에는 두 가지가 있습니다:명시적 타입 변환 (타입 캐스팅)암묵적 타입 변환 (강제 타입 변환)  2. 암묵적 타입 변환2.1 문자열 변환// 숫자 -> 문자열1 + '2' // "12"// 불리언 -> 문자열true + '' // "true"// null -> 문자열null + '' // "null"// undefined -> 문자열undefined + '' // "undefined"// 객체 -> 문자열({}) + '' // "[object Object]"2.2 숫자 변환// 문자열 -> 숫자+'0' // 0+'1' // 1+'string' // NaN// 불리언 -> 숫자+true // 1+false // 0// null -> 숫자+null // 0// un..

1. 객체란?자바스크립트의 객체는 관련된 데이터와 함수의 집합입니다. 객체는 프로퍼티(속성)와 메서드로 구성됩니다.const person = { name: 'Lee', // 프로퍼티 age: 20, // 프로퍼티 sayHello() { // 메서드 console.log(`Hello, I'm ${this.name}`); }};  2. 객체 생성 방법2.1 객체 리터럴가장 일반적이고 간단한 방법입니다.const obj = { property1: 'value1', property2: 'value2'};2.2 Object 생성자 함수const obj = new Object();obj.property1 = 'value1';obj.proper..

기본 개념`useEffect`와 `useLayoutEffect`는 모두 컴포넌트가 렌더링된 후 특정 작업을 수행하기 위해 사용됩니다. 하지만 각각의 실행 시점과 목적이 다르기 때문에, 상황에 따라 적절한 Hook을 선택해야 합니다.  useEffect`useEffect`는 렌더링이 완료된 후 비동기적으로 실행됩니다. 즉, 화면이 사용자에게 실제로 표시된 이후에 실행됩니다.주요 특징비동기적 실행화면 표시 후 실행성능에 미치는 영향이 적음사용 사례useEffect(() => { // API 데이터 가져오기 fetchData().then(data => setData(data)); // 이벤트 리스너 등록 window.addEventListener('resize', handleResize); // 클린..

1. 호이스팅이란?`호이스팅(Hoisting)`은 자바스크립트에서 변수와 함수 선언이 코드의 최상단으로 "끌어올려지는" 것처럼 동작하는 현상을 말합니다. 이는 자바스크립트 엔진의 코드 실행 방식 때문에 발생합니다.  2. 인터프리터 언어인데 호이스팅이 가능한 이유자바스크립트는 `인터프리터 언어`로 알려져 있지만, 실제로는 코드 실행 전에 두 가지 주요 단계를 거칩니다:컴파일 단계 (Creation Phase)실행 단계 (Execution Phase)  3. 실행 과정 상세 분석3.1 컴파일 단계 (Creation Phase)이 단계에서는 다음과 같은 작업이 이루어집니다:변수 선언 처리`var`로 선언된 변수는 `undefined`로 초기화`let`과 `const`로 선언된 변수는 초기화하지 않음 (Tem..

리액트에서 `index`를 key로 사용하는 것은 권장되지 않는 이유는 배열의 요소들이 추가되거나 삭제될 때, 배열의 순서가 바뀌는 경우 문제가 발생할 수 있기 때문입니다.리액트에서 `key`를 통해 리스트에서 어떤 요소가 변경, 추가, 삭제됐는지를 추적합니다. 그러나 index를 key로 사용하면 배열의 순서가 변경될 때 리액트가 요소들을 잘못 인식할 수 있습니다. 예를 들어 배열에 새로운 요소가 중간에 추가되면 그 뒤에 있는 요소들의 인덱스가 모두 변경되게 된다. 리액트는 이를 새로운 요소로 인식해 불필요하게 재렌더링을 하거나, 요소의 상태를 잘못 처리할 수 있습니다.// 초기 상태의 할일 목록const todos = [ { text: '운동하기' }, // index: 0 { text: '공부하..

`디바운스(Debounce)`와 `쓰로틀(Throttle)`은 연속되는 이벤트나 함수의 호출을 제어하여 최적화하는 기법입니다.`디바운스(Debounce)`는 연속적으로 이벤트가 발생했을 때, 마지막 이벤트가 발생한 후 일정 시간이 지난 후에 이벤트 핸들러가 실행되는 방식입니다. 이를 통해 불필요하게 많은 이벤트 호출을 방지할 수 있습니다. 예를 들어, 검색창에 사용자가 키를 입력할 때마다 검색 요청을 보내면 부하가 지나치게 커지기 때문에, 사용자가 입력을 멈춘 후 일정 시간이 지나면 요청을 보내는 방식으로 디바운스를 적용할 수 있습니다. `쓰로틀(Throttle)`은 일정 시간 간격동안 발생한 이벤트 중 첫 번째 또는 마지막 이벤트만 처리하는 방식입니다. 즉, 이벤트가 계속해서 발생하더라도 설정된 시간 ..