2024-2 capstone 웹 개발 회고 [Nari-Road]

하겅 ·2025년 1월 20일

Capstone python web

Capstone

목록 보기

7/14

안녕하세요 2024년 2학기 동안 진행한 웹 개인 프로젝트에 대한 회고입니다

주제

한양여자대학교 학생들을 위한 외국어 공부 일정 관리 웹 사이트

주제 선정 이유

타 어플리케이션 어학 스터디 모집 게시판의 비활성화

모집 게시물 수

연도	게시물 수
2024년	9개
2023년	3개
2022년	15개(코로나 직후)
2021년	4개
2020년	2개
2019년	3개

하나하나 세어본 결과, 어학 스터디 모집 게시물 수가 적은 것을 확인할 수 있었습니다 그러나 게시물 조회수는 최소 60회에서 최대1,200회 정도였고, 게시물 댓글 수는 최소 0개~최대 19개임을 알았습니다 따라서 어학 공부에 대한 관심은 있어 보이지만 (조회수) 실행으로 옮기는 사람은 적다는 건 아닐까 생각하게 되었습니다 (모집 게시물 수, 댓글 수)

어학 게시판이 아닌 다른 게시판에 모집 글이 분산

어학 게시판이 아닌 다양한 게시판에 어학 공부를 '함께 하기'를 원하는 학생들이 꾸준히 존재하고 있음을 알 수 있었습니다 여기서 분산되어 있는 게시물을 한 번에 볼 수 있도록 만들어야겠다 생각하게 되었습니다

한국인 대학생 74% 외국어 말하기 능력을 향상시키기 위해 협력 학습을 선호 (ResearchGate, 2023)

저도 5개월 동안 일본에서 교환학생 프로그램에 참여한 적 있는데요 5년 정도 혼자 공부할 때보다 5개월 동안 주변 학생들과 협력했던 게 회화 능력을 크게 성장시켰다 생각합니다 따라서 한양여자대학교 내의 프로그램을 듣더라도 '함께' 들을 수 있는 환경을 조성하고 싶다 생각했습니다

기술 스택

Front
- Javascript
- HTML
- css
- bootstrap
Back
- python
framwork
- django
Database
- SQLite
API
- google calendar api

개발 기간

2024.11.01~2024.12.19

메인 화면

자격증 목록: JLPT(일본어), HSK(중국어), TOEIC(영어)
- 교내 어문과가 일본어, 중국어, 영어 세 가지이기 때문에 이와 관련된 대표적인 자격증 세 가지를 추가했습니다

✳️ 어학 시험 리스트 (api로부터 이벤트 가져오기)

google calendar api의 events().list() 메서드를 호출해 위 조건에 맞는 이벤트를 가져오도록 요청합니다
.execute(): 요청 실행
- google calendar api 서버에 데이터를 요청하고, 그 결과를 events_result 변수에 저장함
timeMin과 timeMax는 사용자 정의 변수로, 어학 시험 날짜를 비교할 때 범위가 너무 넓어져 생기는 낭비를 줄이고자 90일로 조건을 걸기 위해 만들었습니다

✳️ 어학 시험 리스트 (가져온 이벤트 보여주기)

events는 events_result로부터 get으로 얻어온 데이터입니다
- ['start']는 google calendar api에서 이벤트의 시작 시간을 포함하는 필드입니다
  
  (dateTime-시간 포함, date-시간 포함X)
  이 필드는 등급마다 시험 시간이 다른 JLPT와 HSk에 적용하려고 추가했으나 비고란(설명란)에 시간을 적는 걸로 대체하게 되었습니다
- 결과적으로 '오늘 날짜'를 기준으로 가장 가까운 시일의 자격증 일정 4개를 제공합니다 (사진 캡처 날짜: 1월 10일)

✅ 이벤트 삭제 (2월 9일 일정 삭제해 보기)

✅ 이벤트 추가 (2월 15일 일정 추가해 보기)

어학 시험 스케줄은 정해져 있는 데이터라 판단해 불변 데이터로 가정하고, 미리 저장해둔 일정 데이터베이스에서 google calender로 삽입되도록 해뒀습니다
- 따라서 이벤트 추가 시 어학 시험 리스트에는 반영되지 않도록 데이터베이스와 연결을 하지 않았고, 캘린더에만 이벤트가 추가되도록 해놨습니다 (어학 시험 리스트에 반영 X, 위 캘린더에는 반영 O)

사실 이 부분에 대해 고민을 해봐야 하는 부분이 많습니다...
1. 인증된 구글 계정 외에 계정으로 접근해 보지 않아서 보안이나 안전 확인이 안 됨
2. 어학 시험 뿐만 아니라 교내 행사 캘린더도 따로 생성해 보여줄 예정이었으나 [어학 시험 스케줄 캘린더]만 화면에 보여지는 것을 확인함 (코드에서 calendar_id를 [어학 시험 스케줄 캘린더]로만 설정해 뒀기 때문이라 생각... 결국 하나의 캘린더 안에서 태그로 구분하는 방법이 최선인가? 싶습니다...)

게시판 목록

이 게시판은 jump to jango의 pybo를 따라 구현했습니다 다르게 했던 점이 있다면 url 설정이네요 (+ 부트스트랩 설정 정도...)


mycapstone/
    api/ # 구글 캘린더 api 
    class/ #강의 정보 
    common/ # 로그인, 회원가입 (jump to jango)
    config/ # 기본 설정 
    post/ # 게시판 (jump to jango) 
    static/ # 정적 파일 
    templates/ # html 파일 
    manage.py

제 파일 구조입니다 common과 post(pybo)를 점프 투 장고를 보며 구현했습니다 점프 투 장고에서는 pybo(post)를 홈(/)으로 설정해 뒀지만 저는 메인 페이지가 구글 캘린더 api여야 했기 때문에 경로 설정을 바꿔 줬습니다

# config/urls.py
path('', api_views.apindex, name='apindex'), #홈
path('post/', include('post.urls')), #게시판

장고의 url의 동작을 이해하고 나서야 홈 url을 변경하는 게 가능했습니다 views.py 뿐만 아니라 html(templates)에서 보여주고 있던 name tag들도 다 수정해 줘야 했기 때문에 url과 연결되어 있는 구조에 대해 이해하는 게 장고 프레임워크를 이해하는 데에 있어서 중요한 부분이라 생각하게 됐습니다

참고로 위 사진은 점프 투 장고 공식 페이지에 있는 사진입니다 문제 시 삭제하겠습니다...!

게시물 작성

게시물 작성 폼 또한 점프 투 장고를 보고 구현했지만 다운 드롭 리스트 폼을 추가했습니다
- 스터디를 하고는 싶지만 스케줄을 조정하고 모이는 데까지 가기가 어렵다 느꼈기 때문에 미리 본인이 원하는 조건을 손쉽게 작성할 수 있도록 돕고자 했습니다

선택하지 않을 시 직관적으로 None을 보여주도록 Null을 True로 설정했습니다 (Blank는 값이 비어 있으면 데이터베이스에 빈 문자열("")로 저장 Choice 리스트에 '빈 값'을 추가해 뒀을 때를 대비)
대상이 한양여대 재학생이라는 점을 감안해 드롭다운 리스트 내용도 학교와 관련된 장소, 연락 수단 등을 활용할 수 있도록 해놨습니다

구현하지 못 한 부분

움짤 끝에 하단을 보면 '연락 정보'와 '캘린더 링크' 폼이 있는데 이는 공개 정보가 아니라 초대 링크를 이메일로 전송시킬 때 활용할 입력 정보로 받고자 했습니다
그러나 현재 이메일 전송 부분을 구현하지 못 했습니다 제(관리자)가 사용자1에게 메일을 전송하는 것도 아니고, 사용자1이 사용자2에게 메일을 전송하도록 하는 부분이기 때문에 테스트는 물론 코드 작성 및 이메일 전송 로직을 이해하는 데 시간이 오래 걸릴 것 같아 포기하게 됐습니다

회원가입

회원가입과 로그인은 점프 투 장고 그대로 구현했습니다 그러나 개인 정보가 있을 수 있는 게시판(pybo)은 로그인 후에야 접근 가능하도록 네비게이션에 추가하지 않았습니다

(코드 정돈 안 된 점 죄송...)

is_authenticatede는 만약 로그인 되어 있다면 True를 반환합니다 따라서 True인 경우 (로그인이 되어 있는 경우) 게시판과 로그아웃, 언어 정보가 뜨고 False인 경우 else가 실행되어 로그인 (+if not 회원가입)이 뜨게 됩니다

데이터베이스에 저장되는 걸 확인할 수 있었습니다 그러나 보안 및 안전을 생각해 회원가입 과정을 더 꼼꼼하게 개선해 보고 싶습니다 (아이디 중복, 이메일 확인 등)

로그인, 로그아웃

점프 투 장고 로그인, 로그아웃을 구현했습니다

따라하면서 다시 한번 깨달은 건... 모듈 간 구조를 이해해야 한다는 점인 듯 합니다 redirect를 통해 어디로 보내야 하는가? redirect에는 어떤 name tag를 적어야 하는가? 역할은 무엇인가? 등등 헷갈리는 순간 경로가 꼬이거나 잘못된 곳으로 가거나 하더라고요 ㅎㅎ ;; 리액트 공부할 때 어려웠던 구조를 (MVC) 장고로 다시 만난 (MTV지만요) 기분이었습니다...

점프 투 장고를 보고 구현했습니다 변경은 부트스트랩 컬러 정도... 조금 더 예쁘게 바꾸고 싶었지만 시간이 부족했네요 더 개선하고 싶은 부분이 있다면 대댓글 기능과 페이지네이션도 추가해 보고 싶습니다

교내 어학 프로그램 정보 제공

시간에 쫓겨서 가장 허술하게 내야만 했어서 아쉬웠던 파트입니다 (교수님께서도 더 많은 정보가 있었다면 좋았을 것 같다고 피드백 해 주셨던...) 한양여대의 어학 프로그램을 재학생들이 최대한 활용해서 어학 능력을 길렀으면 좋겠다고 했으면서...!! 겨우 이 표 하나 제공해 버렸네요 ui는 물론이고 다양한 데이터를 추가해 나가고 싶습니다 (변명 아닌 변명으로는 이번 학기 capstone 주제는 공공 api 활용이었기 때문에 큰 감점은 없었습니다)

회고

가상 환경의 중요성
- 제가 학기를 마치고 노트북을 바꾸게 되었는데요 과연 캡스톤 파일이 그대로 열릴까 걱정이 됐었습니다 정말 다행이게도 파이썬 가상환경을 쓴 덕에 필요한 라이브러리 설치 외에는 문제 없이 새로운 노트북에서 열 수 있었습니다 가상 환경에 대해 더 심도 있는 공부가 하고 싶어졌네요
깃허브의 부재
- 기말고사 준비에 쫓기느라 프로젝트를 거의 다 해가던 시점에 '아 맞다 깃허브'를 해버리는 큰 사고를 쳐버렸습니다 개인 프로젝트라 그나마 불행 중 다행이라지만... 팀 프로젝트였다면 얼마나 민폐였을까요 코드를 한 번에 업로드 한 후 작성해둔 개선 사항들은 깃허브를 사용할 예정입니다... (아까운 내 포도알...)
프론트엔드와 백엔드 통합에 대한 공부
- 가 부족함을 느꼈네요 이번에는 장고와 html로 끝냈지만 앞으로 경험을 살리고 싶은 언어는 React와 자바 스프링이기 때문에 Restful api나 서버에 대해 더 많은 공부가 필요함을 느꼈습니다
요구사항 분석서 어떻게 작성해요
- 유저가 필요로 하는 게 무엇인지 고민하는 것부터 머리가 너무 아팠습니다 그래서 나름 작성을 해봤지만 코드 작성하는 내내 참고도 안 했네요 개인 프로젝트라 해도 우선순위를 메기고 계획을 수행해 나가고 싶었는데 이 부분이 가장 아쉬운 부분입니다 다음 학기 캡스톤은 꼭 요구사항 분석서를 기반으로 구현해 나가고 싶습니다

이상으로... 한 달 반 동안 진행했던 개인 프로젝트 '나리 로드'에 대한 회고를 마칩니다 점프 투 장고에게 너무 감사하고요 덕분에 MTV 모델을 공부할 수 있었습니다 한 번 더 따라하면서 코드를 내 코드로 만드는 훈련을 방학 동안 해봐야겠습니다 학교를 까버려서 괜히 학교에 민폐가 되지는 않을까 걱정이 듭니다만.............. 열심히 했으니 이쁘게 봐 쥬시길 ㅎ

참고한 자료