페이지 이력

...

일반 사용자
- 로그인 없이 콘텐츠 탐색 가능
로그인 사용자 - 기여자(Contributor)
- 내부 전용 콘텐츠 열람
- 콘텐츠 등록
- GitHub 분석 파이프라인 실행
- 워크샵 경험 라벨링
- 챗봇 서비스를 통해 추천 제공 (퀄리티 검증 안됨)

...

6. 콘텐츠 흐름 예시

GitHub 레포지토리 URL 등록
- 분석 파이프라인 실행
- README / 메타데이터 수집
- 기술 스택 식별
- AI 기반 요약 및 분류
- 썸네일 이미지 생성
- 검색 인덱스 반영
사용자에게 카드 형태로 노출
- GitHub 링크
- 데모 / 문서 / 영상 (있는 경우)난이도
- / 예상 소요 시간Star / 최근 업데이트 날짜 제공 및 정렬 제공

...

7. 이 프로젝트의 의미

NexusSkill은 단순한 웹 애플리케이션이 아니다.

...

기획이 제일 중요
1. 처음에 아이디어를 체계적으로 잡는게 중요하다.
2. 유저의 흐름
3. 기여자의 흐름

개발툴

VS Code + GitHub Copilot 은 쓸만하다.

task는 정의해 두면, backend랑 frontend랑 서버 실행시킬 때 편하다.

코드 블럭

title	.vscode/tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "dev:backend",
      "type": "shell",
      "command": "cd backend && npm run dev",
      "isBackground": true,
      "presentation": {
        "panel": "dedicated",
        "group": "servers"
      },
      "runOptions": { "reevaluateOnRerun": true }
    },
    {
      "label": "dev:frontend",
      "type": "shell",
      "command": "cd frontend && npm run dev",
      "isBackground": true,
      "presentation": {
        "panel": "dedicated",
        "group": "servers"
      },
      "runOptions": { "reevaluateOnRerun": true }
    },
    {
      "label": "test",
      "type": "shell",
      "command": "npm test",
      "presentation": {
        "panel": "dedicated",
        "group": "tests"
      }
    }
  ]
}

개발 개발 여정
1. 아이디어를 정리하며 기획 (1월 16일)
  1. 구체적이지 않을 경우, 뒤에서 다 뜯어고쳐야 하는 문제가 생길 수 있음.
  2. Speckit 으로 구현, 큰 건들은 Speckit, 중간 건들은 Plan 모드, 막 만들때는 Agent 모드에서 그냥 만들고 문서 싱크함.
2. Frontend 부터 구현: kombai 사용 (1월 17일~19일)
  1. 좋긴 한데, 크레딧 소진이 너무 빠름. 무료 크레딧 기반
  2. 큰 그림만 잡아서 활용한 후에 GitHub Copilot으로 나머지 부분 개발
3. Backend 구현 (1월 20일~26일)
  1. 로그인 구현, 이메일 OTP로 별도 개인정보 수집 안함. 사내 직원만 이메일 인증 코드 발송, studydev.com으로 도메인 인증
  2. nexusskill 이름 정함. 도메인은 nexus.studydev.com으로 연결
  3. GitHub Actions 구성(처음 CICD 다 한번에 태웠다가 프론트엔드, 백엔드 CI / CD 각각 분리)
  4. 목업 형태로 쓸 컨텐츠 수집하기 (ignite25-next 50 여개 컨텐츠를 Python + LLM으로 수집하여 JSON 저장)
  5. 목업 데이터 기반으로 카드 형태로 컨텐츠 구성하기
  6. 실제 데이터를 담을 수 있는 그릇 준비(cosmosdb) 사용 - 선택 이유. 건바이건으로 담아두고 활용하기에 가장 비용 효율적임.
  7. github repo 컨텐츠 수집 로직 작성 - GitHub URL 넣으면 데이터 크롤링 readme.md와 github api를 활용하여 각종 데이터를 수집
  8. 뭔가 허전해서 컨텐츠 썸네일 이미지 작성(gpt-image-1.5) 3:2 비율, 서비스 나열보다는 어떤 문제를 해결하기에 좋은지 해결점까지의 모습을 그려냄, 분류에 따라 색을 다르게 적용
  9. 검색 엔진(ai search) 도입하고 cosmosdb의 데이터 CRUD를 싱크함, 이때, 검색에 용이하도록 카테고리 분류 및 임베딩 적용 (이때부터, CosmosDB는 검색에 사용 하지 않음, 색인화된 정보로 검색함)
  10. 챗봇 서비스 도입하여 추천할 수 있도록 만듬. 인증 사용자(내부)만 쓸 수 있도록 제한을 걸어둠
  11. 원래 백엔드 container app 하나가 0 베이스로 시작하는건데, 콜드 부팅 때문에 1개로 올려둠. (0.5 코어 기반)
  12. 불필요해 보이는 코드와 인프라 제거
4. 추가 구현할 예정
  1. 정적 워크샵 페이지 번역하여 등록
  2. 영문 워크샵을 한글 버전으로 이전 및 운영 환경 맞추기 (devcontainer 고려)
  3. nexus 워크샵 환경과 연동하기
주의 사항
1. 다른 서비스 포함 $150/월 넘기면 안됨. 개인 계정임. 나중에 인프라 넘길 수 있으면 넘길 예정. 감시중.

페이지 트리

버전 비교

이전 버전 4

새 버전 5

키

6. 콘텐츠 흐름 예시

7. 이 프로젝트의 의미

기획이 제일 중요

개발툴

개발 개발 여정

아이디어를 정리하며 기획 (1월 16일)

Frontend 부터 구현: kombai 사용 (1월 17일~19일)

Backend 구현 (1월 20일~26일)

추가 구현할 예정

주의 사항