끄적끄적

게시판 만들기 (1) (NextJS MaterialUI Template) 본문

React

게시판 만들기 (1) (NextJS MaterialUI Template)

2024. 3. 28. 15:28

문득이자 예전부터 해보고 싶었던, 관련 분야의 게시판을 만들어 보기로 했습니다.

사실 게시판이라고 하면 단순히 CRUD만 있는 간단한 프로젝트 아니냐 라고 할 수 있지만,

그렇게 따지면 무엇이 신선하고 실용적일까.. 하는 생각에 사용자에게 친숙하지만, 

내가 하고 싶은, 필요할 것 같은 서비스를 만들어 보는거 자체에 큰 의미가 있다고 생각해서 만들어 보게 되었습니다.

 

정확히 어떠한 서비스이냐는 서비스의 완성단계에 가면 부끄럽지만 소개를 한번 드리고 싶습니다.

같이 프로젝트를 진행하는 서버 개발자 한분과의 작업을 통해 진행할 것이며, 

디자이너 및 기획자는 없기에, 최대한 디자인이 잘된 라이브러리를 이용해볼것입니다.

 

작업의 진행방향은

디자인구성(MUI) → 상태관리 라이브러리 세팅(Recoil) → API 연동 ( 로그인 부터 순차적으로 )

진행될 예정입니다. 

각 진행단계에서 제가 사용한 stack이나 그 stack을 사용한 방법등을 공유 및 조언을 받고 싶은 마음에 작성된 블로그 입니다.

 

 


● MUI 템플릿

기존에 Material UI에서 다양한 component들을 가져와 사용해 보았지만,

Template 자체를 제공하는건 기억 저 어디 콩알만큼 있었습니다.

디자인이 되어있고, 매우 빠르게 가져다 적용 시킬 수 있는 만큼 프로젝트에 찰떡이라고 생각했습니다.

무료로 제공되는 것도 있고, 유료 버전도 있는데 사실 유료버전이 이쁘긴 하지만 이번엔 무료버전을 사용해 보겠습니다.

https://mui.com/material-ui/getting-started/templates/   ← MUI template

그 중에서 저는 typescript를 사용할 거기 때문에 typescript로 지원된 template을 하나 가져왔습니다.

 

그리고 사용안할 page routing 들은 다 삭제를 하고, 언젠간 쓸일이 있을 거 같은 것들은 냄겨두고 정리를 진행했습니다.

 

우선 이런식으로 틀은 잡았으니, 

2탄에서 상태관리 라이브러리 Recoil을 연결시켜 보겠습니다

 

Comments