분류 전체보기

[Next.js] Data fetching과 Caching Mechanism

Next.js는 데이터 캐싱을 지원한다. Next.js의 'fetch'는 기존 Web 'fetch' API를 확장하여 구현한 것으로 기본적으로 응답 데이터를 캐시한다. 이때 캐시된 데이터는 Data Cache에 저장된다.   fetch 함수의 두 번째 인자로 'cache' 또는 'revalidate' 속성을 추가하면 데이터 캐시 옵션을 바꿀 수 있다.또는 route segement config를 설정하여 특정 route segment에 존재하는 모든 'fetch'에 대한 캐시 옵션을 설정할 수 있다.  Next.js는 fetch 데이터뿐만 아니라 라우트도 캐싱한다. Full Route Cache(서버)와 Router Cache(클라이언트)에서 캐싱된다. Full Route Cache는 정적 렌더링 된 라..

[Firebase/오류해결] Firebase Hosting with Github Actions (env 오류)

진행하고 있던 사이드 프로젝트를 Firebase Hosting으로 배포하고, github actions도 적용하여 merge나 pull requests 발생 시 배포 환경에 변경사항이 자동 반영되도록 하려고 했다.  그런데 로컬에서 빌드 후 cli를 통해 배포할 때는 배포 사이트가 잘 동작했는데github actions으로 배포만 하면 환경 변수를 못 찾아서 빈 화면이 되어버리는 것이었다...  배포를 위해서 환경 변수를 actions secrets에 추가하고 yml 파일에도 다음과 같이 env를 추가해 주었는데 동작하지 않았다. // .github/workflows/firebase-hosting-merge.ymlname: Deploy to Firebase Hosting on mergeon: push:..

[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. 키워드로 검색을 하면 목록이 나오고 목록의 항목을 누르면..

Vanilla JavaScript 프로젝트 초기 설정하기 (ES6)

1. package.json 생성npm init -y    2. Babel 설치 및 적용- Babel: ECMAScript 2015 이상 버전을 지원하지 않는 브라우저를 위해 상위 버전 코드를 각 브라우저에 호환이 되게 변환해주는 JavaScript 컴파일러 npm install --save-dev @babel/core @babel/cli @babel/preset-env babel을 사용하여 코드를 트랜스파일링해도 브라우저가 지원하지 않는 코드가 남아있을 수 있다. 예를 들어 ES6에서 추가된 Promise, Object.assign, Array.from 등은 ES5 사양으로 트랜스파일링해도 ES5 사양에 대체할 기능이 없기 때문에 트랜스파일링되지 못하고 그대로 남는다. 이러한 이유로 구형 브라우저에서 ..

[Husky] Git Hooks 설정을 통한 커밋 전 코드 포맷팅 자동 적용하기 (Lint-Staged)

GitHub에서 다른 사람의 프로젝트를 보다가 .husky 폴더가 있는 걸 보고 이건 뭘까?하고 찾아보게 되었다. 찾아본 내용을 바탕으로 지금 작업 중인 프로젝트에도 적용해 보고, 그 과정을 정리해봤다. Husky는 Git Hooks 사용을 도와주는 라이브러리이다.  Git Hooks란 Git에서  어떤 이벤트가 생겼을 때 자동으로 특정 스크립트를 실행하도록 하는 기능이다. Husky를 사용하면 커밋 전, 푸쉬 전에 특정 동작을 수행할 수 있다. 이를 통해 주로 lint, prettier를 자동 적용하는 경우가 많다. 나도 개발하면서 lint, prettier을 제대로 적용하지 않은 파일을 그대로 커밋할 때가 많았다. 이후에 뒤늦게 ci/cd에서 오류를 발견하거나 포맷팅을 다시 해야 해서 번거로움을 겪었..