기록하는 습관

TypeScript

2024.04.01 00:41

프로그램을 만들기 위해 개발자는 소스코드를 작성합니다. 소스코드는 컴파일러 (Compiler) 에 의해 기계어코드로 변환되어 실행이 가능한 프로그램이 되는데, 이 단계를 컴파일 타임(Compile Time) 이라고 부릅니다. 즉, 컴파일 타임 은 소스코드가 컴파일 과정을 거쳐서 컴퓨터가 인식할 수 있는 기계어 (바이트 코드)로 변환되어 실행할 수 있는 프로그램이 되는 과정을 의미합니다. 컴파일(compile)은 추상화 단계가 다른 고수준에서 저수준 언어로 변환되는 과정을 가리키는데요. 하지만 타입스크립트는 고수준 언어가 저수준 언어로 변환되는 것이 아니라, 고수준 언어 (타입스크립트) => 고수준 언어(자바스크립트) 로 변환되는 것이기 때문에, 트랜스파일(transpile) 이라고 부르기도 합니다. < ..

Any VS Unknown VS Never

TypeScript

2024.03.25 10:57

any 와 unknown은 값의 유형이 무엇인지 확실하지 않을 때, 사용되는 이스케이프 방법인 반면에 never는 모든 데이터 유형이 부족하고 값이 남지 않을 때 사용됩니다. Any any 타입은 타입 체크를 회피할 수 있는 타입으로, 어떤 종류의 값도 할당할 수 있습니다. 타입스크립트의 타입 시스템에서 any는 "어떤 것이든 될 수 있음"을 의미하며, 컴파일러에게 해당 변수에 대한 타입 체크를 수행하지 말라고 지시합니다. any 타입으로 지정된 변수에는 무엇이든 할당 할 수 있습니다. 단점 :정의되지 않은 메서드를 호출할 수도 있으며, Typescript 에서는 오류가 발생하지 않습니다. Unknown unknown 타입은 타입스크립트 3.0에서 소개되었으며, any 타입보다 타입 안전성을 강화한 타입..

enum 보다는 union type

TypeScript

2024.02.27 14:41

이번 글에서는 enum 대신에 union type을 써야한다는 내용에 대해 써보겠습니다. 얻어갈 수 있는 내용🎯 - enum 타입의 컴파일 과정과 런타임에 미치는 영향 - Tree-shaking - 굳이 enum 타입을 쓰는 방법 - enum 타입 말고 union type을 써야하는 이유 타입스크립트에서 정적 타입 자체는 런타임에 직접적인 영향을 주지 않습니다.🙅‍♂️ 타입스크립트에서 타입 정보는 컴파일 타임에만 사용되고, 컴파일된 JavaScript 코드에서는 제거되는데요 이는 타입스크립트의 타입 시스템이 런타임에 존재하지 않는다는 것을 의미합니다. 즉, 런타임에는 모든 타입이 사라지고, 순수한 JavaScript 코드만 남게 된다는거죠. 그런데 말입니다. enum과 같은 특정 타입스크립트 구문은 런타..

Network 정리 - (1)

CS

2024.03.19 14:47

IP (Internet Protocol) IP란 Internet Protocol 의 약자이다. 그러면 IP (인터넷 프로토콜)의 역할은 뭐일까? 지정한 IP 주소 (ip address) 에 데이터 전달 패킷 (packet) 이라는 통신 단위로 데이터 전달 IP 패킷 이란? => 인터넷 프로토콜(IP)을 통해 데이터를 전송할 때 사용되는 데이터 단위 이다. 패킷에는 주로 두 부분이 포함돼있다. 헤더(header) 데이터(payload) 헤더에는 패킷을 올바르게 전송하고, 조립하며, 처리하기 위해 필요한 제어 정보가 담겨져있고, 데이터에는 실제로 전송하려는 사용자 데이터 (예: 이메일 메시지, 웹 페이지 등)가 포함돼있다. 그렇다면 IP 헤더의 콘텐츠로는 뭐가 있을까? 버전 (IPv4 인지? IPv6인지?)..

HTTP 와 HTTPS 그리고 SSL

CS

2023.07.20 23:25

90년대 중반 이후로 프로토콜은 인터넷 통신에 더 나은 보안과 개인 정보 보호를 제공하는 데 사용되어 졌다. 도메인의 가장 중요한 보안 기능 중 하나는 SSL 인증서인데, 이번 글에서는 SSL 및 TLS 프로토콜과 인증서 작동 방식에 대해 써보려한다. SSL이 뭐야? SSL(Secure Sockets Layer)은 공개 키의 소유권을 디지털 방식으로 인증하는 프로토콜이다. 1995년 Netscape에서 처음 개발한 SSL은 클라이언트 측과 서버 측 인터넷 통신 간의 보안 연결을 제공한다. SSL 프로토콜은 TLS 1.0 릴리스와 함께 더 이상 사용되지 않고 있다(아래 참조). TLS는 뭔데? TLS는 Transport Layer Security의 약자이며 SSL 프로토콜의 후속 제품이다. (현업에서는 S..

Rendering (렌더링) 이란?

CS

2023.03.08 21:58

** 이 글에서는 렌더링 엔진이 작동하는 방식과 사용자 화면에 웹 페이지를 표시하는 방법을 알아볼거다. * 먼저 설명하는 데에 쓰일 용어들의 의미를 알아보도록 하자. 파싱 (parsing) 이란? 컴퓨터 프로그래밍에서 말 그대로 "구문 분석" 을 의미한다. 즉, 컴퓨터가 이해할 수 있는 형태로 입력된 문서나 데이터를 분석하여 그 의미를 이해하고 처리하기 위한 작업이다. 웹 프로그래밍에서는 HTML, XML 등의 문서를 파싱하여 웹 페이지를 구성하거나 데이터를 추출하는 데에 사용된다. DOM (Document Object Model) 이란? HTML, XML 등의 문서를 파싱하여 웹 페이지를 구성하거나 데이터를 추출하는 데에 사용되는 API이다. DOM은 문서를 트리 구조로 변환하여 각 요소를 노드로 표현..

file-loader VS url-loader

개발환경

2024.01.29 16:47

이번 글에서는 webpack 로더의 종류인 file-loader 와 url-loader에 대해서 알아보도록 하겠습니다. 👨‍💻 얻어갈 수 있는 내용 file-loader 와 url-loader는 어디서, 어떻게 사용되는걸까? file-loader 와 url-loader의 차이는 무엇이며, 둘 중에 뭐를 사용해야될까? Webpack 로더 웹팩은 JavaScript 모듈 번들러로 시작했지만, 시간이 지나면서 CSS, 이미지, 폰트 등과 같은 다양한 타입의 리소스들을 처리할 필요성이 커졌는데요. 로더 (loaders) 라는 옵션을 사용하게되면 Webpack이 다른 포멧의 파일을 처리하고, 이를 애플리케이션에서 사용할 수 있는 모듈로 변환 할 수 있게됩니다. // webpack.config.js module.e..

ESLint 와 Prettier 설정해보기

개발환경

2023.12.11 22:37

* ES 가 뭐에요? ES 는 ECMA Script를 뜻하고, 자바스크립트를 표준화 하기위해 만들어진 규격이다. * lint (린트)는 뭐에요? lint는 소프트웨어 개발에서 코드의 오류, 버그, 스타일 문제 등을 찾아내는 정적 분석 도구 이다. 따라서 lint는 코드 오류 및 스타일 문제를 찾아내는 도구로 일반적인 용어이고, ESLint는 JavaScript에서 사용되는 구체적인 린트 도구 중 하나이다. * ESLint 를 적용하는 순서 1. Node.js 설치: ESLint를 사용하려면 Node.js가 설치되어 있어야 한다. Node.js는 공식 사이트(https://nodejs.org/)에서 다운로드하여 설치할 수 있다. 2. 프로젝트 디렉토리 설정: ESLint를 사용할 프로젝트 디렉토리로 이동한..

[Webpack] 웹팩 최적화 1

개발환경

2023.12.04 10:40

* 웹팩 (webpack) 이란? 웹팩은 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들의 의존성을 해결하며 하나의 자바스크립트 코드로 압축 (번들링) 하고 최적화해서 성능 향상과 로딩 시간 단축을 위해 사용되는 라이브러리 이다. * 모듈 (Module) 프로그래밍에서 독립적인 기능을 갖고 있는 작은 코드 조각을 말한다. 모듈은 일반적으로 특정 기능이나 작업을 수행하는 코드의 조각으로, 모듈화를 통해 코드를 세분화해서 유지보수성을 높이고 코드의 재사용성을 높일 수 있다. * 번들러 (Bundler) 모듈 번들링(Module Bundling)을 수행하는 도구로, 여러 개의 모듈 (js파일, css파일, 이미지 등) 을 가져와서 이를 하나 또는 여러 개의 번들로 묶어주는 도구를 의미한다..

React Virtual DOM 과 Reconciliation, 그리고 Fiber Reconciler (덜 작성함)

React

2024.04.23 23:57

이 글에서는 React Virtual DOM과 Reconciliation이 내부적으로 어떻게 작동하는지에 대해 알아보도록 하겠습니다. Virtual DOM에 대해 말하기 전에 브라우저 렌더링 프로세스와 DOM에 대한 이해가 필요합니다. 브라우저 렌더링 프로세스는 해당 아티클을 읽어보고 오시면 되겠습니다. https://oreeyo00.tistory.com/7 Rendering (렌더링) 이란? ** 이 글에서는 렌더링 엔진이 작동하는 방식과 사용자 화면에 웹 페이지를 표시하는 방법을 알아볼거다. * 먼저 설명하는 데에 쓰일 용어들의 의미를 알아보도록 하자. 파싱 (parsing) 이란? 컴퓨 oreeyo00.tistory.com Virtual DOM DOM을 JavaScript 객체로 표현한 것입니다. ..

티스토리툴바