Networks/Project

SK networks AI Camp - Toy Project(에자일_1)

코딩하는 Español되기 2024. 8. 10. 12:55

2024.08.01 - [Networks/Project] - SK networks AI Camp - Toy Project

 

SK networks AI Camp - Toy Project

SK networks AI Camp에서 교육을 들으면서 배운 내용을 기반으로 Toy Project를 하기로 결정하였습니다.그래서 틀을 크게 정했습니다.대주제  ○ 스포츠 승부 예측 & 분석  ○ 소주제 : League of Legend 데이

joowon582.tistory.com

교육에서 듣는 내용을 토대로 최종프로젝트 외에 다른 프로젝트를 진행하고 있습니다.

Python, 크롤링, Database, Web Crawling, SW 공학, 리눅스 명령어, Django까지 진행했습니다. 

 

OP.GG 사이트에서 크롤링 했으며 이는 상업적 목적으로 이용하지 않을 것임을 명시합니다. 

https://esports.op.gg/schedules/lck

 

LCK 일정 | 오피지지 e스포츠

경기 일정, 순위 및 결과

esports.op.gg

 

이전에 썼던 데이터보다 더 많은 상세 정보를 뽑아와야 했습니다.

- 크롤링 코드를 작성 : 교육과 공모전 준비, 영어 회화 등을 하고 나머지 시간을 쓰면서 2일 정도 걸렸습니다.

- 크롤링 돌리기 : 페이지 로드가 안되서 돌리는데만 2일 정도 소요되었습니다.

JSON 파일 전처리 : 코드 작성 및 DB 연동 1일 소요

- 화면 구현 및 JS : 동적인 설계와 틀은 Gpt에게 도움을 받음 (2일 정도 소요)
                               에러가 자주 발생해서 기본 기능이 되는 상태에서는 직접 수정하여 구현

 

[지금까지 진행 내용]

1. 크롤링을 통해 데이터를 긁어오기(2023.01 ~ 2024.07)

2. JSON 형식으로 저장

3. JSON 데이터 전처리

4. DB에 저장

5. Django를 사용하여 POST 방식으로 데이터 전송하여 검사

 

[더 진행해야 할 내용]

1. 쿼리문을 사용하여 받아온 데이터를 분석하는 것

2. 디자인

3. 코드 분석 및 모듈화 가능 콘텐츠 모듈화

4. 챔피언 이미지 정보가 없어서 뽑아와야 함(현재 : 레벨만 존재)

5. 첫 번째 화면에서 별을 직접 숫자로 입력했음(→ 분석을 통해 변하게 해 보기)

 

[웹을 통하여 구현한 화면 동작]

1. 첫 번째 구현 영상

    ● 팀을 누를 때마다 배경화면이 바뀌게 동적 설계

    ● 누른 팀의 정보가 오른쪽 흰색 화면에 나오도록 설계

    ● 배경 이미지 출처 (FearX가 없어서 Liiv로...)

https://www.fmkorea.com/4603452454

 

LCK 팀별 별자리 배경화면 모음 만들었음!

********** 순서는 알파벳 순이고 원하는 팀 배경화면 빠르게 찾으려면 ctrl+f 사용을 권장함 ************각 팀 별 배경화면 순서는 이렇게 구성 돼있음#-1. IOS (1170 x 2532)#-2. 안드로이드 (1440 x 2560)#-3. 컴

www.fmkorea.com

 

2. 두 번째 구현 영상

    ● 처음 화면을 구현한 후 화면 구상을 듣고 틀을 만들어 봄

    ● 아무 팀도 안 누른 상태에서는 팀 로고가 밝게 보임

    ● 한 팀을 누르면 나머지 팀은 흐려짐

    ● 두 팀을 선택하면 match 버튼 활성화

    ● 두 개를 선택한 상태에서 다른 팀을 더 클릭하면 마지막에 클릭한 팀만 활성화

    ● JS 부분에서 꼬여서 더 수정해야 함

        - 두 팀을 선택하고 다른 팀을 선택하면 match 버튼이 꼬임

        - 선택된 팀을 가운데 글씨로도 보여주기

        - 이 부분은 더 수정할 필요 있음

 

3. 세 번째 결과 화면

    ● 두 개를 선택하고 팀 이름을 전송(POST 방식)

    ● 해당 팀 사이의 경기 전적을 모두 보여줌

    ● 고쳐야 할 부분 : 디자인, 코드 분석 등

 

 

현재까지 진행한 코드에 대한 분석은 이후에 업로드하겠습니다.