전체 글 46

[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

[cs] 네트워크 II - TCP/IP, PDU etc.

1. TCP/IP 란2. 계층 간 데이터 송수신 과정3. 네트워크에서 PDU란1. TCP/IP 란TCP/IP(Transmission Control Protocol)인터넷 프로토콜 스위트(Internet protocol suite)는 인터넷에서 컴퓨터들이 서로 정보를 주고받는 데 쓰이는 프로토콜의 집합이를 TCP/IP 4계층 모델로 설명하거나 OSI 7계층 모델로 설명하기도 함이 계층들은 특정 계층이 변경되었을 때 다른 계층이 영향을 받지 않도록 설계되어 있음 애플리케이션 계층응용 프로그램이 사용되는 프로토콜 계층웹 서비스, 이메일 등 서비스를 실질적으로 사람들에게 제공하는 층① FTP: 장치와 장치 간의 파일을 전송하는데 사용되는 표준 통신 프로토콜② SSH: 보안되지 않는 네트워크에서 네트워크 서비스를..

[cs] 네트워크 I - 패킷, 병목현상 etc.

1. 네트워크란2. 패킷이란3. 처리량이란4. 지연시간이란5. 병목현상1. 네트워크란네트워크: 노드와 링크가 서로 연결되어 있으며 리소스를 고유하는 집합노드: 서버, 라우터, 스위치 등 네트워크 장비링크: 유선, 무선 등 2. 네트워크에서 패킷이란패킷네트워크에서 데이터의 전송 단위헤더, 데이터, 트레일러 구조로 구성됨① 헤더(Header)- 목적지 주소: 패킷이 전송되어야 할 대상의 네트워크 주소- 출발지 주소: 패킷을 전송한 장치의 네트워크 주소- 프토토콜 정보: 패킷에 담긴 데이터가 어떤 프로토콜(TCP, UDP 등)을 사용했는지 나타냄- 길이: 패킷의 크기- 기타 정보: 패킷 순서, 분할 여부 등② 데이터(Payload)- 실제 전송하고자 하는 데이터 콘텐츠③ 트레일러(Trailer)- 오류 검사 ..

[React] 리액트 기술 면접 핸드북 II - 함수 컨포넌트, props, state etc.

1. React에서 함수 컴포넌트와 클래스 컴포넌트의 차이2. props와 state의 차이1. React에서 함수 컴포넌트와 클래스 컴포넌트의 차이 ⭐️클래스 컴포넌트의 경우객체지향 프로그래밍의 구조를 띄고 있으며, state를 초기화하기 위해 constructor(생성자) 함수를 필요로 함생성자 함수를 통해 state를 초기화해야 하기 때문에 함수 컴포넌트에 비해 코드가 길어지고, 사이즈가 커질 수 있음state 기능 및 라이프 사이클 기능을 사용할 수 있으며 임의 메서드를 정의할 수 있음render 함수가 꼭 있어야 하고, 그 안에서 보여 주어야 할 JSX를 반환해야 함함수 컴포넌트의 경우Hooks를 사용해 생성자 함수를 통해 state를 초기화하지 않더라도 사용이 가능(useState() 등)선언..

Frontend 📚/React 2024.06.27