feat: update about page

skkuding · Nov 12, 2023 · a44cabb · a44cabb
1 parent 3d61964
commit a44cabb
Show file tree

Hide file tree

Showing 3 changed files with 235 additions and 1 deletion.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,6 +1,9 @@
 {
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[html]": {
+    "editor.formatOnSave": false
+  },
   "[toml]": {
     "editor.defaultFormatter": "tamasfe.even-better-toml"
   }

diff --git a/content/about.md b/content/about.md
@@ -3,4 +3,187 @@ title = 'About'
 date = '2023-01-20'
 +++
 
-스꾸딩은 성균관대학교 Coding Platform을 개발하는 동아리입니다! Coding Platform은 성균관대학교 학우들의 코딩 학습을 돕기 위한 서비스로, 백준 OJ처럼 다양한 프로그래밍 문제들을 제공하고 저학년생들이 코딩 수업을 들으며 입문하는 어려움을 줄여주는 것을 목표로 하고 있습니다. 스꾸딩에서는 학생 신분으로 접할 기회가 드문 큰 규모의 프로젝트를 진행하면서 서버와 트래픽을 다루고 체계적인 시스템을 배우는 뜻깊은 경험을 할 수 있습니다. 스꾸딩은 함께 성장하는 것을 무엇보다도 중요하게 여기기 때문에, 개발 경험이 부족하더라도 열정이 넘치는 분들은 환영합니다!
+SKKUDING(스꾸딩)은 SKKU와 coding을 합친 이름으로, Codedang(코드당) 웹사이트 개발 프로젝트를 주도적으로 진행하는 프로젝트 팀이에요. 2020년 알고리즘 동아리인 NPC 소속 개발팀에서 처음 시작하여 2022년 1학기에 공식적으로 독립된 동아리로 분리되었습니다.
+
+### 스꾸딩은 사람들과 함께 성장하는 것이 주된 목표예요.
+
+학생들이 접하기 어려운 큰 프로젝트를 통해 경험과 실력을 키울 수 있는 환경을 제공해요.
+
+- 현업 프로세스와 유사한 환경을 겪어봐요. (CI/CD 파이프라인, issue tracker 등)
+- 오픈소스에 기여한 내용을 내 포트폴리오로!
+- 개발에 능숙하지 않더라도, 멘토와 함께 스터디를 통해 실력을 키워요.
+- 더 나은 코드를 위해 PR 리뷰로 서로 도움을 주고받아요.
+
+### 스꾸딩은 자유로운 분위기를 지향해요.
+
+- ‘밥 먹을 사람’, ‘모각코’ 등 자유로운 소통을 위한 채널이 마련되어 있어요.
+- ‘모닥불’ 채널에서는 잡담과 질문을 자유롭게 할 수 있고, 다양한 정보 공유도 이루어져요.
+- 동아리방에 마련된 간식은 무제한 제공이에요! 🙀
+
+## 코드당은 이런 서비스예요! 📈
+
+코드당은 성균관대학교 전교생을 대상으로 하여 코딩 능력 향상을 돕는 Online Judge 시스템입니다. 학생들은 다양한 연습 문제로 실력을 키울 수 있고, 프로그래밍 대회에 참가하여 자신의 실력을 확인할 수 있어요. **체계적인 코딩 테스트 시스템**을 구축하여, **학생들이 전학년에 걸쳐 얼마나 성장했는지를 스스로 점검**할 수 있는 서비스를 제공하는 것이 목표예요.
+
+이 프로젝트는 시스템 대부분이 GitHub에 오픈 소스로 공개되어 있어, 원하는 기능을 제안하거나 직접 만들고 수정할 수 있어요. 자신이 제안하거나 구현한 내용을 포트폴리오로 바로 활용할 수도 있고요! 더 많은 내용을 보려면 아래 GitHub 링크를 확인해보세요.
+
+{{< bookmark title="skkuding/codedang: Online Judge for SKKU" description="Online Judge for SKKU. Contribute to skkuding/codedang development by creating an account on GitHub." url="https://github.com/skkuding/codedang" image="https://opengraph.githubassets.com/1f2ebaae45140c8bed431163354ba330b53914196b6c9257e99902566b86ab10/skkuding/codedang" >}}
+
+## 이런 혜택을 받을 수 있어요! 😎
+
+- 웹 개발 스택 학습을 위한 인프런 강의 및 도서 지원
+- 개발 컨퍼런스 참가비 지원
+- 서버, 클라우드 운영비 등 지원
+- 지도 교수님과의 활발한 소통
+- 간식 지원(!)
+
+## 우리는 이런 팀원을 원해요! 👍
+
+- 새로운 것을 배우는 일에 주저하지 않는 열정적인 사람
+- 동아리 활동에 적극적으로 참여할 수 있는 사람
+- 개발에 관심을 갖고 질문하고자 하는 사람
+
+## 각 팀은 어떤 역할을 맡나요? 🧐
+
+👀 **프론트엔드** 팀은 코드당의 화면을 담당하고 있어요. 서버의 데이터를 사용자가 볼 수 있도록 디자인과 기획에 맞는 화면을 구현해요!
+
+- 사용자가 편하게 코드당 서비스를 사용할 수 있도록 화면을 구현해요.
+- 정해진 기획과 디자인에 맞게 서비스에 필요한 기능들을 구현해요.
+- 백엔드 팀에서 구현한 데이터 구조에 맞춰 API를 연결하고 데이터를 화면에 보여줘요.
+- 사용자와 서버의 데이터를 알맞게 동기화하는 로직을 고민해요.
+- 사용하고 있는 기술은 Vue.js(이번 학기부터 React), Typescript, Vite, Tailwind CSS 등이 있어요.
+
+🧩 **백엔드** 팀은 코드당의 백그라운드 로직 개발을 맡고 있어요! 서비스의 핵심 기능을 완성하고 사용자 요청에 원활하게 응답할 수 있도록 지속적으로 성능을 개선해나가요.
+
+- 사용자와 서버 간의 통신을 위한 API를 설계하고 개발해요.
+- 사용자 인증, 문제/대회/그룹 관리와 같은 코드당 서비스의 중심 기능을 만들어요.
+- 성능을 최적화해 서비스를 안정적으로 운영할 수 있도록 해요.
+- 데이터베이스를 구성 및 관리하며 필요한 정보를 사용자에게 안전하게 전달해요.
+- 사용하고 있는 기술은 Node.js, NestJS, Prisma, PostgreSQL, RabbitMQ, Go 등이 있어요.
+
+🌱 **인프라** 팀은 여러 팀원들이 작업한 코드가 꼬이지 않고 잘 합쳐지도록 기반을 마련하는 역할을 해요. 자동으로 코드를 테스트하고 배포하는 환경을 구축하며, 필요한 성능에 따라 서버 크기와 개수를 조절해요.
+
+- 팀원의 코드를 기존 코드와 합치고 배포하기 전, CI 파이프라인으로 코드에 이상이 있는지 자동으로 확인해요.
+- 누구나 버튼 클릭만으로 배포를 할 수 있도록 CD 파이프라인으로 자동화된 배포를 지원해요.
+- 배포 전 구현한 기능이 제대로 동작하는지 확인할 수 있는 스테이지 서버를 운영해요.
+- 클라우드 서버(AWS)에 프론트엔드, 백엔드를 비롯하여 데이터베이스, 메시지 큐 등 다양한 환경을 구축해요.
+- 서버 및 여러 환경 관리를 자동화하여 인력이 효율적으로 쓰일 수 있도록 도와줘요.
+- 사용하고 있는 기술은 GitHub Action, AWS(EC2, S3, Cloudfront, ECS, RDS, ElastiCache, MQ 등), Docker 등이 있어요.
+
+🎨 **기획/디자인** 팀은 코드당 서비스의 전체적인 비전과 목표를 설정하고 이를 달성하기 위해 다양한 아이디어들을 발굴하며 적절한 디자인과 새로운 기능을 고민해요.
+
+- 개발이 원활하게 이루어질 수 있도록, 각 팀과 활발하게 소통하며 업무 일정, 작업 우선 순위 등 프로젝트 전반을 관리해요.
+- 배포된 서비스에 대해 사용자의 피드백을 수집하고 분석하여 코드당 서비스가 지속적으로 발전할 수 있게 프로젝트를 이끌어요.
+- 사용자 중심의 UX 및 UI를 디자인하여 웹사이트를 사용자 친화적으로 개선해요.
+
+## 활동은 이렇게 진행해요! 🔥
+
+신규 팀원 분들은 학기 중에 팀별로 커리큘럼에 따라 학습을 진행하고, 방학부터 프로젝트 개발에 참여해요. 학습에 사용될 인프런 강의는 동아리에서 지원하며, 다른 신규 팀원 분들과 학습 내용을 공유하는 시간을 주 1회 가질 예정이에요. 방학에는 프로젝트 투입 전, 그동안 배운 내용을 적용해볼 수 있는 해커톤이 열려요.
+
+스터디는 스꾸딩의 스터디 Cookbook을 활용해요. 총 8주 간 진행하고, Cookbook의 가이드를 따라 팀별로 스터디를 진행해요. 기획/디자인 팀은 스터디 없이 바로 프로젝트에 참여해요.
+
+{{< bookmark title="스꾸딩 Cookbook" description="스꾸딩의 신입 팀원들을 위해 스꾸딩의 개발 레시피를 모아둔 곳입니다!" url="https://study.skkuding.dev/" image="https://skkuding.dev/open-graph.png" >}}
+
+팀별 8주 커리큘럼은 아래와 같아요. (커리큘럼은 매 학기마다 변경될 수 있어요!)
+
+| 주차  | 프론트엔드        | 백엔드              | 인프라                  |
+| ----- | ----------------- | ------------------- | ----------------------- |
+| 1주차 | HTML, CSS         | Node.js             | Node.js                 |
+| 2주차 | JavaScript        | Express.js          | Express.js              |
+| 3주차 | TypeScript        | TypeScript          | Docker                  |
+| 4주차 | React             | NestJS (1)          | AWS EC2, Network        |
+| 5주차 | REST API, GraphQL | NestJS (2)          | AWS S3, Cloudfront, IAM |
+| 6주차 | Tailwind CSS      | Prisma              | AWS ELB, ECR, ECS       |
+| 7주차 | React Ecosystem   | GraphQL             | Terraform               |
+| 8주차 | Next.js           | Testing (Unit, E2E) | GitHub Action           |
+
+### 업무 내용
+
+방학부터는 본격적으로 이슈를 할당 받아 프로젝트를 함께 해요! 매주 팀별 회의가 있고, 회의 시간은 팀별로 조율해요.
+
+**프론트엔드**
+
+- Vue → React migration
+- GraphQL을 활용한 Admin 페이지 개발
+- 신규 디자인 적용
+- React Query로 서버 데이터 처리
+- NextJS로 SSR 적용
+- E2E(_End-to-End_) test 작성 (Cypress)
+- Web용 Code Editor 기능 추가 (CodeMirror)
+- 반응형 디자인 (모바일 대응)
+
+**백엔드**
+
+- GraphQL을 활용한 Admin API 개발
+- Load test (서버 성능 검증)
+- Judge Sandbox 개발 (Rust)
+- E2E(_End-to-End_) test (Pactum)
+- OpenAPI 3.1 기반 문서화
+- 코드 표절 검사 기능 (JPlag)
+- 유사 문제 추천 기능
+
+**인프라**
+
+- Load test (서버 성능 검증)
+- AWS Cloudwatch 모니터링 환경 개선
+- 스테이지 서버 AWS migration
+- On-premise 채점 서버 구축
+- Terragrunt로 Terraform 모듈화
+
+**기획 & 디자인**
+
+- 기획 문서 세부 내용 정리
+- API 문서 및 schema 검토
+- Figma 개선 (prototype 등)
+- UI & UX 개선
+
+## 지원해보시겠어요? ✏️
+
+아쉽지만 지금은 지원이 마감되었어요. 학기 초마다 모집 중이니, 다음 기회에 지원해주세요!
+
+<!-- 아래 링크에서 지원할 수 있어요! -->
+
+<!-- [2023-2 SKKUDING 팀원 모집](https://skkuding.dev/apply) -->
+
+<!-- ## 모집 정보 -->
+
+<!-- |                |                                              |
+| -------------- | -------------------------------------------- |
+| 모집 대상      | 성균관대학교 재학생 및 휴학생, 전공 무관     |
+| 모집 분야      | 프론트엔드 / 백엔드 / 인프라 / 기획 & 디자인 |
+| 모집 기간      | 9월 1일(금) 18시까지                         |
+| 면접 대상 안내 | 9월 2일(토)                                  |
+| 면접 기간      | 9월 4일(월) ~ 9월 6일(수)                    |
+| 합격자 발표    | 9월 7일(목)                                  |
+| OT             | 9월 8일(금)                                  |
+|                |                                              | -->
+
+<!-- ## FAQ -->
+
+<!-- > **Q. 면접은 어디서 진행하나요?**
+>
+> A. 온라인으로 진행합니다!
+
+> **Q. 선발되지 못한 경우에도 연락을 받나요?**
+>
+> A. 네! 결과에 상관 없이 모든 분께 결과 안내드릴 예정입니다.
+
+> **Q. 수업이 있어서 면접이 어려울 것 같아요 😭**
+>
+> A. 면접 대상자의 경우 월~수 중 면접 가능한 시간을 조사 받을 예정입니다!
+> 답변해주신 시간에 맞춰 면접 시간 안내드릴 예정입니다.
+
+> **Q. OT는 어디서 하나요? 불참 시 불이익이 있나요?**
+>
+> A. 율전에서 오프라인으로 OT 진행 예정입니다!
+> 불참 시 불이익은 없지만, 참석을 권장드려요.
+
+> **Q. 활동은 주로 어디서 하나요?**
+>
+> A. 보통 팀 별로 주 1회 율전에서 모임을 가져요.
+> 지금은 동아리방이 리모델링 중이라 학교 공간이나 카페에서 모입니다! -->
+
+## Contact us 📞
+
+궁금한 내용은 카카오톡 채널 skkuding으로 연락주세요!
+
+[SKKU 개발동아리 skkuding](https://skkuding.dev/contact)
diff --git a/layouts/shortcodes/bookmark.html b/layouts/shortcodes/bookmark.html
@@ -0,0 +1,48 @@
+<a href="{{ .Get "url" }}" target="_blank" class="bookmark">
+  <style>
+    .bookmark {
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      margin-bottom: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      text-decoration: none;
+      font-weight: 400;
+      font-size: medium;
+    }
+    .bookmark:hover {
+      background-color: hsl(0, 0%, 96%);
+    }
+    .bookmark-content {
+      padding: 8px 16px;
+    }
+    .bookmark-title {
+      font-weight: 600;
+      font-size: large;
+      margin: 0;
+      padding: 0;
+    }
+    .bookmark-description {
+      margin: 0;
+    }
+    .bookmark-image {
+      width: 240px;
+      height: 120px;
+      margin: 0;
+      object-fit: cover;
+      border-radius: 0 4px 4px 0;
+    }
+    /* .bookmark-image img {
+      max-width: 100px;
+      height: auto;
+    } */
+  </style>
+  <div class="bookmark-content">
+    <p class="bookmark-title">{{ .Get "title" }}</p>
+    <p class="bookmark-description">{{ .Get "description" }}</p>
+  </div>
+  {{ if .Get "image" }}
+  <img src="{{ .Get "image" }}" alt="{{ .Get "title" }}" class="bookmark-image">
+  {{ end }}
+</a>