일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- todolist
- React
- 자바스크립트
- 투두리스트
- Recoil
- JS
- 파이어베이스
- 리액트
- Next
- Redux
- 넥스트
- customModal component 만들기
- debounce
- programmers
- 리엑트
- 달리기경주
- 생명주기
- google firebase
- useMutation
- react-query
- csr
- JavaScript
- 리덕스
- lifecycle
- 배열
- Firebase
- SSR
- next-pwa
- NextJS
- 겹치는 선분의 길이
- Today
- Total
끄적끄적
게시판 만들기 (1) (NextJS MaterialUI Template) 본문
문득이자 예전부터 해보고 싶었던, 관련 분야의 게시판을 만들어 보기로 했습니다.
사실 게시판이라고 하면 단순히 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을 연결시켜 보겠습니다
'React' 카테고리의 다른 글
게시판 만들기 (3) 세션관리 훅 만들기(useSession) (0) | 2024.04.15 |
---|---|
게시판 만들기 (2) (Recoil 설정하기) (0) | 2024.03.28 |
[React-Query] useMutation 간단하게 사용해보기 (0) | 2024.01.15 |
[React-Query] useQuery 간단한 사용법 알아보기 (1) | 2024.01.14 |
React-Query ?! 그게 뭔데? (1) | 2024.01.11 |