분류 전체보기

웹 페이지가 사용자에게 어떻게 보여지는 것일까? 우리는 하루에도 여러 웹 페이지에 접속한다. 그 과정에서 웹 브라우저를 사용하고, 링크를 클릭해 원하는 곳으로 이동한다. 우리가 인식하지 못할 뿐, 웹페이지는 미리 만들어진 것을 가져오는 것이 아니라 실시간으로 그려지는 것에 가깝다. 이때, 실시간으로 웹 사이트가 그려지는 과정을 웹 브라우저의 렌더링 과정이라고 한다. 렌더링 과정은 생각보다 복잡한 과정들을 거쳐야 한다. 이번 포스팅에서는 바로 이 복잡한 렌더링 과정에 대해 알아보고자 한다. 1. 웹 브라우저(web browser)란? 💡 웹 브라우저란? -> 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것 이때 자원은 HTML 문서, PDF, 이미지 등 다양한 형태를 띄울 수 있으며, 자원의..

1. 디스크의 구조 💡 디스크란? -> 컴퓨터 시스템의 대표적인 2차저장장치(보조기억장치)이다. 메모리는 휘발성 저장장치이므로 전원이 나가면 내용이 모두 사라지기 때문에 작업의 결과를 영구히 보관하기 위해서는 디스크 같은 2차 저장장치를 이용해야 한다. 하드 디스크의 구조는 위 그림과 같다. 더보기 플래터(Platter): 하드 디스크의 주요 구성 요소로, 회전하는 원판 형태, 데이터는 플래터의 표면에 저장 헤드(Head): 플래터 위의 데이터를 읽고 쓰는 역할, 헤드는 플래터의 표면에서 몇 나노미터 이내의 거리에 위치하며, 이러한 거리를 위해 공기 역학적인 방식으로 작동 암(Arm): 헤드를 지지하는 부분으로, 암은 헤드를 이동시켜 다양한 위치에 있는 데이터에 액세스할 수 있도록 한다. 스파인들(Spi..

💡 CPU 스케쥴링(CPU Scheduling)이란? : OS가 CPU를 사용하는 프로세스들 사이의 우선순위를 관리하는 작업이다. 즉 한정된 자원을 어떤 프로세스에 얼마나 할당하는지 정책을 만드는 것이다. 1. 스케쥴링 기준(Scheduling Criteria) 스케쥴링 기준은 최선의 알고리즘을 결정하는 데에 사용되는 기준이다. 중국집을 예를 들어 스케쥴링 기준에 대해 알아보자. CPU 이용률 (CPU Utilization) CPU를 가능한한 바쁘게 유지 주방장 - 돈을 주고 고용했는데, 주방장에게 최대한 일을 많이 줘야 돈이 아깝지 않다. 처리량 (Throughput) 단위 시간당 완료된 프로세스의 개수 회전율 - 식당에서 단위 시간당 손님을 몇명이나 내보낼 수 있는지에 대한 척도 총 처리 시간 (Tu..

1. 컴퓨터 시스템 구조 컴퓨터는 프로그램 코드들을 정해진 순서대로 실행한다. 이 과정에서 데이터를 읽고(Read), 처리(Processing)하고, 저장(Store)한다. 컴퓨터 시스템 구조는 크게 두 가지로 분류된다. Computer I/O device (입출력장치) 입출력 장치를 통해서 사용자가 원하는 데이터를 컴퓨터로 전달하면, 컴퓨터는 그 데이터를 가공을 한다. 가공된 데이터는 다시 입출력 장치를 통해 출력된다. 컴퓨터의 구성 요소 CPU : 메모리로부터 명령어를 받아와 기계어로 변환하고 연산을 수행한다. Memory : 명령어 및 데이터가 적재되는 공간이다. I/O device : 데이터를 입출력하기 위한 컴퓨터의 외부 장치이다. 컴퓨터 시스템 흐름 다음은 대략적인 컴퓨터 시스템 흐름이다. 컴..

1. 캐시 메모리(Cache Memory)란? 캐시 메모리(Cache Memory)는 CPU와 메모리의 속도 차이로 인한 병목 현상을 완화하기 위한 범용 메모리이다. 캐시 메모리는 메인 메모리와 CPU 간의 데이터 속도 향상을 위해 중간 버퍼 역할을 하는 CPU 내 또는 외에 존재하는 메모리이다.캐시 메모리의 성능에 의해서 전체 시스템의 성능을 개선시킬 수 있는 메모리이다. 캐시 메모리는 메모리와 CPU 사이에 위치해 있으며, 메모리 계층 구조에서 레지스터 다음으로 상위에 위치한다. CPU는 데이터를 처리하기 위해 메인 메모리와 끊임없이 데이터를 주고 받는다. 이때, CPU에 비해 메인 메모리는 속도가 느리기 때문에 메모리에 접근할 때 CPU는 효율적으로 사용되지 못한다. 이때 필요한 것이 캐시 메모리이..

리액트에서는 세 가지 방법으로 페이지를 이동할 수 있다. Link 컴포넌트 Navigate 컴포넌트 useNavigate Hooks 세 가지 모두 다 페이지를 이동할 때 쓸 수 있다는 점에서 비슷하다. 이것들은 언제 사용하면 좋을까? 1. Link 리액트 라우터에서는 태그 대신에 Link 컴포넌트를 사용한다. to 하는 prop으로 이동할 경로를 정해준다. 블로그 Link 컴포넌트는 사용자가 클릭해서 페이지를 이동하도록 할 때 사용한다. 하이퍼링크 텍스트나 페이지를 이동하는 버튼, 이미지 등에 사용한다. 2. Navigate 리턴값으로 Navigate 컴포넌트를 리턴하면 to prop으로 지정한 경로로 이동한다. function PostPage() { // ... const post = getPost(p..

1. 기본 컴퓨터의 레지스터 기본 컴퓨터란? DEC PDP-11 Mini Computer 가상의 컴퓨터가 아닌 실제 제품 (80년대에 주름 잡던 제품) 최신의 CPU도 기본적으로 동일한 구조를 가짐 기본 컴퓨터 레지스터 종류 Register Symbol 비트 레지스터 이름 기능 DR 16 Data Register 데이터 레지스터 AR 12 Address Register 메모리 주소를 지정하는 레지스터 AC 16 Accumulator 프로세서 레지스터 IR 16 Instruction Register 명령어 레지스터 PC 12 Program Counter 명령어 주소를 지정하는 레지스터 TR 16 Temporary Register 임시 데이터 저장 INPR 8 Input Register 주변장치로부터 데이터..

기본 컴퓨터(Basic Computer)란? DEC. Corp사의 중형 컴퓨터 PDP-11을 지칭한다. 기본 컴퓨터라함은 컴퓨터 구조 설계의 가장 기본적인 부분을 일컬으며, 현대의 CPU들에도 동일하게 적용되는 설계 구조이다. 컴퓨터 == CPU 컴퓨터가 곧 CPU이다. 그렇다면 내 PC 안에 들어 있는 메인보드, 그래픽카드, ssd, rem 등은 무엇인가? 이런것들은 전부 다 주변장치 라고 지칭한다. 즉, 컴퓨터는 CPU 와 주변장치들로 구성되어 있는 것이다. 1. 컴퓨터의 동작 주로 데이터는 레지스터 내에 저장된다. 이런 데이터를 마이크로 연산 시퀀스에 의해 정의된 내용들이 바로 컴퓨터의 동작이다. 범용 컴퓨터 시스템에서는 다양한 마이크로 연산 시퀀스를 정의하고 있다. 컴퓨터는 바로 이런 마이크로 연..

💡IP란? 인터넷 프로토콜(Internet Protocol)은 데이터가 길을 잃지 않고 정확한 목적지에 도착할 수 있도록 기능하는 것이다. 프로토콜이란 어떤 정보의 교환을 위한 규약 또는 체계를 의미한다. 결국 IP란 인터넷 상에서 서로 데이터를 주고 받을 때 필요한 규약이라고 볼 수 있다. IP의 역할은 무엇인가? 지정한 IP 주소(IP Address)에 데이터 전달 패킷(Packet)이라는 통신 단위로 데이터 전달 인터넷 프로토콜의 관점에서 보면 보내는사람의 주소는 출발지의 IP, 받는사람의 주소는 목적지의 IP, 그리고 편지안의 내용은 전송하고자하는 전송데이터로 볼 수 있다. 이러한 전송하고자하는 정보 데이터의 형식을 패킷이라는 하나의 블록 단위로 이루어서 출발지IP에서 목적지 IP까지 패킷을 통해..

보통 웹사이트에서는 주소를 직접 입력하거나 링크를 클릭하면 새로운 페이지를 보여준다. 리액트로 이런 사이트를 만드려면 따로 추가적인 개발이 필요하다. 이때, 별도의 개발없이 쉽게 사용할 수 있는 것이 "리액트 라우터"이다. React Router 란? 리액트 컴포넌트로 페이지를 나누고, 이동하게 해주는 라이브러리 즉, 리액트 라우터를 사용하게 되면 여러 페이지를 나누고 이동하는 것을 컴포넌트로 할 수 있다. 리액트 라우터의 핵심 컴포넌트는 4가지이다. 라우터(Router) 라우츠(Routes) 라우트(Route) 링크(Link) 각각 어떤 역할을 하는지 살펴보자. 1. 라우터(Router) 라우터는 리액트 라우터에서 사용하는 데이터들을 모두 갖고 있는 컴포넌트이다. 예를 들어, 현재 주소, 페이지 기록과..