뉴진스 - 갤러리아!

프로젝트 소개: 뉴진스-갤러리아!

프로젝트 개요

‘뉴진스-갤러리아’는 기존에 만들었던 프로젝트를 개선한 것입니다.

주요 변경 사항으로는 디자인과 기술 스택의 변경 및 추가가 있습니다.

본 프로젝트는 게시글 작성 기능을 제공하며, 추후 백엔드 기능을 추가할 예정입니다.

수정 전 구현 이미지

수정 후 구현 이미지

… 추가 예정

사용한 기술 스택

React

Styled-Components

React-Query

IndexDB

React-Awesome-Reveal (애니메이션 효과)

프로젝트 주요 기능

게시글 작성: 사용자는 제목과 내용을 입력하고, 이미지를 추가하여 게시글을 작성할 수 있습니다. 작성한 게시글은 indexDB에 저장됩니다.

반응형 디자인: 다양한 디바이스에서 최적의 사용자 경험을 제공하기 위해 반응형으로 구현되었습니다.

프로젝트 구현 내용

로컬스토리지와 IndexDB

프로젝트 초기에는 로컬스토리지에 이미지를 비롯한 게시글을 저장했습니다. 그러나 GIF 이미지 추가로 인해 로컬스토리지 용량이 금방 차는 문제가 발생했습니다. 서버 연결을 당장 할 수 없는 상황에서 IndexDB를 찾아 적용하여 이 문제를 해결했습니다. IndexDB는 브라우저 내 대용량 데이터 저장을 지원하여 용량 문제를 효과적으로 해결해줬습니다.

React-Query의 필요성

다른 프로젝트를 작업할 때, React-Query를 그저 실무에서 많이 쓰이는 기술이라는 이유로 무작정 적용했었습니다. 하지만, 이번 프로젝트에서는 React-Query를 사용하지 않았었습니다. 필요성을 느끼기 전까지는요! IndexDB를 활용한 데이터 작성과 불러오기 작업 중 최신 게시글을 제대로 불러오지 못하는 문제를 겪었고, 이를 해결하기 위해 React-Query를 도입했습니다. React-Query는 key값을 지정하여 데이터 동기화를 할 수 있는 편리함이 있어, 최신 게시글을 정확하게 불러오는데 큰 도움이 되었습니다.

카멜 케이스 → 케밥 케이스

기존에는 VideoSection.tsx 같은 카멜 케이스형식의 파일명이었습니다. 이를 video-section.tsx 같은 케밥 케이스 형식으로 변경하였습니다. 이러한 변경은 프로젝트의 일관성과 가독성을 향상시켰습니다. 또한, 이는 코드베이스를 더욱 관리하기 쉽게 만들어 주었습니다.

앞으로의 계획

프론트엔드 : 계속해서 코드를 다듬고 바꿔나갈 예정입니다.

백엔드 추가: 게시글 작성 기능 외에도 다양한 기능을 제공하기 위해 백엔드 서버를 구축할 예정입니다.

추가 기능 개발: 이미지 및 게시글 관리, 댓글 기능 등 다양한 기능을 추가할 계획입니다.

‘뉴진스-갤러리아’ 프로젝트는 계속해서 발전하고 있으며, 여러분의 많은 관심과 기대 부탁드립니다.