JavaScript

[JavaScript] Vanilla JavaScript에 PWA 적용하기 with Webpack, Workbox

Vanilla JavaScript로 구현한 SPA에 PWA를 적용해보았다.     1. 패키지 설치npm i -D webpack-pwa-manifest workbox-webpack-plugin    2. Manifest 설정// webpack.common.jsconst WebpackPwaManifest = require('webpack-pwa-manifest');...plugin: [ ... new WebpackPwaManifest({ name: 'yummy', short_name: 'yummy', description: '맛집 정보 공유 웹앱', background_color: '#ffffff', crossorigin: 'anonymous', dir: 'ltr', ..

[Webpack] Bundle 사이즈 줄이기

Bundle 사이즈를 줄이기 위해 webpack 공식 문서, github 유명 레포지토리 및 다른 사람들의 webpack 코드, 여러 블로그를 찾아보며 webpack 최적화를 적용해 보았다. 내가 적용한 것들을 기록해 본다. 적용한 대상은 Vanilla JavaScript로 구현한 SPA이다.   1. 불필요한 라이브러리, 사용이 적지만 큰 용량을 차지하는 라이브러리 제거webpack-bundle-analyzer를 사용하면 페이지 하단 결과처럼 번들 파일을 분석해 준다. 어떤 요소가 얼마만큼의 크기를 차지하는지 알 수 있다. 이를 통해 불필요한 라이브러리나 사용자 적지만 큰 용량을 차지하는 라이브러리를 제거할 수 있다. 보통 CRA를 사용하면 lodash와 같이 기본으로 설치되는 라이브러리들이 꽤 많은 ..

[JavaScript] Firestore 검색 구현하기 with Aloglia

Firestore로 토이 프로젝트의 DB를 관리하고 있던 도중 검색을 구현하기 위해 Algolia라는 검색 엔진 API를 사용해 보았다. Firestore에서도 query, where를 이용하여 검색을 구현할 수 있다. 하지만 Firestore 자체 기능에서는 전체 텍스트 검색을 제공하지 않는다. 아래의 두 쿼리문 중 하나를 사용하면 간단한 검색을 수행할 수 있다. where("text", ">=", filter), where("text", "

[JavaScript] 카카오맵 API를 이용한 장소 검색 및 위치 추가 구현하기

맛집 관련 프로젝트를 진행하면서 지도 API가 필요했다. 사용자가 글을 쓰는 과정에서 원하는 장소를 지도에서 찾고, 해당 장소의 위치 정보를 글에 첨부할 수 있도록 구현해야 했다. 기능 구현을 위해 네이버 지도 API와 카카오맵 API를 찾아보았는데 네이버 지도 API는 현재 키워드로 장소 검색 기능을 제공하지 않는 듯하여 카카오맵 API를 사용하게 되었다. 코드가 길기 때문에 지도 관련 주요 코드는 아래 카카오맵 API에서 제공하는 예제를 참고하길 권장한다.'키워드로 장소검색하고 목록으로 표출하기' 예제 코드   나는 모바일웹을 만들고 있었고, 내가 원하는 UI/UX는 네이버 블로그 스마트 에디터에서 지도를 첨부하는 것과 유사한 것이었다.  1. 키워드로 검색을 하면 목록이 나오고 목록의 항목을 누르면..

[Jest] 자바스크립트 테스트 코드 작성해 보기

Jest는 대표적인 자바스크립트 테스트 프레임워크이다. 하고 있는 프로젝트에 테스트 코드를 작성하고 싶어서 Jest 공식 문서를 공부하고 정리해봤다.   환경 구축 설치npm install --save-dev jest @types/jest @types/jest는 주로 타입스크립트에서 jest api를 import하지 않고 바로 사용하기 위해 쓰는데나는 이걸 설치하니 jest api 메소드의 타입 힌트를 볼 수 있어서 설치했다.  babel과 함께 사용한다면 babel-jest 설치npm install --save-dev babel-jest  babel.config.jsmodule.exports = { presets: [['@babel/preset-env', {targets: {node: 'current..

[JavaScript] localStorage 사용하기

localStorage 문법 1. 데이터 추가, 읽기, 삭제 localStorage.setItem('데이터이름', '데이터'); localStorage.getItem('데이터이름'); localStorage.removeItem('데이터이름') 2. array/object 자료 저장 localstorage는 문자만 저장할 수 있는 공간이라 array/object를 바로 저장할 수 없다. array/object -> JSON 이렇게 변환해서 저장해야 한다. (JSON -> 문자취급) 데이터 저장 (array/object -> JSON) localStorage.setItem('obj', JSON.stringify({name:'jane'}) ); 데이터 읽기 (JSON -> array/object) var a ..

[JavaScript] Destructuring Assignment (구조 분해 할당)

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식이다. 배열 및 객체 리터럴 표현식을 사용하면 즉석에서 쉽게 데이터 뭉치를 만들 수 있다. 구조 분해 할당 구문은 이와 비슷하지만, 대신 할당문의 좌변에서 사용하여, 원래 변수에서 어떤 값을 분해해 할당할지 정의한다. 배열 구조 분해 var [a, b, c] = [1, 2, 3]; var d, e; [d, e] = [4, 5]; // 선언이 분리되어도 구조 분해 할당 가능 var [a, b, c] = [2, 3]; // c = undefined var [a, b, c = 5] = [2, 3]; // default 값 설정 가능, 분해한 값이 undefined일 때 대신 사용 var [a, b..

[JavaScript] ?.(Optional Chaining) / ??(Nullish Coalescing Operator)

?.(optional chaining) 자바스크립트에서 객체 내부의 속성에 접근할 때, 존재하지 않는 객체에 대해 접근하면 에러가 발생한다. var obj = { one: 1, two: { name: '222'} } console.log(obj.onee); >> undefined console.log(obj.onee.name); >> Uncaught TypeError: Cannot read properties of undefined (reading 'name') at :1:10 존재하는 객체의 존재하지 않는 속성에 접근하면 undefined를 반환하지만, 존재하지 않는 객체의 속성에 접근하면 에러가 발생한다. 중첩되지 않은 간단한 오브젝트의 경우, 오브젝트에서 원하는 데이터를 찾을 수 없으면 자바스크립트..