개발/JS5 [Typescript] array, object 를 literal 타입으로 변환하기 타입스크립트를 사용하다보면 literal 타입이 유용한 경우가 많습니다. 이번 포스팅에서는 제가 타입스크립트 개발을 하면서 필요성을 느꼈던 리터럴 타입 변환에 대해서 다루어 보겠습니다. 명확하지 않은 배열의 타입 제가 좋아하는 야구를 예로 들어보겠습니다. 야구의 외야에는 세 개의 포지션이 있고, 위치에 따라서 좌익수, 중견수, 우익수라고 합니다. const outfielders = ['left', 'center', 'right']; // 타입 추론 결과: const outfielders: string[] 모든 외야수 문자열을 포함하는 outfielders 배열 하나를 선언했습니다. 이렇게 작성하면 이 배열의 타입은 string[]으로 추론됩니다. 우리의 목적은 외야수 배열을 표현하고 싶었는데, 이렇게 추.. 2021. 9. 25. 새로고침 시에도 redux store 유지하기 브라우저가 새로고침 될 시, 런타임중에 변경된 redux store는 초기화되어 버립니다. 이를 해결하기 위해서 만들어진 유명한 패키지는 redux-persist가 있습니다. 다만 저는 타입스크립트 리액트 앱에서 적용시켰을 때 오류를 겪어서 저장소를 살펴보았더니 해당 저장소는 2019년 이후로는 관리가 되지 않고 있었습니다. 저를 포함한 대부분의 경우 크고 거창한 기능이 필요하기보다는 단순한 데이터 유지 기능만이 필요하므로, 직접 구현하는 것도 좋은 해결책이라고 생각이 들어서 직접 구현해보고자 합니다. 새로고침 시에도 데이터를 잃어버리지 않기 위해서는 저장소를 사용할 필요가 있는데, localStorage나 sessionStorage를 사용할 수 있습니다. 이번에는 sessionStorage를 활용해 보.. 2021. 8. 25. [Typescript] --downlevelIteration 에 대해서 for-of 구문이나 배열에 대한 Spread operator 사용시에 downlevelIteration 플래그를 사용하라는 메시지가 출력된다. tsconfig의 target을 확인해 보면 es6 이전일 것이다. 이 문법들은 es6부터 지원되기 때문이다. Type is not an array type or a string type. Use compiler option '--downlevelIteration' to allow iterating of iterators.ts(2569) downlevelIteration 옵션은 반복에 대한 (iteration) 타입스크립트 코드를 비교적 오래된 (down level) 자바스크립트 런타임에서도 문제 없이 수행되도록 컴파일하는 옵션이다. 만약 위에서 언급한 문법들을.. 2021. 8. 9. [Javascript] var, let, const 의 호이스팅과 스코프 자바스크립트를 쓰다보면 크게 세 가지의 변수 선언을 하게 된다. 바로 var, let, const이다. 차이점을 표로 만들어 비교하면 다음과 같다. var let const 중복 선언 O X X 스코프 함수 레벨 스코프 블록 레벨 스코프 블록 레벨 스코프 호이스팅 O O O 호이스팅이란, 자바스크립트 인터프리터가 코드 실행을 위해 스코프 안의 선언들을 모두 스코프 최상단으로 끌어 올리는 것을 말한다. 일반적으로 var를 사용했을 때만 호이스팅이 발생한다고 착각하기 쉬운데, 사실 내부적으로 세 형태 모두 다 호이스팅이 일어난다. var의 경우 선언과 undefined로의 초기화가 동시에 일어난다. 다만 let과 const로 생성된 변수의 경우 이 시점에서 초기화 과정이 일어나지 않고, 이때를 TDZ (Te.. 2021. 5. 31. Javascript는 call by value일까 call by reference일까? 2022. 06. 추가) 공부를 더 하고 보니 이 글은 틀린 내용이 포함되어 있습니다. 정확히 말하자면 primitive, 참조 타입 모두 데이터에 대한 주소 값을 저장하는 것이 맞습니다. 그러나 그 데이터가 객체이냐, 아니면 실제 값이냐의 차이인 것으로 보아야 합니다. 추후 해당 포스팅을 수정하도록 하겠습니다. 결론부터 이야기하면 정답은 바로 call by value 이다. 흔히들 기본 타입은 call by value, 참조 타입 (객체 타입)은 call by reference로 동작한다고 잘못 알고있다. 그러나 자바스크립트는 항상 call by value로 동작한다. stackoverflow에서 좋은 예제 코드를 찾았다. function changeStuff(a, b, c) { a = a * 10; .. 2021. 5. 21. 이전 1 다음
