개인 프로젝트 기획 및 설계

프로젝트 진행 해보기

미니프로젝트가 끝나고 UX/UI를 배우며 피그마를 배웠다 피그마로 와이어 프레임을 제작함으로써 UI 구조를 빠르게 시각화하여 전체적인 흐름을 정리하고 구현해야 할 기능들을 정리하도록 하였다.

프로젝트 개요

나만 사용할 수 있는 개인 블로그 개발 계획
목표:나만 글을 작성 및 관리하고,방문자는 읽기만 가능한 개인 블로그
기술 스택:프론트엔드: React + Tailwind
백엔드: Spring Boot + MyBatis
DB: MySQL
인증: JWT (로그인 후 본인만 글 작성 가능)

기능목록

회원 인증 (나만 로그인 가능)
게시글 CRUD (글 작성/수정/삭제/조회)
방문자는 글 조회만 가능
마크다운 지원 (글쓰기 편하게)
카테고리 및 태그 추가
SEO 최적화 (검색에 걸리도록)
다크모드 지원

고려해볼 기능

이미지 업로드 기능

피그마로 UI 구조 시각화

React + Vite + Typescript 환경 세팅

$ npm init vite@latest blog --template react-ts
$ cd blog
$ npm i

TailwindCSS 세팅

$ npm install -D tailwindcss postcss autoprefixer
$ npx tailwindcss init -p

tailwind.config.js 파일을 다음과 같이 수정한다.

odule.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

index.css 파일에 다음 코드를 추가한다.

@tailwind base;
@tailwind components;
@tailwind utilities;

prettierrc 설정

{
  "printWidth": 100, 
  "semi": true, 
  "singleQuote": false, 
  "tabWidth": 2, 
  "trailingComma": "es5",
  "arrowParens": "always"
} 

설정 오류

postcss.config.js 파일에서 ES 모듈 구문과 CommonJS 구문 간의 충돌로 발생하는 문제가 자꾸 발생하였다..

postcss.config.cjs 파일을 바꾸고
pakage.json의 type:"module"을 바꿔도 해결되지 않았다...
그렇게 우여곡절 끝에
vite.config.ts를 바꿧더니 해결이 되었다.

// vite.config.ts
export default {
  server: {
    hmr: {
      overlay: false,
    },
  },
};