브라우저 렌더링 과정사용자가 주소창에 URL을 입력한 후 웹 페이지에 화면이 나타나기까지.. 사용자가 URL에 주소를 입력하면, 브라우저는 URL에 대한 요청을 서버에 보내고, 서버는 HTML 파일로 응답한다.브라우저를 구성하는 HTML은 텍스트 파일이므로 브라우저를 제어하는 언어인 자바스크립트가 이해할 수 있어야 한다. 서버로부터 받은 HTML 문서를 파싱(Pasring) 과정을 거쳐 DOM을 생성한다.DOM(Document Object Model)은 HTML 요소들을 트리 구조로 표현한 것이다. (=HTML 문서의 구조) 파싱 중에 외부 리소스(CSS, JS)를 만나면 중단하고 다음과 같은 과정을 진행한다.- CSS 파일을 CSSOM 트리로 변환한 후 DOM 트리와 결합하여 렌더 트리를 생성한다.- ..

공지사항 기능을 개발하면서 맞닥뜨린 문제, 데이터 필터링 로직을 어디에서 처리해야 하는가? 방법은 두 가지,1. 서버에서 전체 데이터를 불러오고 클라이언트에서 필터링 한다.2. 필터 조건을 파라미터로 설정하여 서버에서 필터링 된 데이터를 요청한다.사실 이전까지는 2번 방식, 서버에서 필터링 로직을 처리해 개발을 하고 있었다. 이유는 다음과 같다. 1. 필요한 데이터만 가져오기 때문에 초기 로딩 속도가 빠르다.2. 데이터가 많아지더라도 서버와 DB에서 최적화된 방식으로 데이터를 처리하므로 성능이 안정적이다. 3. 실시간으로 변경된 데이터도 반영할 수 있다. (데이터 동기화) 만약 프론트에서 데이터를 필터링하면 클라이언트가 보유한 데이터와 서버의 데이터가 불일치할 수 있다. 4. 권한 관리가 용이하다. 필..

React Query 이전의 방식, ReduxReact Query는 리액트 애플리케이션에서 서버 상태를 불러오고, 캐싱하며, 지속적으로 동기화 및 업데이트 작업을 도와주는 라이브러리다. 즉, 서버와의 통신을 보다 편리하게 해주는 도구라고 할 수 있다. React Query를 효과적으로 이해하려면, 같은 작업을 React Query 없이 이전에는 어떻게 (얼마나 번거롭게) 작업했는지를 보면 된다.ReduxReact Query 이전에 사람들은 Redux를 주로 사용했다.Redux는 Global State Management Library, 즉 전역 상태를 관리하도록 도와주는 라이브러리다.전역 상태는 리액트 컴포넌트의 Life cycle과 관계없이 비동기 데이터가 관리되기 때문에 캐싱과 같은 최적화 작업을 쉽..

들어가며굳이 카테고리를 나누려 하지 말고 주간 회고처럼 하나의 글에 기억하고 싶은 일을 기록하는 것도 괜찮은 방법인 것 같다.완벽하게 글을 쓰려고 노력하지 말자. 지난주에 작성한 글은 당시에 완성하지 못하고 임시저장 해두었는데, 오늘 다시 읽으면서 금방 마무리할 수 있었다.오늘 글쓰기 시간에 마무리짓지 못하더라도 언제든 다시 마무리할 기회가 있으니, 지금 이 시간, 행위 자체에만 의미를 두려고 노력하자.모달을 여는 과정사용자는 상품관리 페이지의 상품등록 버튼 또는 테이블 내부 드롭다운 버튼을 클릭해 상품을 등록 또는 수정할 수 있다.모달이 열리면 상품 등록/수정을 위한 정보를 입력할 수 있는 폼이 렌더링된다.등록 및 수정에 필요한 정보는 다르지만 사용자에게 동일한 폼을 보여주고 서버에 요청하는 값을 다르..

리액트는 컴포넌트 기반의 라이브러리로, 사용자 인터페이스를 구축하는 데 매우 유용합니다. 리액트의 가장 큰 장점 중 하나는 상태 관리입니다. 상태 관리는 컴포넌트의 데이터 흐름을 관리하는 방법으로, 이를 통해 사용자 인터페이스를 동적으로 업데이트할 수 있습니다. 이번 포스트에서는 리액트의 상태 관리 패턴과 프롭 드릴링에 대해 자세히 알아보겠습니다.React는 컴포넌트 기반으로 작동하며, 각 컴포넌트는 자신의 상태(state)와 부모 컴포넌트로부터 전달받은 속성(props)을 가집니다. state는 컴포넌트 내부에서 관리되는 데이터로, 사용자의 입력이나 API 호출에 따라 변할 수 있습니다. 반면, props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터로, 자식 컴포넌트는 이를 통해 뷰를 업데이트합..