이전에 했던 프로젝트에 통계 기능을 추가하기 앞서, 공공 데이터를 사용하여 데이터를 시각화하는 연습을 해보았다. 자바스크립트 차트 라이브러리로는 Chart.js가 간편하면서도 커스텀이 쉽고, 사용자가 많아 Chart.js의 리액트 버전인 react-chartjs-2를 사용하려고 했는데, React 차트 라이브러리로는 D3의 리액트 버전인 Recharts가 더 사용이 쉽고, 많이 사용된다고 하여 두 라이브러리를 모두 사용해 봤다. 1. 날씨 데이터를 이용한 시간대별 기온 데이터 시각화 1-1. 데이터 로드 및 가공기상청의 단기예보 OpenAPI를 이용하여 초단기예보 데이터를 받아오고, 여기서 시간대별 기온 데이터만 추출했다.export interface WeatherResponse { pageNo: ..
Docker에 대해 공부하면서 이전에 만들었던 Next.js 프로젝트에 Docker를 적용해 보았다. 1. Docker로 이미지 배포 및 컨테이너 실행프로젝트 root에 Dockerfile 작성FROM node:20-alpineWORKDIR /appCOPY . .RUN npm installRUN npm run buildEXPOSE 3000ENTRYPOINT ["npm", "run", "start"] .dockerignore 작성node_modules.next.github.gitignore.env* # 환경 변수가 빌드 타임에 사용된다면 제거.vscodeREADME.md docker-compose.yaml 작성services: next-app: container_name: "next-ap..
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..
이전에 Vercel로 배포했던 사이트에 커스텀 도메인을 추가하고 싶어서 가비아에서 도메인을 구매하고 Vercel에 연결해 보았다! 이 과정을 정리해 본다. 1. 가비아에서 원하는 도메인 구매원하는 도메인을 검색하고 구매한다. 가끔 몇 개는 크게 할인하는 경우가 있어서 할인할 때를 노리면 좋다ㅎㅎ 웹을 넘어 클라우드로. 가비아그룹웨어부터 멀티클라우드까지 하나의 클라우드 허브www.gabia.com 2. Vercel 설정에서 도메인 추가Project Settings - Domains에서 구매한 도메인을 입력해 준다. 추천 옵션으로 설정하고 도메인을 추가한다. 해당 옵션을 사용하면, domain.com 접속 시 www.domain.com으로 리다이렉트 된다. 3. 가비아 도메인에 레코드 ..
지난번 멘토링에서 최적화 책을 추천받아서 공부하게 됐다. 이전에도 다른 최적화 책을 읽었는데 두꺼운 책이었고, 몇 개월 전에 대출해서 읽었더니 기억이 잘 안 나는 부분들도 있어 새 마음 새 뜻으로 다시 공부해 봤다. 이미 알고 있던 부분은 제외하고 새롭게 알게 된 부분만 정리해 보았다. (이미지 최적화는 별도의 글로 작성할 예정이다.) Lighthouse 관련 - Lighthouse 검사 후 하단에서 검사 환경을 확인할 수 있다. 항상 결과 값에만 집중해서 이런 게 있는 줄 전혀 몰랐다...CPU 성능과 네트워크 성능이 얼마나 제한되었는지 확인할 수 있다. 데스크톱에서 실행하면 CPU가 1x로 제한이 되지 않고, 모바일로 설정하면 4x로 제한된다. 네트워크 속도도 10,240Kbps로 제한되었다. 이..
프로젝트의 테스트 코드를 작성하면서, 모듈을 모의할 때 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..
책을 공부하다가 useRef는 3가지 타입 정의를 가진다는 것을 알게 되었다. 예전에 useRef를 사용했을 때, 인자 타입을 잘못 넣었다가 오류가 발생한 경험이 있다. 그 당시에는 단순히 반환 타입이 달라져서 오류가 생긴 거라고만 알아 두고 넘어갔었다. 이번에 공부하면서 useRef에 대해 자세히 알아보았다. useRef는 initialvalue로 .current 속성이 초기화된 변경 가능한 참조 객체를 반환한다. 넣어주는 인자(initialValue) 타입에 따라 반환되는 타입이 달라진다. MutableRefObject 또는 RefObject를 반환한다. 반환된 객체는 컴포넌트의 생명주기 동안 유지된다. 3가지 타입 정의function useRef(initialValue: T): Mutable..
프로젝트의 서비스 운영을 앞두고, 운영 중 오류에 대응하기 위해 모니터링 툴로 Sentry를 도입하기로 했다. 이 과정에서 ErrorBoundary를 적용하여 오류 발생 시 UX, DX를 개선하는 작업을 했다. Sentry와 ErrorBoundary를 적용한 과정을 정리해 보려고 한다. Sentry 도입 Sentry 초기화(libs/sentry.ts)import * as Sentry from '@sentry/react';import { useEffect } from 'react';import { useLocation, useNavigationType, createRoutesFromChildren, matchRoutes,} from 'react-router-dom';import { version..
프로젝트에서 S3에서 받아온 이미지 URL을 파일로 변환해서 서버로 보내야 하는 경우가 있었다. 파일 변환을 위해 S3 URL에 GET 요청을 해서 blob 타입으로 응답을 받아와야 했는데 여기서 CORS 오류가 발생했다. 요청 코드는 다음과 같다.import axios from 'axios';export const convertURLtoFile = async (url: string) => { try { const response = await axios.get(url, { responseType: 'blob', withCredentials: true, }); const blob = response.data; return new File([blob], 'pro..
