본문 바로가기
IT개발/개인프로젝트

[AutoSume 프로젝트] React, Spring Boot, ChatGPT로 웹앱 개발: AutoSume 기술 학습 기록

by 시간기억자 2025. 4. 18.
반응형

1. 개요

AutoSume는 React, Spring Boot, ChatGPT API를 활용해 자소서 자동 생성과 채용 공고 분석을 구현하는 풀스택 프로젝트이다. 이 포스트는 프로젝트에 사용된 기술(React, TypeScript, Tailwind CSS, Spring Boot, JPA, Spring Security, Python, FastAPI, BeautifulSoup, ChatGPT API, MySQL, JWT)의 핵심 개념과 학습 내용을 정리한다. 초보 개발자로서 기술을 배우고 포트폴리오를 만드는 과정이 목표다.

1.1 학습 목표

  • React와 TypeScript로 동적 UI 구현.
  • Spring Boot와 JPA로 REST API와 데이터베이스 연동.
  • ChatGPT API로 AI 기반 자소서 생성.
  • Python과 FastAPI로 채용 공고 크롤링.
  • JWT로 인증 시스템 구축.

1.2 프로젝트 구조

[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)

2. 프론트엔드 기술

2.1 React

React는 컴포넌트 기반 UI 라이브러리다. AutoSume의 페이지(Write.tsx, List.tsx)와 컴포넌트(Header.tsx)를 구성한다.

핵심 개념

  • 컴포넌트: 재사용 가능한 UI 단위. 함수형 컴포넌트 사용.
  • JSX: HTML-like 문법으로 UI 정의.
  • 상태 관리: useState로 데이터 관리.
  • 효과 훅: useEffect로 비동기 작업 처리.
  • 라우팅: react-router-dom으로 페이지 이동.

학습 포인트

  • useState로 사용자 입력 관리.
  • useEffect로 API 호출.
  • React Router로 /write, /list 이동.

코드 예시

// 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="경험, 스킬 입력"
    />
  );
}

질문+답변

  • 질문: useState는 왜 필요한가?
    • 답변: 상태를 저장하고 변경 시 UI를 자동 업데이트한다. 예: textarea 입력값 저장.
  • 질문: useEffect는 언제 쓰는가?
    • 답변: 컴포넌트 렌더링 후 API 호출이나 초기화 작업에 사용. 예: 자소서 목록 로드.

학습 자료

  • React Docs: 기본 개념과 훅.
  • Scrimba React Course: 인터랙티브 강의.
  • Todo App Tutorial: 실습 프로젝트.

2.2 TypeScript

TypeScript는 JavaScript에 타입을 추가해 안정성을 높인다. AutoSume에서 Props와 API 응답 타입을 정의한다.

핵심 개념

  • 타입: string, number, boolean, interface.
  • 인터페이스: 객체 구조 정의.
  • 타입 추론: 변수 타입 자동 추론.
  • 제네릭: 재사용 가능한 타입.

학습 포인트

  • Props 타입 정의.
  • API 응답 타입 설계.
  • any 사용 지양.

코드 예시

interface Resume {
  id: number;
  title: string;
  content: string;
}
function ResumeList({ resumes }: { resumes: Resume[] }) {
  return <div>{resumes.map(r => <p>{r.title}</p>)}</div>;
}

질문+답변

  • 질문: TypeScript 없이 JavaScript만 써도 되나?
    • 답변: 가능하지만, 타입 에러를 런타임에서 발견. TypeScript는 개발 중 에러 감지.
  • 질문: interface와 type의 차이는?
    • 답변: interface는 객체 구조에 특화, 확장 가능. type은 유니온 타입 등 유연.

학습 자료

  • TypeScript Handbook: 기초부터 고급.
  • TypeScript for React: React 적용.
  • TypeScript Todo: 실습.

2.3 Tailwind CSS

Tailwind CSS는 유틸리티 기반 CSS 프레임워크다. AutoSume의 반응형 UI를 빠르게 구현한다.

핵심 개념

  • 유틸리티 클래스: flex, p-4, text-xl로 스타일 적용.
  • 반응형 디자인: sm:, md: 접두사로 화면 크기별 스타일.
  • 커스터마이징: tailwind.config.js로 테마 설정.

학습 포인트

  • 기본 클래스(flex, grid, p-, m-) 익히기.
  • 반응형 레이아웃 구현.
  • Tailwind와 React 조합.

코드 예시

<div className="max-w-3xl mx-auto p-4">
  <button className="bg-blue-600 text-white px-6 py-2 rounded">생성</button>
</div>

질문+답변

  • 질문: Tailwind 없이 CSS로 하면 어떤가?
    • 답변: 가능하지만, CSS 작성 시간이 길고 유지보수 어려움. Tailwind는 빠르고 일관성 제공.
  • 질문: sm:grid-cols-2는 무슨 뜻인가?
    • 답변: 작은 화면(sm)에서 2열 그리드 레이아웃 적용.

학습 자료

  • Tailwind CSS Docs: 클래스 설명.
  • Tailwind Crash Course: 기초 실습.
  • Tailwind Landing Page: UI 제작.

3. 백엔드 기술

3.1 Spring Boot

Spring Boot는 Java 기반 웹 프레임워크다. AutoSume의 REST API를 제공한다.

핵심 개념

  • REST API: HTTP 메서드(GET, POST)로 데이터 제공.
  • 컨트롤러: @RestController로 API 엔드포인트 정의.
  • 서비스: 비즈니스 로직 처리.
  • 의존성 주입: @Autowired로 객체 주입.

학습 포인트

  • Gradle로 프로젝트 설정.
  • /api/resumes 같은 API 구현.
  • ChatGPT API 호출 로직 추가.

코드 예시

@RestController
@RequestMapping("/api/resumes")
public class ResumeController {
  @Autowired
  private ResumeService service;
  
  @GetMapping
  public List<Resume> getResumes() {
    return service.findAll();
  }
}

질문+답변

  • 질문: Spring Boot 없이 Node.js 써도 되나?
    • 답변: 가능하지만, Spring Boot는 안정적이고 대규모 프로젝트에 적합.
  • 질문: @RestController는 뭔가?
    • 답변: HTTP 요청을 받아 JSON 응답을 반환하는 클래스.

학습 자료

  • Spring Boot Guides: 기초부터 고급.
  • Spring Boot Tutorial: 초보 친화.
  • REST API: 실습.

3.2 JPA

JPA는 데이터베이스와 Java 객체를 매핑한다. AutoSume의 User, Resume 데이터를 관리한다.

핵심 개념

  • 엔티티: @Entity로 테이블 매핑.
  • 리포지토리: CrudRepository로 데이터 작업.
  • 관계: @OneToMany, @ManyToOne으로 테이블 관계.

학습 포인트

  • User, Resume 엔티티 설계.
  • 리포지토리로 CRUD 구현.
  • MySQL 연동.

코드 예시

@Entity
public class Resume {
  @Id
  @GeneratedValue(strategy = GenerationType.IDENTITY)
  private Long id;
  private String title;
  private String content;
}

질문+답변

  • 질문: JPA 없이 SQL로 하면 어떤가?
    • 답변: 가능하지만, JPA는 코드량 줄이고 객체 지향적으로 작업.
  • 질문: @OneToMany는 언제 쓰나?
    • 답변: 한 객체가 여러 객체를 가질 때. 예: User가 여러 Resume.

학습 자료

  • Spring Data JPA: 기초부터 고급.
  • JPA Tutorial: 초보 친화.
  • JPA CRUD: 실습.

3.3 Spring Security

Spring Security는 인증/인가를 관리한다. AutoSume의 JWT 로그인과 API 보호에 사용된다.

핵심 개념

  • 인증: 사용자 신원 확인.
  • 인가: 권한 확인.
  • JWT: 토큰 기반 인증.

학습 포인트

  • JWT 필터 설정.
  • 로그인 API 구현.
  • @PreAuthorize로 권한 관리.

코드 예시

@Configuration
@EnableWebSecurity
public class SecurityConfig {
  @Bean
  public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
    http.authorizeRequests().antMatchers("/api/**").authenticated();
    return http.build();
  }
}

질문+답변

  • 질문: JWT는 뭔가?
    • 답변: 사용자 정보를 암호화한 토큰. API 요청 시 인증.
  • 질문: OAuth2는 필요한가?
    • 답변: GitHub 로그인 등 추가 시 유용. MVP는 JWT로 충분.

학습 자료

  • Spring Security: 기초부터 고급.
  • Spring Security Tutorial: JWT 포함.
  • JWT Authentication: 실습.

4. 크롤링 서버 기술

4.1 Python

Python은 크롤링 서버의 핵심 언어다. AutoSume에서 채용 공고 데이터를 수집한다.

핵심 개념

  • 문법: 변수, 리스트, 함수.
  • 라이브러리: requests, BeautifulSoup.
  • 비동기: asyncio로 성능 향상.

학습 포인트

  • HTML 구조 파싱.
  • JSON 데이터 변환.
  • FastAPI 연동.

코드 예시

import requests
from bs4 import BeautifulSoup

url = "https://example.com/jobs"
response = requests.get(url)
soup = BeautifulSoup(response.text, 'html.parser')
jobs = soup.select('.job-title')

질문+답변

  • 질문: Python 없이 Java로 크롤링 가능한가?
    • 답변: 가능(Jsoup)하지만, Python은 라이브러리 풍부하고 간결.
  • 질문: 크롤링의 법적 문제는?
    • 답변: 사이트 약관 확인. 공공 API 사용 권장.

학습 자료

  • Python Docs: 기초부터 고급.
  • Python for Beginners: 초보 친화.
  • Web Scraping: 실습.

4.2 FastAPI

FastAPI는 Python 기반 API 프레임워크다. AutoSume에서 크롤링 데이터를 제공한다.

핵심 개념

  • 엔드포인트: @app.get, @app.post.
  • 비동기: async def로 고성능.
  • Pydantic: 데이터 검증.

학습 포인트

  • API 서버 설정.
  • 크롤링 데이터 JSON 반환.
  • Spring Boot와 통신.

코드 예시

from fastapi import FastAPI
app = FastAPI()

@app.get("/jobs")
async def get_jobs():
  return {"jobs": ["Job 1", "Job 2"]}

질문+답변

  • 질문: FastAPI 대신 Flask 써도 되나?
    • 답변: 가능하지만, FastAPI는 비동기와 문서화 우수.
  • 질문: Swagger는 뭔가?
    • 답변: FastAPI가 제공하는 API 테스트 UI.

학습 자료

  • FastAPI Docs: 기초부터 고급.
  • FastAPI Tutorial: 초보 친화.
  • FastAPI CRUD: 실습.

4.3 BeautifulSoup

BeautifulSoup은 HTML 파싱 라이브러리다. AutoSume에서 채용 공고 데이터를 추출한다.

핵심 개념

  • 파싱: soup.find, soup.select.
  • 요청: requests.get.
  • 데이터 정리: JSON 변환.

학습 포인트

  • HTML/CSS 셀렉터 이해.
  • 채용 사이트 구조 분석.
  • 에러 처리.

코드 예시

from bs4 import BeautifulSoup
import requests

response = requests.get("https://example.com")
soup = BeautifulSoup(response.text, 'html.parser')
title = soup.find('h1').text

질문+답변

  • 질문: BeautifulSoup 대신 Selenium 필요한가?
    • 답변: 동적 페이지면 Selenium, 정적 페이지면 BeautifulSoup 충분.
  • 질문: 크롤링 속도 느리면?
    • 답변: asyncio나 멀티스레딩 사용.

학습 자료

  • BeautifulSoup Docs: 기초부터 고급.
  • Web Scraping: 초보 친화.
  • Job Board Scraping: 실습.

5. 추가 기술

5.1 ChatGPT API

ChatGPT API는 자소서 생성에 사용된다. AutoSume의 핵심 기능이다.

핵심 개념

  • 프롬프트: AI에 지시 제공.
  • API 호출: /chat/completions 요청.
  • 모델: gpt-3.5-turbo.

학습 포인트

  • API 키 관리(.env).
  • 프롬프트 설계.
  • 응답 파싱.

코드 예시

import axios from 'axios';
async function generateResume(input: string) {
  const response = await axios.post('https://api.openai.com/v1/chat/completions', {
    model: 'gpt-3.5-turbo',
    messages: [{ role: 'user', content: `자소서 작성: ${input}` }],
  }, {
    headers: { Authorization: `Bearer ${import.meta.env.VITE_OPENAI_API_KEY}` }
  });
  return response.data.choices[0].message.content;
}

질문+답변

  • 질문: 프롬프트 설계는 왜 중요한가?
    • 답변: AI의 답변 품질은 프롬프트에 의존. 명확한 지시 필요.
  • 질문: API 호출 에러는?
    • 답변: 키 오류, 네트워크 문제 등 try-catch로 처리.

학습 자료

  • OpenAI API Docs: 기초부터 고급.
  • OpenAI Tutorial: 초보 친화.
  • Chatbot: 실습.

5.2 MySQL

MySQL은 관계형 데이터베이스다. AutoSume의 데이터를 저장한다.

핵심 개념

  • 테이블: ERD 기반 설계.
  • 쿼리: SELECT, INSERT.
  • 인덱스: 검색 성능 최적화.

학습 포인트

  • User, Resume 테이블 설계.
  • JPA와 연동.
  • 기본 SQL 작성.

코드 예시

CREATE TABLE resume (
  id BIGINT AUTO_INCREMENT PRIMARY KEY,
  title VARCHAR(255),
  content TEXT
);

질문+답변

  • 질문: MySQL 대신 MongoDB 써도 되나?
    • 답변: 가능하지만, AutoSume는 관계형 데이터에 적합.
  • 질문: 인덱스는 왜 필요한가?
    • 답변: 검색 속도 향상. 예: id로 빠른 조회.

학습 자료

  • MySQL Docs: 기초부터 고급.
  • MySQL Tutorial: 초보 친화.
  • MySQL CRUD: 실습.

5.3 JWT

JWT는 토큰 기반 인증이다. AutoSume의 로그인과 API 보호에 사용된다.

핵심 개념

  • 구조: 헤더, 페이로드, 서명.
  • 발급/검증: 로그인 시 토큰 발급, 요청 시 검증.
  • 보안: 만료 시간, HTTPS.

학습 포인트

  • Spring Security에서 JWT 구현.
  • 프론트엔드 토큰 저장.
  • API 요청에 토큰 추가.

코드 예시

const token = localStorage.getItem('token');
axios.get('/api/resumes', {
  headers: { Authorization: `Bearer ${token}` }
});

질문+답변

  • 질문: JWT 없이 세션 써도 되나?
    • 답변: 가능하지만, JWT는 서버 부하 적고 확장성 좋음.
  • 질문: 토큰은 어디 저장?
    • 답변: localStorage 또는 httpOnly 쿠키. 보안 위해 후자 권장.

학습 자료

  • JWT.io: 기초부터 고급.
  • JWT Tutorial: 초보 친화.
  • JWT with Spring: 실습.

6. 학습 계획

  • 프론트엔드 (2~3주): React, TypeScript, Tailwind로 UI 완성.
  • ChatGPT API (1주): 자소서 생성 구현.
  • 백엔드 (3~4주): Spring Boot, JPA로 API와 DB 연동.
  • 인증 (1~2주): JWT로 로그인 구현.
  • 크롤링 (2~3주): Python, FastAPI로 공고 수집.
  • 배포 (1~2주): Vercel, Heroku로 배포.

 

 

반응형
저작자표시

'IT개발 > 개인프로젝트' 카테고리의 다른 글

[AutoSume 프로젝트 이슈] IntelliJ에서 TypeScript 파일이 TypoScript로 인식되는 오류 해결 방법 (Community 버전 이슈)  (0) 2025.04.21
[StudySync 프로젝트] Vue 3 + TypeScript + Tailwind CSS로 StudySync 프론트엔드 설정  (1) 2025.04.19
[AutoSume 프로젝트] React를 활용한 프론트엔드 개발 진행중  (0) 2025.04.18
🚀 Vite + React + TypeScript + Tailwind CSS로 포트폴리오 웹앱 개발 환경 구축하기  (0) 2025.04.11

관련글

댓글

티스토리툴바