구리

개발을 하다보면 컴파일, 인터프리터란 단어를 많이 쓰는데 무슨 뜻인지 정확한 개념을 알고 써야 한다고 생각되어 정리한 글입니다. 사전 지식 코드 실행의 기본 원리 언어의 종류 본문 코드 해석/변환방식 코드 실행의 기본 원리 프로그래밍 언어로 코드를 작성 인터프리팅, 컴파일 등의 과정을 통해 0,1로 이뤄진 기계어로 변환 0,1로 이뤄진 기계어 코드가 Memory 라는 곳에 저장됨 CPU는 메모리에 있는 0,1로 이뤄진 코드를 읽어 on/off 전기 신호로 실행시킴 이때 on/off 전기 신호는 이진수 계산으로 각종 연산을 수행하며, 사실 메모리에 저장된 데이터도 전기신호임 언어의 종류 프로그래밍 코드, 기계어는 어떻게 다를까요? 1. 고급 언어 JavaScript나 Java처럼 사람이 이해하고 작성하기 ..

개발을 하다보면 런타임, 런타임 환경이란 단어를 많이 쓰는데 무슨 뜻인지 정확한 개념을 알고 써야 한다고 생각되어 정리한 글입니다. 런타임 어떤 프로그램이 실행되고 있는 동안의 동작 해당 프로그램이 필요한 시스템 자원 (RAM, 시스템 변수, 환경 변수 등)을 할당받고 시스템 자원을 사용해 어떤 처리를 하고 있는 것 (또는 그러한 상태) 런타임 환경 runtime이 일어나게 하기 위해, 즉 애플리케이션을 실행하기 위해 필요한 모든 기능을 제공하는 환경 자바스크립트는 브라우저에서 실행되며, 브라우저 안에 있는 자바스크립트 런타임은 자바스크립트 엔진, Web API, 콜백 큐, 이벤트 루프, 렌더 큐로 구성 참고 자료 https://ko.wikipedia.org/wiki/%EB%9F%B0%ED%83%80%E..

도커 교과서의 4장(애플리케이션 소스코드에서 도커 이미지까지)을 읽으면서 공부한 것을 정리한 글입니다. Dockerfile을 통한 멀티 스테이지 빌드 만약 팀단위로 작업을 하는데 도커가 없다면 코드를 빌드하기 위한 별도의 서버인 빌드 서버가 필요합니다. 빌드 서버 사용시, 팀원이 파일 누락 후 푸쉬할 경우 빌드 서버에서 빌드가 실패된 것을 팀원들도 알 수 있고 건전한 프로젝트를 유지할 수 있지만 빌드 서버 유지 비용이 추가되며 유지 보수를 위한 큰 오버헤드가 발생할 수 있습니다. 예를 들어 로컬 컴퓨터, 빌드 서버와의 사용 도구 버전이 다를 경우 빌드가 실패됩니다. 하지만 도커를 이용해 빌드 툴체인을 패키징하여 공유한다면 이런 단점을 극복할 수 있습니다. 먼저 개발에 필요한 모든 도구를 배포하는 이미지를..

도커 교과서의 1장, 2장, 3장을 읽으면서 공부한 것을 정리한 글입니다. Docker 탄생 배경 Docker는 2013년에 dotCloud의 Solomon Hykes와 그의 팀에 의해 처음 데모되었습니다. 이 당시에는 클라우드 환경에서 애플리케이션을 배포시 어려운 문제가 있었습니다. 커져가는 클라우드 환경에서 서버가 10대라면 문제가 되지 않지만, 수천 대의 서버를 관리하는 것은 매우 어려웠으며 기존 가상화 기술을 사용하면 리소스가 많이 소모되는 단점도 존재했습니다. dotCloud팀은 가상화 자체가 아닌 가상화 사용 방식이 문제라는 것을 인식했습니다. 전체 운영 체제를 가상화하는 대신 애플리케이션과 해당 종속성만 가상화하는 것이 더 효율적이라는 것을 깨닫고 Docker의 핵심인 컨테이너 개념을 도입했..

이터레이터는 동기식 데이터 소스를 나타내는데 적합합니다. 하지만 I/O 접근이 필요한 데이터는 일반적으로 이벤트 기반이거나 스트리밍 비동기 API를 사용하기에 이터레이터를 사용할 수 없습니다. 이런 비동기 데이터 소스에 대한 데이터 접근 프로토콜을 제공하기 위해 비동기 이터레이션이 추가되었습니다. ES9(ES2018)에서는 비동기 이터레이션을 지원하는 async 이터레이터, for...await of 문이 도입되었으며 비동기적으로 들어오는 데이터를 필요에 따라 처리할 수 있습니다. 또한 비동기 제너레이터를 사용하면 이런 데이터를 더 편리하게 처리할 수 있습니다. async 이터레이터 비동기 이터레이터는 next()가 { value, done } 객체를 위한 프라미스 (Promise)를 반환하는 것을 제외..

ES6(ES2015) 이전에는 통일된 규칙 없이 배열, 문자열, DOM 컬렉션들은 각자의 구조를 가지고 for문, for...in문, forEach를 사용해 요소들을 순회했었습니다. ES6에서는 순회 가능한 데이터 컬렉션들을 이터레이션 프로토콜을 준수하는 이터러블로 통일해 for...of문, 스프레드 문법, 디스트럭처링 할당(구조 분해 할당)의 대상으로 사용할 수 있도록 일원화했으며 이터러블 객체를 쉽게 생성할 수 있는 제너레이터 함수를 사용할 수 있습니다. 이터러블 객체를 만들기 위해선 이터레이션 프로토콜에 대해 알아야 합니다. 이터레이션 프로토콜에는 이터러블 프로토콜, 이터레이터 프로토콜이 있습니다. 이터러블 프로토콜 (Iterable Protocol) 이터러블이란 이터레이터를 반환하는 Symbol...

자바스크립트의 데이터 타입에는 크게 2가지로 기본형(원시형), 참조형이 있습니다. 기본형에는 number, string, boolean, null, undefined 가 있으며 ES2015(ES6)에 추가된 Symbol이 있습니다. Symbol은 무엇이며 언제 사용하고 왜 추가된 걸까요? Symbol이란 자바스크립트의 객체 타입은 순서가 없는 프로퍼티 집합으로 ES6 이전까지는 프로퍼티명이 오로지 문자열이었지만 ES6 이후에는 심벌 타입도 프로퍼티명으로 지정할 수 있게 되었습니다. const strname = "string name"; const symname = Symbol("propname"); console.log(typeof strname); // string console.log(typeof s..

웹 성능 지표를 개선하는 방법에 대해 공부하며 정리한 글입니다. 웹 성능 최적화를 위해서 다양한 방법들을 사용합니다. 이때 웹 성능은 어떻게 측정될까요? 웹페이지의 퍼포먼스를 지속적으로 개선하기 위해선 측정할 수 있는, 수치화된 지표가 필요합니다. Web Vitals이라는 지표는 구글에서 제안하는, 더 나은 웹페이지 개발을 위한 가이드라인으로 아래 3가지 핵심 지표들을 포함하고 있습니다. LCP (Largest Contentful Paint) FID (Firsr Input Delay), TBT (Total Blocking Time) CLS (Cumulative Layout Shift) LCP (Largest Contentful Paint) LCP는 페이지 내용이 화면에 얼마나 빨리 나오는지를 측정하기 위..