안녕하세요. 2021년 겨울 알고리즘 캠프 초급반 강사를 맡았으며 2024년 프로그램 관리팀장으로 프로젝트들을 관리했던 김성현입니다. 프로젝트 관련이나 어떤 기타 등등이든지 묻고 싶은 사항이 있다면 언제든지 제 이메일 [email protected] 혹은 010-7676-9194로 연락 부탁드립니다. 아마 그렇지 않겠지만 git 권한 관련 이슈가 있을 수 있는데 그럴 경우에도 연락 주시면 됩니다.
이건 2021년 운영진이었던 이동주 님이 만드셨던 프로젝트를 다시 작성하고 모노레포로 통합해 보려는 시도였습니다. 저를 포함하여 이 프로젝트에 속해 있는 분들의 기여가 있었습니다.
그리고 어차피 이 프로젝트는 제가 배포중이기 때문에, 이 도움말대로 데이터를 수정하더라도 저에게 연락을 주셔야 배포를 적용할 수 있습니다. 물론 이 도움말을 보시는 분이 백엔드 혹은 인프라 쪽에 관심이 있어 직접 배포하고 싶으시다면 얼마든지 권한과 도메인 관련 이야기를 해도 좋겠습니다. icpc-sinchon.io 도메인을 제가 가지고 있지는 않지만 도메인 소유자이신 이동주 님과 연락하여 권한을 넘겨드릴 수 있습니다.
아무튼 여러 일이 있었지만 안타깝게도 저의 부족으로 인해 제대로 작성되어 배포된 것은 홈페이지뿐입니다. 다만 홈페이지는 대외 홍보용으로도 쓰이는 만큼 가장 꾸준히 관리되어야 하는 기능입니다. ICPC Sinchon이 지속되는 한 변경사항이 생길 부분이라고 생각되어 프로젝트 그리고 홈페이지 데이터 사용에 관한 간단한 도움말을 남깁니다.
이 레포지토리는 pnpm workspace를 사용한 모노레포 프로젝트입니다. 관리자 페이지의 프론트엔드와 백엔드, 랜딩 페이지, 그리고 공유 라이브러리를 포함하고 있습니다.
icpc-sinchon-workspace/
├── apps/
│ ├── admin-frontend/
│ ├── admin-backend/
│ └── homepage/
├── libs/
│ ├── data/
│ └── shared/
├── meeting-notes/
└── ...
├── pnpm-workspace.yaml
└── package.json
└── tsconfig.json
└── biome.json
└── ...apps/: 관리자 페이지 프론트엔드, 백엔드, 홈페이지 등의 애플리케이션
libs/: 프로젝트 간에 공유하는 코드나 라이브러리를 담는 곳. prisma 등
libs/data/: JSON으로 보관하는 캠프의 데이터를 넣는 곳
meeting-notes/: 회의록
tsconfig, biome 등의 공통 설정은 루트 디렉토리에 있습니다.
다른 프로젝트도 진행되었던 내용들이 있고 보강할 사항들이 있지만 실행시켜 볼 수 있습니다. 관리자 페이지에서는 학생 정보 관리, 강의 출석 관리, 과제 제출 확인, 환급금 계산 등의 기능이 있었습니다.
그러나 홈페이지 이외의 프로젝트 코드를 실행시켜볼 생각을 할 정도인 분께서 이걸 읽고 계시다면 package.json등을 보고 실행할 수 있으리라 생각합니다. 또한 도움말에서 글로 설명하기에는 맥락이 있었던 코드들도 있으므로 회의록을 참조하거나 위의 연락처로 저에게 연락 주시면 감사하겠습니다.
이 도움말에서는 홈페이지 데이터 관련 작업, 그러니까 운영진 데이터나 대회 수상자 데이터 등을 변경하고자 하는 분들을 위한 내용을 적습니다. 다만 컴퓨터 계열 전공의 운영진 분이 읽으시리라 생각하고 아주 기본적인 git, 마크다운, JSON 등의 사용법은 적지 않겠습니다.
다음 명령어를 통해 레포지토리를 클론하고 프로젝트 경로로 이동합니다. 이 과정에서 git 권한 관련 문제 발생 시 위의 이메일로 연락 주세요.
git clone https://github.com/icpc-sinchon/icpc-sinchon-workspace.git
cd icpc-sinchon-workspace이 프로젝트는 pnpm을 사용합니다. 프로젝트를 실행시켜 보고 싶다면 다음 명령어로 의존성을 설치하세요. 개인적으로는 데이터를 추가하고 프로젝트를 실행시켜서 확인하는 것을 추천합니다.
pnpm install의존성을 설치한 후 아래 명령어를 통해서 홈페이지 프로젝트 경로로 이동하고 홈페이지를 개발 환경에서 실행해볼 수 있습니다.
cd apps/homepage
pnpm dev홈페이지 개발 환경에 설정된 기본 포트는 4789로, localhost:4789에서 페이지를 확인해볼 수 있습니다.
혹은 프로젝트 루트 경로에서 다음 명령어를 통해서 실행할 수도 있습니다.
pnpm homepage dev홈페이지에 사용되는 데이터는 libs/data에 JSON 파일로 저장되어 있습니다. 이곳에 있는 JSON 파일을 수정하면 홈페이지에 반영됩니다.
libs/data에 있는 각 데이터 폴더 각각에 대한 설명은 다음과 같습니다.
- campContest: 캠프 콘테스트 정보. 문제, 해설, 출제진 등
- campHistory: 역대 캠프에 대한 정보. 캠프 강사, 멘토, 커리큘럼 등
- hallOfFame: ICPC Sinchon의 명예의 전당 정보로 역대 운영진, 기여자, 강사, 멘토 등
- suapc: SUAPC 대회 수상자와 문제, 해설, 출제진, 검수진, 스코어보드 등
그리고 semester.json이 있습니다. 이건 역대 학기들의 정보와 현재 학기 정보를 나타냅니다.
이 도움말을 보시는 분이라면 아마 새로운 시즌에 대한 정보를 추가하기 위해서라고 생각합니다. 따라서 새로운 시즌을 추가하고 그 정보를 수정하는 방법에 대해 설명하겠습니다.
먼저 새로운 시즌을 추가해야 합니다. libs/data/semester.json 파일을 열어보면 다음과 같은 형식으로 되어 있습니다. currentSemester는 현재 시즌에 대한 정보이고 semesters는 역대 시즌들에 대한 정보입니다.
{
"currentSemester": {
"year": 2024,
"season": "Winter"
},
"semesters": [
{
"year": 2024,
"season": "Winter"
},
{
"year": 2023,
"season": "Summer"
},
{
"year": 2023,
"season": "Winter"
}
// ...
]
}즉 새로운 시즌을 추가하려면 semesters 배열에 새로운 시즌을 추가하면 됩니다. 그리고 아마 추가하는 시즌이 현재 시즌일 텐데 그럴 경우 currentSemester에도 추가한 시즌을 넣어주면 됩니다. 예를 들어서 2024년 여름 캠프를 추가하고 현재 시즌을 그걸로 지정하고 싶다면 다음과 같이 작성하면 됩니다.
{
"currentSemester": {
"year": 2024,
"season": "Summer"
},
"semesters": [
{
"year": 2024,
"season": "Summer"
},
{
"year": 2024,
"season": "Winter"
},
{
"year": 2023,
"season": "Summer"
},
{
"year": 2023,
"season": "Winter"
}
// ...
]
}페이지 하단 footer 등에 표시되는 운영진 정보 등은 이 semester.json에 있는 currentSemester를 기준으로 표시됩니다. 즉 현재 시즌이 2024년 여름 캠프라면 페이지 하단에 표시되는 운영진 정보는 2024년 여름 캠프에 대한 정보가 표시됩니다.
각 파일은 정해진 JSON 스키마에 따라 작성되어야 합니다. 이 스키마 정의는 각 폴더의 schema.json에 정의되어 있습니다. 스키마 파일에 보면 각 필드가 어떤 의미인지에 대한 설명도 있기 때문에 이 스키마 파일의 description과 기존 파일들이 작성된 걸 보면 어떤 형식으로 작성해야 하는지 알 수 있습니다. 예를 들어서 libs/data/campContest/schema.json 파일을 보면 이런 식으로 각 항목의 설명이 되어 있습니다.
{
"$schema": "http://json-schema.org/draft-07/schema#",
"type": "object",
"title": "캠프 콘테스트",
"description": "신촌연합 알고리즘 캠프의 캠프 콘테스트 기록을 담은 데이터 스키마",
"properties": {
"year": {
"type": "integer",
"description": "알고리즘 캠프가 진행된 연도",
"minimum": 2019
},
"season": {
"type": "string",
"description": "알고리즘 캠프가 진행된 계절(여름, 겨울 중 하나)",
"enum": ["Winter", "Summer"]
},
"dateTime": {
"type": "string",
"description": "캠프 콘테스트가 진행된 날짜와 시간"
},
"note": {
"type": "string",
"description": "캠프 콘테스트에 관련된 사항. 이때 특별했던 이슈 등을 기록(problemPicker 문제 선정자의 존재 등)"
},
"links": {
"type": "object",
"description": "캠프 콘테스트 관련 링크",
"properties": {
"problemBojLink": {
"type": "string",
"description": "캠프 콘테스트의 문제 BOJ 링크"
},
"solutionPdf": {
"type": "string",
"description": "캠프 콘테스트의 솔루션 PDF 링크"
},
"scoreboard": {
"type": "array",
"description": "캠프 콘테스트의 스코어보드 링크. 첫번째는 초급, 두번째는 중급...",
"items": {
"type": "string",
"description": "캠프 콘테스트의 스코어보드 링크"
},
"minItems": 1,
"maxItems": 3
}
}
},
// ...
}
}따라서 이를 참고하여 데이터를 수정하거나 새로 추가하실 때는 해당 스키마를 준수해야 합니다.
예를 들어서 새로운 역대 캠프 정보를 추가한다면 libs/data/campHistory 폴더에 있는 schema.json을 참고하여 JSON 파일을 작성해야 합니다. 이때 JSON 파일 이름은 연도-학기.json 형식으로 작성해야 합니다. 예를 들어서 2024년 여름 캠프는 2024-Summer.json과 같이 작성합니다. 앞서 설명한 것처럼 libs/data/semester.json에 시즌이 추가되어 있는 상태여야 합니다.
그리고 해당 파일에서 사용할 JSON 스키마를 정의합니다. 이런 식으로 시작합니다.
{
"$schema": "./schema.json"
}그러면 자연스럽게 schema.json에 정의된 스키마를 사용할 수 있습니다. 빠진 정보가 있을 경우 JSON 스키마를 통해 경고가 발생할 것입니다. 또한 기존에 작성된 데이터 파일들이 있기 때문에 이를 참고하여 작성하시면 됩니다.
이렇게 운영진, 수상자, 링크 등의 정보 이외에도 추가해야 할 정보가 있습니다. 포스터, 문제 해설 등의 정보입니다.
이건 두 가지 선택지가 있습니다. 하나는 apps/homepage/public/res에 있는 파일들을 수정하는 것입니다. 나머지 하나는 구글 드라이브 등에 업로드한 후 해당 URL을 solutionPdf나 posterImage 항목에 넣는 것입니다. 요즘은 백준에서 대회를 열면 해설 링크를 만들 수 있는 것 같은데 해설 pdf 링크의 경우 이걸 사용하기도 합니다.
구글 드라이브나 백준 대회 해설 링크 등을 사용할 경우 제가 잘 모르는 부분이기도 하고 파일을 이 프로젝트에서 관리할 필요가 없기 때문에, apps/homepage/public/res를 수정하는 방법을 설명드리겠습니다.
apps/homepage/public/res에 있는 파일들을 수정해야 합니다. 여기서는 "연도 + (여름이면 s, 겨울이면 w)"의 조합으로 폴더가 만들어져 있습니다. 예를 들어서 2024년 여름 캠프라면 2024s 폴더에 들어가 있습니다. 여기에 문제 pdf, 해설 pdf, 포스터 등의 파일을 넣어주면 됩니다.
예를 들어 2024년 여름 suapc의 포스터 이미지라면 apps/homepage/public/res/2024s/SUAPC_2024s_Poster.jpeg와 같이 넣어줍니다. 그리고 나서 libs/data/suapc/2024-Summer.json의 posterImage 항목에 SUAPC_2024w_Poster.jpeg와 같이 넣어주면 됩니다. 이때 res/2024s/ 같은 건 프로젝트 코드에서 알아서 붙여서 로딩해주니 쓰면 안됩니다.
이때 파일 이름은 대소문자 구분이 있으니 주의하시기 바랍니다. 아무튼 이런 식으로 apps/homepage/public/res/ 폴더 혹은 구글 드라이브 등을 통해 파일 링크까지 넣어줄 수 있습니다.
이 README를 쓰고 있는 시점에서 제가 아는 마지막 총무는 신정화님이었습니다. 따라서 현재 후원 계좌는 신정화님의 계좌로 되어 있습니다. 하지만 총무가 계속 바뀔 테고 홈페이지의 이 계좌도 바뀌어야 합니다.
후원계좌 정보를 바꾸기 위해서는 apps/homepage/src/app/sponsor/personal/page.tsx 파일을 수정해야 합니다. 이 파일을 보면 다음과 같은 코드가 있습니다.
<ListSection
title="다음의 계좌로 후원금을 받고 있습니다."
items={["3333320730595 카카오뱅크 (예금주: 신정화)"]}
/>여기 items 배열에 있는 내용을 수정하면 됩니다. 예를 들어서 후원 계좌가 1234567890 국민은행 (예금주: 김신촌)이라면 다음과 같이 수정합니다.
<ListSection
title="다음의 계좌로 후원금을 받고 있습니다."
items={["1234567890 국민은행 (예금주: 김신촌)"]}
/>이렇게 수정하면 홈페이지에 후원 계좌 정보가 변경됩니다.
이 프로젝트를 작업하면서 사용했던 규칙들입니다. 이 규칙을 완전히 지켜가면서 하지는 못했지만, 이 코드를 다루고 싶은 분이 맥락을 이해하는 데에 도움이 될까 싶어 남깁니다.
당시 팀원
-
회의
- 정기 회의: 매주 월요일 23시, 대면 진행시 저녁 시간대
- 매주 수요일, 토요일 18시 이후 저녁에 간단히 카톡으로 상황 공유
-
의사소통
- 의견을 자유롭게 공유하고 상호 피드백 활발히 주고받기
- 상대방 의견 경청하기
- 부정적인 피드백 이전에 칭찬으로 시작하기
- 읽씹하지 않기
- 연락 잘 보기
- 연락을 하루 이상 보지 못할 바쁜 일이 있을 시 미리 이야기하기
- 회의 시작과 정기 상황공유 이전에 TMI 하나씩 말하기
커밋 메시지 말머리 목록
- feat: 새로운 기능
- fix: 버그 수정
- docs: 문서 수정
- style: UI 스타일 관련 수정사항
- refactor: 코드 리팩토링
- test : 테스트 코드 추가
- dep: 의존성 관련 작업
- minor: 코드 포매팅 등 동작에 영향을 주지 않는 사소한 수정사항
커밋 메시지 제목은 50자 이내로 권장 부가적인 설명이 필요할 경우 한 줄 띄워서 대시(-) 하나 붙이고 작성
예시
feat: 로그인 기능 추가
- jsonwebtoken 라이브러리 사용
템플릿이 .github/.gitmessage.txt에 있으니 이 커맨드로 설정하면 편하게 쓸 수 있다.
git config commit.template .github/.gitmessage.txt- main: 배포 버전
- develop: 개발 버전
- feature/기능이름(영문): 새로운 기능 개발
- fix/버그 간략설명(영문): 버그 수정
- 엄청 자세한 설명이라기보다는 대충 어떤 페이지나 기능에서 에러가 발생했는지 정도만 써도 됨. fix/login-page-error나 fix/deploy-error 처럼 간략히 쓴다.
PR은 기본적으로 dev로 하고 main으로 머지할 때는 hotfix를 제외하면 꼭 둘이 논의 후 머지
웬만하면 PR에 개발한 기능에 유닛 테스트를 같이 작성하자(__tests__ 폴더에 있음)
PR 메시지 포맷은 만들어 놓은 걸로
PR 제목에도 커밋 제목처럼 말머리를 붙이기