💡 “일기를 쓰고 싶지만, 무엇부터 써야 할지 모르겠는 사람들을 위한 서비스”
매일 제공되는 랜덤 주제를 바탕으로 짧은 일기부터 쉽게 작성할 수 있는 React 기반 일기 공유 서비스
✏️ 초등학교 때 자주 쓰던 일기는 나의 감정과 하루를 정리할 수 있는 좋은 글쓰기였습니다.
하지만 요즘은 여러 이유로 일기를 꾸준히 쓰기 어려워졌다고 생각했습니다.
| 😥 문제 | 💡 해결 아이디어 |
|---|---|
| 어떤 내용을 써야 할지 모르겠다 | 매일 랜덤 주제 제공 |
| 긴 글을 써야 할 것 같아 부담된다 | 짧은 일기도 작성 가능 |
| 혼자 쓰면 지속하기 어렵다 | 다른 사용자의 공개 일기 확인 |
| 내가 언제 썼는지 기억하기 어렵다 | 캘린더로 작성 날짜 표시 |
사용자가 글쓰기의 첫 문장을 고민하지 않도록 돕는 것
이 프로젝트는 단순히 일기를 저장하는 서비스가 아니라, 일기를 시작하는 부담을 줄이는 것에 초점을 두었습니다.
사용자는 랜덤 주제를 통해 자연스럽게 글을 시작할 수 있고, 짧은 기록부터 남기며 일기 쓰기에 익숙해질 수 있습니다.
| Category | Stack |
|---|---|
| ⚛️ Frontend | React, JavaScript |
| 🧱 Markup | HTML |
| 🎨 Styling | CSS, CSS Modules |
| ⚡ Build | Vite |
| 🧭 Routing | React Router DOM |
| 🌐 State | Context API, React Hooks |
| 🔗 API | Axios |
| 🔐 Auth | Access Token, Refresh Token, Bearer Token, Cookie |
| 🧪 Tool | Postman, API 명세서, 공식 문서 |
- ✅ 오늘의 랜덤 일기 주제 제공
- ✅ 주제 기반 일기 작성
- ✅ 자유 주제 작성 가능
- ✅ 같은 주제로 작성한 이전 일기 확인
- ✅ 최근 공개 일기 목록 조회
- ✅ 다른 사용자의 일기 상세 보기
- ✅ 제목 기반 검색
- ✅ 최신순 / 오래된순 정렬
- ✅ 내 일기 목록 조회
- ✅ 일기 수정
- ✅ 일기 삭제
- ✅ 캘린더에서 작성 날짜 확인
- ✅ 회원가입
- ✅ 로그인 / 로그아웃
- ✅ 프로필 이미지 변경
- ✅ 비밀번호 변경
- ✅ 내 일기 공개 여부 설정
- ✅ 내 프로필 공개 여부 설정
프론트엔드 개발 담당
제가 담당한 부분은 다음과 같습니다.
- 화면 UI 구현
- 페이지 라우팅 구성
- API 연동
- 로그인 상태 관리
- 토큰 인증 처리
- 일기 작성 / 수정 / 삭제 기능 구현
- 캘린더 및 모달 상태 관리
- 프로필 이미지 업로드 및 미리보기 구현
프론트엔드라는 직업에 관심을 갖게 된 후 처음 진행한 프로젝트였습니다.
처음에는 다음과 같은 것들이 모두 낯설었습니다.
- API 명세서 읽기
- Postman 사용하기
- 백엔드 API와 데이터 주고받기
- Access Token / Refresh Token 인증 방식
- React Hook 사용 방식
- 컴포넌트 단위 설계
하지만 강의와 공식 문서를 계속 참고하면서 HTML, CSS, JavaScript, React를 학습했고, 배운 내용을 실제 기능 구현에 적용했습니다.
React와 Vite를 사용해 프로젝트를 구성했습니다.
Vite를 통해 빠른 개발 서버 환경을 만들고, 컴포넌트 단위로 화면을 나누어 개발했습니다.
npm run devURL 주소에 맞는 페이지를 렌더링하기 위해 React Router DOM을 사용했습니다.
| 사용 기능 | 역할 |
|---|---|
BrowserRouter |
전체 라우터 감싸기 |
Routes |
라우트 목록 관리 |
Route |
URL별 페이지 연결 |
useNavigate |
특정 페이지로 이동 |
useLocation |
페이지 이동 시 전달된 데이터 사용 |
예를 들어 로그인 성공 후 메인 페이지로 이동하거나, 일기 수정 페이지로 데이터를 전달할 때 라우팅 기능을 활용했습니다.
로그인 상태는 여러 페이지에서 공통으로 사용되기 때문에 Context API를 활용했습니다.
AuthProvider에서는 다음 상태를 관리했습니다.
- 로그인 여부
- 사용자 이름
- 로그인 함수
- 로그아웃 함수
필요한 컴포넌트에서는 useAuth Custom Hook을 통해 인증 상태에 접근하도록 구현했습니다.
또한 일기 상세 모달 상태는 ModalProvider로 분리해 여러 페이지에서 같은 모달 상태를 공유할 수 있도록 만들었습니다.
프로젝트에서 사용한 Hook은 다음과 같습니다.
| Hook | 사용 목적 |
|---|---|
useState |
입력값, 로그인 상태, 일기 목록, 모달 상태 관리 |
useEffect |
API 호출, 초기 데이터 로딩, 로그인 상태 확인 |
useContext |
Context API 상태 접근 |
useMemo |
캘린더 요일 데이터 최적화 |
useCallback |
설정 변경 함수 재사용 |
useNavigate |
페이지 이동 처리 |
useLocation |
라우팅 데이터 전달 |
Hook을 직접 사용하며 React에서 상태와 렌더링 흐름이 어떻게 이어지는지 이해할 수 있었습니다.
반복적으로 사용하는 로직은 Custom Hook으로 분리했습니다.
대표적으로 사용자의 프로필 이미지를 조회하는 로직을 useMyAvatar로 분리했습니다.
이를 통해 여러 컴포넌트에서 같은 로직을 재사용할 수 있었고, 컴포넌트 내부 코드가 복잡해지는 것을 줄일 수 있었습니다.
로그인 성공 시 서버에서 다음 토큰을 전달받습니다.
access tokenrefresh token
프론트엔드에서는 토큰을 Cookie에 저장하고, API 요청 시 Axios Interceptor를 통해 자동으로 헤더에 추가했습니다.
Authorization: Bearer access_tokenAccess Token이 만료되면 서버 응답의 TOKEN_EXPIRED 값을 확인한 뒤, Refresh Token을 사용해 Access Token을 재발급받도록 구현했습니다.
이를 통해 사용자가 다시 로그인하지 않아도 서비스를 이어서 이용할 수 있도록 했습니다.
이번 프로젝트를 통해 단순한 React 문법뿐만 아니라 실제 프론트엔드 개발 흐름을 경험할 수 있었습니다.
- API 명세서를 읽고 필요한 데이터를 파악하는 방법
- Postman으로 API 요청을 테스트하는 방법
- React Router를 활용한 SPA 라우팅
- Context API를 활용한 전역 상태 관리
- React Hook을 이용한 상태 및 생명주기 관리
- Custom Hook을 통한 로직 재사용
- Axios Interceptor를 활용한 인증 흐름 처리
- 백엔드 API 응답 데이터를 화면에 연결하는 방법
“처음에는 낯설었지만, 직접 구현하면서 프론트엔드 개발의 흐름을 이해할 수 있었습니다.”
이 프로젝트는 프론트엔드 개발자로서 처음 진행한 프로젝트였습니다.
API 명세서, Postman, 토큰 인증 방식 모두 처음에는 어렵게 느껴졌지만, 공식 문서와 강의를 참고하며 기능을 하나씩 구현했습니다.
특히 로그인 상태 관리와 토큰 인증 처리를 구현하면서 프론트엔드는 단순히 화면을 만드는 역할이 아니라, 사용자 경험과 서비스 흐름을 책임지는 중요한 영역이라는 것을 느꼈습니다.
| Before | After |
|---|---|
| API 명세서 읽기가 어려웠음 | 필요한 요청/응답 데이터를 파악할 수 있게 됨 |
| React Hook 사용이 낯설었음 | 상황에 맞게 Hook을 사용할 수 있게 됨 |
| 페이지 이동 처리가 어려웠음 | React Router로 SPA 라우팅을 구현할 수 있게 됨 |
| 로그인 유지 방식이 어려웠음 | Token + Cookie + Interceptor 흐름을 이해하게 됨 |
처음에는 API 명세서조차 낯설었지만, 직접 부딪히며 React 기반 프론트엔드 서비스의 전체 흐름을 이해할 수 있었던 프로젝트입니다.