나빈스 코딩

enum은 카테고리처럼 공통분모가 있는 여러 상수들을 한 곳에 모아놓고 쓰고 싶을 때 쓴다.const enum Drink { Coffee = 1.03; Smoothie = 2.06; Ade = 1.1;}const newDrink: Drink = Drink.Coffee;console.log(newDrink); // 1.03for (let i=0; i위 코드는 이넘 값들에 가격을 넣을 것이다.만약 =을 쓰지 않을 경우, 0, 1, 2, 3 이 순서대로 대입된다. 참고로, 이넘 선언할 때 const를 쓰면 트랜스파일 후 코드양이 확연히 줄어든다.

둘 다 객체의 타입을 지정할 수 있다.개발자의 선호에 따라 원하는 걸 사용한다. 다만, 타입에서는 number | string 과 같이 유연하게 타입을 다룰 수 있고, 후술할 제네릭과 유틸리티 타입을 쓸 수도 있다.또한, 타입은 프로퍼티들의 타입을 미리보기 할 수 있다. 인터페이스는 전에 배운 extends 를 사용할 수 있어서 상속할 수 있고, 선언 병합을 사용할 수 있기 때문에 확장에 유연하다.프론트엔드와 백엔드의 프로퍼티 타입 지정을 할 때는 자주 바뀌기 때문에 인터페이스를 쓰면 유용하다.

인터페이스는 객체의 세부 타입을 정해주는 예약어이다.interface Person { name: string; age: number;} 인터페이스는 자바스크립트의 클래스 상속처럼 "상속"을 할 수 있다.주의할 점은 부모가 정한 타입은 바꾸지 못한다는 점이다.interface Hero { name: string; skill: string;}interface IronMan extends Hero { HP: number; // skill: number; (이렇게 쓰면 안돼요!)} 인터페이스는 "인덱스 시그니처"라는 것도 있다.지금까지는 프로퍼티 이름: 타입; 이런 식으로 프로퍼티를 지정했다면,인덱스 시그니처는 인덱스의 타입에 따라 지정해주는 방식이다.인덱스 타입이란, 예를 들어 배열은 a[3], b..

타입스크립트에는 총 10가지 타입이 있다.-- 필수 타입 --1. string2. boolean3. number-- 널 타입 --4. null (개발자가 일부러 비울 때 씀)5. undefined (정의되지 않았을 때 씀)-- 객체 타입 --6. object7. Array8. tuple (길이와 각각의 타입이 정해진 Array)9. function-- 그외 --10. any (모든타입 다가능) 선언 방식은 아래와 같다.const 문자열: string = '안녕';const 불리언: boolean = true;const 숫자: number = 3;const 비어있음: null = null;const 정의되지않음: undefined;const 객체: object = { name: '나빈', age: 22 }..

브라우저는 타입스크립트를 해석할 수 없다.그래서 타입스크립트를 브라우저가 이해하는 자바스크립트로 바꾸는 트랜스파일 과정이 필요하다. 컴파일을 하려면 우선npm init을 입력하여 npm 설정파일(ex. package.json)을 만들고,npm i typescript명령어를 입력해서 타입스크립트를 설치해야한다.그리고node ./node_modules/typescript/bin/tsc "실행하고자하는 파일 이름"을 명령하면 컴파일 된다.여기서 tsc는 타입스크립트 컴파일러이다.

자바스크립트의 유연성은 장점이지만 치명적인 단점이 되기도 한다.타입스크립트는 유연한 자바스크립트에 제약을 주어서 단점을 보완하는, 자바스크립트의 확장판이다. 이걸 쓰는 이유는 1. 사람의 실수를 줄이고, 2. 빠르게 개발할 수 있기 때문이다. 우선 타입스크립트는 어떻게 사람의 실수를 줄일까?아래 예시를 보자.howManyApples라는 함수가 있다.타입 상관없이 2개의 인자를 받아와서 둘을 더하고 출력한다.6번째 줄과 같이, 모든 개발자들이 처음 만든 개발자의 의도에 맞게 사용한다면 타입스크립트는 필요없다.하지만 우리는 사람이기 때문에 실수를 한다.7번째 줄은 숫자와 문자열을 인자로 넘긴다.결과는 "숫자와 문자열을 더할 경우, 숫자를 문자열로 바꿔서 더한다" 이므로 132라는 이상한 결과가 나온다.이런 ..

반응은 빨리하고 싶지만 화면 랜더링처럼 무거운 연산은 천천히 하고 싶을 때 쓴다.무거운 작업을 지연시켜서 사용자 경험을 부드럽게 해준다.

둘의 차이는 아래와 같이 생각해볼 수 있다.친구한테 돈을 빌렸다. 계좌로 송금해줄 것인가? 현금으로 줄 것인가?계좌로 송금하면 "기록"이 남기 때문에, 돈을 준 걸 증명할 수 있다.현금으로 주면 증명을 하지 못하지만 친구를 믿으면 계좌송금보다 편리하다. (19년도에 나온 예시라 계좌송금이 복잡했을 때였나보다.) 정답은 없다.나에 맞게, 팀에 맞게 정하면 된다.편할대로 쓰다보니 기준이 없는 것 같아 나는 나름대로 기준을 새웠다.나의 경우에는 하나만 내보내는 파일은 default를 쓰고, 여러개를 내보내는 파일은 named를 쓴다. https://medium.com/dailyjs/javascript-module-cheatsheet-7bd474f1d829

Position요소를 자유자재로 움직이거나, 위에 덧댈 수 있기 때문에 position을 쓴다.static(초깃값), relative, absolute, fixed, sticky로 총 5개로 요소의 상태를 바꿀 수 있다.staticstatic은 요소의 위치를 정해줘도(left,right,top,bottom) 본인 자리에서 움직이지 않는다.relativerelative는 본인 자리의 왼쪽 위를 기준점으로 해서 위치를 정해줄 수 있다. 다른 요소들은 영향받지 않는다.absoluteabsolute는 브라우저의 왼쪽 위를 기준점으로 해서 위치를 정해준다. 보통은 부모를 relative로 둬서 기준점을 부모요소의 왼위로 두고 쓴다. 다른 요소들은 그 자리를 차지하고, 자기자신은 블록박스의 성질인 가로를 최대로하는..

"나의 첫 HTML&CSS 웹 디자인" 이라는 책을 공부하며 정리한 글입니다.FlexboxFlexbox는 가로로 나열하고 싶을 때 쓴다.(Flutter로는 Row나 Wrap 위젯)Flexbox 사용법1. 가로로 늘어놓고 싶은 요소의 부모 요소를 찾는다.2. 부모 요소에 display:flex;를 지정한다.기본축?Flexbox는 가로로 나열한다.그렇다면 Flexbox의 기본축은 가로일까 세로일까?당연히 가로이다.가로로 막대기를 요소들에 끼워넣고, 그 선을 따라 요소들이 움직이는 이미지를 떠올리자.교차축은 세로이다.세로로 막대기를 요소들에 각각 끼워넣고, 마찬가지로 움직이면 된다.Flexbox를 만들면 자식요소의 크기는?기본적으로 최소 크기로 바뀐다.flex-basis: 920px; 자식요소에 이렇게 지정하..