반응형
1. 프로젝트 개요
AutoSume는 채용 공고 분석과 자소서 자동 생성을 목표로 하는 개인 풀스택 프로젝트이다. React, TypeScript, Spring Boot, ChatGPT API를 활용해 개발 중이며, 취업 준비생을 위한 도구로 기획했다. 이 포스트는 프로젝트 구조, 기술 스택, 개발 과정, 학습 내용을 기록한다.
1.1 주요 기능
- 자소서 생성: 사용자 입력을 ChatGPT API로 처리해 자소서 답변 생성.
- 자소서 관리: 생성된 자소서를 목록으로 저장, 조회, 삭제.
- 다운로드: 자소서를 PDF 또는 텍스트로 내보내기.
- 인증: 로그인/회원가입으로 사용자별 자소서 관리.
- 크롤링(예정): 채용 공고 데이터 수집 및 기술 트렌드 분석.
1.2 목표
- 풀스택 개발 학습: 프론트엔드, 백엔드, AI 연동 경험.
- 포트폴리오 제작: GitHub와 Notion으로 결과물 정리.
- AI 활용: ChatGPT API로 실용적인 기능 구현.
2. 기술 스택 및 구조
프로젝트는 프론트엔드, 백엔드, 크롤링 서버로 구성된다. 각 기술의 역할과 학습 포인트를 정리한다.
2.1 프론트엔드
- React: 컴포넌트 기반 UI 구현. Write.tsx, List.tsx, View.tsx 등 페이지 구성.
- TypeScript: 변수와 API 응답 타입 정의로 코드 안정성 향상.
- Tailwind CSS: 클래스 기반 스타일링으로 반응형 디자인 구현.
- 학습 포인트:
- useState, useEffect로 상태 관리와 비동기 요청 처리.
- React Router로 페이지 간 이동.
- Tailwind CSS로 모바일/데스크톱 반응형 레이아웃.
2.2 백엔드
- Spring Boot: REST API 제공. /api/resumes, /api/users 등 엔드포인트 구현.
- JPA: MySQL과 엔티티 매핑으로 데이터 관리.
- Spring Security: JWT로 API 인증 및 보호.
- 학습 포인트:
- 컨트롤러, 서비스, 리포지토리 구조 이해.
- JPA로 엔티티 관계(@OneToMany) 설정.
- JWT 토큰 발급 및 검증.
2.3 크롤링 서버 (예정)
- Python: 채용 공고 데이터 수집.
- FastAPI: 크롤링 데이터를 REST API로 제공.
- BeautifulSoup: HTML 파싱으로 제목, 기술 스택 추출.
- 학습 포인트:
- HTML/CSS 셀렉터로 데이터 추출.
- 비동기 크롤링(asyncio)으로 성능 최적화.
- FastAPI와 Spring Boot 간 REST 통신.
2.4 ChatGPT API
- 역할: 사용자 입력을 기반으로 자소서 답변 생성.
- 학습 포인트:
- 프롬프트 설계: "지원 동기 200자 작성" 같은 지시.
- API 호출: axios로 /chat/completions 요청.
- 에러 처리: 네트워크 오류, 키 문제 대응.
2.5 기술 구조도
[Client: React + TypeScript + Tailwind]
|
| 🔐 로그인, 자소서 생성, 공고 조회 요청 (JWT 포함)
▼
[Backend: Spring Boot + JPA + Spring Security]
|
├─ 📂 REST API 제공 (User, JobPosting, Resume 등)
├─ 🔐 JWT 인증 & OAuth2 로그인(GitHub optional)
├─ 🧠 GPT API 호출 (OpenAI)
└─ 🗃 MySQL 연동 (JPA + Entity 기반)
▲
|
[Python Crawling Server: FastAPI + BeautifulSoup]
└─ 채용공고 크롤링 요청 수신
(키워드 기반 수집 + DB 저장 via REST)3. 개발 진행 상황
3.1 기획 및 설계
- ERD: User, Resume, JobPosting, UserProfile, ResumeLog 테이블 설계.
- API 명세: /api/resumes (CRUD), /api/users (인증) 등 정의.
- 와이어프레임: 메인, 자소서 생성, 목록, 상세 보기 페이지 설계.
3.2 프론트엔드 구현
- MainLayout.tsx: 헤더, 푸터 포함 공통 레이아웃.
- Home.tsx: 서비스 소개와 CTA 버튼.
- Write.tsx: 사용자 입력(textarea)과 자소서 생성 버튼.
- // src/pages/Write.tsx import { useState } from 'react'; export default function Write() { const [userInput, setUserInput] = useState(''); return ( <textarea value={userInput} onChange={(e) => setUserInput(e.target.value)} placeholder="경험, 스킬 등을 입력" /> ); }
- 진행 예정: List.tsx, View.tsx, Export.tsx 구현.
3.3 ChatGPT API 연동
- 현재 Write.tsx에서 사용자 입력을 처리하는 UI 준비 완료.
- 다음 단계로 ChatGPT API 호출 예정.
- 계획:
- .env로 API 키 관리.
- axios로 /chat/completions 요청.
- 프롬프트: "사용자 입력 기반으로 지원 동기, 강점 작성".
3.4 백엔드 준비
- Spring Boot 프로젝트 설정 예정(Gradle, MySQL).
- 계획:
- User, Resume 엔티티 정의.
- /api/resumes API로 자소서 CRUD 구현.
- JWT 인증 추가.
3.5 크롤링 (예정)
- 원티드, 사람인 등 채용 사이트 크롤링 계획.
- FastAPI로 데이터 제공, Spring Boot와 연동 예정.
4. 학습 기록
4.1 React
- useState로 사용자 입력 관리.
- useEffect로 API 호출 준비.
- 문제 해결: textarea 입력이 실시간 반영 안 되는 이슈 → onChange 이벤트 추가.
4.2 TypeScript
- 인터페이스로 Props와 API 응답 타입 정의.
- 학습 포인트: any 대신 구체적 타입 사용으로 에러 감소.
4.3 Tailwind CSS
- flex, grid로 반응형 레이아웃 구현.
- 팁: sm:, md: 접두사로 모바일/데스크톱 스타일 분리.
4.4 ChatGPT API
- 프롬프트 설계 중요성 학습.
- 계획: API 호출 에러 처리와 응답 최적화.
4.5 Spring Boot (예정)
- REST API와 JPA 학습 예정.
- 목표: 컨트롤러, 서비스, 리포지토리 구조 이해.
5. 향후 계획
- 프론트엔드: List.tsx, View.tsx, 다운로드 기능 구현.
- 백엔드: Spring Boot로 API와 인증 구축.
- 크롤링: Python 서버로 채용 공고 데이터 수집.
- 배포: Vercel(프론트엔드), Heroku(백엔드).
- 포트폴리오: GitHub README, Notion에 상세 기록.
반응형
댓글