Web Front End

[Typescript Challenges] First of Array, Length of Tuple, Exclude

Typescript Challenges에 있는 타입스크립트 문제를 easy 단계부터 풀어 보려고 합니다. easy에서는 3문제씩 풀이와 함께 업로드합니다. First of Array https://github.com/type-challenges/type-challenges/blob/master/questions/14-easy-first/README.md 문제: 배열을 generic 타입으로 입력했을 때 해당 배열의 첫 번째 요소 타입을 구현하는 문제. 1) 우선 대부분의 경우에는 T[0]로 하게 되면 배열 자신의 값으로 되기 때문에 타입이 지정이 됩니다. 2) 고려해야 할 부분은 빈 배열을 넣었을 경우입니다. 타입스크립트에서도 삼항연산자를 쓸 수 있습니다. 조건은 extends 키워드를 한정적으로 부여해..

[Vite] Webpack 대체 가능할까? Vite + React 설정하기

vite는 사전 번들링은 esbuild, 번들링 시에는 rollup을 기반으로 속도 개선과 module, ssr 지원 등 모던한 개발 구성을 갖출 수 있는 빌드 도구입니다. 차세대 프런트엔드 개발 툴이라고 소개하는 vite로 React 환경을 구성해 보고 장단점과 개인 의견까지 덧붙여 보겠습니다. 개요 구성 및 주의점 장단점 결론 1. 구성 및 주의점 react, scss, webpack, babel, typescript로 구성되어 있던 것을 vite로 재구성하였습니다. 1) index.html은 기본적으로 프로젝트의 root 경로에 있어야 합니다. root 경로가 아닌 다른 곳에 위치하고 싶다면 root 옵션에 해당 경로를 추가해 주어야 합니다. // vue.config.js export default..

[Typescript Challenges] Pick, Readonly, Tuple to Object

Typescript Challenges에 있는 타입스크립트 문제를 easy 단계부터 풀어 보려고 합니다. easy에서는 3문제씩 풀이와 함께 업로드합니다. Pick https://github.com/type-challenges/type-challenges/blob/master/questions/4-easy-pick/README.md 문제: Pick와 같은 결과가 나오도록 타입스크립트로 구현하기 1) K가 우선 interface의 key 값을 기반으로 하는 타입이어야 한다. 따라서 keyof를 활용해 두 번째 제네릭 값을 구성한다. K extends keyof T 2) keyof 결과(=K)가 union이기 때문에 K 중 하나를 key 값으로 두고, value는 해당 key 값에 대한 value가 되게 하..

[함수형 자바스크립트] Symbol, Iterator, Generator

자바스크립트에서 함수형 프로그래밍(FP)을 하기 위한 기본 개념인 Symbol, Iterator, Generator에 대해 간단히 알아보도록 하겠습니다. Symbol() Symbol() 함수로부터 반환되는 모든 심볼 값은 고유합니다. 따라서 어떠한 객체의 키가 될 수 있습니다. Array, Map, Set 을 생성하면 고유한 Symbol.iterator 을 가지고 있게 됩니다. 일반 객체({}, object)는 Symbol.iterator를 가지고 있지 않기 때문에 iterable하지 않은 값입니다. Symbol.iterator를 통해 값을 하나씩 실행할 수 있게 됩니다. Iterator, Iterable 아래와 같이 Iterator를 만들게 되면 next() 메소드를 통해 value, done값을 가진..

[리뷰] 디노 첫걸음

최신 자바스크립트 런타임인 디노(Deno)를 소개하는 '디노 첫걸음'을 읽어 보았습니다. 책에서 설명하는 내용이 무엇인지 보고 직접 실행해 보며 디노를 살펴보려고 합니다. 개요 디노의 배경 타입스크립트 npm 없이 외부 모듈 사용하기 1. 디노의 배경 자바스크립트를 백엔드로 구현한다고 하면 Node.js를 보통 생각하곤 했습니다. 그런데 노드가 해결하지 못하는 문제점이 몇 가지 있었습니다. 첫 번째는 보안이 취약한 부분을 해결하지 못했다는 것입니다. 그리고 npm으로 외부 모듈 사용 시 node_modules에 저장하는 방식이기 때문에 무거워지는 문제가 있었습니다. 아래와 같은 유머 사진이 있을 정도로 말이죠 요즘 프레임워크들의 추세인지, 온라인에서 간단히 테스트 가능한 플레이그라운드가 디..

[리뷰]자바스크립트는 모든 곳에 존재한다

자바스크립트 언어 하나만으로 서버, 웹 클라이언트, 데스크톱 앱, 그리고 배포까지 경험해 보고 싶다면 선택해 볼 만한 책을 소개하려고 합니다. Javascript Everywhere 자바스크립트는 모든 곳에 존재한다 리뷰 한빛미디어 2021년 2월 이벤트를 통해 이 책을 받게 되었습니다. 저는 프론트엔드 개발자이기 때문에 자바스크립트를 많이 쓰고 관심도 가지고 있습니다. Vue와 React를 사용하여 주로 개발하고 있습니다. 혼자서 간단한 사이드 프로젝트를 진행하려고 할 때 백엔드 지식이 부족해 시도하다가 정보의 벽을 느껴 실패했던 경험도 있습니다. 그러다가 이 책을 만나게 되었는데요. 일단 첫 인상이 좋았던 것이 펼치자 마자 바로 따라해 볼 수 있는 개발 환경 구성부터 나왔던 것입니다. 당장 Graph..