Til
TIL | Data 기본 타입
Data Type Javascript와 타입 종류는 비슷하지만 동적 타입이 아닌 정적이며, 타입이 결정된 후 다른 타입의 데이터가 해당 변수에 할당될 수 없다. (좀더 엄격한 기준을 갖고 있다.) JavaScript Data Type Primitive: number, string, boolean, bigint, symbol, null, undefined Object: function, object, array ... Number const num1: number = 1; const num2: number = 0.01; const num2: number = -12; const num: number = "string"; //Type 'string' is not assignable to type 'number..
TIL | TypeScript이란?
TypeScript 드디어 학수고대하던, 타입스크립트 공부를 시작하게 되었다. 자바스크립트와 더불어 자주는 아니더라도, 진행하는 프로젝트와 별개로 당일 공부한 내용을 꾸준히 포스팅하고자 한다. TypeScript란? 오픈 소스 언어 동적인 자바스크립트 기반으로 만들어진, 정적 언어(자바스크립트 runtime 환경이 존재하는 어떤 곳에서도 대체하여 사용할 수 있다.) 타입스크립트 자체 tool, babel와 같이 자바스크립트 파일로 변환하기 위해 컴파일러가 필요하다. 자바스크립트와 달리, 데이터 타입을 구체적으로 명시해주므로 좀더 안정적인 프로그래밍이 가능하다. 프로젝트 진행시, JS와 TS 혼용이 가능하다. 실시간 에러 확인이 가능하다. 객체 지향 프로그래밍이 가능하다.(유지 보수 good) 실습 Set..
TIL | 웹팩 로더(Style, CSS)
로더-1(style, css) 로더는 자바스크립트 파일 뿐만이 아닌 style, image 등의 파일들을 모듈로 변환하여 처리할 수 있게 하는 수단이다. css-loader, style-loader loader 설치 npm install -D css-loader style-loader 로 로더를 설치 후 웹팩 설정파일에 추가한다. css-loader: css 코드를 모듈로 변환하는 역할을 한다. style-loader: JS 코드로 변경된 style을 동적으로 DOM에 추가하는 역할을 한다. (설치하지 않을시, 스타일이 DOM에 반영되지 않는다.) webpack.config.js 파일 설정 const path = require("path"); // module.exports = { mode: "devel..
TIL | 웹팩 번들 파일 생성하기
웹팩의 등장 웹 애플리케이션의 크기가 커지면서, JS 파일의 크기 또한 커졌다. 때문에 JS코드 또한 나눠서 관리했으나 이는 script의 많은 사용으로 HTTP 병목 현상이 발생하게 된다. 위와 같은 계기로 인해 모듈로 나누어 관리하는 방법들이 있으며, 대표적으로 웹팩이 존재한다. 웹팩은 다수의 파일(module)을 하나의 파일로 합쳐주는 번들러(bundler). 이때 합쳐진 파일을 번들(bundle)이라고 한다. 웹팩 설치 npm init npm install -D webpack webpack-cli npm init을 통해 npm으로 관리할 프로젝트의 json 파일을 생성한다. 터미널에서 위와 같은 커맨드를 통해 webpack와 터미널 도구인 webpack-cli을 설치한다. -D는, devDepen..
TIL | 웹팩 등장 이전 모듈의 사용
웹팩 등장 이전 모듈의 사용 모듈: 분리된 jS 파일 조각들이다. script 파일이 커지며 기능 또한 복잡해지면서 기능별로 파일을 분리하고 재사용성을 높이고자 도입하게 된 개념이다. import/export가 없던 과거에는 관련 모듈을 index.html에 직접 import하여 사용하였다. 문제점은, 전역 스코프의 오염이다. 즉, window 객체에 sum이라는 함수가 추가되는데, 이때 sum에 다른 값을 할당할 수도 있기 때문에 애플리케이션의 예측 불가와 더불어 런타임 에러가 발생한다. 런타임 에러: 프로그램이 실행되는 환경에서 발생하는 에러 // math.js function sum(a, b) { return a + b; } // // app.js sum(1, 2); // sum = 1; // co..
TIL | AWS EC2
AWS EC2 인스턴스 생성 EC2(AWS Elastic Compute Cloud) 확장 가능한 컴퓨터 용량을 제공하는 AWS의 클라우드 서비스이다. 하드웨어에 선투자할 필요 없이 빠르게 애플리케이션을 개발하고 배포할 수 있는 환경을 제공하고 있다. 쉽게 말해서, 가상의 컴퓨터를 제공하며 주로 서버 운영을 위해 사용한다. 인스턴스 생성 AWS EC2가 제공하는 가상 컴퓨팅 환경을 인스턴스라고 하며 이러한 인스턴스를 생성하는 과정은 다음과 같다. (연습 및 테스트삼아 생성했기 때문에 세부 옵션에 대한 자세한 설명이 없다는 것을 참고) 1. 운영체제 선택하기 (AMI 선택) 사용자가 원하는 운영체제를 선택하여 사용할 수 있다. 여기서 프리티어란, 무료로 체험할 수 있는 일종의 평가판이다. 나의 경우 18.0..