hmk run dev

컴퓨터는 0과 1밖에 이해하지 못한다. 그런데 1보다 큰수를 어떻게 이해할 수 있을까? 컴퓨터가 이해하는 가장작은 정보단위는 bit이다 비트(bit) : 0과 1을 표현하는 가장 작은 정보 단위 아래와 같이 0과 1을 표현할 수 있는 여러개의 비트로 1보다 큰 수를 표현할 수 있다. - n 비트로는 2n가지의 정보를 표현가능 - 프로그램은 수많은 비트로 이루어져 있음(브라우저, 포토샵, 게임 등등) - 다만, 평소 "이 파일은 8,920,120 비트야" 라고 표현하진 않음 - 비트보다 큰 단위를 사용함 (byte, kb, mb, gb, TB) 정보단위 워드(word) - cpu가 하번에 처리할 수 있는 정보의 크기단위 - 하드워드 : 워드의 절반 크기 - 풀워드 : 워드 크기 - 더블 워드 : 워드의 두..

컴퓨터가 이해하는 두 가지 정보는 크게 두 가지가 있다. 1. 데이터 - 숫자, 문자, 이미지, 동영상과 같은 정적인 정보 - 컴퓨터와 주고 받는, 내부에 저장된 정보 - 0과 1로 숫자를 표현하는 방법 - 0과 1로 문자를 표현하는 방법 2. 명령어 - 컴퓨터는 결국 명령어를 처리하는 기계 - 명령어 - 컴퓨터를 실질적으로 움직이는 정보 - 데이터는 명령어를 위한 일종의 재료 - 명령어의 생김새와 동작 방식 컴퓨터의 4가지 핵심 부품 컴퓨터의 종류를 막론하고 컴퓨터를 동작시키는 부품은 대부분 같다. CPU 컴퓨터의 두뇌, 메모리에 저장된 값을 읽어 들이고, 해석하고, 실행하는 장치 CPU는 크게 세 가지로 구성되어 있음(이 밖에 많은 부품이 존재하긴함 ex. 캐시 메모리) - ALU:계산기(계산을 위한..

처음 개발을 배운다면 프로그래밍 언어와 문법부터 학습을한다. 개발자는 코드만 잘짜면 되는가? 컴퓨터구조를 굳이 왜 알아야하는가? 좋은 개발자가 되기 위해선 프로그래밍 언어의 문법과 함께 컴퓨터의 근간을 알아야한다. 1. 문제 해결 능력 2. 성능 용량 비용을 고려한개발 분명 코드를 제대로 작성했는데 왜 동작하지 않는 거지? 같은 코드라도 실제로 사용자들에게 동작이 잘 되지 않는 경우가 꽤 있다 이는 프로그래밍 언어의 문제일까? 입력 너머에 근원적인 문제가 아닐까? 여기서 컴퓨터에 대해서 무지하다면 문제 원인에 대한 파악부터 어려워 질 수 있다. 심지어 개발 전에 사전에 미리 문제점을 파악하고 예방을 할 수 있는 사고를 할 수도 있다. 좋은 개발자의 덕목중 하나인 문제해결력은 탄탄한 기본에서 나오지 않나싶..

Process OS가 관리하는 단위, 프로그램 실행의 단위 프로세스라는 것은 기본적으로 연산할 작업을 뜻하기도 한다. 동시에 여러개의 프로세스가 실행된다면 이를 멀티프로세싱이라고 한다. Thread 프로세스가 하나가 있다면 그안에 스레드는 최소 1개 이상이 있다. 스레드는 프로세스 내의 하나의 실행 흐름, 코드 실행의 흐름이라고 봐도 무방하다. 한 프로세스 내부에 스레드는 N개가 될 수 있다. 이를 멀티 스레딩 이라고 하는데 스레드들은 동시에 그리고 각자 작동한다. Virtual Memory 하드웨어 수준에서 CPU 같은 전산자원이 존재하고 CPU에 코어가 4개가 있다고 가정해보자, 연산들은 주로 CPU와 RAM(1차 메모리)을 사용해서 처리된다. 어떤 프로세스가 존재한다면, 프로세스 내부엔 여러 연산 ..

성능 측정 & 개선이 필요한 이유 출처 - akamai 프론트엔드 성능 추상화 이미지 로딩 최적화 브라우저 기준 최적화의 문제점 사용자 기준 최적화 프리 렌더러 PWA 사례 이미지 스프라이트 브라우저 기준 최적화 브라우저 기준의 최적화는 보편적으로 Navigation Timing 모델에 따른 것이다. 왼쪽의 노란 부분이 리소스 타이밍 부분이며 tcp를 포함한 네트워킹을 하는 부분 사실 프론트가 리소스 타이밍에서 최적화할 부분은 크지않다. 신경써야 할 부분은 processing & load Processing 렌더 트리 완성하고 js파싱까지 완료하는 작업 어떤것을 그릴 준비가 완료됨을 의미 Load 이미지 등의 리소스를 로드 하는 작업 유저는 빈 화면이 보이는 것을 원하지 않음 두 이벤트의 시점을 앞당기고..

CommonJS: - 파일 시스템에서 파일을 로드한다. - 파일을 불러오는 동안 주 스레드를 차단한다. - 그렇기에 파일 로드 - 구문 분석 - 인스턴스화 - 평가가 각 파일마다 바로 실행된다. - 그렇기에 모듈 지정자에 변수를 넣을 수 있다. - export 객체에 값을 복사해서 넣는다. - 장점 널리 지원되는 표준: Node.js에서 기본적으로 사용되는 모듈 시스템이기 때문에 Node.js 환경에서는 자연스럽게 사용됩니다. 동기적 로딩: CommonJS는 동기적으로 모듈을 로딩하기 때문에, 런타임에서 모듈이 필요한 시점에 동기적으로 로딩할 수 있습니다. - 단점 1. 파일 시스템에서 파일을 로드한다. 2. 비동기적 로딩의 부재: 브라우저 환경에서는 비동기적으로 모듈을 로딩할 수 있는 ESM과는 달리,..

client와 server가 통신을 한다고 가정해보자 그리고 client가 server에 file하나를 요청한 상황 Server 소켓과 서버 서버에서 어떤 프로그램이 작동을 하고 있다. 서버에는 socket이 하나 열려있는 상태 그리고 해당 socket으로 통신을 할 예정 소켓의 본질은 파일 서버는 프로세스 프로세스가 파일에 할 수 있는 오퍼레이션은 기본적으로 RWX(Read, Write, Execute) 읽는다, 쓴다라는 개념은 소켓통신인 경우에 조금 다른 개념을 뜻한다. 읽는다는, Receive 쓴다는, Send 즉, 서버 프로세스가 소켓에다 대고 I/O를 한다고 할 수 있다. 파일 처리 기본적으로 서버는 HDD에 파일을 저장하고 있을 것이다. 그리고 파일은 파일 시스템에 의해 관리되고 있을 것인데..

네이버 이미지 검색이 어떻게 동작하는지 살펴보다 내부적으로 특정 hashkey를 생성 후 header에 넣어서 이미지 검색을 요청하는 듯해 보였다. 특별히 네트워크 요청을 날리는 것 같아 보이지 않아 fe 측에서 만들어주는 키라고 판단이 되어 이벤트핸들러를 찾아내, 개발자 도구 디버깅 툴로 hashkey를 만드는 로직을 찾아낸 방법을 기록해 봅니다. 일단 네이버 이미지 검색은 이미지의 영역을 지정해 특정 api를 호출해 지정된 영역의 이미지데이터를 이용해 검색이 이뤄지는데, 아마 내부적으로 이미지의 특정 부분이 중요하다고 판단하는 내부 알고리즘이 있는 것 같다. 일단 이 포스트는 웹 디버깅에 대해 포스트 하는 내용이니까, 각설하고 이미지 검색 api는 영역지정 부분의 영역을 재지정할 때 호출한다! 즉, ..

자바스크립트는 기본적으로 힙(heap)과 스택(stack)을 사용하여 메모리를 관리합니다. 스택(Stack): 스택은 함수 호출과 관련된 데이터를 저장하기 위한 것으로, 각 함수 호출 시에 스택 프레임이 생성되고 함수가 종료되면 해당 스택 프레임이 제거됩니다. 스택은 간단하고 빠르며, 메모리 할당 및 해제가 매우 빠릅니다. 이는 LIFO 구조를 가지고 있어서 새로운 데이터를 추가하거나 제거하는 과정이 간단하기 때문입니다. 힙(Heap): 힙은 동적으로 할당되는 메모리를 위한 것으로, 프로그램 실행 중에 크기가 동적으로 변하는 데이터나 객체 등을 저장합니다. 힙은 자유로운 메모리 관리를 허용하며, 개발자가 직접 메모리를 할당하고 해제해야 합니다. 이는 힙에서 발생하는 메모리 누수를 방지하고, 특정 데이터가..

결국 프론트엔드 코드는 웹브라우저 위에서 동작한다. 웹 프로트엔드 개발자로서 브라우저의 동작을 이해한다면? 개발 시 더 나은 선택, 코드를 작성 할 수 있지 않을까? 먼저 chromium에 대해 알아보자 chromium chromium은 구글에서 만든 오픈소스 프로젝트로 대부분의 브라우저는 chromium을 기반으로 동작한다. chromium의 멀티프로세스 아키텍처 원래 일반적으로 프로그램을 하나 키면 프로세스가 1개 실행 되어야한다. 그러나 실제로 크롬을 실행시키면 아래와 같이 여러개의 프로세스가 실행되는 것을 확인할 수 있다. 위 그림에서 보면 렌더러 프로세스가 여러개인 것을 확인할 수 있는데, 렌더러 프로세스는 탭별로 하나씩 생성된다. Blink 엔진이란? GPU 프로세스는 어떻게 GPU가 작업을 ..