Develop+

Naver Map api 를 사용해 맵을 클릭 할 때마다 해당 범위를 선택해 표시해주는 프로그램을 구현 중이었다. naver map에서 제공하는 addListener로 생성한 map 객체와 click에 addHex라는 함수를 추가해주는데 이 addHex라는 함수 내에서는 외부 변수인 data와 hexList라는 변수를 참조한다. 컴포넌트가 생성되는 시점에 addEventListener을 해주니 data 에 값이 들어온 이후 시점에도 컴포넌트 생성 당시의 data값을 가지고 온다. 이거 이론으로만 들어봤던 Lexical scope 인 거 같다! Lexical Scope 렉시컬 스코프는 함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정된다. 출처: https://poiemaweb.com/js..

자바스크립트를 타입스크립트로 마이그레이션 중 만난 에러, 타입스크립트에서는 사용할 변수의 타입을 지정해줘야한다. 기존 자바스크립트에서는 porpsType 등 플러그인을 사용해 Props의 타입을 지정해주기도 했지만 선택사항이었다. 타입스크립트에서는 받을 Props와 사용할 State에 대한 인터페이스 제너릭을 사용해 명시해 줄 것을 요구한다. Property '' does not exist on type 'Readonly & Readonly' > 위 링크를 참고하여 에러를 해결하였다. 타입스크립트는 런타임에서 날 에러를 컴파일타임에서 미리 잡아준다. 빨간 줄이 난 부분에 마우스를 올려보면 저러한 에러가 뜬다. 해결방안 Props와 State의 타입을 인터페이스로 선언하여 클래스 extends Compon..

마이그레이션에 들어가기 전 준비사항/알고가야하는 사항들! jsx 가 들어간 문법은 .ts가 아닌 .tsx로 확장자를 변환해줘야한다. 루트에 tsconfig.json 파일을 생성 해줘야 함 (대부분의 설정 오류들이 tsconfig.json을 수정하여 해결 가능하다.) .less 등 모듈을 declare 해서 타입을 지정해줘야지 사용할 수 있다. 오류 목록 Cannot use JSX unless the '--jsx' flag is provided 수정 파일 = ./tsconfig.js "include": [ "./src/**/*.ts" ] tsconfig.json 에서 "./src/**/*"로 설정되어있던 값을 "./src/**/*.ts"로 바꾸어 타입스크립트에서만 적용될 수 있도록 설정하면 에러 해결, 이..