muntari Log muntari Log

08. 입출력장치8-1 장치 컨트럴러와 장치 드라이버장치 컨트롤러입출력 장치는 CPU, 메모리보다 다루기 더 까다롭다. 1. 입출력장치에는 종류가 너무나도 많다.프린터, 카메라, 키보드, 헤드셋, 스피커 등등 다양한 입출력 장치와 정보를 주고 받는 방식을 규격화하기 어렵다2. 일반적으로 CPU와 메모리의 데이터 전송률을 높지만, 입출력 장치의 데이터 전송률은 낮다.1초에 1000마디 하는 사람과 1초에 1마디 하는 사람은 제대로 대화하기 어렵다. 이와 같은 이유로 입출력 장치는 직접 컴퓨터에 연결하지 않고, 장치 컨트롤러라는 하드웨어를 통해 연결한다.하드 디스크를 뒤집어보면 볼 수 있는 하드웨어이다.장치 컨트롤러의 역할CPU와 입출력 장치간의 통신 중개오류 검출데이터 버퍼링이 중 데이터 버퍼링은 전송률이..

05. CPU 성능 향상 기법5-1  빠른 CPU를 위한 설계 기법클럭 (Clock)컴퓨터의 모든 부품을 일사불란하게 움직 일 수 있게하는 시간 단위라고 했다.클럭 신호가 빠르게 반복되면 CPU를 비롯한 컴퓨터 부품들을 그만큼 빠른 박자에 맞춰 움직인다. 클럭 속도가 높을 수록 CPU의 명령어 사이클은 더 빠르게 반복하고 동작한다. 실제로 클럭 속도가 높은 CPU가 일반적으로 성능이 좋다. 그래서 클럭 속도는 CPU 속도 단위로 간주되기도 한다.클럭 속도는 Hz 단위로 측정한다. 1Hz 1초에 1번, 100Hz는 1초에 100번 반복됨을 의미한다.그렇다면 현대 CPU의 클럭 속도는 얼마일가?Base : 2.5GHz Max : 4.9GHz1초에 클럭이 기본적으로 25억 (2.5 x 10^9)번, 순간적으..

01 . 컴퓨터 구조 시작하기1-1 실력 있는 개발자가 되기 위해 컴퓨터 구조를 알아야 하는 이유 문제 해결의 실마리를 다양하게 찾을 수 있다. 단순 코드 개발뿐만이 아닌 다양한 문제를 스스로 해결 할 수 있다.성능, 용량, 비용을 결정 할 수 있게 된다. 단순 입출력을 넘어서 성능, 용량, 비용까지 고려하며 개발할 수 있다.1-2 컴퓨터 구조의 큰 그림컴퓨터 구조 지식은 크게 두 가지이다.컴퓨터가 이해하는 정보컴퓨터의 네 가지 핵심 부품 컴퓨터가 이해하는 정보컴퓨터는 0과 1로 표현된 정보만을 이해한다. 이 정보에는 크게 데이터와 명령어가 있다.컴퓨터가 이해하는 숫자, 문자, 이미지 등 정적인 정보를 데이터라 부른다.이러한 데이터를 움직이고 컴퓨터를 작동 시키는 정보를 명령어라 부른다.명령어가 없으면 ..

useState 인자로 함수 전달하기 이상하게도 지금까지 한 번도 useState에 인자로 함수를 전달하는 것을 생각하지 못하였다. 그러던 중 리액트 성능 테스트를 하기 위해 많은 양의 데이터를 화면에 출력해야 하는 상황이 생겨 useState 인자로 많은 데이터를 생성하는 함수를 넣어보았다. useState의 인자로 함수를 전달하는 경우 + 추가로 useReducer의 인자로 함수를 전달하는 경우를 정리해보자! (해당 내용 출처 : 리액트를 다루는 기술 개정판/ 지은이: 김민준) useState 인자로 함수를 전달하는 경우 useState 초기값으로 함수를 전달할 수 있는데 아래 2가지 경우에 따라 다르게 동작시킬 수 있다. const testFuc = () => { ... } // #1 const [..

JAM Stack JavaScript API MarkUp Stack 웹 서비스를 만드는 하나의 설계 방식, 프로그래밍 기법이라 할 수 있다. 일반적인 프로그래밍 기법이고 매우 익숙하게 느낄 수 있다. 실제로는 이러한 개념을 모르고 현재까지 이와 비슷한 방식으로 개발을 해오고 있었을 수도 있다. (LAMP, MEAN Stack과 같은 개념을 떠올리면 된다.) 더 나아가서 JAM Stack은 정적 사이트 생성기를 사용한 서비스의 설계를 의미하기도 한다. 여기서 정적 사이트 생성기란 (SSG) Next, Hugo, Gastby 등을 의미한다. 아래에서 SSG에 대해서도 다뤄보자. JAM Stack 공식 문서에서는 아래와 같이 정의한다. 웹 애플리케이션에서 렌더링 할 화면을 Pre-render 하고 이를 CDN..

JAM Stack에 대해 알아보기 전에 CDN에 대한 이해가 선행되어야 했다. 이후 포스팅에서 JAM Stack에 대해 정리하기 위해 CDN을 따로 포스팅한다. 해당 포스팅과 이후 업로드할 JAM Stack을 함께 본다면 JAM Stack에 대해 조금은 더 잘 이해하게 되지 않을까 생각된다. 틀린 부분이 있다면 마구마구 지적해주신다면 감사할 것 같다. CDN ( Content Delivery Network ) CDN은 Content Delivery Network의 약자로서 지리적인 제약 없이 전 세계 사용자에게 빠르고 안전하게 콘텐츠 전송을 할 수 있고, 콘텐츠 전송에 특화된 기술을 말한다. CDN은 요청을 분산시킨다에 초점이 맞추면 이해하기 어렵지 않다. 예를 들어 유투브, 페이스북과 같은 서비스들에 ..

타입스크립트로 개발을 해오면서 매개변수는 어떤 타입을 받아야하고, 함수는 입력에 따른 출력으로 어떤 타입을 리턴해야하는지 명시하여 코드의 안정성을 높히며 사용을 한다. 이번 포스팅은 컴포넌트 내에서는 당연하게 생각하였던 부분들이 API 로직을 사용하는 부분에서는 별도로 return type을 명시하지 않았던 지난 날을 반성하며 잊어 먹지 않기 위해 포스팅하려 한다. 간단하게 어떤 value 값을 받아 http 요청을 보내고 이에 대한 응답을 받는 async/await을 사용한 fetch api 기본 로직이다. const testAPI = async (value: string) => { try { const res = await fetch( `blabalURL...key=${value}`, ); if (r..

이전 DOM에 관해 글을 남긴 적이 있다. 면접을 보게 되면서 무언가 깔끔하고 장황하지 않게 정리한 점과 몰랐던 부분에 대해 기록으로 남겨보자 한다. 알고 있는데, 듣기 쉽고 알아듣기 쉽도록 말하는 것도 능력이지 않을까 싶다. 브라우저 랜더링 정리 브라우저는 HTML, CSS, JS, 이미지, 폰트 파일 등 랜더링에 필요한 리소스를 서버에 요청하고 응답을 받는다. 브라우저의 랜더링 엔진인 서버로 부터 응답받은 HTML, CSS를 파싱 하여 DOM과 CSSOM 트리를 생성하고 이 둘을 결합해 랜더 트리를 생성한다. 브라우저의 자바스크립트 엔진은 서버로 부터 응답받은 JS를 파싱 하여 AST(Abstract Syntax Tree)를 생성하고 바잍트 코드로 변환하여 이를 실행한다. 이때 js가 DOM API를..