Next.js project - 서울시 문화행사 정보

이전에 React로 만들다가 말았던 프로젝트를 Next.js로 다시 만들어보기로 했다.

 

https://riverpigeon.tistory.com/142

React로 웹페이지 만들기 - 서울시 문화행사(1)

 

만들던 과정에서 부트캠프 과제로 todolist를 만들다가 이것저것 기능을 추가하다보니 길어졌고, todolist 만들기를 끝내니 바로 그룹 프로젝트를 시작해버려서 중간에 그만둔채로 4달동안 방치되어있었다...

 

다시 처음부터 만들려는 이유

다시 프로젝트를 뜯어보니 약간 설계부터 잘못된 프로젝트라는 것을 깨달았다. 

 

가장 큰 문제는 Redux를 처음 사용해보는 과정에서 모든 상태를 redux를 통해 전역상태로 관리하고, 상태를 Reducer로만 관리하려다 보니 코드가 비효율적이고 알아보기 힘들게 작성되어 있었다.

 

그리고 처음 웹페이지에 들어갈 때 한번에 천개 가까이 되는 서울시에서 하는 문화행사 데이터를 모두 불러와 필터링하는 방식으로 작성했었는데, 이렇게하면 데이터를 받아올 때 많은 시간이 걸려 부정적인 사용자 경험을 줄 수 있겠다는 생각이 들었다.

 

사용할 Stacks

1. Next.js

최근에 공부한 Next.js 12버전을 사용하여 프로젝트를 만들어 보기로 했다. SSR 을 사용하여 첫 페이지 렌더링을 빠르게 하고, SEO 최적화를 해서 웹사이트가 좀 더 많이 노출될 수 있도록 해 볼 예정이다.

그리고 Next.js에서 제공하는 staticProps와 Image 컴포넌트 등을 사용하여 웹의 최적화도 해 볼 생각이다.

 

2. React query

천개의 데이터를 한번에 불러오는 것이 아니라 데이터를 필요할 때마다 불러오고, 이미 불러온 데이터는 캐싱하는 등 여러 기능을 가진 React query도 사용해 볼 것이다. 아직 공부중이라 어떤 기능이 있는지 좀 더 알아봐야 할 것 같다.

 

3. MUI(Meterial UI) && Emotion

css 라이브러리를 한 번 써보기로 했다. 종류가 굉장히 많아서 일단은 규모가 가장 큰 MUI를 사용해보려고 한다.

 

MUI가 Emotion을 기준으로 만들어져 있다고 문서에 나와있어서 Emotion도 한 번 써보기로 했다.

Styled-Components와 같은 CSS-in-JS 모듈인데 번들 사이즈가 Styled-Components보다 작고, SSR에 대한 별도의 처리가 필요 없다는 장점이 있다.

 

 

구현할 기능

공공 api에서 주어지는 정보를 바탕으로 검색 기능, 필터링 기능, 페이지네이션(혹은 무한 스크롤) 을 기본 베이스로 구현할 예정이다. 

 

좀 더 사용자와 상호작용할 수 있게 댓글기능을 만들려고 하는데, 댓글을 아무나 무한정 작성할 수 있으면 문제가 될 수도 있을거 같아서 로그인기능을 만들어야 하나 하는 고민이 있다.. 이건 프로젝트를 만들면서 좀 더 생각해봐야 할 것 같다.

 

* 블로그 작성하면서 생각난건데 별점 기능 같은거도 구현하면 좋을 것 같다.

 

 

Reference

- https://gong-check.github.io/dev-blog/FE/%EC%98%A8%EC%8A%A4%ED%83%80/emotion%20%EC%A0%81%EC%9A%A9%EA%B8%B0/

프로젝트에 Emotion 적용기