[PearNutter] 소셜미디어 앱 마이그레이션 계획

PeaNutter는 만화 Peanuts를 테마로 한 소셜미디어 프로젝트다.

노마드코더 트위터 클론코딩 컨테스트에 참여하여 만들었으며, 사용자들이 자신의 소소한 일상과 생각을 'nut'으로 공유하고 소통하는 플랫폼을 구상했다.

 

Peanuts는 땅콩이라는 뜻 외에도 '별 볼 일 없는 것들'이라는 의미로 쓰인다. 이 의미에서 착안하여 누구나 일상의 소소한 순간들을 가볍게 나누는 공간을 상징하고자 PeaNutter라는 이름을 붙였다.

마이그레이션 배경

컨테스트 당시 2주 동안 매주 제공되는 미션을 진행하며 기획안부터 필수 기능 3가지까지 구현해야 했다. 개인적으로 추가하고 싶었던 부가 기능까지 욕심내다 보니, 결과적으로 만족스러운 완성도에 도달하지 못했다.

 

이러한 아쉬움으로 PeaNutter는 리팩토링 및 마이그레이션 작업 대상 중 하나가 되었었는데, 이번 마이그레이션을 통해 미완성된 기능들을 완성하고, 새로운 기술 스택을 적용하여 프로젝트를 개선할 계획이다.

 

기술 스택

기존의 Vite, TypeScript, Firebase는 유지하되, 새로운 기술을 추가하여 상태 관리와 스타일링을 개선한다.

Recoil

Facebook에서 개발한 상태 관리 라이브러리로, 컴포넌트 간의 상태 공유와 업데이트가 용이하다.

• 전역 상태를 간단하게 관리할 수 있는 API 제공
• 유연한 아키텍처로 코드 복잡성 감소
• 비동기 상태 관리 지원

Recoil을 통해 복잡한 상태 관리 로직을 단순화하고, 비동기 데이터 흐름을 효율적으로 처리할 수 있다.

 

SASS (SCSS)

Syntactically Awesome Style Sheets

CSS 전처리기 언어로, CSS의 단점을 보완하고 개발 및 유지보수를 용이하게 만든다.

• 중첩 구조를 통한 가독성 향상
• 모듈화를 통한 재사용성 증대
• 변수와 믹스인을 활용한 생산성 향상

styled-components 대신 SCSS를 사용하여 스타일 언어에 대한 이해를 넓히고, 더 체계적인 스타일 관리를 구현한다.

 

추가 구현 기능

기존 프로젝트에서 구현하지 못했던 기능들을 추가한다.

• 좋아요: nut에 대한 좋아요 기능
• 팔로잉 / 팔로우: 사용자 간 팔로우 관계 형성
• 해시태그 생성 / 수정: nut 작성 시 해시태그 추가 및 수정
• 해시태그 필터링 검색: 해시태그를 통한 nut 검색
• 다국어 처리: 다양한 언어 지원