성2

유니온 타입은 새로운 타입을 만드는 것이기 때문에 수학 연산이 불가능하다 function sum(x :number | string) { return x + 1 } sum(123) //에러 발생 string + 1(가능) number + 1(가능) string | number + 1(불가능) 에러가 나지 않게 하기 위해서는 1. Narrowing을 해주거나, 2. Assert를 해주면 된다 1. Narrowing 애매한 타입(union type)을 가지고 있을 때, 추가적인 타입 체크나 할당을 이용해 변수의 타입을 작은 범위로 좁혀주는 것(정해주는 것)을 뜻한다 타입이 확실하지 않을 때 생기는 부작용을 막기 위한 장치 function sum(x :number | string) { if(typeof x ==..

함수는 두 군데 타입 지정이 가능하다 함수명(파라미터: 타입): 타입 function multi(x: number) :number { return x * 2 } multi(3) multi('3') //에러 발생 - 파라미터에 타입을 지정하면 필수 파라미터가 된다 function multi(x: number) :number { return x * 2 } multi() //에러 발생 파라미터를 선택 사항으로 두고 싶을 경우에는 파리미터?: 타입을 사용한다 function multi(x?: number) :number { return x * 2 } multi() ✅ ? 의 정확한 뜻은 | undefined와 같다 x?: number = x: number | undefined void Type : return할..

1. Union Type : 하나의 변수에 여러 타입을 지정할 수 있다 변수명: 타입 | 타입 OR 연산자와 유사하다 = A 또는 B 다 let member: number | string = 123 //or let member: (number | string) = 123 - number에는 숫자나 문자열 타입 모두 올 수 있다 - 값을 할당하는 순간 string 또는 number 중 하나로 타입이 결정된다 1-1. Array 괄호 필수 let member: (number | string)[] = [1, "hi", 3] 괄호가 없으면, let member: number | string[] = [1, "hi", 3] number 또는 [string array] 라는 뜻이 된다 1-2. Object let m..

타입스크립트는 다양한 기본 타입(12가지)을 제공한다 : String, Number, Boolean, Null, Undefined, Array, Object, Any, Void, Never, Tuple, Enum 1. 변수에 타입(String, Number, Boolean, Null, Undefined) 지정 변수명: 타입 let str: string = 'choi' let age: number = 20 let cute: boolean = true let money: null = null let food: undefined = undefined 변수 last의 type을 string으로 지정했으며, 숫자 할당 시 에러가 난다 : 다른 형식은 들어갈 수 없으며, string만 할당할 수 있다 2. 타입이 ..

자바스크립트를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어 👉 Javascript + Type = TypeScript 왜 타입스크립트를 사용해야 하는가? 1. 에러 사전 방지 : 자유도가 높은 자바스크립트는 오류를 찾아내는 것이 쉽지가 않다. 타입스크립트는 코드의 타입을 명시하고, 목적에 맞지 않는 타입의 변수나 함수들이 에러를 발생시키기 때문에 개발 단계에서 오류를 찾을 수 있다는 큰 장점이 있다. 2. 코드 자동 완성 + 가이드 : IDE를 적극적으로 활용할 수 있기 때문에 생산성이 높아진다. 함수를 사용할 때 해당 파일을 직접 열어보지 않고도 어떤 props 또는 파라미터를 넣어줘야 하는지 알 수 있다 *IDE(Integrated Development Environment): 통합 개발 환경으..

새로운 display 속성 block 요소의 성질을 가지며, 부모의 속성을 통해 자식을 컨트롤한다 부모 : flex-container 자식: flex-item flex는 자신의 직계한테만 영향을 미친다 display: flex; 전체 display: inline-flex; 콘텐츠만 flex-direction 정렬 방향 결정 .container { display: flex; flex-direction: row; flex-direction: row-reverse; flex-direction: column; flex-direction: column-reverse; } justify-content 축을 기준으로 배열의 위치를 조정하거나 아이템 간의 간격을 설정할 수 있다 .container { display: ..

next에서는 404 페이지를 기본적으로 제공해준다 자주 사용되는 404 페이지를 요청마다 렌더링한다면 비용 증가, 느린 경험 등의 이유가 있기 때문이다 Pages에 404.js를 생성 : 404 에러가 발생했을 때 자동으로 404.js를 불러온다 : 정적 생성 //공식문서 예제 export default function Custom404() { return 404 - Page Not Found } 500 에러를 처리할 때도 동일하게 Pages에 500.js를 생성할 수 있다 : 정적 생성되지만, 정적으로 최적화 되지는 않는다 404.js, 500.js를 사용한다면 간단하게 작업을 마칠 수 있는 장점이 있지만, 스타일적인 한계가 존재한다 이러한 경우 Pages에 _error.js를 생성한다 //공식문서 ..

id=100, class=10, tag=1 : class가 10개여도 id보다 우선순위가 낮다 물론, 자신을 직접 선택하는 선택자가 가장 우선된다 /* 우선순위: 110 */ #one .two { color: red; } /* 우선순위: 10 */ .two { color: blue; } /* 우선순위: 1 */ h2 { color: green; } !important > id > class > tag !important : 어떤 경우에나 이것이 우선 적용 되도록 하고 싶을 때 사용 h1 { color: blue !important; } ✅ !important는 최대한 자제하자 : 가중치를 무시하기 때문이다

next에서 /movies/all, /movies 등의 url을 만들고 싶을때는, - pages에 movies 폴더를 생성한 후, 그 안에 all.js 파일을 만든다 - movies 폴더 안에 index.js 파일을 생성한다 (pages에 movies를 만들어도 되지만, /movies/all을 포함할 수 없다) next는 폴더 경로를 통해 페이지를 처리한다는 것을 알 수 있다. 동적 라우팅 기능을 사용한다면 동적인 경로 또한 처리할 수 있다 Dynamic Routes react에서는 path 속성에 /movies/:id 라는 값을 넣어주면 자동으로 동적 라우팅이 설정된다 next에서는 pages에서 /movies/[id], 대괄호로 감싸주는 것으로 동적 라우팅을 할 수 있다 ✅ 변수를 포함하는 Dynam..

요소의 콘텐츠가 너무 커다랄 경우 요소를 어떻게 처리할 지 지정 overflow: hidden visible; overflow는 두개의 속성값을 가지지만, 하나로 축약해서 쓸 수 있다 visible overflow 속성의 기본 값으로 콘텐츠를 자르지 않는다 hidden 콘텐츠를 요소의 크기만큼 맞추기 위해 잘라낸다 scroll 콘텐츠를 요소의 크기만큼 맞추기 위해 잘라내는 대신, 잘려진 부분을 확인 할 수 있도록 스크롤 바 제공