본문 바로가기

분류 전체보기54

브라우저에 www.google.com 입력 시 일어나는 일 1. 사용자 입력 처리 브라우저 주소창에 URL을 입력 브라우저는 이를 해석하여 해당하는 서버에 접속해야 할지 결정 URL에는 프로토콜(http, https), 호스트 이름, 포트 번호(선택적), 리소스 경로가 포함 2. DNS 조회 호스트 이름을 IP 주소로 변환하기 위해 DNS 조회 로컬 DNS 캐시 확인 없으면 ISP의 DNS 서버에 조회 요청 3. 서버와의 TCP 연결 DNS 서버를 통해 얻은 IP 주소에 대해 TCP 연결 시작 HTTPS 프로토콜의 경우, 이 단계에서 TLS(Transport Layer Security) 핸드셰이크도 진행하여 암호화된 연결을 확립 4. HTTP 요청 및 응답 TCP 연결이 성공적으로 수립되면, 브라우저는 HTTP 요청을 서버에 전송 서버는 이 요청을 처리한 후 H.. 2024. 3. 6.
브라우저 렌더링 과정 or 원리 웹 브라우저의 렌더링 과정은, 사용자에게 웹 페이지를 시각적으로 표시하기 위해 HTML, CSS, JavaScript와 같은 웹 리소스를 처리하고, 최종적으로 화면에 페이지를 그리는 일련의 단계를 포함한다 1. 문서 로딩 HTML 파싱 브라우저는 웹 서버로부터 HTML 문서를 받아와서 파싱한다 이 과정에서 브라우저는 HTML 문서를 DOM(Document Object Model) 트리로 변환한다 CSS 파싱 HTML 내부나 외부에 포함된 CSS는 CSSOM(CSS Object Model) 트리를 생성하기 위해 파싱된다 JavaScript 처리 HTML 문서 내에서 태그를 통해 참조된 JavaScript 파일이 로드되고 실행된다 JavaScript는 DOM API를 통해 DOM을 조작할 수 있으며, 이는 .. 2024. 3. 6.
GET과 POST GET과 POST는 HTTP 프로토콜에서 가장 널리 사용되는 두 가지 메소드다 이들은 클라이언트가 서버로 데이터를 전송하는 방법을 정의하며, 주로 웹 폼 데이터의 제출이나 API 요청 시 사용된다 각각의 메소드는 다른 목적과 특징을 가지고 있어, 적절한 상황에서 사용되어야 한다 GET 서버로부터 정보를 검색하기 위해 사용 데이터를 서버로 전송하긴 하지만, 주로 조회를 위한 파라미터를 URL에 붙여서 전송 GET 요청의 특징 데이터 전송 방식 URL의 일부로 데이터를 전송 예를 들어, http://example.com/api/users?name=John&age=30과 같이 URL에 질의 문자열(query string)을 포함시켜 데이터를 전송 안전성 GET 요청은 서버의 데이터를 변경하지 않아야 합니다(안.. 2024. 3. 6.
HTTP 메소드 HTTP 메소드는 클라이언트가 서버에게 수행하길 원하는 동작을 지정하는 방법이다 각 HTTP 메소드는 특정한 타입의 요청을 나타낸다 가장 일반적으로 사용되는 HTTP 메소드 1. GET 목적 지정된 리소스를 검색하고 그 표현을 요청 GET 요청은 데이터를 가져오는 데 사용되며, 서버의 데이터를 변경하지 않아야 한다(즉, 부작용이 없어야 함) 용례 웹 페이지, 이미지 또는 특정 데이터 레코드 요청 등 2. POST 목적 서버로 데이터를 전송하여 리소스를 생성하거나 업데이트 POST 요청은 주로 서버에 새로운 정보를 제출할 때 사용됨 용례 게시글 작성, 사용자 등록, 폼 데이터 전송 등 3. PUT 목적 지정된 리소스의 전체를 대체 만약 해당 리소스가 없다면 새로 생성할 수 있음 PUT 요청은 주로 리소스의.. 2024. 3. 6.
Context API란 React의 Context API는 컴포넌트 트리 안에서 데이터를 전역적으로 공유할 수 있는 방법을 제공한다 이 API를 사용하면, prop 드릴링(prop drilling) 없이도 컴포넌트 트리의 깊은 곳에 있는 컴포넌트에 데이터를 전달할 수 있다 즉, 중첩된 컴포넌트 구조에서 상위 컴포넌트로부터 직접적으로 데이터를 받지 않고도, Context를 통해 필요한 데이터에 접근할 수 있게 해준다 Context API는 주로 애플리케이션의 전역 상태를 관리하기 위해 사용되며, 테마, 로컬라이제이션, 사용자 인증 정보 등 애플리케이션 전반에 걸쳐 공유되어야 하는 데이터를 관리하는 데 유용하다 Context API 사용 방법 Context 생성 React.createContext를 호출하여 Context를 생성 .. 2024. 3. 6.
RESTful api란? RESTful API는 REST(Representational State Transfer) 원칙을 따르는 API를 의미한다 REST는 웹 상의 시스템 간에 통신을 위한 아키텍처 스타일로, 네트워크 아키텍처 원칙의 모음이다 2000년에 로이 필딩(Roy Fielding)의 박사 논문에서 처음 소개되었다 RESTful API를 통해 클라이언트와 서버 간에 데이터를 주고받을 때 HTTP 프로토콜을 사용하여 리소스를 처리한다 RESTful API의 핵심 원칙 클라이언트-서버 구조 (Client-Server Architecture) 클라이언트와 서버는 서로 독립적으로 분리되어 있어야 한다 이는 각각의 부분을 독립적으로 발전시킬 수 있게 해준다 무상태성 (Stateless) 각 요청은 독립적이어야 하며, 이전 요청.. 2024. 3. 6.
useEffect 와 useLayoutEffect 차이 React의 useEffect와 useLayoutEffect 훅은 둘 다 컴포넌트 라이프사이클에 부수 효과(side effects)를 수행할 수 있게 해주지만, 실행 시점에 차이가 있다 이러한 차이는 특정 상황에서 중요할 수 있으며, 각각의 사용 사례를 이해하는 것이 중요하다 useEffect useEffect 훅은 DOM 업데이트가 이루어진 직후에 비동기적으로 실행된다 즉, 브라우저가 화면을 그리고 난 뒤에 실행되기 때문에, 이 훅을 사용하는 동작은 렌더링 결과에 영향을 주지 않고, 사용자에게 눈에 띄는 지연 없이 실행된다 일반적인 부수 효과 처리에 사용된다 예를 들어, 데이터 fetching, 이벤트 리스너 등록/해제, 수동 DOM 조작 등 사용자에게 눈에 띄는 깜빡임이나 레이아웃 이동 없이 부수 효.. 2024. 3. 6.
React-query react-query React 애플리케이션에서 서버 상태를 효율적으로 가져오고, 캐시하고, 동기화하고, 업데이트하는 작업을 쉽게 만들어주는 라이브러리 데이터 페칭, 캐싱, 동기화, 업데이트와 같은 작업들을 쉽게 처리할 수 있게 해주며, 이러한 기능을 통해 개발자는 서버 상태 관리에 대한 복잡성을 크게 줄일 수 있다 주요 기능 자동 데이터 리프레쉬 애플리케이션의 포커스가 변경되거나 네트워크가 다시 연결될 때 자동으로 데이터를 새로고침(refresh)할 수 있다 백그라운드 데이터 동기화 사용자 인터랙션이 없는 동안에도 데이터를 백그라운드에서 동기화할 수 있다 캐싱 및 공유 쿼리 결과 동일한 쿼리에 대한 여러 요청이 하나의 캐시된 결과를 공유할 수 있어, 불필요한 네트워크 요청을 줄일 수 있다 페이지네이션과.. 2024. 3. 6.
렌더링 성능 향상 위해 어떻게 해야 하는가 웹 애플리케이션의 렌더링 성능을 향상시키기 위해서는 여러 전략과 기술을 적절히 활용해야 한다 React와 같은 모던 웹 프레임워크를 사용하는 경우, 특히 주의 깊게 고려해야 할 몇 가지 방법들이 있다 1. 불필요한 렌더링 방지 shouldComponentUpdate와 React.PureComponent 클래스 컴포넌트에서 shouldComponentUpdate 메소드를 오버라이딩하거나 React.PureComponent를 상속받음으로써 불필요한 렌더링을 줄일 수 있다 이들은 컴포넌트의 props나 state가 실제로 변경되었을 때만 리렌더링을 허용한다 React.memo 함수형 컴포넌트에서는 React.memo를 활용하여 컴포넌트의 출력이 동일한 props에 대해 동일하다는 것을 보장함으로써 불필요한 렌.. 2024. 3. 6.
메모이제이션 메모이제이션(Memoization)은 컴퓨터 프로그래밍에서 함수의 호출 결과를 캐시하고, 동일한 입력값으로 함수가 다시 호출될 때 캐시된 결과를 반환하여 연산의 반복을 줄이는 최적화 기술이다 이 방식은 특히 계산 비용이 높거나 반복 호출이 잦은 함수에 대해 성능을 크게 향상시킬 수 있다 메모이제이션은 순수 함수(pure function)에 가장 적합한 기법이다 순수 함수는 동일한 인자에 대해 항상 같은 결과를 반환하며, 외부 상태에 의존하지 않고, 부작용(side-effect)을 일으키지 않는 함수다 작동 원리 메모이제이션을 사용할 때, 함수는 첫 호출 시 그 결과를 내부 캐시(보통은 자료구조, 예를 들어 해시 테이블)에 저장한다 이후 동일한 인자로 함수가 호출되면, 함수는 새로운 계산을 수행하는 대신 .. 2024. 3. 5.

티스토리툴바