Three.js 강의를 들으면서 기본 개념을 배우고 실습을 진행했다. 내가 원하는 3D 오브젝트를 자유자재로 구현하려면 좀 더 공부하고 연습하는 과정이 필요하다는 생각이 들어서 공식 문서를 보면서 배운 내용을 다시 복습하고 정리해 보았다. 1. 기본 환경 세팅import * as THREE from "three";import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";import printTangerine from "./mesh/tangerine.js";const scene = new THREE.Scene();scene.background = new THREE.Color(0xe4eaf1);// 카메라const camer..
프로젝트의 테스트 코드를 작성하면서, 모듈을 모의할 때 mock()을 사용하고 있었다. 최근 이라는 책을 보면서 테스트 코드 작성법에 대해 공부했는데, 여기서도 모의하는 것에 대해 mock, spyOn, fn만 나와있어서 이 셋을 주로 사용한다고 생각했다. 그런데 코드 리뷰 중, 팀원의 코드에서 doMock()이라는 메서드를 보게 되었다. 팀원은 doMock을 사용해서 나와는 다르게 모듈을 모의하고 있었다... 그래서 mock과 doMock의 차이가 무엇인지 알아보았다. 가장 큰 차이점은 호이스팅의 여부이다. mock은 호이스팅되고, doMock은 호이스팅되지 않는다. jest는 파일 내의 mock() 호출을 찾아 다른 import문보다 먼저 실행한다. 따라서 factory 외부에서 정의된 변수를 fa..
프로젝트에서 이미지 파일을 압축하고 webp로 변환하여 서버로 전송하도록 했다. 분명 file.type이 image/webp가 되는 걸 확인했는데 서버에서 받은 이미지 URL에는 원본 파일의 확장자가 적용되어 있었다. import Compressor from 'compressorjs';export async function compressImage( file: File, quality: number = 0.8,): Promise { return new Promise((resolve, reject) => { new Compressor(file, { quality, mimeType: 'image/webp', maxWidth: 880, maxHeight: 62..
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', ..
Bundle 사이즈를 줄이기 위해 webpack 공식 문서, github 유명 레포지토리 및 다른 사람들의 webpack 코드, 여러 블로그를 찾아보며 webpack 최적화를 적용해 보았다. 내가 적용한 것들을 기록해 본다. 적용한 대상은 Vanilla JavaScript로 구현한 SPA이다. 1. 불필요한 라이브러리, 사용이 적지만 큰 용량을 차지하는 라이브러리 제거webpack-bundle-analyzer를 사용하면 페이지 하단 결과처럼 번들 파일을 분석해 준다. 어떤 요소가 얼마만큼의 크기를 차지하는지 알 수 있다. 이를 통해 불필요한 라이브러리나 사용자 적지만 큰 용량을 차지하는 라이브러리를 제거할 수 있다. 보통 CRA를 사용하면 lodash와 같이 기본으로 설치되는 라이브러리들이 꽤 많은 ..
Firestore로 토이 프로젝트의 DB를 관리하고 있던 도중 검색을 구현하기 위해 Algolia라는 검색 엔진 API를 사용해 보았다. Firestore에서도 query, where를 이용하여 검색을 구현할 수 있다. 하지만 Firestore 자체 기능에서는 전체 텍스트 검색을 제공하지 않는다. 아래의 두 쿼리문 중 하나를 사용하면 간단한 검색을 수행할 수 있다. where("text", ">=", filter), where("text", "
맛집 관련 프로젝트를 진행하면서 지도 API가 필요했다. 사용자가 글을 쓰는 과정에서 원하는 장소를 지도에서 찾고, 해당 장소의 위치 정보를 글에 첨부할 수 있도록 구현해야 했다. 기능 구현을 위해 네이버 지도 API와 카카오맵 API를 찾아보았는데 네이버 지도 API는 현재 키워드로 장소 검색 기능을 제공하지 않는 듯하여 카카오맵 API를 사용하게 되었다. 코드가 길기 때문에 지도 관련 주요 코드는 아래 카카오맵 API에서 제공하는 예제를 참고하길 권장한다.'키워드로 장소검색하고 목록으로 표출하기' 예제 코드 나는 모바일웹을 만들고 있었고, 내가 원하는 UI/UX는 네이버 블로그 스마트 에디터에서 지도를 첨부하는 것과 유사한 것이었다. 1. 키워드로 검색을 하면 목록이 나오고 목록의 항목을 누르면..
이번 사이드 프로젝트에서는 라이브러리의 의존을 최소화하고, 자바스크립트만으로 애플리케이션을 개발하는 것이 목표였다. 이를 위해 Vanilla JavaScript로 SPA를 구현해 보았다. SPA를 구현하기 위해 컴포넌트, 라우터, 전역 Store를 구현했다. 최소한으로 필요한 부분들만 구현했다. 1. 컴포넌트 구현하기ES6의 Class를 사용하여 React의 클래스형 컴포넌트와 유사한 컴포넌트를 구현해 보았다.export default class Component { $target; props; state; constructor($target, props) { this.$target = $target; this.props = props; this.setup(); thi..
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..
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 ..
