klue 개발 일지 - 20230330

 

목표

1. klue 서비스에 학기 개념을 추가하기 위해 페이지 곳곳에서 사용할 수 있는 학기 설정 컴포넌트를 만들어서 url query string으로 학기 정보와 년도 정보를 보낸다.

 

2. 동아리 자체적으로 최신 학기를 설정할 수 있는 컴포넌트를 만든다.

 

 

 

 

 

왜 학기 개념을 추가해야하는가?

 

기존 klue 서비스는 년도, 학기 개념이 없어서 년도, 학기 개념이 필요한 동아리들의 니즈에 부합하지 않습니다. 동아리에서는 모집이나 회비 관리 등 학기를 기준으로 한 다양한 활동들을 년도별로 운영해야 합니다. 따라서 학기 개념을 추가하여, 학기 정보와 년도 정보를 url query string으로 보낼 수 있는 학기 설정 컴포넌트를 만들어서 이러한 활동들을 보다 쉽게 관리할 수 있도록 합니다.



또한, 동아리 자체적으로 최신 학기를 설정할 수 있는 컴포넌트를 만들어서 동아리 학기별로 회원이나 활동 관리를 더욱 효율적으로 할 수 있습니다. 예를 들어 회비 관리 같은 경우 동아리 학기 별로 회원이 다르므로 DB에 동아리 자체적인 최신 학기가 필요합니다.이렇게 함으로써, 동아리 내에서도 학기 개념을 적용하여 원활한 활동과 관리가 가능해집니다.

 

 

 

예상되는 문제점은 대부분의 DB에 학기 정보가 추가되면 거의 모든 코드를 수정해야하는 문제가 있습니다. 예를 들어 새로운 학기가 시작되면 기존의 동아리 회원들의 데이터를 가져와서 학기를 수정하고 club_member 테이블에 저장합니다. 결과적으로는 같은 club_member가 저장됩니다. 만약 창규라는 동아리 회원이 있다면 이전에는 club_id와 user_id 2개의 값을 primary 키 값으로 사용했었는데 학기정보가 추가되면서 primary 키값에 year, semester 컬럼을 추가해야 합니다. 이처럼 DB의 대규모 조정이 필요하면서 많은 자원이 필요하고 에러가 발생할 것여서 최대한 일정에 맞추기 위해서 팀원들이 노력했습니다.

 

 

 

 

 

 

---

1. semester.ts 생성

2. GetDateForm 컴포넌트 생성

3. 동아리 자체 학기를 바꾸는 (현재 학기로 설정 버튼)

4. Datagrid에 학기 컬럼 추가

 

 

 

 

 

 

 

---

1. semester.ts 생성

export const FIRST_SEMESTER_MONTH = 2

export const SECOND_SEMESTER_MONTH = 8

export const FIRST_SEMESTER = 'SPRING'

export const SECOND_SEMESTER = 'FALL'

export const FIRST_SEMESTER_NAME = '1학기'

export const SECOND_SEMESTER_NAME = '2학기'

학기를 구별하기 위한 상수 파일입니다.

 

 

 

 

 

 

---

2. 년도 및 학기 Select 컴포넌트 (DateForm)

회원 명단, 출석 관리, 소개 관리, 신청폼 관리 페이지에 추가된 DateForm 컴포넌트는, 년도와 학기를 선택할 수 있는 Select 박스와 현재 학기로 설정할 수 있는 버튼을 제공합니다. 이제 사용자는 Select 박스에서 원하는 년도와 학기를 선택하면 해당 데이터들이 아래 목록에 표시되고 학기 변경 버튼을 클릭하면 다음 학기를 동아리의 현재 학기로 설정할 수 있습니다. 이를 통해, 회원 명단, 출석 관리, 소개 관리, 신청폼 관리 페이지에서 학기 정보를 쉽게 관리할 수 있게 되었습니다. 위와 같은 기능을 가진 DateForm 컴포넌트를 사용하여, 사용자는 더욱 효율적으로 동아리 관리를 할 수 있으며, 학기별로 필요한 데이터를 쉽게 관리할 수 있습니다.

 

 

 

 

 

 

회원 정보를 수정할 때는 회원 정보 폼이 아닌 회원 명단 페이지에서 선택한 학기와 년도가 url query로 백엔드 서버에 전송됩니다. 만약 선택하지 않은 경우 현재 년도, 학기가 전송되고. 백엔드에서도 학기 정보가 없는 경우 자체적으로 처리합니다.

 

 

 

 

 

출석 관리에서도 년도와 학기를 설정하면 url query로 year, semester 데이터가 전송됩니다.

 

 

 

 

 

 

 

소개 관리 및 신청폼 관리도 동일합니다.

 

 

 

 

 

 

 

 

 

---

3. 현재 학기로 설정

동아리마다 자체 최신 학기를 가지고 있는데 현재 학기로 설정 버튼을 누르면 위와 같이 경고창이 출력되고 확인을 누르면 PATCH 방식으로 /club/{clubId}에 body 값에 {year: 2023, semester: SPRING}와 같이 데이터를 전송합니다. 만약 성공적으로 통신이 끝나면 학기 설정이 완료됬다는 문구가 출력됩니다.

 

 

 

 

 

---

4. Datagrid에 학기 컬럼 추가

 

운영 중인 동아리에서 출석 관리 페이지에 학기 컬럼을 추가하였고 활동 중인 동아리 -> 내활동 -> 출석 페이지에서 학기 컬럼을 추가했습니다.

 

 

 

배포를 마치고 나서 DB 설계를 수정하려 할 때 시간적인 부분의 데이터 컬럼을 만져야 한다면 정말 많은 일들이 일어나는 것을 깨달았습니다. 잘 진행되고 있던 코드 리뷰도 막상 다들 바쁠 때는 각자 할일을 하는데 집중하느라 코드 리뷰에 소홀했고 작업 영역을 최대한 안겹치게 진행했지만 충돌도 많이 일어났다. 왠만하면 처음 설계를 할 때 했으면 편안하게 진행했을테지만 이번 학기 개념 추가를 기회로 많은 것들을 배울 수 있었습니다.