dev_in 개발 블로그

리액트에서는 성능 최적화를 위해 여러 가지 방법을 사용할 수 있습니다. 이번 글에서는 몇 가지 예시를 들어보도록 하겠습니다. 메모이제이션 리액트의 memo를 사용하여 컴포넌트를 메모이제이션할 수 있습니다. 이는 컴포넌트의 props가 변경되지 않았을 때, 리렌더링을 방지하여 성능을 최적화합니다. 이는 특히 렌더링 비용이 큰 컴포넌트에서 유용합니다. 또한 useCallback과 useMemo를 활용할 수도 있습니다. useCallback은 함수를 메모이제이션하여 불필요한 함수 재생성을 방지하고, useMemo는 값의 재계산을 방지하여 성능을 최적화합니다. 이를 통해 자식 컴포넌트로 전달되는 함수나 값이 변경되지 않으면 리렌더링을 피할 수 있습니다. 마지막으로 코드 스플리팅을 활용해볼 수 있습니다. 코드 스..

States state는 컴포넌트 내부에서 관리되는 데이터입니다. state는 동적으로 변경될 수 있으며, 컴포넌트의 렌더링에 영향을 미칩니다. state를 변경하면 컴포넌트는 다시 렌더링되며, UI가 업데이트됩니다. state는 주로 사용자 입력이나 네트워크 요청의 응답에 따라 변하는 데이터를 관리할 때 사용됩니다. Props props는 부모 컴포넌트가 자식 컴포넌트에 전달하는 데이터입니다. props는 읽기 전용으로, 자식 컴포넌트는 props를 수정할 수 없습니다.function ChildComponent(props) { props.name = "New Name"; // 오류 발생 가능 return {props.name};}이를 통해 컴포넌트 간의 데이터 흐름을 예측 가능하게 만들고, 컴포넌트..

이벤트 루프란? 자바스크립트의 이벤트 루프는 자바스크립트가 싱글 스레드 기반 언어임에도 불구하고 비동기 작업을 처리할 수 있게 해주는 중요한 메커니즘입니다.자바스크립트는 기본적으로 한 번에 하나의 작업만 처리할 수 있습니다. 하지만 이벤트 루프가 콜 스택과 태스크 큐를 매개하면서 비동기 작업이 완료되면 그 결과를 처리할 수 있게 도와줍니다. 여기서, 콜 스택은 현재 실행 중인 함수들이 쌓이는 곳이고, 태스크 큐는 비동기 작업이 완료될 때 그 결과를 대기시키는 곳입니다. 이벤트 루프의 동작을 설명하기 위해 간단한 예로 setTimeout(callback, 0)을 들어 보겠습니다.setTimeout(callback, 0)을 호출하면, 이 콜백 함수는 바로 실행되는 것이 아니라 웹 API에 의해 타이머가 설정..

React의 Error Boundary는 비동기 코드에서 발생한 오류를 잡을 수 없습니다. 그 이유는 비동기 에러는 렌더링 시점의 콜스택이 모두 비워진 후에 발생하기 때문입니다. React는 컴포넌트를 렌더링할 때 하나의 연속된 콜스택 흐름 안에서 작업을 처리하며, Error Boundary도 이 렌더링 흐름 중에 실행됩니다. 따라서 Error Boundary는 동기적인 렌더링 과정 중에 발생한 오류를 감지할 수 있습니다.하지만 Promise, setTimeout과 같은 비동기 작업은 렌더링이 끝난 후, 즉 렌더링 시점의 콜스택이 모두 비워진 후에 수행됩니다. 따라서 Error Boundary는 해당 시점에 발생하는 오류를 잡을 수 없습니다. 이러한 점 때문에, 비동기 에러는 별도로 직접 처리해야 합니다..

스택을 활용하면 브라우저의 뒤로가기/앞으로가기 기능을 효율적으로 구현할 수 있습니다. 이를 위해 다음과 같은 두 가지 스택이 필요합니다.backStack (뒤로가기 스택): 사용자가 방문한 페이지들이 차례대로 쌓이며, 가장 위에 있는(top) 페이지가 현재 페이지에 해당합니다. 이 스택은 뒤로가기 기능을 담당합니다.forwardStack (앞으로가기 스택): 뒤로가기를 한 뒤 다시 앞으로 이동할 수 있도록 이전에 방문했던 페이지들을 보관합니다.이 두 스택을 활용한 동작 흐름은 다음과 같습니다.1. 새로운 페이지 방문 시현재 페이지를 backStack에 push합니다.이전의 forward 경로는 더 이상 유효하지 않으므로 forwardStack은 초기화됩니다.2. 뒤로가기 버튼 클릭 시현재 페이지를 bac..

쿠키와 세션이란? 쿠키와 세션은 클라이언트와 서버 간의 상태를 유지하기 위해 사용하는 대표적인 방식들입니다. 웹은 기본적으로 상태를 저장하지 않는 Stateless한 구조이기 때문에, 사용자의 로그인 정보나 장바구니와 같은 클라이언트 정보를 유지하려면 별도의 상태 관리 방식이 필요합니다. 이때 주로 활용되는 방식이 쿠키와 세션입니다. Stateless 구조란?Stateless 구조란 서버가 클라이언트의 이전 상태 정보를 저장하지 않고, 각 요청을 독립적으로 처리하는 아키텍처 설계 방식으로, 클라이언트가 필요한 모든 정보를 요청에 담아 보내면 서버는 해당 요청만 처리하고 응답하는 방식입니다. 이 구조는 서버 장애 시 다른 서버로 쉽게 전환할 수 있고 확장성이 뛰어나며, HTTP 프로토콜이 기본적으로 Sta..

문제문자열 myString과 pat가 주어집니다. myString의 부분 문자열중 pat로 끝나는 가장 긴 부분 문자열을 찾아서 return 하는 solution 함수를 완성해 주세요.제한사항5 ≤ myString ≤ 201 ≤ pat ≤ 5pat은 반드시 myString의 부분 문자열로 주어집니다.myString과 pat에 등장하는 알파벳은 대문자와 소문자를 구분합니다. 고민한 점 & 해결 과정 먼저 pat배열이 반드시 포함되는 문제였기에 조건문을 붙이기지 않고 pat배열로 끝나는 myString배열의 마지막 인덱스를 상수화 하는 것을 생각했습니다.해당 작업을 위해 lastIndexOf()메서드를 고려했습니다. lastIndexOf()메서드 function solution(myString, pat) {..

문제문자열 myString이 주어집니다. myString에서 알파벳 "a"가 등장하면 전부 "A"로 변환하고, "A"가 아닌 모든 대문자 알파벳은 소문자 알파벳으로 변환하여 return 하는 solution 함수를 완성하세요. 제한사항1 ≤ myString의 길이 ≤ 20myString은 알파벳으로 이루어진 문자열입니다. 고민한 점 & 해결 과정 일단, 대소문자 변환은 toLowerCase() 메서드와 toUpperCase() 메서드를 사용하면 된다는 것을 알고 있었기에 해당 메서드를 활용해 풀고자 했습니다. function solution(myString) { const aList =[]; if (myString.includes('a')) { aList.push(myString.toUpperCase..

React의 리렌더링 과정은 크게 Trigger, Render, Commit이라는 세 단계로 나눌 수 있습니다. 먼저 Trigger 단계는 컴포넌트의 state나 props가 변경되면서 시작됩니다. 사용자의 입력, 네트워크 응답 등의 이벤트에 의해 상태가 변경되면 React는 해당 컴포넌트를 다시 렌더링해야 한다고 판단합니다. 이때 React는 내부적으로 업데이트 큐에 해당 변경 사항을 등록합니다.그다음 Render 단계에서는 변경된 상태를 바탕으로 새로운 Virtual DOM 트리를 생성합니다. 그후, 이전 Virtual DOM과 새 Virtual DOM을 비교하여 어떤 부분이 바뀌었는지를 분석합니다. 중요한 점은 이 시점에서는 실제 DOM에는 아무런 변경도 일어나지 않는다는 사실입니다.마지막으로 Co..

웹표준은 다양한 웹 기술들이 브라우저나 기기와 상관없이 일관되게 동작하도록 보장하기 위한 규약들의 집합입니다. HTML, CSS, JavaScript와 같은 핵심 기술뿐만 아니라 접근성, 통신, 보안 등 여러 영역까지 포괄하며, IETF, W3C 등의 국제 표준 기구에서 정의하고 관리합니다. 웹표준의 목적은 다양한 브라우저, 기기, 플랫폼에서 웹 페이지가 동일하게 작동하도록 보장하는 것입니다. 먼저, 개발자 입장에서는 웹표준을 따름으로써 특정 브라우저에 종속되지 않는 코드를 작성할 수 있습니다. 즉, 특정 환경에 맞추어 여러 버전을 만들 필요 없이 한 번의 개발로 여러 환경의 사용자에게 서비스를 제공할 수 있습니다. 또한 사용자 입장에서는 어떤 브라우저나 기기를 사용하더라도 콘텐츠가 일관되게 표현되므로 ..