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을 사용해 스타일을 컴포넌트 단위로 관리할 수 있게 해주었습니다. 이를 통해 디자인을 더 직관적으로 관리하고, 스타일링의 유지보수를 쉽게 할 수 있었습니다.

<aside>

• FE 네이밍 규칙에 의해 PascalCase를 사용해서 작명했습니다. </aside>

shadcn/ui (+Radix UI)

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

Framer Motion

UI에 자연스러운 애니메이션 효과를 주기 위해 Framer Motion을 도입했습니다. 사용자 경험을 개선하고, 인터랙션을 강화하는 데 중요한 역할을 했습니다.

<aside>

• 초기 진입 시 + 로그인 페이지, 좋아요 버튼, 게시글 작성 페이지에 적용했습니다. </aside>

Zustand

상태 관리를 위해 Zustand를 도입해서 전역 스토어를 구성했습니다. 각 기능별로 상태를 독립적으로 관리할 수 있는 주요 스토어들은 다음과 같이 사용되었습니다.

<aside>

</aside>