「H.Untact 리팩토링 - 1」 프로젝트 개시

Dimi L.·2024년 6월 20일

H.Untact 리팩토링

목록 보기
1/2

개요 | 리팩토링의 동기

처음 만들어본 웹사이트가 무엇인가? 라고 하면 나는 H.Untact 프로젝트를 손에 꼽는다.
하지만 내 첫 게시글을 보면 알 수 있듯,
해당 프로젝트는 내가 웹개발에 대해 아무런 전문지식이 없는 상태에서 무작정 개발한 프로젝트인지라
지금 시점에서 "포트폴리오로 활용할 수 있는가?" 라고 묻는다면… 솔직히 쪽팔린다.
물론 처음으로 완료한 프로젝트인 만큼 이를 통해 배운 것도 많고 성장의 바탕이 되었기 때문에
이후 완료하지 못해 결국 삭제된 리포지토리들과는 달리 아직도 원본을 소유하고 있다.

허나 이대로 방치할 수는 없어 새로 리팩토링을 시작하고자 한다.
과거와는 달리, 현역으로 커리어를 쌓는 지금에서 보면 고쳐주고 싶은 부분이 많기 때문이다.
실은 React 버전으로 작업한 것이 있기는 하나,
오랫동안 관리가 되지 않아 실행에 있어 여러 선작업을 해주어야 하고
결과물이 썩 깔끔하지 못하다는 단점이 있어 이번 리팩토링의 주요 타겟으로 선정하였다.

시작에 앞서 | H.Untact란?

SVMHS DEPARTMENT OF MEDIA WEB EXHIBITION, H.Untact

Hello Untact, 이하 H.Untact는 2020년 본인 모교의 학과전시회 프로젝트이다.
원초대로라면 오프라인 전시회를 진행해야 했지만
당시 COVID-19로 인해 전시는 커녕 학생들의 등교에도 지장이 생기는 불상사가 발생하였기에
이를 타개하고자 처음으로 실시한 온라인 전시회였다.

시작 | 스택 결정

리팩토링 프로젝트의 시작은 늘 이것이 문제인 것 같다. 스택을 결정하는 것.
가장 중점적으로 본 스택은 다름아닌 “DB”였다.
그도 그럴 것이, 전시회라는 특성상 많은 양의 전시 작품을 관리해야 하는 문제가 존재하기 때문이다.
이전에 작성한 React 버전의 경우 전부 JSON으로 작성하였으나,
이번에는 포트폴리오용으로 리팩토링을 결정했으니 DB를 사용하기로 했다.

이 프로젝트를 진행할 때 즈음 Vercel에서 메일이 온 게 있었다.
Vercel Storage를 이용한 데이터베이스 이용이 가능하다는 내용이었다.
마침 이 프로젝트를 구성함에 있어 Vercel로 호스팅을 할 계획이었기에 내용을 살펴봤고,
Vercel Postgres와 Cloudflare의 R2를 사용하기로 결정했다.

Q: 갑자기 R2는 왜 나온건가요?
A: 원래는 Vercel Blob을 활용하려고 했으나…… 무료 사용량이 너무 작아서……

또한 DB를 구성하는 만큼 서버의 사용이 필요한데, 이를 간단히 관리하기 위해 Next.js를 사용하기로 결정했다.

향후 계획

우선 해당 글을 쓰는 시점에서는 DB에 데이터 채워넣는 노가다를 진행중이다.

??: 자동화하면 되는 거 아닌가요?
나: 자동화가 가능한 상황이었으면 이러고 있었을까요…ㅋㅋㅠㅠ

해서 아래 내용으로 글을 작성하고자 한다.

  • Next.js와 Prisma 셋팅, DB 구조 설계 및 모델 구성
  • 퍼블리싱
  • 리팩토링 중 발생한 궁금증 해결 (이는 별도의 포스팅 목록으로 들어갈 듯하다.)
  • 작업중 벌어진 버그나 에러, 이를 해결하기 위한 트러블 슈팅 ← 이건 솔직히 작성 안될수도 있다. 너무 순조로워서…ㅋㅋ

DB 데이터를 전부 채워넣은 후 첫번째 글을 써보려고 한다.

주저리 | Daily Music

글을 쓰는 본인은 음악을 좋아하고, 다른사람들에게 츄라이를 하는 인간이다.
해서 매번 글 마지막에 데일리 뮤직을 넣어볼까 한다.

profile
諸行無常、이과적 논리를 문과로 간단명료하게 설명해야 하는 복합적 문제.

0개의 댓글