🛠️

기술 스택

Front-end

React
TypeScript
Axios
Emotion
shadcn/ui
framer-motion
Redix UI
Zustand
tanstack-Query
MSW

Back-end

Java 17
Spring Boot
MariaDB
Gradle
JPA
Redis
ElasticSearch
Spring Security
Spring Batch
OAuth2 Client
JWT (JSON Web Token)
AWS (Amazon Web Services)
JUnit & Mockito

CI/CD

Vercel

Production

Github Actions
AWS CodeDeploy
AWS EC2
AWS S3

Tools

Visual Studio Code
IntelliJ
Postman
Swagger

Comunication

Slack
Notion
Discord

FE 적용 방식

React

컴포넌트 기반으로 빠르고 효율적인 UI 개발을 위해 React를 선택했습니다. 이를 통해 코드 재사용성을 높이고 유지보수를 쉽게 할 수 있었습니다.

TypeScript

코드의 안전성을 높이기 위해 TS를 도입했습니다. 타입 검사를 통해 버그를 사전에 방지하고, 협업 시 더 명확한 코드 작성이 가능했습니다.

Axios

API 통신을 원활하게 하기 위해 Axios를 사용했습니다. 비동기 요청 관리가 쉬워지고, 응답을 구조화하는 데 도움이 되었습니다.

Emotion

CSS-in-JS 라이브러리인 Emotion을 사용해 스타일을 컴포넌트 단위로 관리할 수 있게 해주었습니다. 이를 통해 디자인을 더 직관적으로 관리하고, 스타일링의 유지보수를 쉽게 할 수 있었습니다.
•
FE 네이밍 규칙에 의해 PascalCase를 사용해서 작명했습니다.

shadcn/ui (+Radix UI)

shadcn/ui를 통해 UI 컴포넌트를 효율적으로 관리하고 커스터마이징할 수 있었습니다. 이를 활용해 프로젝트의 일관된 디자인을 유지하면서도 유연하게 확장할 수 있었습니다.

Framer Motion

UI에 자연스러운 애니메이션 효과를 주기 위해 Framer Motion을 도입했습니다. 사용자 경험을 개선하고, 인터랙션을 강화하는 데 중요한 역할을 했습니다.
•
초기 진입 시 + 로그인 페이지, 좋아요 버튼, 게시글 작성 페이지에 적용했습니다.

Zustand

상태 관리를 위해 Zustand를 도입해서 전역 스토어를 구성했습니다. 각 기능별로 상태를 독립적으로 관리할 수 있는 주요 스토어들은 다음과 같이 사용되었습니다.
•
usePostsStore : 게시글 목록과 상세 정보를 관리하기 위해 생성하였으며, 게시글 데이터를 전역에서 불러오고 업데이트할 수 있도록 했습니다.
•
useMemberStore : 로그인한 사용자의 정보를 관리하기 위한 스토어로, role을 통해 유저와 매니저로 구분했습니다. 매니저는 모든 기능에 접근할 수 있으며, 특히 신고 게시글 리스트 페이지와 특산주 등록 승인/반려 기능에 접근 가능한 권한을 가지고 있습니다. 이러한 역할 구분을 통해 매니저가 특정 기능을 효율적으로 사용할 수 있도록 설계되었습니다. 또한, 해당 스토어에서 각 사용자의 팔로우한 태그 정보를 관리하고 있어, 마이페이지 내 팔로우한 태그 목록 및 팔로우한 태그로 게시글이 작성된 경우 알림 발송 기능에 사용되도록 설계되었습니다.
•
useNotificationStore : 알림 기능을 관리하기 위한 스토어로, 다음 4가지 알림을 전역적으로 관리했습니다. 자신의 게시글에 댓글 작성 시 알림 팔로우한 태그가 포함된 새 게시글 업로드 시 알림 신고가 접수되었을 때 알림 markAsRead 함수에서는 readStatus(읽음) 값이 true인 경우 신규 알림목록에서 제외되어 신규 알림과 읽은 알림을 구분되도록 설계하였습니다.
•
useRegistrationStore : 특산주 신청 시 입력된 정보들을 관리하기 위해 사용했습니다.

tanstack-Query

서버 상태 관리 및 비동기 데이터 fetching을 tanstack-Query로 관리했습니다. 캐싱, 리페칭 등의 기능을 통해 API 성능 최적화를 달성하고 사용자 경험을 개선했습니다.
•
Notification.tsx : useQuery 훅을 사용해서 사용자의 알림 데이터를 가져오도록 했습니다. refetchInterval을 60초로 설정하여 주기적으로 새로운 알림을 확인할 수 있으며, 이를 통해 사용자는 실시간으로 알림을 수신할 수 있습니다. 이 과정에서 tanstack-Query의 데이터 상태 관리 기능을 활용하여 알림 상태를 효율적으로 처리하도록 하였습니다.

MSW (Mock Service Worker)

개발 초기 API 서버가 구현되지 않은 상태에서, 목데이터를 관리하기 위해 MSW를 사용했습니다. 이를 통해 프론트엔드 개발 속도를 높이고, 실제 API가 완성되기 전 충분한 테스트가 가능했습니다.

BE 적용방식

•
Java 17: 프로그래밍 언어
•
Spring Boot: 프로젝트 프레임워크
•
MariaDB: 데이터베이스
•
Gradle: 빌드 및 테스트 자동화 도구
•
JPA: 자바 프로젝트와 DB 간의 연동 도움
•
Redis
◦
특산주 평균 평점 정보 캐싱
◦
태그/특산주 검색시 자동완성 정보 캐싱
•
ElasticSearch
◦
게시글 검색 기능에 사용
◦
태그, 특산주명을 통한 검색을 역인덱스 방식으로 효율적으로 수행
•
Spring Security
◦
로그인/회원가입시 사용자의 인증/인가를 처리함
◦
일반회원/매니저의 역할을 구분 가능하도록함
•
Spring Batch(Scheduler)
◦
특정 스케줄에 맞추어(매월 1일, 사용자의 생일) 특산주를 추천하는 메일 전송
•
Oauth2 Client
◦
소셜 로그인(구글)을 통해 손쉽게 서비스에 가입하도록함
◦
FE 와 이어지는 flow 를 통해 구글로부터 사용자 정보 받아옴
•
JWT
◦
일반로그인/소셜로그인 공통으로 사용됨
◦
로그인 성공시 암호화된 JWT 토큰 반환하여 사용자임을 인증하도록함
◦
Access-Token, Refresh-Token 으로 구분하여 효율성과 보안성을 살림
•
AWS
◦
백엔드 서버 배포시에 EC2 인스턴스 사용
◦
하나의 인스턴스에 스프링부트, ES, Resis, MariaDB 서버 배포후 연동함
◦
S3 에 각종 이미지 파일 업로드하여 url 주소를 DB에 저장함
•
JUnit & Mockito
◦
각 controller 및 service 에 대한 유닛 테스트에 사용