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..
프로젝트 작업을 하던 도중, 게시글의 댓글 목록에 Pagination을 적용하게 되었다. 공통 컴포넌트로 만들었던 Pagination 컴포넌트를 사용했는데 이 컴포넌트는 페이지 이동을 할 때마다 스크롤 위치를 최상단으로 이동하도록 동작하고 있었다. 그런데 이 동작은 Pagination을 게시글 목록 조회 같은 곳에서 사용하면 자연스럽지만, 게시글 영역의 아래에 위치하는 댓글 목록 조회에서 사용하니 조금 불편하다는 생각이 들었다. 특히 모바일 같은 경우에는 여러 페이지가 있을 때 다음 페이지 이동을 하려면 스크롤을 꽤 많이 내려야 했다. 또한 이는 게시글 본문 내용이 길어지면 더 심해질 것이다. 그래서 페이지 이동 시, '댓글 목록 최상단으로 스크롤 위치를 이동하면 어떨까?' 하는 생각을 했다. 게시글 ..
프로젝트에서 쿠키를 설정하면서 발생했던 문제 및 해결 방법을 기록한다. 1. 로컬 환경에서 서로 다른 도메인 간 쿠키 사용하기 - proxy 사용 도메인 - localhost, http://ec2-.xxx.com proxy를 사용하기 전에는 쿠키 도메인이 백엔드 도메인으로 세팅이 되어서 새로고침 시 쿠키가 삭제되고, 서버에서도 내가 보낸 쿠키를 읽을 수 없는 오류가 있었다. 로컬 환경에서는 proxy를 사용하여 동일한 도메인에서 요청한 것처럼 동작하게 할 수 있다. proxy를 설정할 수 있는 setup 파일에서 proxy 설정을 추가한다.vite.config.jsimport react from '@vitejs/plugin-react-swc';import { defineConfig, loadEnv..
