전체보기 54

[React] 리액트 기술 면접 핸드북 V - useLayoutEffect, 이벤트 핸들링 etc.

1. useLayoutEffect2. 컴포넌트 이벤트 핸들링1. useLayoutEffect 이란 ⭐️리액트 훅 함수를 바탕으로 한 생명주기는 다음과 같음브라우저가 렌더링될 때 .js파일은 브라우저에서 자바스크립트 엔진으로 권한을 넘겨 .js 해당 파일을 파싱하고 그리게 됨위 그림의 훅 라이프 사이클을 보다시피 브라우저가 스크린에 페인팅 작업이 완료된 이후 useEffect를 실행하는 구조를 가졌음따라서 아래 코드와 같이 렌더링할 때 useState(0)과 같은 초기 useState의 값이 빈 값이라면, 0을 출력했다가 useEffect를 통해 채워지는 구조를 띔// 코드 참고: https://merrily-code.tistory.com/46import { useEffect, useState } from..

Frontend 📚/React 2024.07.05

[cs] HTTP I - HTTP, URL etc.

1. HTTP란2. URL이란1. HTTP란HTTPHyperText Transfer Protocol의 약자로 데이터를 주고받기 위해 정의한 통신 프로토콜웹을 기준으로 브라우저와 서버 간에 데이터를 주고받기 위항 방식으로 HTTP 프로토콜을 사용하고 있음HTTP 프로토콜의 가장 큰 특징HTTP 프로토콜은 상태가 없는 (stateless) 프로토콜임여기서 상태가 없다는 말은 데이터를 주고 받기 위한 각각의 데이터 요청이 서로 독립적으로 관리가 된다는 말임이전에 보냈던 데이터 요청과 다음에 보낼 데이터 요청이 서로 관련이 없단 의미이러한 특징 덕분에 서버는 세션과 같은 별도의 추가 정보를 관리하지 않아도 되고, 다수의 요청 처리 및 서버의 부하를 줄일 수 있는 성능 상의 이점이 생김HTTP 프로토콜은 일반적으..

[React] 리액트 기술 면접 핸드북 IV - 컴포넌트 라이프 사이클, Hooks etc.

1. 컴포넌트의 라이프 사이클 메서드2. Hooks의 종류3. useMemo vs. useCallBack4. setState는 비동기1. 컴포넌트의 라이프 사이클 메서드 ⭐️⭐️- will~ 메서드: 어떤 작업을 작동하기 전에 실행되는 메서드- Did~ 메서드: 어떤 작업을 작동한 후에 실행되는 메서드메서드는 컴포넌트 클래스에서 덮어 써 선언함으로써 사용할 수 있음라이프사이클은 총 세 가지, 즉 마운트, 업데이트, 언마운트 카테고리로 나눔마운트 ⭐️DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트라고 함componentDidMount: 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드업데이트 ⭐️컴포넌트는 다음과 같은 네 가지 경우 업데이트Props가 바뀔 때state가 바뀔 때부모 컴포넌트가 ..

Frontend 📚/React 2024.07.04

[cs] 네트워크 III - 로드밸런서, ARP, MAC, NAT etc.

1. 로드밸런서란2. 헬스 체크3. ARP란?4. MAC 주소란?5. NAT란?1. 로드밸런서란로드밸런서서버의 부하를 분산하는 기기클라이언트로부터 오는 요청들을 뒤쪽의 여러 서버로 나누는 역할을 하며 시스템이 처리할 수 있는 트래픽 증가를 목표URL, 서버, 캐시, 쿠키들을 기반으로 트래픽을 분산함또한, 바이러스, 불필요한 외부 데이터 등을 걸러내는 필터링 기능 또한 가지고 있으며, 응용 프로그램 수준의 트래픽 모니터링도 가능장애가 발생한 서버가 있다면 이를 트래픽 분산 대상에서 제외해야 하는데, 이를 정기적으로 헬스 체크를 이용하여 감시하면서 이루어짐로드밸런서의 대표적인 기능으로 서버 이중화를 들 수 있음.에러가 발생하여 서버 1대가 종료되더라도 서비스는 안정적으로 운용되어야 하기 때문에 로드밸런서는 ..

[React] 리액트 기술 면접 핸드북 III - FLUX, 리덕스, state 불변성, 리듀서 불변성, side effect etc.

1. FLUX란2. 리덕스란3. React에서 state 불변성4. 리듀서 내부의 불변성과 ...연산자의 단점 해결 방법5. side effect 문제점1. FLUX 란 ⭐️⭐️FLUX는 라이브러리나 프레임워크가 아닌 추상적인 개념임MVC 패턴에서 쌍방향적인 데이터 흐름을 강조했던 것과 달리 FLUX 패턴에서는 단방향 데이터 흐름을 강조함MVC 패턴사용자의 어떠한 행위(액션)가 있을 때, 이를 바탕으로 설계된 컨트롤러를 통해 모델을 변화하고 이를 뷰에 반영함보여져야 할 뷰가 적거나, 변경될 모델이 많지 않다면 매우 효율적인 구조임하지만, 모델과 뷰가 복잡하게 얽혀 있다면 어떤 모델이 변화되어 뷰가 변경되었는지 제대로 확인할 수 없는 경우가 생김FLUX 패턴MVC 패턴의 단점을 해결하기 위해 나온 단방향 ..

Frontend 📚/React 2024.06.30