Mo's Develog

tsconfig 란? Typescript로 짜여진 코드는 Javascript로 변환해 줄 트랜스파일러(컴파일러)가 필요하다. 이러한 컴파일 과정에서 사용자가 필요한 여러 옵션을 설정할 수 있다. 그러한 파일이 tsconfig.json이다. npx tsc --init 커맨드를 통해 기본형태를 생성할 수 있다. tsconfig.json 컴파일 옵션 정리 옵션에 대한 자세한 정보는 여기에서 참고 사용한 옵션 { "compilerOptions": { /* 기본 옵션 */ "target": "es5", /* 사용할 특정 ECMAScript 버전 설정: 'ES3' (기본), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 혹은 'ESNEXT'...

Webpack이란? 여러개의 파일을 브라우저에서 로딩하는 것은 네트워크 비용을 그만큼 사용하게 되어 결국 반응속도가 느려지게 되는 문제점이 발생하고 이외에도 많은 문제점이 있다. 이러한 문제를 해결하기 위해 module bundler로 Webpack을 사용한다. 쉽게 말해 많은 파일들을 필요한 형태의 하나 또는 여러개의 번들파일로 만들어준다는 것이다. 그럼 왜 Webpack을 사용할까? 1. 네트워크 병목현상을 해결할 수 있다. 너무 많은 자바스크립트 파일을 로드하게되면, 네트워크 병목현상에 빠질 수 있다. 이때의 해결방법으로 하나의 자바스크립트 파일만을 사용할 수 있지만 이 방법에는 문제점이 있다. 그 문제점은 바로 가독성과 유지보수의 효율성이 떨어진다는 것이다. 해결방법으로 Webpack과 같은 모듈..

저번 포스팅에 만든 함수에 숫자 또는 문자를 집어넣으면 + 1 해주는 함수입니다. function 내함수(x :number | string){ return x + 1 //에러남 } 근데 이런 에러가 납니다. Operator '+' cannot be applied to types 'string | number' and 'number' string | number 같은 union type 에는 일반적으로 조작을 못하게 막아놔서 그렇습니다. 이런 메세지를 보면 1. 타입을 하나로 Narrowing 해주거나 2. Assert 해주거나 둘 중 하나 해주면 됩니다. Type Narrowing if문 등으로 타입을 하나로 정해주는 것을 뜻합니다. 그래서 아까 함수를 사용할 때 function 내함수(x :number..

함수에 타입지정하려면 2곳 가능 그래서 함수는 총 두 군데 타입지정이 가능합니다. 1. 함수로 들어오는 자료 (파라미터) 2. 함수에서 나가는 자료 (return) function 내함수(x :number) :number { return x * 2 } 1. 함수로 들어오는 파라미터 타입지정은 파라미터 옆에 적으면 됩니다. 2. 함수가 실행된 후 남는 값 (return 우측에 있는 값) 타입지정하고 싶으면 함수명() 우측에 적으면 됩니다. 함수에 멋있게 타입 실드를 장착했기 때문에 이제 파라미터와 리턴값이 이상해지면 자동으로 혼내줍니다. - 파라미터에 타입을 지정하면 필수 파라미터가 됩니다. 함수는 void 타입이 있음 함수는 특이하게도 void라는 타입을 사용가능합니다. '아무것도 없이 공허함'을 뜻하는..

변수에 들어올게 string일지 number일지 아직 애매하다면 방법이 몇가지 있습니다. 가장 좋은 Union type 사용 "이 변수엔 string 또는 number가 들어올 수 있습니다~" 라고 타입정의를 하고싶으면 | 연산자를 씁시다. OR 연산자 같은 느낌인데 이런 타입을 전문용어로 Union type 이라고 부릅니다. let 이름: string | number = 'kim'; let 나이: (string | number) = 100; 심심하면 괄호쳐도 됩니다. 이러면 name, age 변수엔 string 또는 number만 들어올 수 있습니다. 그리고 할당하는 순간 타입은 string 또는 number 중 하나로 변합니다. 그럼 array, object 자료 만들 때 union type (OR ..

변수 만들 때 타입정하기 (타입 쉴드씌우기) 타입스크립트는 변수만들 때 변수의 타입을 지정가능합니다. let 이름: string = 'kim'​ 변수명:타입 이렇게 정하면 됩니다. 방금 여러분은 변수에 실드를 씌운 것입니다. 이제 이름이라는 변수는 string 타입이 되며 갑자기 숫자 이런걸 할당하려고 하면 실드로 튕겨냅니다 (에러가 나게 됩니다.) 진짜 시험삼아 숫자 할당해보십시오. 타입 실드가 바로 튕겨내줄걸요 (참고) name이라는 변수명은 전역변수로 사용불가능합니다. 비슷한거 여러개 있음. 타입은 여러가지가 있습니다. 자주 쓰는 primitive types 들을 소개하자면 string, number, boolean 이런게 있습니다. let 이름 :string = 'kim'; let 나이 :numb..

Rest API의 GET = GraphQL의 query GraphQL에서 Rest API에서의 GET에 해당하는 즉 ,정보를 가져오기 위한 메소드는 query이다. 위와 같이 query 로 시작하면 아! 정보를 얻으려고 하는거구나! 라고 서버는 인식하는 것이다. 이후 { } 안에 가져오고 싶은 데이터를 넣어주면 되는데 저는 모든 team에서 위와 같은 정보를 얻어올 것이다. 위와 같이 작성하고 요청을 날리면 데이터를 잘 가져오는 모습을 볼 수 있다. 하지만 모든 정보가 필요치 않다면 원하는 정보만을 요청하면 원하는 데이터만 가져오는 것을 볼 수 있다. 만약 모든 팀이 아닌 1팀의 매니저와 사무실정보만을 가져오고 싶다면 아래와 같이 코드를 작성하고 요청을 날려보자. 그러면 1팀의 매니저와 사무실만을 받아오..

우선 API라는 것은 Application Programming Interface의 약자이다. 우리가 Interface라고 하는 것은 쉽게 비유해보자면 Tv를 키고 끌때 리모콘을 사용하고 자판기에서 주문을 할 때도 자판기 버튼을 누르고 컴퓨터에서 키보드와 마우스를 통해서 정보들을 입력하고 선택하듯이 컴퓨터와 인간이 소통하는 창구를 Interface라고 한다. 정보를 입력하고 선택하는 것뿐만이 아니고 그러한 정보들을 볼 수 있는 모니터도 이 Interface에 속한다. 그럼 여기서 앞에 Application Programming이 붙은 Interface가 API 인 것이다. 무슨말이냐 하면 우리가 컴퓨터나 스마트폰을 보면 여러 버튼, 스크롤, 팝업창 등이 있다. 이것들을 통해 사용자가 그 프로그램을 제어하..

for in, for of 반복문을 알아봅시다. 그리고 함께 enumerable, iterable 이라는 속성도 알아봅시다. 반복문은 용도가 2개라고 보시면 됩니다. 1. 코드 단순 반복 2. 자료형에 담긴 자료들을 하나씩 꺼내고 싶을 때 사용합니다. 그 중 for in 반복문을 먼저 알아봅시다. for in 반복문은 Object에 사용합니다 Object 자료형에 저장된 자료들을 하나씩 꺼내고 싶을 때 사용합니다. 이렇게 사용합니다. (key라는건 변수명입니다. 여러분이 마음대로 작명하시면 됩니다.) 그럼 반복문은 오브젝트라는 자료 내부 데이터 갯수만큼 반복하게 되며 반복할 때마다 key라는 변수는 name, age 이렇게 데이터의 key값이 됩니다. 그럼 반복시마다 변경되는 key 값을 이용하면 오브젝..

Promise가 어렵다면 그보다 훨씬 쉽게 쓸 수 있는 ES8 문법이 있습니다. async, await이라는 키워드인데 각각 Promise와 then을 매우 쉽게 만들어주는 문법입니다. 같이 알아봅시다. async 키워드를 쓰면 Promise 오브젝트가 절로 생성됩니다. 말그대로입니다. new Promise() 어쩌구 하실 필요가 없습니다. 근데 이 키워드는 function 선언 앞에만 붙일 수 있습니다. 그럼 이 함수 자체가 Promise가 되어버립니다. 그래서 이 함수를 실행할 때 뒤에 then을 붙일 수 있습니다. Promise니까요. (함수를 실행하면 그 자리에 Promise 인스턴스 (new Promise() 로 만든 오브젝트)가 남습니다. ) 그럼 이제 Promise 만들 때 했던거 처럼 th..