Frontend

그렇다. 내가 쓰는 this는 대부분 내가 생각하는 그것이 아니었다. js의 this는 함수 호출방식에 따라 결정된다. js의 함수는 호출될 때, 매개변수로 전달되는 인자값 외에 arguments 객체와 this를 암묵적으로 전달받는다. 실행중에는 할당으로 설정할 수 없고, 함수를 호출할 때마다 다를 수 있다. 아래 링크를 참고하여 글을 쓴다. https://poiemaweb.com/js-this this | PoiemaWeb 자바스크립트의 this keyword는 Java와 같은 익숙한 언어의 개념과 달라 개발자에게 혼란을 준다. Java에서의 this는 인스턴스 자신(self)을 가리키는 참조변수이다. this가 객체 자신에 대한 참조 값을 poiemaweb.com 그래서 ES5는 함수가 어떻게 호출..

의존성 관리 : 타입 선언과 @types package.json의 세가지 종류 의존성 dependencies런타임에 필수적인 라이브러리들이며, npm을 통해 설치한다면 dependencies에 들어있는 라이브러리도 함께 설치됨 → 전이 의존성 현재 프로젝트를 실행하는데 필수적인 라이브러리 devDependencies사용자가 해당 프로젝트를 설치하면 해당 라이브러리들은 제외됨 ⇒ typescript 현재 프로젝트를 개발하고 테스트하는데 사용되지만, 런타임에는 필요없는 라이브러리 peerDependencies 런타임에 필요하긴 하지만, 의존성을 직접 관리하지 않는 라이브러리들 → 플러그인 프로젝트에서 공통적으로 고려해야 할 의존성 두가지 ts자체 의존성 ⇒ 팀원들이 모두 같은 버전을 사용해야함 → devDe..

try catch throw new Error를 통해 발생 시킨 예외는 catch를 통해서 처리될 수 있다. throw된 Error는 catch를 만날때 까지 함수 밖으로 던져진다. 만약 catch가 없다면 return되며 프로그램이 종료된다. 이걸 이해한다면, Error를 처리한 후의 동작도 조작할 수 있다. 아래와 같은 코드가 있다고하자. function getError(){ throw new Error("에러"); } function test(){ try{ getError(); }catch(err){ console.log(err); console.log("제대로 꺼짐요"); } } 이러면 Error가 throw된 후에 test함수에서 해당 Error를 잡아서 console로 찍은 후에 제대로 꺼짐요..

비동기의 동기처리와 프로미스 프로미스를 통해 비동기메서드는 동기메서드처럼 값을 반환 할 수 있게 된다. 프로미스 생성 프로미스가 이행되거나 거부될때(fulfilled, rejected), 이벤트 큐에 처리된 처리기들이 호출된다. 프로미스는 아래와 같이 객체 형태로 생성할 수 있다. const promise=new Promise(); 프로미스의 상태와 조작 Promise의 인자들을 통해 Promise의 상태를 바꿀 수 있다. 프로미스는 pending, fulfilled, rejected의 세가지 상태를 가진다. 일단 프로미스가 호출되면 프로미스는 Pending상태이다. new Promise의 인자로 resolve와 reject가 있는데, 이 두 함수를 통해 resolve를 실행하면 fulfilled가 되고..

any 사용하기 가능한 좁은 범위에서 any 사용하기 function f1(){ const x:any = express(); processBar(x); } // 보다는 function f1(){ const x= express(); processBar(x as any); 함수의 반환타입은 정의되어야 함수 내부의 any가 밖으로 빠져나가지 않게 할 수 있다. 객체 내부의 타입오류는 해당 부분에서만 as any를 사용하여 해결하자! @ts-ignore //@ts-ignore를 사용하면 any를 사용하지 않고 해결이 가능함 any를 구체적으로 변형해서 사용하기 any타입을 그대로 정규식이나 함수에 넣는 것은 권장되지 않는다. function getLength(array:any){} // ===refactor f..

타입설계 문서에 타입정보 쓰지 않기 ⇒ 타입은 ts로만 표기 생성은 엄격하게, 사용은 너그럽게 매개변수 타입은 반환타입에 비해 범위가 넓은 경향이 있음 ⇒ 선택속성과 유니온타입 매개변수와 반환타입의 재사용을 위해 기본형태(반환타입)와 느슨한 형태(매개변수타입)을 준비하는 것이 좋음 타입 주변에 null값 배치하기 한 값의 null 여부가 다른 값의 null 여부에 암시적으로 관련되도록 설계하면 안됨 API작성시에는 반환타입을 큰 객체로 만들고 반환타입 자체가 null이거나 null이 아니도록 설계해야함 strictNullChecks → null오류를 정확하게 찾아냄 유니온의 인터페이스보다는 인터페이스의 유니온을 사용 interface Layer{ layout:FIllLayout|LineLayout|Poi..

타입추론 타입 추론이 된다면 명시적 타입 구문이 필요하지 않음 비구조화 할당문은 모든 지역변수의 타입이 추론되도록 함 interface Product={ id:string, name:string, price:number } function logProduct(product:Product){ const {id,name,price}=product; } ⇒ 따라서 타입 정보가 있는 라이브러리에서 콜백함수의 매개변수 타입은 자동으로 추론됨 잉여 속성 체크 타입에 선언된 속성 외에 속성이 있는지 체크함 객체 리터럴에서만 잉여속성 체크가 동작함 따라서 엄격한 객체 리터럴 체크라고도 한다. 함수의 반환에 타입 명시 ⇒ 함수의 반환에 타입을 명시하면, 오류가 정확하게 표기됨 linter의 no-inferrable-ty..

초단기 강수예측앱을 TS로 전환중인데 ReactNative Stack Navigation에서 type오류를 해결하기 위해 이 게시글을 작성한다. createStackNavigator의 type을 보면 ParamListBase를 상속하는 ParamList를 받는 것을 확인할 수 있다. ParamList는 string, object 또는 undefined가 될 수 있다고 한다. 서칭해보니 각 페이지: 받는 props의 형태로 작성해주면 된다고 한다. 나는 이 세가지 페이지를 사용하므로 이렇게 작성해 주었다. app.tsx에는 이렇게 적용해주면 된다. 다른 페이지의 navigation props에 type을 지정하는 일은 StackScreenProps를 사용하는데, 얘는 이렇게 생겼다. 아까만든 ParamLi..

Javascipt를 제대로 이해하기 위해 글을 쓴다. JS 엔진 가장 대중적인 JS엔진은 구글의 V8엔진이다. 크롬과 nodeJS의 엔진이다. JS엔진은 메모리힙과 호출스택으로 구성된다. 메모리힙 메모리힙에는 구조화되지 않는 메모리영역(C언어의 동적할당을 생각하면 될 것 같다.)이 할당된다. 변수와 객체에 대한 모든 메모리 할당이 발생한다. 호출스택 코드가 실행될 때 한줄씩 호출 스택이 쌓이게된다. call stack에는 anonymous(node에선 main)라는 전체 코드를 가지고 있는 것이 call stack에 담기게 된다. JS는 싱글스레드이다. 한번에 하나의 일 밖에 처리할 수 없다. 이말인 즉슨, call stack이 하나라는 것이다. 하나의 함수가 실행되는 중에 다른 일을 할 수 가 없고, ..

tsconfig.json 전반적인 ts설정을 하는 문서 생성 tsc --init 설정 noImplicitAny ⇒ 암시적 any를 허용하지 않음 comilerOption:{ "noImplicitAny" :true, } strictNullChecks ⇒ null이나 undefined를 허용하지 않음 → undefined는 객체가 아닙니다와 같은 문제 해결 가능 comilerOption:{ "strictNullCheck" :true, } noEmitOnError ⇒ 본래, ts는 타입체크와 컴파일이 독립적으로 시행되나, 타입에러가 발생할때 컴파일이 되지 않게 하려면 설정함 → 런타임에는 타입체크가 불가능함 comilerOption:{ "noEmitOnError" :true, } 💡 타입스크립트가 컴파일링되는..