SK networks AI Camp - 8월 3주차 회고록

이번 주에 Mini project 발표와 Machine Learning, 데이터 전처리를 위한 Pandas와 Numpy 를 사용하는 수업을 하였습니다.

[8월 3주차 배운 내용]

2024.08.20 - [Networks/데이터 분석 및 AI] - SK networks AI Camp - Numpy 기초

SK networks AI Camp - Numpy 기초

2024.08.20 - [Networks/데이터 분석 및 AI] - SK networks AI Camp - Machine Learning(용어 및 모듈 정리)

SK networks AI Camp - Machine Learning(용어 및 모듈 정리)

2024.08.21 - [Networks/데이터 분석 및 AI] - SK networks AI Camp - Pandas 심화

SK networks AI Camp - Pandas 심화

 

KPT - KEEP, Problem, Try

○ Keep : 현재 만족하는 부분, 계속 이어갔으면 하는 부분

 

  1. 토이 프로젝트 : 현재까지 에자일 1번 발표 전까지는 완료

      - 크롤링을 4번(lotte, LCK 팀 승률, LCK 상세 기록, alt값만 뽑기 등)을 진행하고 모듈화 및 데이터 전처리가 끝남

      - Django를 통하여 Project를 실행하고 app을 빌드하는 것까지는 수월하게 진행이됨

      - 프로젝트의 구조를 이해하면서 사용을 할 때 필요한 것들에 대하여 알게됨

  2. 코드를 짜기 전에 디자인을 먼저 하는 습관을 들인 것

      - 코드 작성 전에 어떻게 구현해야 하고 돌아가는 동작 구조에 대해 먼저 생각하게 됨

      - 이번 크롤링하는 경기 상세 내용의 경우 사이트 특성상 구조가 복잡했음

  3. Spring Boot를 통한 서버 연결

     - 토이 프로젝트에서 현재 사용하는 Django/nginx가 아닌 Server를 Spring으로 연동하기 위해 학습 중

     - Java에 대한 학습과 Spring-Boot의 흐름을 알게됨

○ Problem

  1. 토이 프로젝트 - 데이터 전처리 파트

      - 만들어서 저장하였던 Json 파일에서 오류가 발생하였음

      - dictionary로 구성하여 안에 일정한 key값을 리스트로 넣게 하였지만 이 후 다른 컴퓨터에서 열 때
         json의 형식에 오류가 발생하고 열렸을 때 한 컬럼에 모든 데이터가 들어가는 현상 발생

  2. 토이 프로젝트 - AWS 연결 부분

      - 미니 프로젝트에서 AWS에서 막혔었음. 그래서 해당 프로젝트를 완료한 후에 진행하였던 방식으로

        토이 프로젝트를 연동하는 과정에서 에러가 발생

      - 현재 AWS에서 CodeBuild 과정에서 CLIENT_ERROR: authorization failed for primary source가 발생하였음

        (이 후 해결할 예정)

  3. Spring-Boot 부분

      - 자바로 사용되는 Spring-Boot여서 코드 작성 및 어려움이 큰 경향이 있음

      - 또한 Controller, Model, Service, Repository 등 서비스 연결과정에서 에러가 발생하는 어려움이 있었음

      - pom.xml에서 의존성이 충돌하는 경우가 많았음. 특히 javax.annotation에서 에러가 자주 발생함

 

[메모한 트러블 및 해결법]

1. 트러블 : 오랜만에 Spring을 돌리다 보니 기억이 잘 안났음. Static에 있던 main.html을 templates로 옮기니 404 에러가 발생
   1. 해결 : 의존성을 추가하지 않았음. pom.xml에 dependencies에 thymeleaf 의존성을 추가해줌으로 해결
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
     </dependency>

2. 트러블 : MySQL JDBC Driver 의존성 추가에서 버전 추가 오류가 발생
   2. 해결 : apach-maven을 설치한 후 PATH에 bin폴더의 환경변수를 추가 → 
                    → mvn clean install → 실패(pom.xml이 있는 경로로 이동 안해줘서 에러)
      → 경로 이동 후 다시 실행 
    → MySQL 버젼을 DBeaver에서 확인 SELECT VERSION();
    → 9.0.0 버젼에서 8.0.33 버젼으로 변경하여 해결

3. Spring 의존성 javax.persistence 패키지
   3. 의존성 추가
        <dependency>
            <groupId>org.hibernate.javax.persistence</groupId>
            <artifactId>hibernate-jpa-2.1-api</artifactId>
            <version>1.0.0.Final</version>
        </dependency>

○ Try : Problem에 대한 해결책, 다음 회고 때 판별 가능한 것, 당장 실행 가능한 것

  1. 토이 프로젝트

       - 데이터 전처리 후 파일을 json으로 저장할 경우 딕셔너리로 저장하는 것이 좋음

       - 코드를 다 실행하여 결과 확인 후 파일로 들어가서 한 번 더 확인해보는 습관을 들일 것

       - 차후 드래곤, 오브젝트 등 다른 데이터도 뽑아올 것(크롤링) 

       - 설계한 아키텍쳐로 흐름이 연결되도록 프로젝트를 진행할 것

   2. 데이터 전처리

       - 이전에 작성한 코드를 DB에서 쿼리문을 통해 불러오기 좋은 형태로 저장하기

   3. AWS 연동

       - AWS의 연결 구조와 각 역할을 다시 공부하고 연동해볼 것

       - AWS에서 CodeBuild 과정에서 Run Project를 할 때 권한 오류가 발생하였음(차후 AWS에 대해 다시 공부하여 적기)

   4. Spring의 구조와 Java에 대한 학습

       - Java로 작성한 코드들을 뜯어보면서 분석하고 이를 안 보고 작성해보기

       - Maven 방식으로 만든 프로젝트를 gradle 방식으로 사용할 것(Maven은 너무 오래된 방식)

       - 이 후 React를 프론트로 사용할 것이기에 이를 사용할 수 있는 방법을 학습하기(API를 통한 페이지 호출)

1. 프로젝트 구조 변경 : 나머지 파일들 지우고 static에 React 코드 작성
2. React 프로젝트 생성 및 빌드 생성
  - APP 생성 : front-end라는 디렉토리에 React 애플리케이션 생성
  - React 빌드 :  cd frontend npm run build
3. Build의 내용을 SpringBoot의 src/main/resources/static 에 복사

 

=== 설정 변경 ===
1. pom.xml에서 Thymeleaf나 기타 템플릿 엔진 관련 의존성을 제거
2. API 엔드포인트 설정 : React는 클라이언트 사이드에서 작동하고, Spring Boot는 RESTful API를 제공하는 백엔드 역할
- Controller : JSON 응답 반환하도록 변경
"""Java
@RestController
@RequestMapping("/api")
public class MyController {

    @GetMapping("/example")
    public ResponseEntity<String> getExample() {
        return ResponseEntity.ok("Hello from Spring Boot!");
    }
}
"""

3. CORS 설정(Client[React]와 Server[Spring]의 도메인이 다르니까)
"""Java
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/api/**")
                        .allowedOrigins("http://localhost:3000");
            }
        };
    }
}
"""

5. 배포 시 React Application 빌드 후 Spring의 정적 파일로 포함하여 배포
- npm run build
- 빌드된 파일 복사 src/main/resources/static

   5. 데이터 전처리와 Machine Learning 학습

       - 오래 전에 혼자 공부한 내용이기에 부족한 점이 많아보여 따로 공부를 더 해야 할 필요가 있음

       - 머신 러닝과 더불어 수학 공부 + Python을 더 공부하기

 

 

[Spring-Boot 연결과정]

1. 프로젝트 구조 이해

Spring Boot
  - src/main/java : 주요 애플리케이션 코드가 들어 있는 디렉토리
  - controller : 웹 요청을 처리하는 컨트롤러 클래스 `MatchController.java`, `TableController.java`
  - model : DB에서 가져온 데이터를 자바 객체로 표현하는 모델 클래스 `Match.java`는 현재 사용 안 함
  - repository : DB와 상호작용하는 코드를 담은 클래스 `MatchRepository.java`
  - service : 비즈니스 로직을 처리하는 서비스 클래스 `MatchService.java`
  - MemberApplication.java : 애플리케이션의 진입점(엔트리 포인트)

                                                 Spring Boot 애플리케이션을 시작하는 클래스
  - src/main/resources : 애플리케이션의 리소스 파일 위치(이 후 react 연결 시 변경 예정)
  - application.properties : 애플리케이션의 설정 파일
  - templates : Thymeleaf 템플릿 엔진을 사용해 렌더링되는 HTML 파일들이 위치
  - static : 정적 리소스들(CSS, JavaScript, 이미지 등)이 위치(이 후 React)

 

2. pom.xml 설명: Maven이 프로젝트를 빌드하고 필요한 의존성을 관리하는 데 사용하는 설정 파일
  프로젝트에 필요한 라이브러리, 플러그인, 그리고 빌드 과정이 정의

  - Dependencies : 프로젝트에서 사용될 라이브러리들 정의
  - Spring Boot Starter Web : 웹 애플리케이션을 만들기 위해 필요한 라이브러리
  - H2 Database : 테스트를 위한 인메모리 DB 제공
  - Thymeleaf : 서버 측에서 HTML을 렌더링하는 템플릿 엔진(리엑트 쓰면 없어질 예정)
  - MySQL JDBC Driver : MySQL DB와 연결하기 위한 드라이버
  - Spring Data JPA : DB와 객체 간 매핑을 쉽게 하기 위한 라이브러리
  - Build Plugins : Maven이 프로젝트를 빌드할 때 사용하는 플러그인
  - Spring Boot Maven Plugin : Spring Boot 애플리케이션을 빌드하고 실행하는 데 사용

 

3. Spring Boot 서버 작동 과정

3-1. 프로젝트 시작:
   - `MemberApplication.java` 파일(Spring Boot 애플리케이션의 시작점) 
      `@SpringBootApplication` 어노테이션이 붙어 있으며, `SpringApplication.run(MemberApplication.class, args)`를 통해 애플리케이션 시작
  - 메타데이터(information)를 우리의 소스 코드 (클래스나 메서드 등) 에 붙이는 용도로 XML 주석이나 Marker Interface 를 대체하는 역할

3-2. 의존성 주입 및 초기화
   - Spring Boot는 `pom.xml`에 정의된 의존성을 기반으로 애플리케이션의 필요한 컴포넌트(컨트롤러, 서비스, 리포지토리)를 자동으로 주입하고 초기화  `MatchController`, `TableController`, `MatchService`, `MatchRepository` 등 준비

3-3. 웹 요청 처리:
   - 사용자가 웹 브라우저를 통해 서버에 요청 → 컨트롤러(예: `MatchController`)로 전달 → 컨트롤러는 요청을 분석하고 필요한 비즈니스 로직(`MatchService`)을 실행 
     → 결과를 사용자에게 HTML 페이지로 반환 → HTML 페이지는 `templates` 폴더에 있는 Thymeleaf 템플릿 파일을 사용해 렌더링
3-4. 데이터베이스 상호작용:
   - 컨트롤러나 서비스가 데이터베이스에 접근해야 할 때는 리포지토리(예: `MatchRepository`)를 사용해 데이터를 가져오거나 저장(Spring Data JPA는 이 과정을 자동으로 처리)
3-5. 결과 반환:
   - 데이터가 처리 → 결과 : HTML, JSON 또는 다른 형식으로 변환되어 사용자에게 반환
   - e.g. `MatchController`는 경기 데이터를 받아 `match.html` 템플릿을 사용해 사용자에게 표시

 

4. 작동 과정 요약

1. 애플리케이션 시작: `MemberApplication.java`가 Spring Boot 애플리케이션을 시작
2. 의존성 주입: Spring Boot가 필요한 모든 컴포넌트를 초기화
3. 웹 요청 처리: 컨트롤러가 사용자 요청을 받아 서비스 로직을 수행 & 결과를 템플릿에 담아 반환
4. DB 작업: 서비스가 리포지토리를 통해 데이터베이스와 상호작용
5. 결과 반환: 사용자에게 결과가 HTML이나 JSON 등의 형식으로 반환

사용자 요청 → 컨트롤러 → 서비스 → 리포지토리 → DB 후 역순(처리 결과가 사용자에게 반환)