I'm a Fig, Not a Pig

인턴에 참여해서 처음 백엔드 개발을 하게되었고 그 과정 중 귀한 경험을 했다. 바로 Mongo DB가 해킹당한 것..! 사실 해킹 당하기 며칠 전에 팀원들과 함께 모각코를 했었는데 그 날 Mongo DB 세팅을 진행하고 있었다. 이후에 한 팀원이 어떤 블로그 글을 읽으면서 Mongo DB 해킹 조심하라며, 비트코인 요구한다고 해서 당시에 그냥 웃으면서 흘려들었는데 며칠 뒤에 실제로 해킹당했다..   나는 Mongo DB 서버를 AWS EC2에 배포했었는데 어느 순간 부터 아래와 같이 비트코인을 달라는 문구와 함께 주기적으로 데이터가 초기화되는 현상이 발생했었다. 처음에는 DB가 하루에 한 번 꼴로 초기화 되길래 팀원들이 테스트를 위해 일시적으로 데이터를 삭제한 줄 알았다. 하지만 그런 작업을 한 팀원이 ..

문제 발견최근에 Next.js로 개발 중, 흥미로운 문제를 마주했다. 개발 모드에서 새로고침을 하지 않으면 데이터가 로드되지 않는 현상이었다. 처음에는 새고로침으로 문제가 해결되었기 때문에 큰 문제가 아니라고 생각했지만, 매번 yarn dev를 실행할 때 마다 새로고침을 해야 하는 번거로움이 있었다.  에러 발생새로고침 없이 페이지 로딩을 기다려보니 다음과 같은 에러가 발생했다.ChunkLoadError: Loading chunk app/layout failed.(timeout: http://localhost:3000/_next/static/chunks/app/layout.js) 이 오류를 봤을 때 app/layout.tsx 파일에 문제가 있을 것이라 생각해 해당 컴포넌트를 살펴보았다.  원인 분석하기:..

참여하고 있는 프로젝트에서 UI 구현을 마치고 API 연동을 하고 있는 중이다. 에러 처리를 위해 Axios Interceptor를 사용했는데, 이 과정에서 AxiosError를 처리했던 과정을 기록해보려 한다.  초기 코드초기에 작성한 에러 처리 코드는 다음과 같았다.if (error) { const errorMessage = error instanceof Error ? error.message : '알 수 없는 에러가 발생했습니다.'; return {errorMessage};} 이 코드에 대해 리뷰를 받으면서, 공통 모듈로 처리할 수 있는지에 대한 피드백을 받았다. 처음에는 이 부분을 별도의 공통 컴포넌트로 분리하라는 의미인지, 이해가 잘 되지 않아 혼란스러웠다. 리뷰어분은 Axios를 직..

오늘은 Vercel에 Next.js를 배포한 경험에서 알게 된 것들 적어보려한다. Vercel 배포를 검색했을 때 많은 자료들이 있어서 금방 끝낼 줄 알았는데 시간이 꽤 걸렸다. 그래도 깔끔하게 해결하고 잠들어서 좋다. (현재시각 오전 2시 54분..)  Hobby에서 Pro로 변경지금 참여하는 프로젝트는 Oraganization인데, Vercel에서 Github Organization에서 프로젝트를 운영할 경우 Pro로 전환해야 한다. Pro 버전은 2주 간 무료로 이용할 수 있고, 이후에는 월마다 $20 씩 지불해야 한다. 우회해서 사용하는 방법도 있긴 한데 별로 내키지 않아서 유료 버전을 사용했다.     도메인 등록도메인 구입 후, vercel에 등록된 도메인을 구매한 도메인으로 변경했다. 방법을..

월화수 추석 연휴라서 어제(월요일)는 쉬었고 오늘 오후부터 슬금슬금 다시 작업중인데, 하루 푹 쉬니까 컨디션이 좋다! 또 요새 개인적인 일로 가족이랑 시간보내는 걸 뒤로 미뤘는데, 이번 연휴에는 통으로 함께 보내게 되어서 행복하다😊 푹 쉬었으니 다시 작업하러 가보자고~~!  Github Pages에서 Vercel로 변경저번주에 React에서 Next.js로의 마이그레이션을 마치고, 오늘은 Github Actions로 Vercel가 자동 배포 되도록 환경을 셋팅했다. 기존에는 github pages로 배포 했었는데, Next.js로 마이그레이션 하면서 Vercel로 배포하는 것으로 바꾸었다. 이유는 아무래도 Vercel이 Next.js에서 공식적으로 제공하는 호스팅 사이트이기 때문이다. 공식문서에도 Ne..

토이 프로젝트를 시작하면서, Vite를 빌드 툴로 사용하기로 했다. 예전에 Vite가 빠르다고 들어서 사용해보고 싶었는데, 이번에 사용하게 되어 어떤 툴인지 정리해보려 한다.   Vite란?Vite는 프랑스어로 빠르다라는 의미이며 Vue, React, Svelte 등 주요 프론트엔드 라이브러리, 프레임워크 커뮤니티에서 주목하고 있다. 이유가 뭘까? Vite를 사용하는 하는 이유와 등장배경을 알아보자.   Vite를 사용해야 하는 이유?1. JavaScript의 모듈화공식문서에 따르면, ESM(ES Modules)을 지원하기 전까지는 브라우저에서 JavaScript 코드를 모듈로 나눠서 사용하는 게 쉽지 않았다.여기서 모듈이란 간단하게 말해서 코드를 기능별로 나눠서 관리하기 쉽게 만든 작은 단위이다. 예를..

Tailwind CSS에서 기본 스타일(텍스트 색상, 글꼴 등)을 추가하기 위해서는 두 가지 방법이 있다. 첫번째는 index.html 파일에 클래스를 추가하거나   두번째는 @layer 지시문을 이용해서 추가하는 것이다.@tailwind base;@tailwind components;@tailwind utilities;@layer base { h1 { @apply text-2xl; } h2 { @apply text-xl; } /* ... */}   나는 두번째 방법으로 전역 폰트를 적용하기 위해 아래와 같이 코드를 작성했다. 폰트는 Pretendard를 적용했고 CDN을 이용해 Pretendard를 사용할 수 있기 때문에 https://github.com/orioncactus/pr..

고급 프로젝트를 앞두고 팀원들과 기술 스터디를 진행 중인데, 이번 주제는 Plain React App이 아닌 Next.js를 프로젝트에서 사용해야하는 이유였다. 그 과정에서 프레임워크와 라이브러리의 차이를 공부하게 되어서 정리해보려 한다. 라이브러리와 프레임워크 쉽게 이해하기나는 헷갈리는 개념은 비유를 통해서 이해하는 것을 좋아하는데, 프레임워크와 라이브러리의 차이 또한 집이라는 비유를 통해 알아보고자 한다. 먼저 라이브러리는 집을 설계부터 건축까지 모든 것을 도맡아 하는 것과 비슷하다. 따라서 내가 원하는 대로 집을 설계할 수 있고 어디를 안방으로 할 지 어디를 거실로 할 지와 같이 각 방을 원하는 대로 배치할 수 있다. 반면 프레임워크는 새 집을 구입하는 것과 같다. 따라서 집을 직접 설계하지 못하는..

저번 프로젝트에서 TanStack-Query(React-Query)를 사용해보자는 논의가 나왔지만 라이브러리를 사용하지 않고도 구현할 수 있을 것이라는 결론이 내려져 사용하지 않았었다. 그래서 데이터 페칭을 위한 hook을 만들었었는데, 이후에 리팩토링하는 과정에서 이 hook을 useQuery와 useMutation으로 분리시켰다. (왜 분리했는지에 대한 자세한 내용은 링크에서 볼 수 있다.) 이렇게 훅을 분리하는 것에 대한 아이디어는 프로젝트 시작 전 TanStack Query에 대해 공부하면서 얻게되었는데, 프로젝트 이후 TanStack Query 공식문서를 읽다보니 api 예외처리를 간편하게 해주는 것 이외에도 다양한 기능이 많아서 공부해보려고 한다. 1. TanStack-Query(React-Q..

들어가며5월 초반에 2주 동안 진행했던 기초 프로젝트를 마치고, 어느새 중급 프로젝트까지 마쳤다. 이번엔 기초 프로젝트 때 보다 시간이 금방 지나간 것 같아 시원섭섭하다. 기초 프로젝트 때는 너무 적고 싶은게 많아서 그랬는지, 미루고 미루다 보니 결국 적지 못했다. 그래서 이번 프로젝트는 꼭 회고를 적고야 말겠다는 의지를 가지고 팀 미팅이 끝난 뒤 부리나케 카페로 달려왔다. 이번 프로젝트는 저번 프로젝트보다 걱정이 앞섰다. 기술 스택 중 하나인 Tailwind css도 처음 사용해보고, Next.js는 아직 익숙치 않은 상태였기 때문이었다. 하지만 걱정했던 것과는 다르게 너무 재밌게 프로젝트에 참여했고, 많은 것들을 배울 수 있었다! :) Problem, Keep, Try 나는 이번 프로젝트에서, 기초..