해나아부지 개발일지

docker build 시 Image size가 GB 단위로 올라가고, m1 맥북에서 build 시 ubuntu에서 호환이 안되기 때문에 추가 옵션을 줘야하는 등 약간의 이슈가 있어서 git 코드 공유로 ubuntu server 자체에서 build하는 식으로 해서 사용중이다. 1. Docker 설치 (local & server) - local : 공식 홈페이지에서 본인의 운영체제에 맞는 Docker 설치 - server(ec2 ubuntu 22.04): 공식 홈페이지 install docker on ubuntu 만 따라하면 끝! 1. Dockerfile 생성 - code editor에서 app 최상단 폴더에 Dockerfile 생성 혹은 터미널 touch Dockerfile FROM node:18-alp..

소스 맵(Source Map)이란 배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능입니다. 보통 서버에 배포를 할 때 성능 최적화를 위해 HTML, CSS, JS와 같은 웹 자원들을 압축합니다. 그런데 만약 압축하여 배포한 파일에서 에러가 난다면 어떻게 디버깅을 할 수 있을까요? 정답은 바로 소스 맵을 이용해 배포용 파일의 특정 부분이 원본 소스의 어떤 부분인지 확인하는 것입니다. 이러한 편의성을 제공하는 것이 소스 맵입니다. NextJS App을 개발하고 있다면 next.confing.js 파일에 옵션을 적용해 볼 수 있다. // next.config.js module.exports = { productionBrowserSourceMaps: true, } 출처 소스맵이란? - 웹팩 핸드북 S..

현재 부분적으로 회사의 React App을 NextJs App으로 마이그레이션 중이다. 회사 NextJs App의 React 버전을 16.8.0 -> 17.0.39로 업데이트를 하고 난데없는 에러가 발생하였다. 에러의 발견 [Type Error] 'ReactElement | Component | null' is not a valid JSX element. 빌드 중 아무 문제 없던 아이콘 컴포넌트에서 에러가 발생한 것이다. 해당 컴포넌트는 동적으로 필요할때만 컴포넌트를 import 하여 App의 성능을 높여줄 수 있는 NextJs의 dynamic()을 활용한 Icon 컴포넌트였다. 아무 문제 없이 사용해왔기에 더 당황스러웠다. 문제 해결과정 오류 메세지를 기본으로 구글링에 들어갔다. dynamic()의 r..