DH의 개발 공부로그 DH의 개발 공부로그

타입스크립트 Tuple Tuple은 array 생성시 사용합니다. 정해진 갯수의 요소를 가지는 배열을 생성하고 원하는 타입의 순서를 지정하여, 해당 위치에 해당 타입이 필요 합니다. const array2 : [string, number, boolean] = ['shape', 1, true]; Undefined, Null let un : undefined = undefined; // undefined는 선택적 타입 let nu : null = null; Any 타입스크립트에서 Any는 어떠한 타입이든 허용을 하는 타입으로 특정 값으로 인하여 타입 검사 오류가 발생하는 것을 원하지 않을 때 사용할 수 있습니다. 즉 , 이말은 타입의 안정성이 지켜지지 않는 것이고 타입스크립트에서 빠져나온다고 볼 수도 있습니..

기본 문법 변수명 : 타입명 변수를 선언할 때 타입을 지정해 줄 수 있습니다. // 구문 let 변수명 : 타입명 // 예시 // 문자열 let str : string = 'shape' // 숫자 let num : number = 20 // 배열 let arr1 : string[] = ['a', 'b', 'c', 'd']; let arr2 : number[] = [1, 2, 3, 4]; let arr3: [string, number] = ["shape", 182]; // boolean let isTrue : boolean = true; // 객체 const player : { name : string, age : number } = { name : 'shape', age : 20 }; Optinal Ty..

타입스크립트를 사용하는 이유 간단하게 말하면 안정성을 올려주기 때문입니다. 코드에 타입을 지정해줌으로 인하여 버그가 발생할 일을 낮추고, 런타임에러의 발생을 미리 방지해주며, 생산성을 올려주기 위해서 입니다. 타입스크립트 설치 💻 일반 HTML CSS JS 웹개발 시 0. node.js 및 VScode 에디터 설치 우선 node.js가 설치가 되어있어야 합니다. (최신버전) 1. 터미널 오픈 후 Type Script 설치 > npm i -g typescript 2. 폴더 및 파일 생성 코드를 짤 폴더를 만들고, 폴더에 .ts로 끝나는 파일을 만들어줍니다. 그리고 .ts파일에 코드를 작성해주면 됩니다. 3. tsconfig.json 생성 여기서 웹브라우저는 .ts 파일 자체는 알지 못하기 때문에 tscon..

요소의 위치 찾기! 이번에 알아 볼 메서드는 바로 문자열 또는 배열, 즉 String 타입과 Array타입에서 특정 문자의 위치(index)를 찾아주는 함수입니다. indexOf() indexOf()는 문자열 또는 배열에서 지정된 요소를 앞에서부터 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환합니다. String.prototype.indexOf() 구문 str.indexOf(searchValue[, fromIndex]) 매개변수 searchValue 찾으려는 문자열 fromIndex 문자열을 찾기 시작하는 위치, 인덱스 값. 기본값은 0이며 length보다 높은 숫자면 -1 반환 예시 const str = 'hello world' // length: 11 consol..

자바스크립트에서 this를 활용하여 작업을 할 수가 있는데, this가 의미하는 것이 각각의 상황에서 다 다르므로 이해를 잘 하는것이 중요하고, 헷갈릴때는 console.log()를 활용하는 것이 좋습니다. 그러면 this에 대해 알아보겠습니다. 구문 this 브라우저의 콘솔창에 this를 쳐보면 this // window {} 이렇게 this는 window를 의미합니다. 또 함수에서 this가 의미하는것은 function a() { console.log(this) } a() // window {} 역시나 window 입니다. 이렇듯 this는 기본적으로 window를 의미합니다. 그렇다면 this가 다른 것을 의미할 때의 상황을 알아보겠습니다. 우선 객체 안에서의 this입니다. let obj = { ..

reduce() 란? reduce()는 배열의 각 요소를 순회하면서 주어진 함수를 실행하여 값을 누적해 하나의 결과값으로 반환하는 메서드입니다. 구문 arr.reduce(callback[, initialValue]) callback 콜백함수에는 다음 4가지의 인수를 받을 수 있습니다. 누적 값 (accumulator) 현재 값 (currentValue) 현재 인덱스 (currentIndex) 원본 배열 (array) initialValue callback함수의 초기값으로, 따로 초기값을 제공하지 않으면 배열의 첫번째 요소를 사용합니다. 예시 쉽게 이해해보면 이런 형태의 구조를 갖는다고 볼 수 있습니다. 배열.reduce((누적값, 현재값) => { return 새로운 누적값 }, 초기값) ### 1. 배..

sort() 함수 sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환하는 함수입니다. 기본 정렬 순서는 문자열의 유니코드를 따라 정렬합니다. 구문 array.sort([compareFunction]) ompareFunction은 매개변수로 정렬순서를 정의하는 함수입니다. 또한 sort()는 배열의 순서를 정렬하고 복사본을 반환하는 것이 아닌, 원 배열을 정렬하고 그 원 배열을 반환하기 때문에 이점은 유의해야 합니다. 정렬방법 1. 오름차순 const array = [2, 4, 5, 8, 30, 1]; array.sort( (a, b) => a - b ); console.log(array); // output : [1, 2, 4, 5, 8, 30] 간단하게 정렬하는 방법을 설명하자..

프론트엔드 개발자가 되기위해 우선 완벽하지는 않아도 기초를 탄탄하게 하고 싶어서, ZeroCho님의 강의를 보면서 JavaScript 공부를 다시 시작하였습니다. 이번에 새롭게 배운 팁?이 있다면 if문의 중첩으로 인한 코드의 복잡성을 제거해주는 방법에 대해 공부를 하였습니다. if문 중첩제거 방법 if문 다음에 나오는 공통으로 진행되는 코드를 true와 false 각각의 분기점 내부에 넣는다. 분기점을 비교하여 그중 짧은 절차의 코드 먼저 실행이 되도록 if문을 작성한다. 짧은 절차가 끝나면 return이나 break로 중단한다. 이제 else를 제거한다. (이때 중첩하나가 제거간 됨) 이 방식으로 하면 if문의 중첩을 제거할 수 가 있다. 예시 ex) function test1() { let resu..