전체 글 279

[TS]함수에 사용하는 never 타입도 있긴 합니다

Never type 을 알아보자 함수에 붙이는 return type으로 사용가능합니다. 근데 좀 특이합니다. function 함수() :never{ } 어떤 함수가 조건 1) 절대 return을 하지 않아야하고 조건 2) 함수 실행이 끝나지 않아야합니다 (전문용어로 endpoint가 없어야합니다) 그런 함수에 붙일 수 있는 타입니다. 실은 조건1, 2는 같은 소리인데 모든 자바스크립트 함수 맨 밑엔 return undefined 라는 숨겨진 코드를 가지고 있습니다. 그래서 조건2가 맞으면 1도 맞음 function 함수(){ console.log(123) } 이런 함수들에 never를 붙일 순 없습니다. 왜냐면 조건 1번은 만족하지만 2번은 만족하지 않습니다. 2번 조건은 함수 내부 코드 실행이 끝나지 ..

TypeScript 2022.11.07

[TS]Narrowing 할 수 있는 방법 더 알아보기

null & undefined 체크하는 법 실제로 개발할 때 어떤 변수나 함수파라미터에 null, undefined가 들어올 경우 어떻게 대처할지 if문으로 코드짜는 경우가 매우 많을 겁니다. if (저 변수가 undefined일 경우) 어쩌구~ 이런 코드 많이 짤 텐데 왜냐면 저런 상황을 미리 방어하는게 언제나 좋기 때문입니다. 근데&& 스킬을 쓰면 저런 if문을 생략할 수 있습니다. 그러기 위해서 && 연산자에 관련한 내용을 알아봅시다. && 연산자의 다른기능 원래 && 이건 조건식 2개가 참이면 전부 참으로 판정해주세요~ 라는 논리연산자인데 여러개를 사용하면 이상한 현상이 있습니다. && 기호로 비교할 때 true와 false를 넣는게 아니라 자료형을 넣으면 && 사이에서 처음 등장하는 falsy ..

TypeScript 2022.11.07

[TS]함수 rest 파라미터, destructuring 할 때 타입지정

rest 파라미터 타입지정은 function 전부더하기(...a :number[]){ console.log(a) } 전부더하기(1,2,3,4,5) rest 파라미터는 항상 [ ] 안에 담겨오기 때문에 타입지정도 array처럼 해주시면 됩니다. 끝 Destructuring 문법도 함수 파라미터에 사용가능 왜냐면 함수 파라미터 작명하는 것도 변수만드는 문법과 똑같아서 그렇습니다 변수만들 때 기존 object에 있던 자료를 파라미터로 집어넣고 싶으면 let person = { student : true, age : 20 } function 함수(a, b){ console.log(a, b) } 함수(person.student, person.age) 기존 object에 있던걸 person.student 이렇게 각..

TypeScript 2022.11.07

[TS]Object에 타입지정하려면 interface도 있음

type 키워드를 이용해서 타입을 변수처럼 저장해서 쓰는 건 앞에서 해봤죠? 근데 더 좋은 방법이 있습니다. Object에 쓸 수 있는 interface 문법 interface 문법을 쓰시면 object 자료형의 타입을 보다 편리하게 지정가능합니다. 예를 들어서 { color : 'red', width : 100 } 이런 object를 만들고 싶은데 type을 미리 정의하고 싶으면 interface 키워드를 이렇게 만들어봅시다. interface Square { color :string, width :number, } let 네모 :Square = { color : 'red', width : 100 } interface는 object랑 비슷한 모습으로 작성하면 됩니다. type alias와 용도와 기능이..

TypeScript 2022.11.07

[TS]필드값 타입지정

class 내부에는 모든 자식 object들이 사용가능한 속성같은걸 만들 수 있습니다. 예를 들어서 모든 Person 클래스의 자식들에게 data 라는 속성을 부여해주고 싶으면 class Person { data = 0; } let john = new Person(); let kim = new Person(); console.log(john.data); console.log(kim.data); 그냥 class 중괄호 안에다가 변수처럼 만들면 됩니다. (var let 키워드 안씀) 그럼 Person이 출산한 모든 자식에게 data = 0을 하나씩 복사해줍니다. 당연히 자식들은 object 자료형이니 점찍고 data 쓰면 됩니다. class 안에 저렇게 대충 만드는 속성을 필드라고 합니다. 근데 타입이 없군..

TypeScript 2022.11.07

[TS]함수와 methods에 type alias 지정하기

function type 도 저장가능 함수에 들어갈 파라미터와 return으로 뱉을 값들을 타입지정할 수 있다고 배워봤습니다. 함수 타입도 type alias로 저장해서 쓸 수 있습니다. 예를 들어서 1. 숫자 두개를 파라미터로 입력할 수 있고 2. 숫자를 return 하는 함수를 별명을 지어서 사용하려면 type NumOut = (x : number, y : number ) => number ; 이런 식입니다. 이걸 함수 만들 때 사용하려면 function 함수이름 :NumOut (){} 이런 식은 불가능합니다. function 키워드에는 () 이거 내부랑 오른쪽에만 타입지정이 가능해서요. 그래서 이렇게 합니다. 함수 표현식으로 말이죠. type NumOut = (x : number, y : numbe..

TypeScript 2022.11.07

[TS]Types로 만드는 const 변수 유사품

어떤 변수는 1이라는 값만 가질 수 있게 제한하고 싶으면 어쩌죠. 자바스크립트 const 변수 쓰면 되겠군요. 근데 1 또는 0만 가질 수 있게 제한하고 싶으면 어쩌죠. 그 변수에 number 이런 식으로 타입을 지정하면 너무 광범위하지않습니까. 그럴 땐 Literal type을 선언하도록 합시다. 어떤 변수가 미리 골라놓은 데이터만 가질 수 있게 도와줍니다. Literal Type 만드는 법 string, number 이런 것만 타입이 될 수 있는게 아닙니다. 일반 글자같은 것도 타입이 될 수 있습니다. let john :'대머리'; let kim :'솔로'; 제가 방금 '대머리', '솔로'라는 타입을 만들었습니다. 마음대로 변수나 함수에 할당 가능합니다. 그럼 신기하게도 john이라는 변수는 이제 '..

TypeScript 2022.11.07

[TS]타입이 너무 길면 Type Aliases, readonly, type extend 등

타입 정의가 너무 길면 Type Aliases (별칭) 코드 짜다보면 let 동물 :string | number | undefined; 매우 길고 복잡하게 타입을 나열하는 경우가 많습니다. 1. 이게 길고 보기싫으면 2. 나중에 또 사용하고 싶으면 변수에 담아쓰십시오. 변수만드는 것 처럼 type 이라는 키워드를 쓰면 됩니다. type 키워드 쓰는걸 type alias 라고 합니다. alias를 번역하자면 별칭인데 저는 그냥 쉽게 변수라고 부르겠습니다. type Animal = string | number | undefined; let 동물 :Animal; type 타입변수명 = 타입종류 타입을 변수처럼 만들어서 쓰는 alias 문법입니다. 관습적으로 대문자로 시작합니다. 일반 자바스크립트 변수랑 차별을..

TypeScript 2022.11.07

NextJS 개인 메모

NextJS 란? React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와 주는 간단한 프레임워크입니다. React로 개발할 때는 SPA(Single Page Application)을 이용하여 CSR(Client Side Rendering)을 이용하기 때문에 좋은 점도 있지만 단점으로는 검색엔진 최적화(SEO : Search Engine Optimization) 부분입니다. CSR을 하면 첫페이지에서 빈 html을 가져와서 JS파일을 해석하여 화면을 구성하기 때문에 포털 검색에 노출되기가 쉽지않습니다. (물론 구글검색엔진은 똑똑해서 괜찮) 하지만 NextJS에서는 Pre-Rendering 또는 SSR을 통해서 페이지를 미리 렌더링 하여 완성된 HTML으 가져오기 때문에 사..

NextJS 2022.11.04

[Webpack] 3. CSS 번들링하기

import나 require로 css랑 기타 이미지, html 또는 폰트 파일도 묶을 수 있다. CSS번들링 하기위한 설정 npm i -D style-loader css-loader mini-css-extract-plugin css-loader는 css파일들을 읽어주고 style-loader는 읽은 css 파일들을 style 태그로 만들어 head태그 안에 넣어준다. 만약 style태그 대신 css 파일로 만들고 싶은 경우에 mini-css-extract-plugin을 사용하면 된다. { module:{ rules:[{ //전 포스팅 babel-loader },{ test:/\.css$/, use:['style-loader','css-loader'] }], } } 위와 같이 하면 된다. test 부분은 ..

webpack 2022.10.25