Front-End

타입을 집합으로 생각하고 타입간의 좁은 타입, 넓은 타입을 파악하다타입과 집합타입들을 정의할 때 A타입이 B타입보다 좁을지 넓을지 생각하면 대입이 되는가 안되는가 판단할 수 있다. string & number 는 never 타입이다. never는 집합으로 따지면 공집합이다. any는 전체집합이다. type A = { name: string }type B = { age: number }type C = { name: string, age: number } 타입 A, B, C 중에 어떤 것이 가장 좁은 타입일까? 답은 C이다. C가 넓은 타입이라고 생각할 수도 있는데 이렇게 생각하면 좋다. 내가 느끼기에 타입에 충족하는 조건이 더 까다롭거나 자세하면 좁은 타입이라고 생각하면 되는 거 같다. 타입 C가 되려면 ..

union과 intersectionunion(|)과 intersection(&)function add(x: string | number, y: string | number): string | number { return x + y }add(1, 2)add('1', '2')add(1, '2')type A = { a: string;}type B = { b: string;}const aa: A | B = { a: 'hello', b: 'world' };const bb: A & B = { a: 'hello', b: 'world' }; union은 또는 (or)의 성질을 지닌다. 근데 string | number는 문제가 있다. return값이 number일수도 string일수도 있는데 return값에..

타입 종류를 더 알아보다. 1. 커스텀 타입 type World = 'world' 타입을 'world'라고 사용자가 마음대로 정의할 수 있다. 이런 식으로 정의한 타입을 백틱(`)을 사용해서 대입할 수 있다. type World = 'world' | 'hell' type Greeting = `hello ${World}` const c: Greeting = 'hello world' or 'hello hell' // 자동완성 됨 이런 식으로 자바스크립트에서 사용하던 문법이 적용된다. 자바스크립트 기반이니까. 2. enum const enum EDirection { Up, // 0 Down, // 1 Left, // 2 Right, // 3 } 객체를 선언할 때 앞에 enum을 사용하면 가장 첫번째 key의 ..

타입스크립트 타입 표기법을 배우다. 1. 타입스크립트에 대한 설명 타입스크립트는 변수, 매개변수, 리턴값에 타입을 지정해 주는 것이다. 타입을 지정하지 않고 변수에 커서를 가져다 대면 타입스크립트 내에서 자체적으로 타입을 추론하여 알려주기도 하는데, 자체적으로 추론한 타입은 항상 내가 원하는 타입으로 추론하지는 않는다. 우리가 타입스크립트에서 타입을 지정할 때 기본적으로 해야 하는 것은 변수의 타입을 최대한 좁혀야 하는 것이다. 이것도 되고 저것도 되는 포괄적인 타입이 보다는 하나만 확실하게 가리키는 타입을 지정해줘야 한다. 최대한 타입스크립트의 추론을 믿고 타입스크립트의 타입 추론이 올바르다면 직접 작성한 타입을 지워주고 타입스크립트의 추론이 이상하면 직접 타입을 작성한다. 2. 타입스크립트의 기본적인..

TypeScript를 시작하다. 1. 타입스크립트에 들어가기 자바스크립트 변수에 타입 값을 지정하여 오류를 줄여주는 타입스크립트를 배우려고 한다. 타입스크립트는 자바스크립트 변수에 타입을 지정하는 문법을 추가해서 작성한다. 브라우저와 노드는 모두 자바스크립트 코드만 읽을 수 있기 때문에 우리가 타입스크립트로 코드를 작성해도 타입스크립트 내부의 tsc라는 것이 작성한 코드에 타입의 이상은 없는지 확인하면서 타입스크립트 코드를 자바스크립트 코드로 변경한다. 여기서 타입에 이상이 있든 없든 tsc는 타입스크립트 코드를 자바스크립트 코드로 변경한다는 것이다. 타입 검사에 실패하여도 변환은 된다. 타입을 지정하는 코드만 추가로 작성한다는 것을 반대로 생각하면 타입 지정 문법만 지워주면 자바스크립트 코드로 정상 작..

1. 정규표현식 코드를 작성할 때 문자열의 패턴일 일정한 경우가 있다. 나 같은 경우에는 실전프로젝트에서 회원가입 폼에 있는 회원의 휴대전화 번호를 입력받을 때 모두 "010-0000-0000"과 같은 패턴으로 받고 싶었다. 01012345678이 모두 010-1234-5678로 입력되게 바꾸고 싶었다. 나의 경우에는 전화번호가 "XXX-XXXX-XXXX"라는 일정한 패턴으로 이루어져 있다. 이러한 경우에 저 패턴을 표현하는 방식을 정규표현식이라고 한다. 정규표현식은 특정 패턴의 문자열을 찾기 위한 표현 방식이다. 이것을 형식 언어, formal Language라고 한다. 참고하면 좋은 블로그는 링크로 걸어놨다. 더보기 https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-..

객체 리터럴을 이용해 객체를 만들 때 key에 대괄호를 사용하는 이유와 용도에 대해 배우다. 0. 글 작성 이유 프로젝트를 진행하던 도중 구글링하다 본 코드에서 객체 리터럴 방식으로 객체를 만들 때 key에 대괄호([key])를 씌우는 것을 봤다. 보통 같으면 이유없이 따라쳐서 코드가 잘 작동 되는지 확인하고 넘길텐데 내 성격은 그렇지않다. 나는 코드를 쓸 때 이 코드를 사용한 이유, 코드의 원리, 의도를 파악해야 직성이 풀린다. 그렇기때문에 key에 대괄호를 씌워서 사용하는 것에 대해 궁금해지기 시작했다. 1. 객체 리터럴 let object = { key1 : 'value', key2 : 'value2' } 객체 리터럴이란 객체를 표현할 때 중괄호 ( { } )를 사용하여 나타내는 방식이다. 객체를 ..

React와 Node를 연결하다. 1. React와 Node 구성 화면을 구성하는 React와 서버인 Node를 연결할 때의 구성을 그림으로 표현한 것이다. (그림 1) 기존의 Node.js에서는 templete engine(템플릿 엔진)으로 화면에 보일 엔진을 선택하였는데, React와 연결할 거니까 자연스럽게 React가 템플릿 엔진의 역할을 하게 된다. 2. React와 Node 기본 세팅 2 - 1. Node 설치 프로젝트를 진행할 새로운 폴더를 생성하고 폴더에 Node를 설치한다. npm init 명령어를 터미널에서 사용해서 노드 모듈과 package.json 등을 설치한다. github에 프로젝트를 업로드할 때는 노드 모듈을 올리면 안 된다. 다른 사람에게 파일을 공유하거나 공유받을 때 노드 ..