From dbfbf50e5535c7f51264ee47334069d5b1bfe22e Mon Sep 17 00:00:00 2001 From: Jaemin Choi <1dotolee@gmail.com> Date: Fri, 1 Mar 2024 00:25:58 +0900 Subject: [PATCH] refactor: create assets folder --- .../{pic => assets}/group-approval.png | Bin .../{pic => assets}/group-config-detail.png | Bin .../{pic => assets}/group-create-detail.png | Bin group-admin/{pic => assets}/group-detail.png | Bin group-admin/{pic => assets}/group-member.png | Bin group-admin/{pic => assets}/management.png | Bin group-admin/{pic => assets}/myGroup.png | Bin .../{pic => assets}/problem-create-detail.png | Bin .../{pic => assets}/problem-create.png | Bin group-admin/group.md | 51 +++++++++--------- group-admin/problem.md | 47 ++++++++-------- intro/{ => assets}/backend-preview.png | Bin intro/{ => assets}/bruno-env.png | Bin intro/{ => assets}/bruno-select.png | Bin intro/{ => assets}/bruno-start.png | Bin intro/{ => assets}/codedang.png | Bin intro/{ => assets}/frontend-preview.png | Bin intro/{ => assets}/git-clone.png | Bin intro/{ => assets}/graphql-docs.png | Bin intro/{ => assets}/new-wsl-window.png | Bin intro/{ => assets}/remote-containers.png | Bin intro/{ => assets}/remote-wsl.png | Bin intro/{ => assets}/reopen-in-container.png | Bin intro/{ => assets}/vscode-download.png | Bin intro/bruno.md | 20 ++++--- intro/getting-started.md | 26 ++++----- intro/index.md | 2 +- project/{ => assets}/deploy-pipeline.png | Bin .../{ => assets}/github-actions-runner.png | Bin project/{ => assets}/github-projects.png | Bin project/stage-server.md | 4 +- project/tech-stack.md | 27 +++++----- 32 files changed, 94 insertions(+), 83 deletions(-) rename group-admin/{pic => assets}/group-approval.png (100%) rename group-admin/{pic => assets}/group-config-detail.png (100%) rename group-admin/{pic => assets}/group-create-detail.png (100%) rename group-admin/{pic => assets}/group-detail.png (100%) rename group-admin/{pic => assets}/group-member.png (100%) rename group-admin/{pic => assets}/management.png (100%) rename group-admin/{pic => assets}/myGroup.png (100%) rename group-admin/{pic => assets}/problem-create-detail.png (100%) rename group-admin/{pic => assets}/problem-create.png (100%) rename intro/{ => assets}/backend-preview.png (100%) rename intro/{ => assets}/bruno-env.png (100%) rename intro/{ => assets}/bruno-select.png (100%) rename intro/{ => assets}/bruno-start.png (100%) rename intro/{ => assets}/codedang.png (100%) rename intro/{ => assets}/frontend-preview.png (100%) rename intro/{ => assets}/git-clone.png (100%) rename intro/{ => assets}/graphql-docs.png (100%) rename intro/{ => assets}/new-wsl-window.png (100%) rename intro/{ => assets}/remote-containers.png (100%) rename intro/{ => assets}/remote-wsl.png (100%) rename intro/{ => assets}/reopen-in-container.png (100%) rename intro/{ => assets}/vscode-download.png (100%) rename project/{ => assets}/deploy-pipeline.png (100%) rename project/{ => assets}/github-actions-runner.png (100%) rename project/{ => assets}/github-projects.png (100%) diff --git a/group-admin/pic/group-approval.png b/group-admin/assets/group-approval.png similarity index 100% rename from group-admin/pic/group-approval.png rename to group-admin/assets/group-approval.png diff --git a/group-admin/pic/group-config-detail.png b/group-admin/assets/group-config-detail.png similarity index 100% rename from group-admin/pic/group-config-detail.png rename to group-admin/assets/group-config-detail.png diff --git a/group-admin/pic/group-create-detail.png b/group-admin/assets/group-create-detail.png similarity index 100% rename from group-admin/pic/group-create-detail.png rename to group-admin/assets/group-create-detail.png diff --git a/group-admin/pic/group-detail.png b/group-admin/assets/group-detail.png similarity index 100% rename from group-admin/pic/group-detail.png rename to group-admin/assets/group-detail.png diff --git a/group-admin/pic/group-member.png b/group-admin/assets/group-member.png similarity index 100% rename from group-admin/pic/group-member.png rename to group-admin/assets/group-member.png diff --git a/group-admin/pic/management.png b/group-admin/assets/management.png similarity index 100% rename from group-admin/pic/management.png rename to group-admin/assets/management.png diff --git a/group-admin/pic/myGroup.png b/group-admin/assets/myGroup.png similarity index 100% rename from group-admin/pic/myGroup.png rename to group-admin/assets/myGroup.png diff --git a/group-admin/pic/problem-create-detail.png b/group-admin/assets/problem-create-detail.png similarity index 100% rename from group-admin/pic/problem-create-detail.png rename to group-admin/assets/problem-create-detail.png diff --git a/group-admin/pic/problem-create.png b/group-admin/assets/problem-create.png similarity index 100% rename from group-admin/pic/problem-create.png rename to group-admin/assets/problem-create.png diff --git a/group-admin/group.md b/group-admin/group.md index 04a1c66..6c9e9b8 100644 --- a/group-admin/group.md +++ b/group-admin/group.md @@ -4,60 +4,64 @@ ::: warning Group 내의 계층 관련 ⛔️ Group 내에서는 두 가지의 계층이 존재합니다. -- __GroupLeader__ : 그룹의 관리자 역할으로, Group 및 Member 관리에 관한 권한들을 갖고 있습니다. -- __GroupMember__ : 그룹 내의 일반적인 Member 역할입니다. + +- **GroupLeader** : 그룹의 관리자 역할으로, Group 및 Member 관리에 관한 권한들을 갖고 있습니다. +- **GroupMember** : 그룹 내의 일반적인 Member 역할입니다. 본 Section의 독자는 GroupLeader로 가정합니다. ::: -## 그룹 관리 + +## 그룹 관리 ### 새로운 그룹 생성 Manager 이상 계층의 관리자는 직접 그룹을 생성할 수 있습니다. Group 페이지에서 +Create Group 버튼을 클릭하면 그룹 생성창으로 넘어갑니다. -![My Groups](pic/myGroup.png) +![My Groups](assets/myGroup.png) 원하는 Group Name, Group Configuration, Group Description을 작성하고 Save를 클릭하면 그룹이 생성됩니다. 이때, 그룹을 생성한 관리자는 자동으로 해당 그룹의 GroupLeader로 설정됩니다. -![Create Group](pic/group-create-detail.png) +![Create Group](assets/group-create-detail.png) Group Configuration의 자세한 설명은 아래와 같습니다. - - __Show On List__ : - 자신의 그룹의 전체 공개(All Groups에 표시) 여부를 결정합니다. - - __Allow Join From Search__ : 그룹 목록에서 해당 그룹을 선택한 사용자들에게 그룹 가입 버튼의 공개 여부를 결정합니다. - - __Allow Join With URL__ : 그룹 가입용 URL 발급 가능 여부를 결정합니다. (⚠️ Allow Join From Search와 Allow Join With URL이 모두 False라면 경고창을 반환합니다.) - - __Require Approval Before Join__ : 가입 승인 절차의 유무를 결정합니다. False라면 승인 절차없이 즉시 가입이 완료됩니다. + +- **Show On List** : + 자신의 그룹의 전체 공개(All Groups에 표시) 여부를 결정합니다. +- **Allow Join From Search** : 그룹 목록에서 해당 그룹을 선택한 사용자들에게 그룹 가입 버튼의 공개 여부를 결정합니다. +- **Allow Join With URL** : 그룹 가입용 URL 발급 가능 여부를 결정합니다. (⚠️ Allow Join From Search와 Allow Join With URL이 모두 False라면 경고창을 반환합니다.) +- **Require Approval Before Join** : 가입 승인 절차의 유무를 결정합니다. False라면 승인 절차없이 즉시 가입이 완료됩니다. ### 기존 그룹 관리 + 관리자들은 상단 Header 중 Group을 눌러 자신이 속한 그룹들을 확인할 수 있습니다. 이때, 자신이 GroupLeader로 속한 그룹은 그룹명 우측 상단에 톱니바퀴(⚙️) 모양의 아이콘이 뜨게 됩니다. -![My Groups](pic/myGroup.png) +![My Groups](assets/myGroup.png) 톱니바퀴 아이콘(⚙️)을 클릭시 관리자용 그룹 창으로 이동하게 됩니다. 관리자는 그룹 창에서 (1) 그룹 세부설정 수정 (2) 초대 URL 생성 (3) 그룹 삭제를 할 수 있습니다. -![Group Config](pic/group-detail.png) +![Group Config](assets/group-detail.png) + +- **그룹 세부설정 수정** -- __그룹 세부설정 수정__ - 관리자는 그룹명 옆의 연필 아이콘(📝)을 클릭해 그룹 세부 설정을 수정할 수 있습니다. - ![Group Config](pic/group-config-detail.png) + ![Group Config](assets/group-config-detail.png) Group Name, Group Configuration, Description을 수정할 수 있습니다. -- __초대 URL 생성__ +- **초대 URL 생성** - Create URL 버튼을 클릭하여 학생들이 클릭시 해당 그룹에 가입할 수 있는 일회용 초대 URL을 생성할 수 있습니다. + Create URL 버튼을 클릭하여 학생들이 클릭시 해당 그룹에 가입할 수 있는 일회용 초대 URL을 생성할 수 있습니다. -- __그룹 삭제__ +- **그룹 삭제** Admin, SuperAdmin 계층의 관리자는 바로 그룹을 삭제할 수 있으며, 이외의 관리자는 자신이 생성한 그룹에 한해서 삭제할 수 있습니다. ## 멤버 관리 -![Group Config](pic/group-detail.png) +![Group Config](assets/group-detail.png) 관리자는 관리자용 그룹창에서 Member 탭을 통해 관리자용 멤버창으로 접속할 수 있습니다. -![Group Member](pic/group-member.png) +![Group Member](assets/group-member.png) 관리자용 멤버창에서 사용할 수 있는 기능들은 아래와 같습니다. @@ -67,14 +71,14 @@ Group Configuration의 자세한 설명은 아래와 같습니다. 계층 변경은 두 가지의 경우가 존재합니다. -- __GroupLeader에서 GroupMember로 downgrade__ +- **GroupLeader에서 GroupMember로 downgrade** Member 탭의 GroupLeaders 목록에서 ⬇ 버튼을 클릭하면 해당 멤버의 계층을 GroupMember로 downgrade할 수 있습니다. > 이때, 모든 GroupLeader를 GroupMember로 downgrade할 수 없습니다.(최소 한 명의 GroupLeader가 존재해야 합니다.) > 또한 Admin 및 SuperAdmin 계층의 사용자는 downgrade할 수 없습니다. -- __GroupMember에서 GroupLeader로 upgrade__ +- **GroupMember에서 GroupLeader로 upgrade** Member 탭의 GroupMembers 목록에서 ⬆ 버튼을 클릭하면 해당 멤버의 계층을 GroupLeader로 upgrade할 수 있습니다. @@ -84,6 +88,5 @@ Group Configuration의 자세한 설명은 아래와 같습니다. ### 그룹 가입 승인 및 거절 -![Group Approval](pic/group-approval.png) +![Group Approval](assets/group-approval.png) 관리자는 Group Member Approval 목록에서 대기중인 그룹 가입신청 내역들을 확인할 수 있으며, 승인(✅) 혹은 거절(❎)을 선택할 수 있습니다. - diff --git a/group-admin/problem.md b/group-admin/problem.md index 317ba8c..e7f48e3 100644 --- a/group-admin/problem.md +++ b/group-admin/problem.md @@ -1,51 +1,52 @@ # 문제 생성 및 관리하기 + 본 Section에서는 문제를 생성하고 관리하는 기능들을 소개합니다. ## 문제 생성 및 삭제하기 + 관리자들은 상단 Header 중 Group을 눌러 자신이 속한 그룹들을 확인할 수 있습니다. 이때, 자신이 GroupLeader로 속한 그룹은 그룹명 우측 상단에 톱니바퀴(⚙️) 모양의 아이콘이 뜨게 됩니다. -![My Groups](pic/myGroup.png) +![My Groups](assets/myGroup.png) 톱니바퀴 아이콘(⚙️)을 클릭시 관리자용 그룹 창으로 이동하게 됩니다. -![Group Config](pic/group-detail.png) +![Group Config](assets/group-detail.png) -관리자는 옆 Problem 탭을 통해 관리자용 Problem 창으로 이동할 수 있습니다. +관리자는 옆 Problem 탭을 통해 관리자용 Problem 창으로 이동할 수 있습니다. -![Problem Create](pic/problem-create.png) +![Problem Create](assets/problem-create.png) ### 문제 생성하기 그룹 내에서 문제를 생성할 수 있는 방법은 세 경우가 있습니다. -- __문제를 직접 생성하는 경우__ (Create버튼) +- **문제를 직접 생성하는 경우** (Create버튼) Create버튼을 누르면 직접 문제를 생성할 수 있습니다. - ![Problem Create](pic/problem-create-detail.png) + ![Problem Create](assets/problem-create-detail.png) 문제의 세부 구성사항은 아래와 같습니다. - - __Title__ : 문제의 제목을 설정합니다. - - __Difficulty__ : 문제의 난이도를 설정합니다 Level 1~5까지 존재합니다. - - __Language__ : 문제의 지원언어를 설정합니다. 종류는 `C`, `C++`,`Java`, `Python3`로 이루어져 있습니다. - - __Description__ : 문제의 설명을 설정합니다. - - __Input Description__ : 입력과 관련한 설명을 설정합니다. - - __Output Description__ : 출력과 관련한 설명을 설정합니다. - - __Time Limit(ms)__ : 시간 제한을 설정합니다. 단위는 ms(밀리초)입니다. - - __Memory Limit(MB)__ : 메모리 제한을 설정합니다. 단위는 MB(메가바이트)입니다. - - __Hint__ : 표시될 힌트를 설정합니다. - - __Input Sample, Output Sample__ : 사용자에게 보여질 입력, 출력 예시를 설정합니다. - - __Testcase__ : 테스트케이스를 설정합니다. - -- __문제를 Import하는 경우__ (Import버튼) + + - **Title** : 문제의 제목을 설정합니다. + - **Difficulty** : 문제의 난이도를 설정합니다 Level 1~5까지 존재합니다. + - **Language** : 문제의 지원언어를 설정합니다. 종류는 `C`, `C++`,`Java`, `Python3`로 이루어져 있습니다. + - **Description** : 문제의 설명을 설정합니다. + - **Input Description** : 입력과 관련한 설명을 설정합니다. + - **Output Description** : 출력과 관련한 설명을 설정합니다. + - **Time Limit(ms)** : 시간 제한을 설정합니다. 단위는 ms(밀리초)입니다. + - **Memory Limit(MB)** : 메모리 제한을 설정합니다. 단위는 MB(메가바이트)입니다. + - **Hint** : 표시될 힌트를 설정합니다. + - **Input Sample, Output Sample** : 사용자에게 보여질 입력, 출력 예시를 설정합니다. + - **Testcase** : 테스트케이스를 설정합니다. + +- **문제를 Import하는 경우** (Import버튼) 추후 추가할 예정입니다. -- __문제를 파일로 업로드 하는 경우__ (File Upload버튼) +- **문제를 파일로 업로드 하는 경우** (File Upload버튼) Excel 파일을 업로드하여 여러 개의 문제 및 테스트 케이스들을 업로드할 수 있습니다. ### 문제 삭제하기 -문제 옆 🗑️ 버튼을 클릭하면 문제를 삭제할 수 있습니다. - - +문제 옆 🗑️ 버튼을 클릭하면 문제를 삭제할 수 있습니다. diff --git a/intro/backend-preview.png b/intro/assets/backend-preview.png similarity index 100% rename from intro/backend-preview.png rename to intro/assets/backend-preview.png diff --git a/intro/bruno-env.png b/intro/assets/bruno-env.png similarity index 100% rename from intro/bruno-env.png rename to intro/assets/bruno-env.png diff --git a/intro/bruno-select.png b/intro/assets/bruno-select.png similarity index 100% rename from intro/bruno-select.png rename to intro/assets/bruno-select.png diff --git a/intro/bruno-start.png b/intro/assets/bruno-start.png similarity index 100% rename from intro/bruno-start.png rename to intro/assets/bruno-start.png diff --git a/intro/codedang.png b/intro/assets/codedang.png similarity index 100% rename from intro/codedang.png rename to intro/assets/codedang.png diff --git a/intro/frontend-preview.png b/intro/assets/frontend-preview.png similarity index 100% rename from intro/frontend-preview.png rename to intro/assets/frontend-preview.png diff --git a/intro/git-clone.png b/intro/assets/git-clone.png similarity index 100% rename from intro/git-clone.png rename to intro/assets/git-clone.png diff --git a/intro/graphql-docs.png b/intro/assets/graphql-docs.png similarity index 100% rename from intro/graphql-docs.png rename to intro/assets/graphql-docs.png diff --git a/intro/new-wsl-window.png b/intro/assets/new-wsl-window.png similarity index 100% rename from intro/new-wsl-window.png rename to intro/assets/new-wsl-window.png diff --git a/intro/remote-containers.png b/intro/assets/remote-containers.png similarity index 100% rename from intro/remote-containers.png rename to intro/assets/remote-containers.png diff --git a/intro/remote-wsl.png b/intro/assets/remote-wsl.png similarity index 100% rename from intro/remote-wsl.png rename to intro/assets/remote-wsl.png diff --git a/intro/reopen-in-container.png b/intro/assets/reopen-in-container.png similarity index 100% rename from intro/reopen-in-container.png rename to intro/assets/reopen-in-container.png diff --git a/intro/vscode-download.png b/intro/assets/vscode-download.png similarity index 100% rename from intro/vscode-download.png rename to intro/assets/vscode-download.png diff --git a/intro/bruno.md b/intro/bruno.md index ca07c7c..12af3fe 100644 --- a/intro/bruno.md +++ b/intro/bruno.md @@ -21,7 +21,7 @@ https://www.usebruno.com/downloads Bruno를 실행하고 'Open Collection'을 클릭합니다. Codedang 폴더에서 collection 폴더의 client 또는 admin을 선택합니다. -![Open Collection](bruno-start.png) +![Open Collection](assets/bruno-start.png) ### 3. 환경 변수 설정 @@ -30,13 +30,13 @@ Codedang 폴더에서 collection 폴더의 client 또는 admin을 선택합니 - Development: 개발 서버 (https://dev.codedang.com) - Local: 로컬 서버 (http://localhost) -![Environment](bruno-env.png) +![Environment](assets/bruno-env.png) ### 4. 확인 왼쪽 탭에서 request를 선택하여 실행할 수 있습니다. `baseUrl`이 초록색으로 표시되는지 확인해주세요. -![Select](bruno-select.png) +![Select](assets/bruno-select.png) ## Convention 🤙 @@ -72,9 +72,11 @@ Endpoint마다 'Succeed' request의 'Docs' 탭에 아래 Format을 준수하여 ```markdown ## API 제목 + API가 수행하는 역할을 기재합니다. ### Args / Query / Params / Body + 필요한 경우, Args/Query/Params/Body에 대한 설명을 표로 정리합니다. 이름, 타입, 의미, 기본값, 제약사항을 포함해야 합니다. (예) @@ -85,19 +87,21 @@ API가 수행하는 역할을 기재합니다. |problemId|Int|problemId와 contestId중 하나는 반드시 포함한다.| |contestId|Int|problemId와 contestId중 하나는 반드시 포함한다.| - ### Error Case + API를 호출했을 때 발생 가능한 Error Case의 이름과 설명을 기재합니다. Error case의 이름은 실패하는 파일의 이름과 일치시켜주세요. 이름은 '#' 4개, 설명은 줄글로 작성합니다. (예) + #### BAD_USER_INPUT(1) + password가 조건에 맞지 않는 경우. ``` ### Scripts -로그인 및 권한이 필요한 request의 경우, Pre Request에서 사전 인증 작업을 수행해주세요. GraphQL의 경우, Admin 계정으로 로그인하는 작업이 전역으로 적용되어 있습니다. +로그인 및 권한이 필요한 request의 경우, Pre Request에서 사전 인증 작업을 수행해주세요. GraphQL의 경우, Admin 계정으로 로그인하는 작업이 전역으로 적용되어 있습니다. ~~Request를 보낼 때 상황별로 결과가 달라지지 않게 해주세요. 다시 말해 **언제나 동일한 결과**가 오게 해주세요.~~ @@ -106,14 +110,18 @@ password가 조건에 맞지 않는 경우. 모든 request마다 test를 충분히 작성해주세요(상태 코드 검사, body 검사 등). PR이 merge될 때마다 자동으로 E2E 검사가 이뤄집니다. 다음 항목을 포함해야 합니다. + #### REST API + - 성공하는 경우 - res.status - res.body의 모든 property - 실패하는 경우 - res.status - res.message + #### GraphQL + - 성공하는 경우 - res.body.data[0] 존재 유무 - 실패하는 경우 @@ -122,7 +130,7 @@ password가 조건에 맞지 않는 경우. ### GraphQL -![GraphQL Docs](graphql-docs.png) +![GraphQL Docs](assets/graphql-docs.png) GraphQL 서버 개발 시, field 타입을 정확하게 지정하여 Docs panel만으로 필드 및 반환 객체의 이름과 타입 정보를 알 수 있게 해 주세요. Query나 Mutation에 인자가 들어가는 경우, `Variables` 항목에 분리하여 작성해주세요. diff --git a/intro/getting-started.md b/intro/getting-started.md index 1243a1e..33c00ae 100644 --- a/intro/getting-started.md +++ b/intro/getting-started.md @@ -7,33 +7,33 @@ 2. GitPod 3. Manual -가장 권장하는 개발 환경은 Container 내에서 개발하는 Visual Studio Code이지만, 어려울 경우에는 GitPod을 이용하거나 직접 세팅할 수도 있습니다. +가장 권장하는 개발 환경은 Container 내에서 개발하는 Visual Studio Code이지만, 어려울 경우에는 GitPod을 이용하거나 직접 세팅할 수도 있습니다. ## Visual Studio Code (이하 VSCode) ### 1. 기본 도구 설치 (Git, WSL2(Windows), Docker) - **Git**: Windows는 [https://git-scm.com/download/win](https://git-scm.com/download/win)에서 다운로드하고, Mac은 [https://git-scm.com/download/mac](https://git-scm.com/download/mac)에서 다운로드합니다. -Linux는 패키지 관리도구로 쉽게 설치할 수 있습니다. (예: Debian 계열인 경우 `sudo apt install git-all`) + Linux는 패키지 관리도구로 쉽게 설치할 수 있습니다. (예: Debian 계열인 경우 `sudo apt install git-all`) - **WSL2(Windows)**: 자세한 설치 방법은 [WSL 설치 공식 가이드](https://docs.microsoft.com/ko-kr/windows/wsl/install)를 참고해주세요. -- **Docker**: Windows는 WSL2를 먼저 설치하고, [Docker Desktop for Windows](https://docs.docker.com/desktop/install/windows-install/)를 설치하면 됩니다. -Mac은 [Docker Desktop for Mac](https://docs.docker.com/desktop/install/mac-install/)을 설치하면 됩니다. -Linux는 자신의 배포판에 맞는 버전을 [공식 홈페이지](https://docs.docker.com/engine/install/)에서 찾아 설치하면 됩니다. +- **Docker**: Windows는 WSL2를 먼저 설치하고, [Docker Desktop for Windows](https://docs.docker.com/desktop/install/windows-install/)를 설치하면 됩니다. + Mac은 [Docker Desktop for Mac](https://docs.docker.com/desktop/install/mac-install/)을 설치하면 됩니다. + Linux는 자신의 배포판에 맞는 버전을 [공식 홈페이지](https://docs.docker.com/engine/install/)에서 찾아 설치하면 됩니다. ### 2. VSCode 설치 [VSCode 홈페이지](https://code.visualstudio.com/)에서 VSCode 설치 파일을 다운로드 받고, 파일을 실행하여 설치합니다. -![VSCode Download](vscode-download.png) +![VSCode Download](assets/vscode-download.png) ### 3. Remote - Containers 확장 설치 왼쪽의 'Extensions' icon을 눌러(단축키 Ctrl+Shift+X, ⇧⌘X) "remote containers"를 검색창에 입력합니다. 'Remote - Containers'를 선택하고 'Install' 버튼을 눌러 설치합니다. -![Remote - Containers](remote-containers.png) +![Remote - Containers](assets/remote-containers.png) ### 4. Clone Repository @@ -46,18 +46,18 @@ Windows file system에 clone 받는 것보다 WSL file system에 clone 받는 WSL에 clone 받는 방법은 아래 설명을 참고해주세요. ::: -![Git Clone in VSCode](git-clone.png) +![Git Clone in VSCode](assets/git-clone.png) #### 4-1. WSL에 Clone 받기 (Windows만) 3번처럼 'Extensions' 탭을 열어 "remote wsl"을 검색창에 입력합니다. 'Remote - WSL'을 선택하고 'Install' 버튼을 눌러 설치합니다. -![Remote - WSL](remote-wsl.png) +![Remote - WSL](assets/remote-wsl.png) 왼쪽 아래의 `><` 모양 아이콘을 누르고 'New WSL Window' 옵션을 선택하여 WSL 환경에서 VSCode를 시작합니다. -![New WSL Window](new-wsl-window.png) +![New WSL Window](assets/new-wsl-window.png) 이후 4번과 같은 방식으로 WSL 내에 clone하면 됩니다. @@ -69,7 +69,7 @@ Repository가 열리면 좌측 하단의 `><` 모양 아이콘을 누르고, "Re 이후 자동으로 Docker container가 생성되며 도구와 라이브러리, VSCode 확장들이 설치됩니다. 초기 구성에는 5~10분 정도 소요되지만, 다시 실행할 때에는 오래 걸리지 않습니다. -![Reopen in Container](reopen-in-container.png) +![Reopen in Container](assets/reopen-in-container.png) ### 6. Preview server 열기 @@ -84,7 +84,7 @@ pnpm dev Story(component 문서)를 보고 싶으면, `pnpm story` 명령어를 입력해주세요. -![Frontend Preview](frontend-preview.png) +![Frontend Preview](assets/frontend-preview.png) #### 6-2. Backend @@ -93,7 +93,7 @@ cd backend pnpm start:dev ``` -![Backend Preview](backend-preview.png) +![Backend Preview](assets/backend-preview.png) ## GitPod diff --git a/intro/index.md b/intro/index.md index c5ae5bb..4894e5c 100644 --- a/intro/index.md +++ b/intro/index.md @@ -12,4 +12,4 @@ 스꾸딩 팀 뿐만 아니라 누구나 수정하고 싶은 기능을 건의하고, 심지어 직접 구현할 수 있습니다. 자세한 내용은 [GitHub에서 확인해보세요.](https://github.com/skkuding) (이슈 & PR은 언제나 환영이에요!) -![코드당](codedang.png) +![코드당](assets/codedang.png) diff --git a/project/deploy-pipeline.png b/project/assets/deploy-pipeline.png similarity index 100% rename from project/deploy-pipeline.png rename to project/assets/deploy-pipeline.png diff --git a/project/github-actions-runner.png b/project/assets/github-actions-runner.png similarity index 100% rename from project/github-actions-runner.png rename to project/assets/github-actions-runner.png diff --git a/project/github-projects.png b/project/assets/github-projects.png similarity index 100% rename from project/github-projects.png rename to project/assets/github-projects.png diff --git a/project/stage-server.md b/project/stage-server.md index 61d68e4..a679959 100644 --- a/project/stage-server.md +++ b/project/stage-server.md @@ -2,7 +2,7 @@ 스테이지 서버는 배포 전 테스트를 위한 서버로, [dev.codedang.com](https://dev.codedang.com/)에서 확인할 수 있습니다. -![배포 과정](./deploy-pipeline.png) +![배포 과정](assets/deploy-pipeline.png) `main` 브랜치에 올라간 코드는 `deployment` environment에서 자동으로 스테이지 서버에 배포되며, 수동으로 production 배포를 trigger하면 `production` environment에서 진행합니다. @@ -63,4 +63,4 @@ GitHub의 codedang repository에서 `Settings` > 좌측 사이드 바 `Actions` 이후 설명된 내용을 따라 Runner를 등록합니다. -![GitHub Action Runner 등록](./github-actions-runner.png) +![GitHub Action Runner 등록](assets/github-actions-runner.png) diff --git a/project/tech-stack.md b/project/tech-stack.md index 36281eb..8aa8fc9 100644 --- a/project/tech-stack.md +++ b/project/tech-stack.md @@ -2,12 +2,12 @@ Coding Platform은 Frontend, Backend, DevOps 세 팀으로 나누어 프로젝트를 진행합니다. -| 분류 | Stacks | -|:--------:|-------------| -| 공통 | Visual Studio Code, GitHub, pnpm, Typescript, ESLint, Prettier, Lefthook | -| Frontend | Vue.js, Vite, Tailwind CSS, Pinia, Histoire | -| Backend | Node.js, Nest.js, Express, Mocha, Prisma, PostgreSQL, Redis | -| DevOps | Docker, AWS | +| 분류 | Stacks | +| :------: | ------------------------------------------------------------------------ | +| 공통 | Visual Studio Code, GitHub, pnpm, Typescript, ESLint, Prettier, Lefthook | +| Frontend | Vue.js, Vite, Tailwind CSS, Pinia, Histoire | +| Backend | Node.js, Nest.js, Express, Mocha, Prisma, PostgreSQL, Redis | +| DevOps | Docker, AWS | ## 공통 @@ -17,7 +17,7 @@ Coding Platform은 Frontend, Backend, DevOps 세 팀으로 나누어 프로젝 GitHub Issues에 모든 task를 저장하여 스꾸딩 팀의 업무 단위로 활용하고 있고, pull request로 코드 리뷰를 거치며 의견을 교환합니다. 또한 GitHub Actions로 CI/CD 시스템을 구축하여 테스팅과 배포를 자동화하였습니다. -![GitHub Projects](github-projects.png) +![GitHub Projects](assets/github-projects.png) ### pnpm @@ -64,13 +64,13 @@ Frontend framework로 [Vue 3](https://vuejs.org/)을 사용합니다. React와 Svelte 등의 대안을 두고 Vue를 사용한 이유는 다음과 같습니다. - **React**: React는 frontend library 중 가장 큰 커뮤니티를 가지고 있어 자료 검색이나 라이브러리 도입이 쉽다는 장점이 있습니다. -또한 Next.js라는 훌륭한 SSR/SSG 용 framework도 있고, 채용 시장에서 수요도 제일 많습니다. -하지만 난이도가 비교적 높아 진입장벽이 높고 Vue에 비해 문법이 직관적이지 못합니다. -Vue 2에 대해서는 React가 Typescript 지원에서 크게 앞서있었지만, Vue 3에서는 Composition API로 여러 문제가 해결되며 React의 메리트가 줄어들었습니다. + 또한 Next.js라는 훌륭한 SSR/SSG 용 framework도 있고, 채용 시장에서 수요도 제일 많습니다. + 하지만 난이도가 비교적 높아 진입장벽이 높고 Vue에 비해 문법이 직관적이지 못합니다. + Vue 2에 대해서는 React가 Typescript 지원에서 크게 앞서있었지만, Vue 3에서는 Composition API로 여러 문제가 해결되며 React의 메리트가 줄어들었습니다. - **Svelte**: Svelte는 신생 frontend library로 매우 직관적인 문법이 특징입니다. -하지만 신생 라이브러리인 만큼 학습 자료나 라이브러리가 부족하여 개발 경험이 적은 팀원들에게 적합하지 않습니다. -또한 [자체적으로 설계 문제](https://gist.github.com/rabelais88/19bfe8dfd29d901554389f0a8cc8947a)가 있어 추후 scalable한 운영이 어려울 수 있습니다. + 하지만 신생 라이브러리인 만큼 학습 자료나 라이브러리가 부족하여 개발 경험이 적은 팀원들에게 적합하지 않습니다. + 또한 [자체적으로 설계 문제](https://gist.github.com/rabelais88/19bfe8dfd29d901554389f0a8cc8947a)가 있어 추후 scalable한 운영이 어려울 수 있습니다. 기존에 스꾸딩 팀이 QingdaoU OJ 기반의 Online Judge를 구축할 때부터 Vue를 써온 것도 Vue를 택한 이유 중 하나입니다. 더 상세한 배경은 [issue #8](https://github.com/skkuding/next/issues/8#issuecomment-1065856244)에서 확인할 수 있습니다. @@ -84,7 +84,7 @@ ES module을 적극적으로 활용하고 dependecies를 esbuild로 bundle하기 - [`vite-plugin-pages`](https://github.com/hannoeru/vite-plugin-pages): File system 기반의 routing을 자동으로 만들어줍니다. - [`unplugin-icons`](https://github.com/antfu/unplugin-icons): Iconset들을 쉽게 불러올 수 있는 plugin입니다. -[Icônes](https://icones.js.org/)에서 아이콘들을 확인할 수 있습니다. + [Icônes](https://icones.js.org/)에서 아이콘들을 확인할 수 있습니다. ### Tailwind CSS @@ -149,7 +149,6 @@ Prisma는 각 model들을 type으로 생성해주기 때문에 Typescript로 쉽 [Redis](https://redis.io/)는 in-memory 저장소로, 이 프로젝트에서는 주로 caching과 message queue를 위해 쓰입니다. (추후 message queue는 Amazon SQS으로 대체할 수 있습니다) - ## DevOps ::: warning Work in Progress 🚧