Web Front End

[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..

한글이 자소분리될 때 해결 방법(ㅎㅏㄴㄱㅡㄹ -> 한글)

운영체제마다 다른 '유니코드 정규화 방식' 대응하는 방법 업무를 진행하다가 파일 다운로드 시 'Windows' 환경에서 한글이 자음과 모음으로 분리되는 자음모음 분리 현상, 자소 분리 현상이 발생했습니다. 인코드, 디코드 방식으로는 해결이 되지 않았지만 원인을 찾기가 힘들어 삽질을 했었는데요. 이를 해결하기 위해 새롭게 알게 된 내용과 해결 방법을 적어 보도록 하겠습니다. 개요 유니코드 정규화 방식이란? Mac과 Window의 정규화 방식 normalize()로 대응하기 1. 유니코드 정규화 방식이란? 한글을 표현하기 위해 텍스트(문자)에 대한 규칙을 정했습니다. 이것이 유니코드 정규화 방식인데 의미를 더 알아보기 앞서 기본 단어 개념을 알아보겠습니다. Character set: 여러 언어를 사용할 수 ..