이전에 했던 프로젝트에 통계 기능을 추가하기 앞서, 공공 데이터를 사용하여 데이터를 시각화하는 연습을 해보았다. 자바스크립트 차트 라이브러리로는 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..
프로젝트의 서비스 운영을 앞두고, 운영 중 오류에 대응하기 위해 모니터링 툴로 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..
프로젝트 작업을 하던 도중, 게시글의 댓글 목록에 Pagination을 적용하게 되었다. 공통 컴포넌트로 만들었던 Pagination 컴포넌트를 사용했는데 이 컴포넌트는 페이지 이동을 할 때마다 스크롤 위치를 최상단으로 이동하도록 동작하고 있었다. 그런데 이 동작은 Pagination을 게시글 목록 조회 같은 곳에서 사용하면 자연스럽지만, 게시글 영역의 아래에 위치하는 댓글 목록 조회에서 사용하니 조금 불편하다는 생각이 들었다. 특히 모바일 같은 경우에는 여러 페이지가 있을 때 다음 페이지 이동을 하려면 스크롤을 꽤 많이 내려야 했다. 또한 이는 게시글 본문 내용이 길어지면 더 심해질 것이다. 그래서 페이지 이동 시, '댓글 목록 최상단으로 스크롤 위치를 이동하면 어떨까?' 하는 생각을 했다. 게시글 ..
위와 같은 페이지에 리스트 데이터가 렌더링 되기 전까지 스켈레톤을 보여주려고 한다. Next.js에서도 React와 마찬가지로 Suspense를 사용하여 Skeleton UI를 적용할 수 있다. Skeleton 컴포넌트 구현하기(app/components/Skeleton.tsx)import styles from '@/styles/skeleton.module.scss'interface SkeletonProps { w: number h: number radius?: number wUnit?: string style?: React.CSSProperties}export default function Skeleton({ w, h, wUnit = 'px', radius = 8, style,..
Next.js로 만든 프로젝트에서 SEO 최적화를 작업해 보고 구글과 네이버에 사이트를 등록해 보았다. 1. Metadata 설정하기Next.js 공식 문서를 참고하여 Metadata를 설정한다.검색 결과에 포함되지 않길 원하거나, 페이지 내 포함된 다른 링크가 검색 결과에 포함되지 않게 하려면해당 페이지 내 metadata.robots의 index, follow 옵션을 수정한다. 기본은 index, follow 모두 true이다. 필요에 따라 Caronical Tag 등을 추가한다. - Open Graph 설정 Next.js에서는 Open Graph를 설정하지 않아도 기본적으로 title과 image를 설정해 준다. title의 경우 페이지의 title과 동일하게 설정되고 이미지는 페이지 내에 이미..
