전체 글 36

[컴퓨터 구조] | 고급 언어를 저급 언어로 변환하는 컴파일, 인터프리트

프로그래밍 언어는 어떻게 명령어가 되어 실행될까? 그리고 명령어는 어떻게 이루어져 있을까? 고급 언어 VS 저급 언어 개발자들은 Java, Python, JavaScript와 같은 프로그래밍 언어로 코드를 작성한다. 그렇다면 컴퓨터는 이 언어들을 이해할 수 있을까? 답은 '아니'다! 프로그래밍 언어는 사람이 이해하고 작성하기 쉽게 만들어진 언어이며, 이렇게 사람을 위한 언어를 고급 언어라 하고, 반대로 컴퓨터가 이해하고 실행할 수 있는 언어를 저급 언어라고 한다. 저급 언어는 명령어로 이루어져 있으며 기계어와 어셈블리어로 나뉜다. 기계어: 0과 1의 명령어 비트로 이루어진 명령어 모음으로 구성된 저급 언어이다. 이진수와 십육진수로 표현된다. 어셈블리어: 기계어를 읽기 편한 형태로 번역한 저급 언어이다. ..

[컴퓨터 구조] | 데이터를 0과 1로 표현하기

컴퓨터는 0과 1로 모든 정보를 표현하며, 0과 1로 표현된 정보만 이해할 수 있다. 나는 컴퓨터를 사용하면서 한 번도 0과 1로만 사용해 본 적이 없다. 하지만 컴퓨터는 0과 1로 된 정보만 이해할 수 있다고 한다. 그러면 컴퓨터는 내가 0과 1을 제외하여 표현한 정보들을 어떻게 이해할 수 있는 걸까? 정보 단위 0과 1을 나타내는 가장 작은 정보 단위를 비트라고 한다. 1비트는 (0), (1)로 두 가지 정보를 표현할 수 있다. 그러면 2비트는 몇 가지 정보를 표현할 수 있을까? (0, 0) (0, 1), (1, 0), (1, 1)로 네 가지 정보를 표현할 수 있다. 이렇게 n비트는 2의 n승 개의 정보를 표현할 수 있다. 프로그램의 크기가 커질수록 비트의 크기는 커지는데, 큰 크기를 표현하기 어려우..

알고리즘[Algorithm] | 최대공약수를 계산하기 위한 유클리드 호제법

유클리드 호제법 2개의 자연수의 최대공약수를 구하는 알고리즘이다. 호제법은 두 수가 서로의 수를 나누어 원하는 수를 얻는 알고리즘을 나타낸다고 하는데, 2개의 자연수 A, B(A > B)에 대해 A를 B로 나눈 나머지를 R이라고 하면 A, B의 최대공약수는 B, R의 최대공약수와 같다. 따라서 B를 R로 나눈 나머지 C를 구하고, 다시 R을 C로 나눈 나머지를 구하는 과정을 반복해서 나머지가 0이 되었을 때 나누는 수가 A, B의 최대공약수가 된다. 위키백과에서 위 설명을 읽었을 때 이해가 완벽하게 되지 않았고.. 어렵다는 생각이 들었는데 예시를 보니 생각보다 간단했다! 위키백과의 예시를 직접 한 단계씩 직접 작성하고 출력해 보면서 이해를 했다. 243, 135의 최대공약수를 찾는다고 할 때 구하는 순서..

Study/Algorithm 2023.06.19

[Web] | 브라우저 동작 원리

우리가 주소창에 url을 입력하고 엔터를 누르면 해당 url로 이동하게 된다. 이때 어떤 과정을 통해 페이지의 화면이 그려지게 되는지 간단히 정리해보려고 한다. 요약 HTML을 파싱 하여 DOM Tree 생성 CSS를 파싱 하여 CSSOM Tree 생성 DOM Tree와 CSSOM Tree를 합쳐 Render Tree 생성 Layout: Render Tree를 이용해 각 노드들의 위치와 형태 계산 Paint: 노드들을 실제 화면에 그림 일단 주소창에 url을 입력하고 엔터를 누르면 브라우저는 해당 서버에 요청을 보낸다. 요청을 받은 서버는 응답으로 HTML 데이터를 보내준다. HTML 데이터를 받은 브라우저는 화면을 그리기 위해 본격적으로 다음과 같은 단계를 거친다. 1. HTML 데이터를 파싱 하여 D..

타입스크립트[TypeScript] | jest로 DOM 테스트 하기위해 필요한 환경 설정

타입스크립트 환경에서 jest로 테스트를 하려고 코드를 작성하던 중, 아래 이미지처럼 컴포넌트를 렌더링하기 위해서는 testEnvironment 설정을 jsdom으로 설정하라는 오류가 발생했다. 그래서 jest.config.ts 파일을 아래 소스코드처럼 수정하였고, 또 다시 오류가 발생했다. import type { Config } from "jest"; const config: Config = { // ... 기존 설정 testEnvironment: "jsdom", }; export default config; 이번엔 jest-environment-jsdom은 더이상 기본으로 제공되지 않으니 설치를 해야한다는 안내였다. (As of Jest 28 "jest-environment-jsdom" is no ..