분류 전체보기 43

[JavaScript] 배열(length, push, unshift, pop, shift ...)

객체의 유형: 배열, 함수, 그 외 객체 배열 :다양한 값을 나열 하나씩 선언하지 않고 한 번에 선언할 수 있다 const fruits = ['사과', '오렌지', '배', '딸기']; 각각의 값은 배열 안에 든 요소(element)라고 말한다 * 접근하는 법(인덱스로 호출) 📌 프로그래밍에서 자릿수를 인덱스(index)라고 한다 console.log(fruits[0]); 👉 사과 console.log(fruits[1]); 👉 오렌지 console.log(fruits[2]); 👉 배 console.log(fruits[3]); 👉 딸기 배열 안에 다른 배열이나 변수를 넣을 수 있다 const arrayOfArray = [[1, 2, 3], [4, 5]]; 👉 이차원 배열 arrayOfArray[0]; 👉 ..

JavaScript 2022.04.24

[React] JSX

JavaScript에 XML을 추가한 확장 문법 📌 XML ( eXtensible Markup Language) 다른 목적의 마크업 언어를 만드는 데 사용되는 다목적 마크업 언어 JavaScript 내부에 마크업 코드를 작성할 수 있다 const element = Hello, world! 공식적인 JavaScript 문법이 아니기 때문에, Babel을 사용하여 JavaScript 형태의 코드로 변환하는 과정이 필요하다 const element = React.createElement( 'h1', 👈 //tag null, 👈 //className이나 id, attribute 등 'Hello, world!' 👈 //element ) React에서 JSX 사용은 필수가 아니지만, 가독성과 익숙함, 높은 활용(재..

React 2022.03.04

[TypeScript] Never

함수 return 값에 붙일 수 있는 타입으로, 1. return 값이 없어야 하고, 2. 함수 실행이 끝나지 않아야 한다(=endpoint가 없어야 한다) function func() :never{ while ( true ) { console.log(123) } } //or function func() :never{ throw new Error('에러메세지') } * while 은 소괄호의 조건식이 true일 경우 계속 내부 코드를 실행한다 👉 무한 실행 * throw new Error( )는 강제로 에러를 발생시킨다 함수 내부에서 코드 실행이 끝나는 함수는 never를 붙일 수 없다 function func(){ console.log(123) } * 모든 함수는 return undefined 를 가지..

TypeScript 2022.03.03

[TypeScript] Narrowing ++

*narrowing은 모호한 타입(union type)을 가지고 있을 때, 추가적인 타입 체크를 이용해 타입을 작은 범위로 좁혀주는 것을 뜻한다 function sum(x :number | string) { if(typeof x === 'string') { return x + '1' } else { return x + 1 } } sum(123) narrowing 할 때 주로 typeof를 사용하는데, 이것으로 부족할 경우가 생기게 된다 1. && 연산자 사용 undefined 또는 null 타입 체크 시 typeof를 사용하면 코드가 길어지는데, function func(x: string | undefined) { if(typeof x === 'string') { } else { } } && 연산자를 사..

TypeScript 2022.03.03

[TypeScript] Rest, Destructuring Type

1. rest 파라미터 타입 지정 : rest 파라미터는 항상 array 안에 담겨오기 때문에, 타입도 array와 똑같이 지정 해주면 된다 ...a: number[ ] ...a: (number | string)[ ] function num(...a: number[]) { 👈 console.log(a); } num(1,5,3,5,6,6) //string, number 타입을 동시에 지정하고 싶을 때는 Union type 사용 function num(...a: (number | string)[]) { 👈 console.log(a); } num(1,5,3,5,6,'안녕') ✅ rest는 spread와 다르다 ...spread는 array, object 자료 왼쪽에, ...rest는 함수 선언시 소괄호 안에서..

TypeScript 2022.02.25

[TypeScript] Strict, HTML 조작할 때 주의점

✅ tsconfing.json 에서 엄격한 유형 검사 설정하기 { "compilerOptions": { "target": "es5", "module": "commonjs", "strict": true 👈 //모든 엄격한 유형 검사 옵션 활성화 } } *엄격한 유형 검사 옵션 "noImplicitAny": true //명시적이지 않은 'any' 유형으로 표현식 및 선언 사용 시 오류 발생 "strictNullChecks": true //엄격한 null 검사 사용 "strictFunctionTypes": true //엄격한 함수 유형 검사 사용 "strictBindCallApply": true //엄격한 'bind', 'call', 'apply' 함수 메서드 사용 "strictPropertyInitializ..

TypeScript 2022.02.19

[TypeScript] Function, Method alias Types

1. function alias types 함수 타입도 type alias로 저장해서 쓸 수 있다 : 화살표 함수를 사용해야 한다 type 변수명 = (파라미터 타입) => 타입 type Func = (x: string) => number 함수 type alias를 사용하려면 함수 표현식을 사용해야 한다 *함수선언식으로는 alias를 사용할 수 없다 ❌ function func: Func () {} //함수 선언식으로는 alias를 사용할 수 없고, //표현식을 통해서만 가능하다 ⭕ let func: Func = function (x) { return 10 } 2. method alias types 📌 object 에도 함수가 들어갈 수 있다 let member = { name: 'choi', plus(..

TypeScript 2022.02.18

[TypeScript] Literal Type

특정 글자나 숫자 같은 정확한 값을 지정할 수 있다 더 엄격한 타입 지정이 가능하다 // let last: string let last: 'choi' "a에는 choi 만 들어올 수 있다" 라는 뜻이다 let last: 'choi' last = 'kim' //에러 발생 📌 리터럴 타입의 자동 완성 기능 함수에서 강점을 보이는데, function hi(a: 'hello'): 1 | 0{ return 1 } hi('hello') 지정 값만 파라미터로 넣을 수 있고, 지정 값만 return 할 수 있게 해 준다 🟥 문제점 let member = { name: 'kim' } function mem(x: 'kim') { } mem(member.name) //에러 발생 member.name은 string타입이고, ..

TypeScript 2022.02.17

[TypeScript] Type Alias, readonly, extend

1. Type Alias 복잡한 타입을 간단하게, 재사용하기 위해 타입을 변수에 담는 것을 뜻한다 type 변수명 = 타입 type A = string | number | undefined 👈 let a: A //object의 경우, 자주 활용된다 type Member = { name : string, age : number } 👈 let member: Member = {name: 'kim', age: 20} ✅ 타입 변수 명은 대문자로 시작해야 한다(일반 변수와 차별을 두기 위해) 2. readonly 특정 속성을 변경할 수 없게 한다 type Myname = { readonly name: string 👈 } const myname: Myname = { name : 'sung2' } myname.nam..

TypeScript 2022.02.16