🧩 프로젝트 초기 회고
이번 프로젝트는 기존 웹 페이지 중 필요한 기능만 선별해 새로운 서버를 구축하는 방식으로 진행하기로 했다.
기존 사이트는 외주 업체로부터 인수인계받은 코드라 구조가 복잡하고 직접 수정하기 애매한 부분이 많았다.
그래서 이번에는 처음부터 내가 직접 구축하면서 구조를 고민하고, 필요한 기능만 깔끔하게 구현해볼 생각이다.
일단, react를 사용할지 next를 사용할지에 대한 고민이 필요하다.
⚙️ 기술 스택 결정 과정
1️⃣ React vs Next.js
항해플러스에서 공부했던 SSR(Server Side Rendering) 과 CSR(Client Side Rendering) 의 차이를 바탕으로 프레임워크 선택을 고민했다.
React의 특징
- 기본적으로 CSR 기반
- 라우팅, SSR, SEO 등은 직접 설정 필요
- 자유도가 높지만, 프로젝트 규모가 커질수록 구조 관리가 어려움
Next.js의 특징
- React 기반 프레임워크로 SSR, SSG, 라우팅, 스타일 관리 기능 내장
- SEO 최적화에 강점
- API Routes로 간단한 백엔드 구현 가능
이번 프로젝트는 단말기에서 보내는 데이터를 테이블과 차트로 시각화하는 것이 핵심이다.
👉 SEO의 필요성이 낮고, SSR의 이점도 크지 않으며 실시간 데이터 처리 중심이기 때문에 React를 선택했다.
또한, 기존에 유지보수하던 웹 페이지도 React로 구성되어 있어 친숙하다는 점도 고려했다.
기존에 유지보수하는 웹 페이지는 이미 너무 커져버려서 원하는 방향으로 진행하지 못 해서 많이 아쉬웠는데 이번에는 내가 원하는 방향으로 짜볼 생각이다. 처음부터 진행한다면 괜찮을 거라는 생각.. 이다 일단은 !
🎨 스타일링: Tailwind CSS 도입
디자인에는 자신이 많지 않기 때문에, 많은 개발자들이 사용하고 있는 Tailwind CSS를 적용하기로 했다.
Tailwind는 직관적인 유틸리티 클래스 기반으로 빠르게 원하는 스타일을 구현할 수 있다는 점이 매력적이다.
설정 과정은 다음과 같다.
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {
colors: {
'brand_main': '#485D99', // 새로운 브랜드 색상 추가
},
},
},
plugins: [],
}postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}index.css
@tailwind base;
@tailwind components;
@tailwind utilities;아직은 Tailwind의 장점을 완전히 체감하진 못했지만,
많은 사람들이 사용하는 만큼 이번 프로젝트에서 직접 적용해보며 감을 잡아볼 생각이다.
💭 마무리 생각
기존 프로젝트는 구조가 너무 커져서 내 의도대로 수정하기 어려웠지만,
이번에는 처음부터 내 손으로 직접 설계하고 구축해본다는 점이 가장 기대된다.
이번 프로젝트를 통해 React와 Tailwind 모두 한 단계 더 익숙해지고,
내가 원하는 방향으로 성장할 수 있는 계기가 되었으면 한다.
