[우당탕탕한 첫 사이드 프로젝트] - My-Rss-Feed 회고

🤔프로젝트 기획 및 시작

개발에 대한 공부를 하다보면 개인적으로 흥미롭고 유익한 정보들이 많은 블로그나 회사 공식 페이지들이 많지만 뉴스 피드처럼 한 곳에 모아서 보는게 아닌 꾸준히 찾아가서 최신 글이 나왔나 봐야하는 번거로움이 있다.

 

이러한 귀찮음을 해결하기 위해서 RSS 방식으로 XML 주소만 등록시켜 놓으면 매번 사이트를 방문하지 않아도 신착정보를 볼 수 있게 자동으로 업데이트 해 주는 개인 개발 구독 사이트를 만들어 보면 어떨까 생각했다.

 

본격적으로 Next를 공부하면서 기존 React에 적응했던 나로서는 알아야 할 다양한 개념과 처음 써볼려고 하는 기능들에 공부를 해야 했기 때문에 수많은 구글링과 공식 문서를 보다보니 시간이 생각보다 오래 걸렸다.

 

우당탕탕한 첫 개인 사이드 프로젝트 회고를 시작해 볼려고 한다.

개발환경

• Next.js
• React.js
• TypeScript
• Styled-Components
• React-Query
• Yarn
• Sentry

React가 Front 개발의 표준으로 자리잡은 것 같지만 Server Side 환경을 구축하는데 있어서 Next가 필수적인 라이브러리로 자리잡았기 때문에 아예 프로젝트를 하면서 공부해보자 마음으로 시작했다.

프로젝트 인원과 기간

개발기간 : 2022.10.11 ~ 2022.11.03

인원 : 1명

 

최종배포

https://my-rss-feed.vercel.app/rss

Rss Feed

프로젝트 진행 과정

혼자 하는 첫 사이드 프로젝트다 보니 촘촘한 계획 없이 무작정 시작하다 보니 생각했던 기간보다 오래걸렸다.

하다 모르면 구글랑 - 공부 - 적용 순서대로 하니 당연히 오래 걸리지… 기획과 계획이 다시 한 번 중요하다는 걸 느꼈던 시간이었다.

기능 구현

메인페이지

최근에 나온 글 순으로 최대한 깔끔하게 컴포넌트로 10개씩 나오게 구현했다. 구독 블로그들이 많으면 많을수록 데이터 양은 어마어마 해 지기 때문에 총 받아온 데이터 중에 100개의 데이터만 가공해서 페이지네이션으로 10개씩 추려서 보여지게 만들었다. 또한, 3시간 단위로 자동으로 업데이트 해 주는 github/workflows를 설정했기 때문에 매번 deploy할 필요가 없다.

 

구글 검색

구글 검색 기능을 구현했다. 디바운스로 입력 값이 일정 시간이 지나면 구글 추천 검색어를 받아와서 보여지게 만들었으며 해당 추천 단어 클릭 혹은 입력값을 엔터키를 누르면 새창으로 구글 검색된 결과로 넘어가게 만들었다.

 

다크모드

단순히 토글 버튼만 눌러서 테마를 바꾸는게 아닌 처음 렌더링 될때 사용자가 선호하는 테마를 파악 후 사용자가 다크모드를 선호하면 첫 렌더링 될 때 부터 다크모드로 보여주고 아니면 기본인 라이트 모드로 렌더링이 될 수 있게 만들었다. 더 구현하는 정확한 방법과 코드는 이 글을 읽어보자. 

[Next.js] 정적 사이트에 다크 모드 구현하기

 

Sentry

매번 에러를 핸들링하고 파악하는게 아닌 Sentry.io로 프론트엔드 모니터링 즉, 웹 사이트 성능을 추적하는데 사용되는 프로세스 및 도구를 사용했다. 더 자세한 적용방법과 개념은 이 글을 참고하자

[Next.js] Sentry.io로 프론트엔드 모니터링 하기

 

좋았던 점

• Next에 개념에 대해서는 공부를 했지만 이렇게 프로젝트로 구현하는 것은 처음이었다. 알고 있던 부분도 실제로 코드를 쳐 보니 훨씬 더 이해하는데 도움이 되었던 것 같다.
• 해 보고싶은 여러 가지 기능들을 적용할 수 있었다. 특히, 다크모드를 스타일 컴포넌트로 효율적이게 구현할 수 있었던 부분이 한층 더 성정할 수 있었던 시간이었다.
• 처음 해 보는 개인 프로젝트이다 보니 어려움도 많았지만 꾸준히 개발에만 집중할 수 있었던 시간이었고 완성되니 팀 프로젝트와는 조금 다른 뿌듯함이 생겼다.
• 코드를 어떻게 짜야 조금 더 효율적일 수 있을까에 대한 고민을 많이 한 시간이었다.

아쉬운 점

• 팀 프로젝트가 아니다 보니 몰입도? 집중도가 낮았다. 빡 집중했으면 금방 끝날 수도 있었을텐데..
• 테스트 코다가 없다… 아무리 주니어 개밟자라고 해도 TDD에 중요성을 아는데 시작할 엄두도 못 냈다..
• 아무래도 정적 페이지 하나만 있는 없는 프로젝트다 보니 getServerSideProps를 못 써본 아쉬움이 있다.

마무리

기대와 걱정이 많았던 나의 첫 개인 사이드 프로젝트가 끝났다. 물론 여기서 리팩토링과 다양한 기능을 추가적으로 넣어볼려고 하겠지만… 일단은 배포까지 성공했으니까!!

 

위코드를 수료하고 나서 마음 맞는 동기들과 사이드 프로젝트를 하고 싶었지만 다들 회사에 적응하고 바쁘게 지내다 보니 많은 대화를 하지 못했다. 아직까지 기획 단계이지만 조만간 다같이 재밌게 할 수 있는 주제가 나올 것 같아서 조급해 하지 말고 상황에 맞게 천천히 탄탄하게 준비할려고 한다.