Today I Learned_230320

4 분 소요

TypeScript

타입스크립트 시작하기

타입스크립트는 ts 확장자를 가진다.

타입스크립트가 브라우저가 인식할 수 있는 형태로 컴파일하는 과정이 필요함.

타입스크립트 설치법

npm install typescript -g

타입스크립트 컴파일

tsc index.ts

웹팩 - 모듈 번들러

반복적인 명령어를 자동화할 수 있다.

타입스크립트 쓰려면 웹팩을 써야 함

설정파일 만들기

ts가 포함된 디렉토리 이동
tsconfig.json 생성

tsconfig.json 내용

compilerOptions : tsc 컴파일러가 ts파일을 어떻게 이해할지에 대한 내용
- allowJS : 이 프로젝트에서 js 허용
- checkJs : javascript의 @ts-check 역할
- noImplicitAny : 모든 타입에 최소한 any는 넣어야 한다.

타입스크립트 설정 파일 옵션 : https://www.typescriptlang.org/tsconfig

속성들은 그때그때 찾아서 확인

타입스크립트 플레이그라운드 : https://www.typescriptlang.org/play

바벨의 try it out : 자바스크립트의 문법을 최대한 많은 브라우저에서 호환될 수 있도록 하는 사이트

https://babeljs.io/

타입스크립트 기초 - 변수와 함수 타입 정의하기

타입스크립트 핸드부 : https://joshua1988.github.io/ts/guide/basic-types.html

변수 타입 정의

//JS 문자열 선언
var str = 'hello';

//TS 문자열 선언
//변수 오른쪽에 : string -> 문자열 타입으로 간주하겠다
//ts는 대부분 ES6 이상
let str1: string = 'hello';
let num: number = 123;
let arr: Array<number> = [1, 2, 3];
let heroes: Array<string> = ['Capt', 'Thor', 'Hulk']
let items: number[] = [1, 2, 3] // 배열 리터럴

// TS 튜플 - 배열의 특정 인덱스의 타입까지 지정 가능
let address: [string, number] = ['강남구', 123];

// TS 객체
let obj: object = {};
// object에는 속성이 어느것이 들어와도 신경쓰지 않는다. 객체 형태만 유지된다고 하면 타입 검사가 끝난다.
let person: object = {
    name: 'capt',
    age: 100
};

// 구체적으로 객체 정의하기
let person1: { name: string, age: number } = {
    name: 'thor',
    age: 1000
}

// TS 진위값
let show: boolean = true;

함수 타입 정의

// 함수의 파라미터에 타입을 정의하는 방식
function sum(a: number, b: number): number {
    return a + b;
}
sum(10, 20);

//함수의 반환 값에 타입을 정의하는 방식
function add() : number{
    return 1;
}

// 함수에 타입을 정의하는 방식
function sum1(a: number, b:number): number {
    return a + b;
}

JS에서는 함수의 인자를 많이 넣어도 큰 상관이 없음

function sum(a, b) {
    return a + b;
}

sum(10, 20, 30, 40, 50)

10, 20만 사용하고 나머지는 관여하지 않는다.

TS에서는 이를 제한한다.

function sum(a: number, b:number): number {
    return a + b;
}

sum(10, 20, 30, 40)
sum(10)

여기서 오류난다. TS는 함수의 스펙을 파악한다.

옵셔널 파라미터

function log (a: string, b?: string) {
}

log('hello world')
log('hello ts', "abc");

특정 파라미터를 선택적으로 쓰고 싶을때 사용 가능
? 로 사용가능

첫 번재 프로젝트 - 할 일 관리 어플리케이션

폴더 구성

tsconfig.json
- noImplicitAny : true로 해 놓으면 index.ts가 빨간줄이 쳐 지면서 컴파일이 되지 않음. 이 부분을 타이핑 해 주어야 한다.
package.json
- npm으로 프로젝트로 초기화
any : 모든 타입에 해당. 자바스크립트의 원래 성질 가짐 - 실행 시점에 타입 구분하려 할당
void : 반환 타입이 없음을 지정

타입을 최대한 강하게 지정해야 한다.

node : js를 실행할 수 있는 브라우저 밖의 실행 환경

filter는 조건에 맞는 것만 솎아낸다.

Untitled

TS2339 오류 코드로 구글링하면 오류 해결 방법을 알 수 있다.

타입 별칭

type Todo = {
  id: number;
  title: string;
  done: boolean;
};

인터페이스

interface Todo {
  id: number;
  title: string;
  done: boolean;
}

둘 중에 뭐가 나은지?
- 간단하게 하고 싶으면 type
- interface: 상속하고 구현하는 등 자바의 객체지향에서 나오는 개념들이 포함됨. 객체지향 프로그래밍을 하고싶다면 사용하자.

Udemy redis 강의 수강

Redis의 특징

인메모리, 오픈소스, 빠른 k-v 데이터 구조
간단한 접근, 영속성, 데이터 expiration 설정 가능
고가용성 - 분산 클러스터
다양한 클러스터, 모듈 지원
Scale out 용이함

Redis 시작

redis 다운로드 주소 : https://redis.io/download/

파일 압축 해제 → src 폴더 접근 - sudo make install

→ mac에서 developer tool 설치

developer tool이 없으면 sudo make install 필요

❯ cd src
❯ sudo make install

실행 : redis-server

❯ redis-server
58597:C 20 Mar 2023 21:31:03.262 # oO0OoO0OoO0Oo Redis is starting oO0OoO0OoO0Oo
58597:C 20 Mar 2023 21:31:03.262 # Redis version=7.0.9, bits=64, commit=00000000, modified=0, pid=58597, just started
58597:C 20 Mar 2023 21:31:03.262 # Warning: no config file specified, using the default config. In order to specify a config file use redis-server /path/to/redis.conf
58597:M 20 Mar 2023 21:31:03.263 * Increased maximum number of open files to 10032 (it was originally set to 256).
58597:M 20 Mar 2023 21:31:03.263 * monotonic clock: POSIX clock_gettime
                _._
           _.-``__ ''-._
      _.-``    `.  `_.  ''-._           Redis 7.0.9 (00000000/0) 64 bit
  .-`` .-```.  ```\/    _.,_ ''-._
 (    '      ,       .-`  | `,    )     Running in standalone mode
 |`-._`-...-` __...-.``-._|'` _.-'|     Port: 6379
 |    `-._   `._    /     _.-'    |     PID: 58597
  `-._    `-._  `-./  _.-'    _.-'
 |`-._`-._    `-.__.-'    _.-'_.-'|
 |    `-._`-._        _.-'_.-'    |           https://redis.io
  `-._    `-._`-.__.-'_.-'    _.-'
 |`-._`-._    `-.__.-'    _.-'_.-'|
 |    `-._`-._        _.-'_.-'    |
  `-._    `-._`-.__.-'_.-'    _.-'
      `-._    `-.__.-'    _.-'
          `-._        _.-'
              `-.__.-'

58597:M 20 Mar 2023 21:31:03.265 # WARNING: The TCP backlog setting of 511 cannot be enforced because kern.ipc.somaxconn is set to the lower value of 128.
58597:M 20 Mar 2023 21:31:03.265 # Server initialized
58597:M 20 Mar 2023 21:31:03.265 * Ready to accept connections

Redis에 대한 기본 정보가 나온다.
- 레디스 버전, 포트번호
- 서버 시작 시간, connection 받을 준비가 되어 있음

redis server가 띄워지면 redis-cli를 통해 접속 가능

❯ redis-cli
127.0.0.1:6379>

기본 포트 번호는 6379

기본 서버 동작 확인 - ping

❯ redis-cli
127.0.0.1:6379> ping
PONG
127.0.0.1:6379> ping "Hello"
"Hello"

redis 서버를 하나만 띄워도 한 번에 여러 클라이언트로 붙을 수 있다.

redis-cli로 접속한 채 다른 터미널에서 redis-cli로 붙을 수 있음

redis shutdown

127.0.0.1:6379> shutdown nosave

nosave : 서버의 데이터를 저장하지 않고 종료

클라이언트 쪽에서 shutdown을 하면 아래와 같은 메시지가 서버 측에서 나온다.

58597:M 20 Mar 2023 21:39:32.873 # User requested shutdown...

레디스 서버는 한 호스트에 여러 인스턴스를 띄울 수 있다.

Twitter Facebook LinkedIn

HeeJung Kang

Today I Learned_230320

TypeScript

타입스크립트 시작하기

타입스크립트 기초 - 변수와 함수 타입 정의하기

첫 번재 프로젝트 - 할 일 관리 어플리케이션

Udemy redis 강의 수강

Redis의 특징

Redis 시작

공유하기

참고

Today I Learned_230711

Today I Learned_230710

Today I Learned_230709

Today I Learned_230706