한줄 요약 웹서버와 WAS는 클라이언트로부터 온 요청을 처리하는 데서 서로 다른 역할을 한다. 웹서버와 WAS를 분리하면 자원 이용의 효율성 및 장애 극복, 배포 및 유지 보수의 편의성 등의 장점이 있다. 웹서버 하드웨어: 웹 서버의 소프트웨어와 웹사이트의 컴포넌트 파일(html, css, javascript, 이미지)을 저장하는 컴퓨터 소프트웨어: 클라이언트로부터 http 요청을 받아 정적인 컨텐츠를 제공하는 컴퓨터 프로그램 ➡️ 웹 서버의 종류: 아파치, NginX 등 WAS(Web Application Server) WAS는 웹서버와 웹 컨테이너가 합쳐진 개념이다. 정적인 컨텐츠 외에 DB 조회와 다양한 로직 처리를 요구하는 동적인 컨텐츠를 제공하기 위해서 만들어졌다. http 프로토콜을 기반으로 ..
동시성 기능(concurrency feature) 이전 버전까지의 동기 렌더링 방식에서는 컴포넌트 트리 내의 모든 컴포넌트가 렌더링되고 DOM에 반영되기까지 반응이 없는 UI를 경험했다. 리액트 18 버전에서 도입된 동시성 기능으로 렌더링 과정을 일시 중지했다가 다시 시작하거나 아예 중단할 수 있게 되었다. 이로 인해 대규모 렌더링 작업이 진행되고 있더라도 사용자 입력에 대해 UI가 즉각적으로 반응할 수 있게 된다. 각 컴포넌트에 렌더링 우선순위를 부여해 낮은 우선순위의 컴포넌트가 렌더링되는 동안에는 더 중요한 작업이 있는지 확인해 중간에 렌더링을 일시 중단하고 다른 작업을 수행한 뒤 재개할 수 있다. 자동 배칭(automatic batching) 배칭이란 여러 개의 상태 업데이트를 하나의 재렌더링으로 ..
라우팅 라우팅이란 사용자가 웹사이트의 여러 페이지로 이동하도록 해주는 프로세스를 말한다. 라우팅과 렌더링은 다르다. 특정 라우트에 대한 요청을 보낼 때마다 그 페이지를 렌더링하게 되지만, 모든 렌더링이 라우팅의 결과는 아니다. Client-side routing clinet-side routing은 자바스크립트에 의해서만 처리되는 라우팅이다. 웹 애플리케이션의 모든 내용을 한 페이지에서 동적으로 로드하고 표시하는 싱글 페이지 애플리케이션(SPA)은 클라이언트사이드 라우팅 방식으로 구현된다. 전체 페이지를 새롭게 렌더링하지 않기 때문에 부드러운 페이지 이동 경험을 제공할 수 있다. client-side routing의 장점과 단점 장점 렌더링되는 데이터의 양이 적어 컴포넌트 간의 라우팅이 빠르게 처리된다...
프로그램이 실행하게 되면 OS는 메모리(RAM)에 공간을 할당해준다. 메모리 공간은 코드 영역, 데이터 영역, 스택 영역, 힙 영역의 네 가지 영역으로 나뉜다. 코드(Code) 영역 우리가 작성한 소스코드가 들어 가는 부분. 즉, 실행할 프로그램의 코드가 저장되는 영역으로 텍스트(code)영역이라고도 부른다. 코드영역은 실행 파일을 구성하는 명령어들이 올라가는 메모리 영역으로 함수, 제어문, 상수 등이 여기에 지정된다. 데이터(Data) 영역 전역변수와 정적변수가 할당되는 영역. 프로그램의 시작과 동시에 할당되고, 프로그램이 종료되어야 메모리가 소멸되는 영역 스택(Stack) 영역 프로그램이 자동으로 사용하는 임시 메모리 영역이다. 함수 호출 시 생성되는 지역 변수와 매개변수가 저장되는 영역이다. 함수가..
연결리스트 연결리스트(Linked List)는 각 노드가 데이터와 포인터를 가지고 한 줄로 연결되어 있는 방식으로 데이터를 저장하는 자료구조이다. 각 노드는 다음 노드를 가리키는 포인터를 포함한다. 연결리스트의 종류 단순(단방향) 연결리스트 단일 연결 리스트(Singly linked list)는 각 노드에 자료 공간과 한 개의 포인터 공간이 있고, 각 노드의 포인터는 다음 노드를 가리킨다. 이중(양방향) 연결리스트 단순 연결 리스트(Singly Linked List)는 next로 현재 노드에서 다음 노드로 갈 수 있지만 이전 노드로는 갈 수 없다. 이러한 단점을 해결하기 위해 노드에 앞 노드의 메모리 주소를 보관하는 포인터 prev를 만들어준 형태를 이중 연결 리스트(Doubly Linked List)라..
프로세스 프로세스란 운영체제로부터 자원을 할당받은 작업의 단위를 의미한다. 즉, 프로그램이 실행되어 작업 중인 상태에 있다면 그것은 프로세스라고 할 수 있다. 스레드 스레드란 프로세스가 할당받은 자원을 이용하는 실행 흐름의 단위를 의미한다. 하나의 프로세스는 반드시 하나 이상의 스레드를 갖는다. 프로세스 vs 스레드 프로세스는 각각 별도의 주소공간 할당 Code : 코드 자체를 구성하는 메모리 영역(프로그램 명령) Data : 전역변수, 정적변수, 배열 등 초기화 된 데이터는 data 영역에 저장 초기화 되지 않은 데이터는 bss 영역에 저장 Heap : 동적 할당되는 데이터를 위한 공간 Stack : 지역변수, 매개변수, 리턴 값 (임시 메모리 영역) 스레드는 Stack만 따로 할당 받고 나머지 영역은..
* 코드스테이츠 메인 프로젝트로 진행한 "JOYING: 세상의 모든 OTT 컨텐츠를 한 곳에 보여조잉"을 팀원들과 함께 리팩토링하면서 작성한 일지입니다. 메인프로젝트 소개와 회고 보기 이번 리팩토링에서는 기존에 컴포넌트 내에 함께 있던 리액트 쿼리 요청 코드를 커스텀훅으로 분리하는 작업을 했다. 왜 커스텀훅을 만들려고 했나 컴포넌트에 네트워크 처리 코드가 종속된다 컴포넌트 내에 서버 상태를 가져오거나 변경하는 로직이 있어서 종속성이 생기고, 컴포넌트의 재사용성이 떨어졌다. 역할의 분담이라는 측면에서 ui를 표시해주는 컴포넌트와 네트워크 요청을 처리하는 부분의 코드가 분리돼 있는 것이 좋다고 생각했다. 코드 수정이 어렵다 컴포넌트 내에 네트워크 처리 코드가 있을 경우 요청 엔드포인트가 바뀐다든가 응답을 받..
* 코드스테이츠 메인 프로젝트로 진행한 "JOYING: 세상의 모든 OTT 컨텐츠를 한 곳에 보여조잉"을 팀원들과 함께 리팩토링하면서 작성한 일지입니다. 메인프로젝트 소개와 회고 보기 조잉 프로젝트의 검색 기능에는 자소 단위의 검색어 자동완성 기능이 적용돼 있다. 이처럼 키를 하나 칠 때마다 검색어 자동완성 엔드포인트에 현재까지 입력된 input에 대한 요청을 보내고, 받아온 데이터를 화면에 표시하는 방식이다. 현재까지 입력한 검색어를 통해 어떤 컨텐츠를 검색해 볼 수 있는지 한눈에 볼 수 있어서 편리하지만, 키보드 입력을 한번 할 때마다 하나의 요청과 응답이 오가고 리렌더링이 이뤄지기 때문에 꽤나 많은 리소스를 소모한다고 볼 수도 있다. 이 부분에서 디바운싱을 적용해서 일정 시간 내에 연속적으로 이뤄진..
