투명한유리구슬처럼보이지만 투명한유리구슬처럼보이지만

interceptor가 필요한 이유 API를 호출하는 부분이 많다면 어떠한 이유로 호출하는 서버가 변경되었을 때 모두 변경을 해줘야하는 번거로움이 있다. 또한 console.log로 어떤 로깅을 할때 전부 다 코드를 넣어줘야 해서 엄청난 인적 리소스 낭비가 된다. interceptor란? 흐름을 가로채서 어떠한 코드 상의 관려를 할 수 있게 한다. 요청이 처리되기 전 , 응답이 성공, 실패가 처리되기전이 interceptor이다. 1. 요청 헤더 추가 2. 인증 관리 3. 로그 관련 로직 삽입 4. 에러 핸들링 실습 src폴더 -> axios폴더 -> api.ts import axios from 'axios' const instance = axios.create({ baseURL: process.env...

이벤트 전파(Event Phase) span 태그에 클릭 이벤트가 발생하면 위 그림처럼 이벤트의 흐름은 최상위 부모부터 타겟요소까지 이벤트가 타고 올라가서 span태그에 이벤트가 실행이 되고 다시 부모요소를 타고 내려가면서 버블링이 발생한다. addEventListener은 기본적으로 버블링으로 작동하게 되는데 3번째 인자로 불리언값을 true를 주게되면 캡쳐링으로 작동하게 된다. 이렇게 해서 span태그를 클릭하면 나머지 태그들에도 클릭 이벤트가 발생한다. 이벤트전파를 막고싶을때 event객체에서 stopPropagation이라는 메서드를 이용 이렇게 하면 호출한 span태그 이후로는 이벤트가 발생이 안되는걸 알 수 있다.

화살표 함수란? 일반 function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선안할 수 있다. 화살표 함수와 일반 함수의 차이 1. this 일반함수 일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 떄 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다. 화살표함수 화살표 함수는 함수를 선언할 떄 this에 바인딩할 객체가 정적으로 결정된다. 화살표 함수의 this는 언제나 상위 스코프의 this를 가리킨다. 또한 call, apply, bind 메소드를 사용하여 this를 변경할 수 없다. 2. 생성자 함수로 사용가능 여부 일반함수는 생성자 함수로 사용할 수 있으나 화살표 함수는 prototyp..

내부 슬롯과 내부 메서드 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript사양에서 사용하는 의사 프로퍼티와 의사 메서드이며 이중 대괄호([[...]])로 감싼 이름들이 내부 슬롯과 내부 메서드다. 자바스크립트 엔진에서 실제로 동작하지만 자바스크립트는 내부 슬롯과 내부 메서드에 직접적으로 접근하거나 호출할 수 있는 방법을 제공하지 않는다. 단, [[Prototype]]이라는 내부슬롯을 갖는데, 직접 접근할 수 없지만 내부슬롯의 경우 __proto__를 통해 간접적으로 접근할 수 있다. const o = {}; // 내부 슬롯은 자바스크립트 엔진의 내부 로직이므로 직접 접근할 수 없다. o.[[Prototype]] // -> Uncaught SyntaxError: Unexpected to..

Partial 타입 분석 interface Profile { name: string, age:number, married:boolean, } const uri:Profile = { name:'uri', age:29, married:false } const newUri:Profile = { name:'uri', age:29, } 이렇게 이름과 나이는 동일하게 들어가는데 newUri에 결혼유무가 들어가지 않으면 에러가 발생한다. 이걸 인터페이스를 또 만들기에는 이름과 나이가 중복이기 때문에 좋지 않다. const newUri:Partial = { name:'uri', age:29, } Partial을 사용해주면 다 옵셔널 처리가되어 에러가 사라지게된다. Partial을 풀어서 코드로 보면 아래 코드로 해석할..

forEach, map 제네릭 분석 forEach interface Array{ forEach(callbackfn:(value: T, index:number,array:T[])=>ConstrainDOMString, thisArg?:any):void; } [1,2,3].forEach((item)=>{console.log(item);}) 1. 자바스크립트로만 생각했을때 아래 코드는 짐작해봤을때 콘솔에 1,2,3 이 찍힌다. item이 number로 추론되어있다. 이처럼 string number, boolean을 다추론이 정상적으로 된다. 이렇게 자동으로 추론을 잘 하는 이유는 위 코드에서 value = item array:T[] = [true,false,true] interface Array{ forEach..

{}와 object // {}, Object 모든 타입(null과 undefined 제외) const x: {} = 'hello'; const y: Object = 'hi' // 실제 객체 const xx: object = 'hi'; const yy: object = {hello : 'world'}; // 실제 사용할땐 object지양, interface, type, class 사용 const z: unknown = 'hi' //unknown = {} | null | undefined if(z){ z; } {}, Object는 객체가 아닌 모든 타입을 가리킨다. 객체는 소문자로 object인데 실제 사용할 땐 object는 지양하고 interface, type, class를 사용하는게 좋다. unknow..

타입 에일리어스와 인터페이스의 상속(extends) type Animal = {breath:true} type Poyouryu = {breed:true} type Human = {think:true} 이렇게 되어있는걸 type Animal = {breath:true} type Poyouryu = Animal & {breed:true} type Human = Poyouryu & {think:true} 상속으로 코드를 짤 수 있다. type Animal = {breath:true} type Poyouryu = Animal & {breed:true} type Human = Poyouryu & {think:true} const uri : Human = {breath:true, breed: true, think:..