이안의 평일코딩

타입스크립트 기본 환경 구성 #1. NPM 초기화 (npm 설정파일 package.json 추가) npm init -y #2. 타입스크립트 라이브러리 설치 npm i typescript --save-dev #3. 타입스크립트 설정 파일(tsconfig.json) 생성 및 기본 값 추가 //tsconfig.json { "compilerOptions": { "allowJs": true, // 자바스크립트 검증 "target": "ES5", // 타입스크립트 컴파일 tsc "outDir": "./built", // 결과물 들어갈 곳 "moduleResolution": "Node" // Promise 인식 위해서 }, "include": ["./src/**/*"] //src폴더 모든 파일 대상 포함 } #4. ..

유틸리티 타입 기본 문법으로 충분히 타입을 변환할 수 있지만, 유틸리티 타입을 쓰면 이미 정의해 놓은 타입을 변환하거나 코드를 줄여 간결하게 정의할 수 있다. 제네릭타입이라고도 불리운다. Pick 타입을 불필요하게 정의하지 않아도 되며 간편하고 간결하게 만들어 준다. interface Product { id: number; name: string; price: number; brand: string; stock: number; } function fetchProducts(): Promise { // ... } Product의 일부(id, name, price)만 가지고 와야 하므로 Product를 쓰지 못함. 밑의 방법은 새로운 인터페이스를 만들기 때문에 권장되지 않는다. interface Product..

RDS (Relational Database Service) AWS에서 관계형 데이터베이스를 쉽게 사용할 수 있게 도와주는 서비스이다. 관계형 데이터베이스 관리의 부담을 덜어주지만 추가적인 비용이 발생한다. 쉬운 백업과 복구, 고가용성 확보, 수직 확장 수평 확장시 다운타임이 최소화된다. AWS 타 서비스들과의 통합이 편리하고 다양한 기능과 높은 성능이 갖고 있다. 관계형 데이터베이스 (RDBMS) 테이블 모양의 2차원 데이터(행과 열, 레코드와 필드)를 저장 데이터와 데이터 사이의 관계를 활용하여 중복데이터를 방지하고 검색 성능을 높임 가장 대표적인 데이터베이스의 형태로 Oracle, MySQL, MS-SQL Server 등이 가장 유명하다. RDS에서 지원하는 RDB는 Oracle, MySQL, Ma..

VPC(Virtual Private Cloud) AWS의 가상 사설 네트워크로 AWS를 잘 사용하기 위해서 반드시 알아야 되는 필수 지식. EC2의 네트워크 계층으로 많은 AWS 서비스들이 VPC를 통해 네트워크에 연결된다. VPC: 사용자의 AWS 계정 전용 가상 네트워크 망으로 리전 서비스 (고가용성을 위해 multi AZ로 구성) 서브넷: VPC를 더 작은 범위의 네트워크로 나눈 것으로 AZ 서비스 EC2인스턴스(AZ 서비스)는 바로 VPC에 연결되지 못하고 반드시 서브넷을 통해 연결됨 라우팅 테이블: 네트워크 트래픽 전달 규칙 지정 CIDR 블록: CIDR 표기법을 통해 IP 주소 범위를 지정 CIDR 표기법 IP의 범위를 간단하게 표기하는 표기법이다. IP address / Prefix 예) 0..

EC2(Elastic Computing Cloud) 안전하고 확장성 있는 컴퓨팅 서비스이다. 사용한만큼 요금 지불하고 초당으로 계산된다. (잘못 사용하면 일반적인 데이터 센터 IDC에서 서버를 임대하는 것보다 비쌀 수 있다.) 전세계 어디든지 빠르게 인스턴스를 생성하고 서비스 운영이 가능하다. ELB, Auto Scaling, S3등 다양한 AWS 서비스와 연동 가능하고 Linux, Windows, MacOS 지원한다. EC2와 주요 구성요소들은 AZ 기반이다. 고가용성을 위해서 MultiAZ를 이용하여 가용성을 확보해야 한다. MultiAZ는 둘 이상의 AZ를 활용해서 서비스를 구축하는 것으로 두 대 이상의 서버가 필요하고, 주로 ELB (Elastic Load Balancer)를 이용해서 서버를 연결..

Composition API 프로젝트가 커지면 데이터와 관련된 함수 찾는 것도 일이다. 지금까지 했던 문법은 Options API고 Composition API를 쓰면 관련있는 코드를 한 곳에 모을 수 있다. 편한걸로 컴포넌트마다 Composition 또는 Options 선택하면 된다. Composition API 써서 개발하려면 setup() 안에 코드를 짠다. setup() 안에서 데이터 생성, 조작, methods, computed, watch, hook걸기 등 거의 모든 기능개발을 setup 한 곳에서 가능하다. 먼저 vue에서 {ref}를 import 해온다. setup() 안에서 데이터 생성하는 법은 ref(데이터) 함수를 사용하면 된다. 모든 데이터를 refrence data type으로 감..

style scoped vue파일들에 있던 css는 하나로 합쳐지는데 싫으면 style scoped를 사용하자. scoped가 있으면 다른 vue파일로 전염되지 않는다.

PWA(Progressive Web App) Progressive Web App을 사용하면 웹사이트를 그대로 모바일앱처럼 쓸 수 있다. PWA를 발행하기 위해 먼저 라이브러리를 설치한다. vue add pwa PWA의 구성요소로 manifest.json과 service-worker.js있다. manifest.json은 앱의 이름, 아이콘, 테마색상 등을 설정할 수 있고, service-worker.js는 어떤 html, css, js 파일들을 캐싱할건지 명시하는 파일이다. (오프라인 이용가능) 두 파일은 빌드할 때 자동으로 생성된다. (dist 폴더안에 있는 파일들을 올려주면 된다) npm run build PWA의 설정을 바꾸고 싶으면 vue.config.js라는 파일을 프로젝트 폴더안에 생성한다. m..