개인 프로젝트를 진행하면서 기록하기위한 시리즈이다!
엉성하고 부족한 부분도 많지만 기록하면서 진행하기 위해 벨로그에 올리기로 결심하였다!
1. 프로젝트 개요
계획, 개요를 통해 프로그램의 구조에 대해 생각해보고, 부족한 실력이지만
UML(Unified Modeling Language)중 하나인 Use case Diagram을 활용해 보았다.
UML과 Use case에 대해 얕게 이해하고 작성하다보니, 허술하고 맞지 않은
부분도 있다고 생각하지만... 컨펌받을 곳이 없다 (;´༎ຶД༎ຶ) 컨펌환영...!!!
필요한 기능들을 서술해보긴 했는데..... (다 구현할 수 있을까? ( ˶ ᷇ 𖥦 ᷆ ˵ ) )
2. 프로젝트 구조
위의 자료에서 나와 있듯, 프론트를 React로 구성하고 Express(node.js)로 서버를 열어 DB를 통해 CRUD를 수행할 예정이다.
백부터 작성하여 기능을 먼저 구현하면 좋겠지만, 혼자서 게시판을 구성해 보는 것은 처음이기도 하고, 배운 React를 복습할 겸 기초적인 틀을 세우면 좋겠다 싶어서 React로 기본적인 틀을 작성해보고자 하였다.
3. React + Tailwind + DaisyUI
부트스트랩이 익숙하기도 하고, 경험해본 바가 있어 부트스트랩으로 진행하고자 하다가,
React + Tailwind 조합이 꽤 자주 사용된다는 얘기를 들은 바도 있고, 또 한번 배워보고자 하는 마음으로
위와 같은 조합으로 구성하였다. DaisyUI는 단독으로 존재한다기 보단, Tailwind 사용을 더욱 원활하게
해주기에 함께 조합하여 사용하였다.
위 글에서 tailwind에 대한 설치, 및 적용방법을 참고하였다.
- tailwind css
: tailwind css 코어 패키지 - postcss
: tailwind css를 순수 css로 변환하는 전처리기 패키지 - autoprefixer
: 벤더 프리픽스를 자동으로 넣어주는 패키지인데,
이 벤더 프리픽스는 브라우저별로 다르게 지원되는 것이라고 한다(?) - postloader
: webpack이 post css를 읽어들일 수 있도록 해주는 로더
이렇게 네 개의 패키지를 설치하게 되는데 하나 하나에 대한 완벽한 이해를 하기엔 조금 시간이 걸릴 것 같다..... ʕo•ᴥ•ʔ✎
개인적으로 이해한 바를 기록한 것이라 틀린정보가 있을 수 있습니다.
틀린 내용이 있다면 지적 부탁드리며 조언도 감사합니다 ! 😄
