[플레이데이터 SK네트웍스 Family AI 캠프 10기] 25주차 회고

 

1. Intro

이번주는 파이널 프로젝트 7주차이다. 멘토님이 피드백을 빡세게 해주셨기 때문에 관리자 페이지 만들기에 1주를 다 썼다.... 이걸 구현하는 과정에서 이것저것 꽤 많은 공부가 되었던것 같다. 특히 js를 많이 다뤘던것같은데 모달을 띄우고, 원하는 방식으로 웹을 조종하는게 꽤 재미있어서 지루할 틈없이 작업을 했다. 

 

2. 이번 주 배운 것, 했던 일들

Path Parameter 방식 vs Query String 방식

• Path Parameter (URL 세그먼트) 방식 : indexes/foo 형태로 정보 전달
• Query String (?파라미터) 방식 : ?key=value 형태로 부가 정보 전달 (주로 페이징/검색/정렬에 쓰임)

Path Parameter 방식

Query String 방식

 

 

Django 페이징 처리

• Paginator : 많은 QuerySet이나 리스트 데이터를 페이지 단위로 잘라주는 도구
• get_page() : 현재 Page 객체를 반환

 

 

• Page 객체가 사용가능한 템플릿 속성들

 

• 페이징 처리 로직은 총 3개로 구성됨.
• [이전] 버튼 표시 로직
  • 1. 이전 페이지가 있다면 활성화된 [이전] 버튼 생성
  • 2. 이전 페이지가 없다면 비활성화된 [이전] 버튼 생성

 

• 현재 페이지 기준으로 ±5개의 페이지 번호 표시 로직
  • 1. 모든 페이지 범위를 for문을 돌림.
  • 2. page_number가 현재 페이지 기준으로 ±5이라면 아래 로직 실행
    • 2-1. page_number가 현재 페이지라면 활성화된 페이지 번호 표시
    • 2-2. page_number가 현재 페이지가 아니면 비활성화된 페이지 번호 표시

 

• [다음] 버튼 표시 로직
  • 1. 다음 페이지가 있다면 활성화된 [다음] 버튼 생성
  • 2. 다음 페이지가 없다면 비활성화된 [다음] 버튼 생성

 

• 다음과 같이 페이징 처리가 잘 되는것을 볼 수 있다.

 

 

로딩화면 만들기

• 정확히 말하면 로딩화면이라기 보단 로딩 스피너를 띄우는 것이다.
• 1. 우선 x-data에 loading 변수를 false로 초기화해준다.

 

• 2. 로딩 스피너를 만들어준 다음 x-show가 loading일때 나오게 만든다.

 

• 2-1. 만약 모달창이 로딩 스피너를 가린다면 폼 제출한 뒤 모달창을 닫도록 하자.

 

• 다음과 같이 로딩중에 로딩 스피너가 돌아가게 된다!

 

 

Connection으로 DB 데이터 가져오기

• Django에서 DB 데이터를 가져올때는 Django ORM으로 SQL 필요없이 가져올 수 있다.
• 하지만 아래와 같은 방식으로 connection 객체를 이용해 직접 sql를 입력해서 가져올 수도 있다. 
  
  • connection.cursor() : DB에 직접 SQL 쿼리를 날릴 수 있는 cursor 객체
  • cursor.execute() : SQL 쿼리를 실행
  • cursor.fetchall() : 모든 행 가져옴.
  • cursor.fetchone() : 한 행만 가져옴.

 

• 결과 화면

 

AWS S3 탐색기 만들기

Boto3

• boto3 : 파이썬 환경에서 AWS 서비스를 제어하거나 데이터를 주고받을 때 쓰는 공식 라이브러리
• boto3에서 제공하는 대표적인 메서드들
  • boto3.client() : AWS 서비스에 직접 접근할 수 있는 클라이언트를 만듬
  • get_object() : S3 버킷에 저장된 객체(파일)를 가져옴
  • s3.list_buckets() : 해당 s3 버킷에 있는 모든 버킷 목록을 가져옴.
  • s3.list_objects_v2(bucket, prefix, Delimiter) : 특정 버킷 안의 "파일 목록"을 가져옴
  • s3.get_object(bucket, key) : S3 버킷에 저장된 "객체(파일)"를 가져옴.

 

만드는 과정

• 1. 우선 boto3.client()로 s3에 접근할 수 있는 클라이언트를 생성하는 함수를 만듬.

 

• 2. s3 클라이언트를 생성한다.
• 2-1. ?파라미터로 bucket를 받지 못했다면 s3.list_buckets().get(”Buckets”, [])으로 버켓 목록 반환

 

• 2-2. ?파라미터로 bucket를 받았다면 파라미터로 제공받은 bucket과 prefix로 s3.list_objects_v2()를 써서 하위 폴더들과 파일들을 받는다.
• 예를들어 prefix가 "logs/2025/”이라면 "logs/2025/” 하위의 폴더들과 파일들이 resp에 들어있다.

 

• resp안에 아래와 같이 폴더는 CommonPrefixes에, 파일은 Contents에 저장되어 있다.
• 그래서 폴더 목록은 resp.get("CommonPrefixes"), 파일 목록은 resp.get("Contents")로 받는다.  

 

• 하위 폴더와 파일 목록들을 json 형태로 정리해서 반환한다. 

 

• 3. views.py에서 해당 prefix의 하위 폴더들과 파일들을 넘겨받고 html로 넘긴다.

 

• 4. html에서 type이 folder일때, file일때를 구분해서 스타일을 다르게 적용시켜 표현한다.

 

• 결과 화면

할당 표현식 (:=)

• 할당 표현식 : Python 3.8에 도입된 표현식으로, 보통 파이썬에선 변수를 초기화하고 그다음 변수를 사용하지만, 변수 초기화와 동시에 사용을 가능하게 해준다!

 

 

3. 느낀점

🧐Facts (내가 한 일) 

관리자 페이지를 만들었다.

 

🎶Feelings ( 나의 감정적인 반응, 느낌 ) 

Alpine.js를 처음 접했을때는 꽤 어려웠지만 여러번 써보니까 이제는 익숙해졌다. 대학교에선 js를 따로 배우지 않았지만, 그때 배웠더라면 재밌게 배웠을것 같다. Django를 처음 배웠을때 굉장히 어려웠는데, js를 제대로 배운적이 없어서 더 그렇게 느꼈던것 같기도 하다. 

 

🎓Findings ( 배운 것 ) 

멘토님의 피드백대로 많은 기능들을 만들어보았다. 그 과정에서 모달을 만들어 제출폼을 만드는 법, s3 탐색기 만드는 법, 로딩화면 만드는 법, chart.js로 그래프로 표현하는 법 등 다양하게 배웠다고 생각한다. 

 

🏢Future ( 미래 ) 

이제는 정말 마지막이다. 남은 1주일동안 관리자 페이지를 마무리짓고 ppt 수정에 모든걸 쏟아야할 차례다. 아마 다음주 회고는 내가 완성시킨 관리자 페이지의 기능들을 설명하고 모든 회고를 마무리할 계획이다.