목록type & Javascript (19)
(수근수근)
Narrowing narrowing 타입을 좁혀나간다 이런 의미같다.. 살펴보자 해당 장에서 타입스크립트가 제공하는 (자바스크립트가 제공하는 키워드이기도 하지만..? 이를 타입스크립트는 narrowing용으로 사용도 하는 것 같다.) Type guards들에 대해서 하나씩 알아보자! 우선 첫 번째 예제를 하나 보여주는데 아래와 같다 function padLeft(padding: number | string, input: string) { if (typeof padding === "number") { return " ".repeat(padding) + input; } return padding + input; } 위의 함수를 보면 일단 자바스크립트 코드처럼보인다. 이 것이 요점인데, 타입스크립트는 타입안정..
Everyday Types 배열 Array vs number[] 두개의 차이점을 이야기하자만, 전자는 generic syntax고, 후자는 shortand구문으로 제너릭이 필요한 경우 전자를 사용하면 된다. any 타입스크립트의 틀별한 타입으로, 타입 검사오류의 발생이 되지 않는다. any를 사용하는 경우 추가적인 타입검사 자체가 비활성화되며 보통 굳이 긴타입으로 정의하는 것이 비효율적일 때 사용한다. noImplicitAny 설정을 켜놓는 경우는 any를 사용하는 경우 오류를 발생시킵니다. (설정하기 나름이다…) 변수에 대한 타입 표기 아래와 같다 간단.. const name : string = “Mercury” 함수 함수의 주요목적이 입출력인 것처럼 타입스크립트도 입출력의 타입을 지정할 수 있다. 매..
해당 글은 유데미 클린코드 자바스크립트 강의를 정리한 내용입니다. 🟥 Min - Max ⭐ 최소값과 최대값을 다룬다. function genRandomNumber (min, max) { return Math.floor(Math.random()*(max-min+1)) + min; } const MIN_NUMBER = 20; const MAX_NUMBET = 45; //이름만 봐도 사용의 의미를 알 수 있음. genRandomNumber(MIN_NUMBER, MAX_NUMBET) ⭐최소값 최대값 포함여부를 결정해야한다. (이상/초과) (이하/미만) function isAdult(age){ //19살 초과만 가입을 원할 때이지만, // 포함인지 아닌지 판단하기 힘들다. } 포함여부는 중요하기 때문에, 이상 초..
해당 글은 유데미 클린코드 자바스크립트 강의를 정리한 내용입니다. ⬛ 타입 검사 typeof typeof는 문자열을 반환한다. typeof '문자열' // 'string' typeof true // 'boolean' typeof undefined // 'undefined' typeof 123 // 'number' typeof Symbol() // 'symbol' 🙅♀️ 하지만 typeof 만으로 모든 타입을 검사하는 것은 불가능, Reference Type 불가능 자바스크립트에는 primitive와 reference 타입으로 나눌 수 있는데, 위의 typeof로 타입을 알아낼 수 있는 것들은 대부분 primitive에 속하고 Reference타입에 Array, function, date와 같은 객체들은..
해당 글은 패스트캠퍼스의 김민태의 프론트엔드 아카데미 강의를 수강한 내용을 정리한 것입니다 이벤트시스템이란 브라우저가 제공하는 시스템 사용자가 UI에 언제 반응할지 알 수 없으므로 나온 시스템 보통 addEventListener의 형태로 DOM에 어떤 요청이 들어왔을때 어떤 함수를 호출해줘라고 등록하는 형태를 취한다 이벤트 버블링 버블링은 안쪽의 있는 요소가 클릭이 됐을 때, 발생한 이벤트가 바깥쪽으로 확산되어 나가는 것 아래와 같은 형식의 HTML의 형태를 가지고 있고, 해당 DIV태그 마다 addEventListener를 통해서 클릭이벤트를 시스템을 등록해 놓는다면 let divs = document.querySelectAll('div'); divs.forEach((div) => div.addEven..
해당 글은 패스트캠퍼스의 김민태의 프론트엔드 아카데미 강의를 수강한 내용을 정리한 것입니다. 동기코드란? 앞에 것이 확정되기 전에 뒤에 코드가 실행할수 없는 상태 앞뒤가 종속적으로 묶여있는 상황 따라서 동기코드는 순차적으로 실행될 수 밖에없다. function double(x){ return x*2; } const x = double(100); const y = x; 비동기코드란? 동시에 실행될 수 있는 것을 비동기라고 할 수 있다. function calcValue(a, b) { setTimeout(()=>{ return a + b; },100) } const r = calcValue(10, 20); const z = r; 비동기와 동기를 한번에 진행시키고 싶다면? 콜백이라는 함수를 통해서 결과값이 일..