Skip to main content
Hashnodewoodstock's devlog

Command Palette

Search for a command to run...

소셜미디어 앱 'PeaNutter' 마이그레이션 계획

Updated
•2 min read•View as Markdown
소셜미디어 앱 'PeaNutter' 마이그레이션 계획
W
woodstock

안녕하세요! 프론트엔드 개발자 woodstock입니다.

저는 매일 조금씩 발전하고자 하는 마음으로 개발공부를 시작했고, 이 블로그는 그 과정에서 배우고 성장하는 이야기를 담고 있습니다.

여러분의 피드백과 조언은 언제나 환영합니다! 함께 배우고 성장하는 과정을 즐길 수 있기를 기대합니다.

Part of seriesPeaNutter

PeaNutter

PeaNutter는 좋아하는 만화 Peanuts를 테마로 한 소셜미디어로, 노마드코더 트위터 클론코딩 컨테스트에 참여하여 만들었던 프로젝트이다.
(컨테스트와 관련된 이야기는 👉🏻여기에서 확인 가능하다)

Peanuts는 땅콩을 가리키는 단어로, '별 볼 일 없는 것들'이라는 의미로도 쓰인다. 이 의미에서 착안하여 누구나 자신의 소소한 일상의 이야기나 생각, 감정 등을 가볍게 나누는 공간을 상징하고자 PeaNutter라는 이름을 붙였다.

PeaNutter에서 사람들은 자신의 생각이나 일상의 순간들을 'nut'으로 게시하고, 서로간의 'nut'을 공유하여 의견을 나눌 수 있으며, 친구들과 관심 있는 사람들의 'nuts'를 타임라인에서 간편하게 확인하고 소통할 수 있다.

마이그레이션을 하는 이유

당시에는 2주동안 매주 제공되는 미션을 진행하며 기획안부터 필수 기능 3가지까지 구현해야 했었다. 게다가 개인적으로 적용하고 싶었던 부가적인 기능까지 욕심내다보니 (컨테스트 결과가 좋았던 것과는 별개로) 원하는만큼 완성하지는 못했었다.

그렇게 PeaNutter는 내 마음속의 리팩토링 혹은 마이그레이션 작업대상 1순위로 자리매김하게 되었다.


기술 스택

Vite, TypeScript, Firebase와 같은 기존 기술 스택을 유지하되, Recoil로 상태를 관리하고, 스타일 언어의 학습을 위해 styled-components 대신 SCSS를 사용할 계획이다.

Recoil

페이스북에서 개발한 상태 관리 라이브러리로, 컴포넌트 간의 상태 공유와 업데이트가 용이한 것이 장점이다.

Recoil은 상태 관리를 간편화하기 위해 전역 상태를 간단하게 관리할 수 있는 API를 제공하며, 유연한 아키텍처를 통해 코드의 복잡성을 줄여준다. 또, 비동기 상태 관리도 지원하기 때문에 비동기 데이터 흐름을 처리하는 데 도움이 된다.

SASS (SCSS)

Syntactically Awesome Style Sheets

CSS 전처리기 언어로 CSS의 단점을 보완하고 개발과 유지보수를 더욱 용이하게 만든다. 중첩된 구조를 통해 가독성을 높이고, 모듈화를 통해 재사용성을 높이며, 변수와 믹스인을 활용하여 생산성을 향상시킬 수 있다.


추가로 구현할 기능

  • 좋아요
  • 팔로잉 / 팔로우
  • 해시태그 생성 / 수정 기능
  • 해시태그로 필터링 검색
  • 다국어 처리
#vite#reactjs#typescript#scss#sass#migration#web-development#frontend-development#frontend
30 views

Comments

Join the discussion

No comments yet. Be the first to comment.

PeaNutter

Part 3 of 3

이 시리즈에서는 소셜미디어 프로젝트 'PeaNutter'의 마이그레이션 과정과 그 과정에서 마주친 문제들을 해결하는 트러블슈팅 경험을 공유합니다.

Start from the beginning

💥 Spa 배포 시 하위 라우터에서 발생하는 404 오류 해결하기

Vercel에서 React 애플리케이션의 라우팅 문제 해결 방법

More from this blog

💥 new Array(length).map()으로 배열 초기화 시 콜백이 실행되지 않는 문제

JavaScript에서 배열을 초기화하려고 new Array(4).map(() => [])을 사용했는데 의도대로 동작하지 않았다. 원인을 찾아보니 JavaScript의 빈 슬롯과 undefined의 차이, 그리고 map() 메서드가 빈 슬롯에 대해 콜백을 실행하지 않는다는 특성때문이었다. 문제 상황 특정 크기의 배열을 만들고 각 요소를 []로 초기화 하려고 했다. const result = new Array(4).map(() => []); co...

Jun 28, 20252 min read17

💥 에러 메시지와 스택 트레이스 분석을 통해 문제 해결하기

JavaScript로 카드 게임 로직을 구현하던 중 TypeError: Cannot read properties of undefined라는 에러를 만났다. 코드가 복잡하고 짐작가는 부분이 단번에 떠오르지 않아 막막했는데, 에러 메세지와 스택 트레이스를 차근차근 분석해가며 원인을 찾아낸 과정을 기록해본다. 에러 발생 게임 로직을 테스트하던 중 특정 입력에서 다음과 같은 에러가 발생했다. TypeError: Cannot read properties...

Jun 25, 20254 min read11

🧐 적절한 함수명과 단일 책임으로 코드 개선하기

이 글에서는 JavaScript로 구현된 보드게임의 로직을 개선하는 과정을 다루며, 개선 과정은 함수명 개선 → 중복 제거 → 책임 분리의 단계로 이루어져있다. 작동하지만 개선이 필요한 코드 처음에 작성한 코드는 기능적으로는 문제없이 동작했지만, 더 나은 방식을 고민하다 보니 여러 개선점을 찾을 수 있었다. function checkLadder(position) { switch (position) { case 4: return 14;...

Jun 23, 20253 min read23

작심삼십일 - TypeScript 강의를 완강하다.

유데미 작심삼십일 챌린지에 참여하다 작심삼십일 챌린지는 유데미의 한국 런칭 3주년을 기념한 이벤트 중 하나로, 30일 동안 유데미 강의를 들으며 인증을 하는 챌린지이다.취업 준비를 하면서 여러가지 요인으로(주로 심리적이지만..) 학습 루틴이 망가졌던 찰나에 이 이벤트를 보게되었고, 마침 기존에 사두고 볼 엄두가 안 났던 타입스크립트 강의가 있었기에 옳다구나! 하고 신청했었다. 챌린지를 통해 무엇을 배웠나? 챌린지의 목표로 정한 강의는 유데미에...

Nov 18, 20242 min read58
작심삼십일 - TypeScript 강의를 완강하다.

woodstock's devlog

215 posts

안녕하세요! 프론트엔드 개발자 woodstock입니다.

제 블로그에서는 프론트엔드 개발에 대한 다양한 주제를 다룹니다.

JavaScript, TypeScript, React, Next.js 등의 기술을 활용하여 실제 프로젝트를 진행하면서 얻은 경험과 지식을 공유하고자 하며, 컴퓨터 과학(CS)의 기본 개념과 알고리즘, 자료구조 등에 대해서도 다룹니다.