목록분류 전체보기 (185)
hmk run dev
내가 작성한 소스코드가 어떻게 컴퓨터가 이해할 수 있는 명령어로 바꿔서 동작하게 할까? 고급 언어(js, java, python 등등)와 저급 언어 고급 언어 - 개발자가 이해하기 쉽게 만든 언어 - 컴파일 언어 작성된 소스코드가 컴파일러에 의해 저급 언어로 변환되고, 컴파일 결과로 저급 언어인 목적 코드가 생성된다, - 인터프리트 언어 인터프리터에 의해 한 줄씩 실행 소스 코드 전체가 저급 언어로 변환되기까지 기다릴 필요 없음 컴파일과 인터프리트 과정 살펴보기 https://godbolt.org/ 저급 언어 - 컴퓨터가 이해하고 실행하는 언어 기계어 이진수 혹은 16진수로 표현된 기계어 어셈블리어 0과 1로 이루어진 기계어를 읽기 편한 형태로 번역한 저급언어 Reference https://www.ye..
알다시피 컴퓨터는 0과 1밖에 이해하지 못한다. 그런데 어떻게 우리가 작성한 문자를 해석해서 명령을 실행시킬 수 있을까? 문자집합(character set) 컴퓨터가 이해할 수 있는 문자 모음 인코딩(encoding) 코드화하는 과정 문자를 0과 1로 이루어진 문자 코드로 변환하는 과정 문자 => 0 or 1 디코딩(decoding) 코드를 해석하는 과정 0과 1로 표현된 문자 코드를 문자로 변환하는 과정 0 or 1 => 문자 문자집합 아스키코드(ASCI) - 초창기 문자집합 중 하나 - 알파벳, 아라비아 숫자, 일부 특수 문자 및 제어문자 - 7비트로 하나의 문자 표현(실제로는 8비트) 8비트 중 1비트는 오휴 검출을 위해 사용되는 패리티 비트(parity bit) EUC-KR - 2300여개의 한글..
컴퓨터는 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는 영역지정 부분의 영역을 재지정할 때 호출한다! 즉, ..