백준허브 사용 방법

flaxinger·2021년 12월 29일
69

백준허브

목록 보기
1/1
post-thumbnail

백준허브 초기 개발자여서 문서화하였으나 2023-03-16일 이후로 백준허브 프로젝트와 이별하였으며, 이에 따라 업데이트 되지 않습니다. 댓글로 문의를 해도 답변 드리기 어려우니, 이해 부탁드립니다. 당장은 이 문서를 대체할만한 것이 없어 유지하며, 추후 적절한 시기에 삭제될 예정입니다.

목차

  1. 소개
    1.1 익스텐션 소개
    1.2 백준허브의 개발자
  2. 설치
    2.1 익스텐션 설치
    2.2 업데이트 방법
  3. 사용 방법
    3.1 리파지토리 연동
    3.2 업로드 과정
    3.3 업로드 확인
    3.4 주의 사항
  4. 기능 요약
    4.1 파싱하는 정보
    4.2 지원 언어
    4.3 코드 업로드 기준
    4.4 해결 목록 전체 업로드 (지원 중단)
    4.5 저장 경로
  5. 백준허브 철학
  6. 버그 신고

1. 소개

1.1 익스텐션 소개

백준허브는 LeetCode의 개인 풀이를 github에 자동 푸시해주는 LeetHub에서 영감을 받아 만든 오픈소스 프로젝트입니다. 백준을 통해 알고리즘 공부를 하시는 분들이 보다 쉽게 코드를 저장하고 관리할 수 있도록 하기 위해 만들었으며 여러분의 조언과 참여를 환영합니다.

백준허브는 크롬 브라우저에서 테스팅되었습니다.

1.2 백준허브의 개발자

백준허브는 아래 개발자들의 도움으로 서비스되고 있습니다. 여러분의 따듯한 응원과 열정적인 참여를 부탁드립니다.

flaxinger
getCurrentThread
mumwa

2. 백준허브 설치

2.1 익스텐션 설치

백준허브는 다음 링크에서 설치할 수 있습니다.

2.2 업데이트 방법

크롬의 익스텐션 업데이트는 통상 자동으로 실행되나, 개별 익스텐션의 패치일 기준으로 업데이트를 하지는 않습니다. 다만 익스텐션을 삭제 후 재설치하신다면 로컬 스토리지의 정보가 초기화되어 사용에 불편이 있을 수 있기에 버전 업데이트를 원하는 분은 아래와 같이 업데이를 부탁드립니다.

우선 크롬의 익스텐션 관리 창으로 이동합니다.

이동 후 Developer Mode를 활성화합니다.

활성화 이후 위와 같이 업데이트 버튼을 확인할 수 있는데, 이때 버튼을 실행하시면 모든 익스텐션이 최신 버전으로 업데이트 됩니다.

3. 사용 방법

3.1 리파지토리 연동

팝업 창연동 화면

크롬 익스텐션 설치 후 팝업 창의 'Set up Hook' 버튼을 클릭하면 OAuth 인증 후 우측 사진과 같이 연동 화면으로 이동합니다. 중앙의 옵션 버튼으로 필요에 따라 새로운 프라이빗 리파지토리 혹은 기존의 리파지토리와 연동할 수 있습니다. 'Get Started' 버튼을 누르면 자동으로 연동이 완료됩니다.

3.2 업로드 과정


제출버튼 클릭 여부를 확인 후 동작하는 LeetHub와 달리 백준허브는 위와 같이 제출 화면이 감지되면 동작합니다. 따라서 기존에 성공했던 문제도 해당 제출 화면으로 이동하면 자동으로 제출 기능이 발동됩니다.

로딩 아이콘업로드 완료 아이콘업로드 실패 아이콘

현재 버전 기준으로 업로드 완료와 실패의 기준은 아래와 같습니다.
업로드 완료: 해당 문제를 처음 해결한 경우, 대상 제출 코드가 이미 깃허브에 업로드 된 경우
업로드 실패: 해당 문제를 한번 이상 해결한 경우, 깃허브에 연동이 되지 않은 경우

1.0.10 버전 이후로 부득이하게 새로운 창을 열어 제출 코드를 파싱하게 되었습니다. 파싱 후 해당 창은 자동으로 종료되며 제출 화면으로 돌아옵니다.

3.3 업로드 확인

업로드가 완료된 후, 등록되었던 깃 리파지토리에서 아래와 같이 두개의 파일을 확인할 수 있습니다.

문제 설명제출 코드
"

1.0.1 버전을 기준으로 문제 설명 readme 파일에는 아래의 정보가 저장됩니다.

  1. 문제 등급
  2. 문제 제목
  3. 문제 번호
  4. 문제 링크(백준)
  5. 성능 요약(메모리 사용량, 실행 시간)
  6. 문제 분류(solved.ac 기준 문제 카테고리)
  7. 문제 설명(문제 설명, 입력, 출력)
더불어 커밋 메시지에 등급, 메모리, 실행 시간이 요약되어 있습니다.

3.4 주의 사항

업로드의 속도는 컴퓨터 사양에 따라 '맞았습니다!!' 표시 이후 최대 2초까지 소요될 수 있으며 업로드 도중 페이지 이동은 권장드리지 않습니다. 물론 채점 과정 중이나 문제 해결에 실패한 경우는 해당되지 않습니다. 단, 1.0.2 버전 기준으로 다른 페이지로 이동하더라도 향후 다시 제출 화면으로 이동하시면 정상 업로드가 가능합니다.

4. 기능 요약

4.1 파싱하는 정보

위 스니펫은 baekjoon.js 파일의 파싱된 데이터를 담는 오브젝트로 각각 다음 정보가 저장됩니다.

항목데이터소스
bojData.meta.title문제 제목https://www.acmicpc.net/problem/{problemId}
bojData.meta.problemId문제 번호제출화면
bojData.meta.levelSolved.ac 기준 문제 등급Solved.ac
bojData.meta.problemDescription문제 설명https://www.acmicpc.net/problem/{problemId}
bojData.meta.language제출 언어제출화면
bojData.meta.message커밋 메시지bojData.meta 정보 취합
bojData.meta.fileName코드 파일명meta.data + meta.language
bojData.meta.category문제 카테고리Solved.ac
bojData.meta.readMeReadme 파일 내용bojData.meta 정보 취합
bojData.submission.submissionId제출 번호제출 화면
bojData.submission.code제출 코드https://www.acmicpc.net/source/{problemId}
bojData.submission.memory사용 메모리제출화면
bojData.submission.runtime실행 시간제출화면

4.2 지원 언어

백준에서 지원되는 모든 언어가 지원됩니다.

4.3 최고 성능 코드 업로드

1.0.2 버전부터 최고 성능의 코드가 깃허브에 업로드됩니다. 코드는 최단 실행시간, 메모리, 코드 길이를 기준으로 선택되며 이에 대한 비교 함수는 다음과 같습니다.

function compareSubmission(a, b) {
	return a.runtime === b.runtime
           	? a.memory === b.memory
                 ? a.codeLength === b.codeLength
                      ? -(a.submissionId - b.submissionId)
                      : a.codeLength - b.codeLength
                 : a.memory - b.memory
            : a.runtime - b.runtime;
}

이와 더불어 로컬 스토리지에는 제출마다 깃허브에 업로드된 코드와, README의 SHA가 저장됩니다. 기존에는 이런 정보를 로컬 스토리지에 저장하지 않았기에 1.0.2 버전에는 업데이트 기능이 추가되어 있습니다. 업데이트 방법은 패치 노트를 통해 확인 부탁드립니다.

4.4 해결 목록 전체 업로드 (지원 중단)

4.5 저장 경로

향후 백준허브의 백준 코드는 다음과 같은 경로로 업로드될 예정입니다.

{user}/{repository}/{플랫폼}/{등급}/{문제번호}.{문제명}/{문제명}.{확장자}

이를 도입한 배경은 다음과 같습니다.

  1. 파일 분류 시스템의 중요성

    기존 1.0.1 버전은 레포지토리의 루트 디렉토리에 코드를 바로 저장하였습니다. 이러한 방식은 해결된 문제가 적을 때는 큰 문제가 되지 않으나, 많다면 이용에 불편을 야기할 수 있습니다. 이 때 불편이라함은 저장된 파일을 찾기가 힘든 것을 의미합니다.

    더불어 백준허브는 향후 프로그래머스와 코드포스의 코드 업로드 기능을 추가할 야망을 가지고 있습니다. 이에 따라 단순히 루트 디렉토리에 파일을 저장하는 전략은 장기적으로 맞지 않다 판단하였습니다.

  2. 왜 등급을 기준으로 분류하는가?

    사실 등급을 기준으로 분류하는 것은 알고리즘 공부에 있어 큰 도움이 되지 못합니다. 일반적으로 알고리즘은 등급이 아닌 이론으로 나뉘기 때문입니다. 실제 조사를 하며 많은 분들이 레포에 알고리즘 공부 코드를 기록하실 때 그리디, DP, 소팅, 그래프 등과 같이 이론을 기준으로 분류를 하신 것을 확인하였습니다.

    하지만 현재 백준허브 개발진은 이렇듯 파일을 저장하는 것이 어렵다고 판단하였습니다. 일반적으로 하나의 백준허브 문제는 여러개의 분류 태그를 가지고 있으며, 현재 백준허브가 이를 파싱하나, 문제가 속한 여러 태그 중 사용자가 공부하길 바랐던 알고리즘이 어느것인지를 알아내기는 힘들다는 판단을 하였습니다. 따라서 부득이하게 등급으로 분류하게 되었습니다.

    언급된 것 외에 등급으로 분류를 한 또 하나의 이유는 특정 수준이 되면 해당 수준 이하 등급의 코드는 잘 찾지 않는 특성 때문입니다. 예로 현재 골드 티어 문제로 연습하는 사용자는 실버, 브론즈 티어의 코드를 자주 확인하지 않는다고 가정하였습니다.

  3. 해당 분류 시스템이 마음에 들지 않는다면?

    이러한 사용자분이 분명 계시리라 생각하며 우선 이러한 판단을 내린 점에 대해 양해를 구합니다. 향후 유연성을 보장하기 위해 저장 경로를 옵션화하는 기능을 추가할 예정입니다.

    특히 백준허브 전용 레포지토리를 생성하지 않고, 기존에 사용하던 레포지토리에 백준허브를 도입하신 분들이 이러한 불편을 겪으시리라 생각합니다. 이에 대해 사용자의 기존 레포지토리와 자연스럽게 엮이는 전략에 대해 고민을 하였지만 현재로서는 뾰족한 수가 없어보입니다. 따라서 가급적 백준허브 전용 레포지토리를 생성하시는 것을 추천드리며 이와 관련하여 유의미한 제안이 있다면 향후 적용할 예정입니다.

5. 백준허브의 철학

다음은 백준허브에 대한 개인적인 철학으로 백준허브 개발자 전원의 의견이 아닙니다.

백준허브를 개발하며 함께 개발하는 분들과 방향성에 대한 논의를 여러번 진행하였습니다. 서비스 초기인 만큼 다양한 의견들이 오갔고, 현재도 많은 과제가 남아있어 사용자 여러분과 향후 개발에 참여하실 분들이 참고하고 피드백하실 수 있도록 아래와 같이 백준허브의 철학을 기술합니다.

  1. 최대한 스며들어야한다.
    백준허브는 알고리즘 공부 과정을 보조하지만, 알고리즘을 배우는 것에 도움이 되지는 않습니다. 따라서 코드 업로드 과정은 사용자가 눈치채지 못할 정도로 자연스러워야합니다. 자연스러움에는 업로드 속도, UI, 효율성 등의 요소가 포함됩니다.

  2. Minimal해야한다.
    백준허브는 익스텐션인 만큼 최대한 필수 기능만 추가해야합니다. 이는 다양하고 창의적인 아이디어보다, 백준허브의 본질에 해당하는 기능을 선호하는 것을 의미합니다. 일반 웹서비스와는 달리 웹서비스와 상호작용하는 익스텐션이다보니, 최대한 백준허브 고유의 필수 기능만을 적용하고 싶습니다.

6. 버그 신고 및 개발 참여

버그 신고는 다음 링크에서 가능합니다.
개발 참여를 바라신다면 다음 향후 과제에서 향후 개발 계획 참고를 부탁드립니다.

관심과 응원을 보내주신 모든 분들께 진심 어린 감사를 전합니다.

profile
부족해도 부지런히

41개의 댓글

comment-user-thumbnail
2022년 1월 6일

안녕하세요. 좋은 프로그램 만들어주셔서 감사드립니다! 다름이 아니라, 아예 작동을 하지 않아서 방법을 여쭙고자 댓글 남깁니다~ 몇 번 다시 지웠다가 설치해도 아예 작동을 하지 않는데.. 혹시 충돌이 날만 한 기존 프로그램이 있을까요~?

1개의 답글
comment-user-thumbnail
2022년 1월 10일

안녕하세요. 너무 편리한 프로그램을 만들어주셔서 감사합니다. 사용해보기 위해 크롬 확장프로그램 추가 후 깃허브 레파지토리 연결 성공을 시켰는데. 윗분처럼 아무것도 작동이 안되는 상황입니다. 아직 패치가 되지 않은건지 궁금합니다~!

1개의 답글
comment-user-thumbnail
2022년 1월 19일

안녕하세요! 백준허브 익스텐션 받아서 사용려고 하는데,
노드는 지원되지 않나요?ㅠㅠ 레포에 push 해도 작동하질 않네요,,

1개의 답글
comment-user-thumbnail
2022년 3월 2일

어제 처음으로 설치해서 (노트북에서 해보다가 데스크탑도) 데스크탑에도 같은 아이디를 통해 연동을 한 후 취침하였는데, 오늘 노트북의 백준허브 작동이안되는거같습니다. 한 계정당 하나의 PC에서 사용이 가능한 것인가요?

1개의 답글
comment-user-thumbnail
2022년 3월 7일

안녕하세요~ 개발해주신 프로그램이 유용해 보여서 사용하려고 확장 프로그램을 다운받았는데, 혹시 확장 파일 다운로드 후 글에서 언급해주신 사용방법의 3-1장 리포지토리 연동 팝업창으로 어떻게 연결되는지 조금 더 자세히 알려주실 수 있으실까요? 확장 파일은 다운로드됬는데, 팝업창을 어떻게 띄워야할지 몰라서 질문드립니다..!

2개의 답글
comment-user-thumbnail
2022년 5월 9일

안녕하세요! 방금 백준허브 설치해서 첫 사용해보았는데요!
제가 1년 전에 c언어를 이용해서 문제를 좀 풀다가 이번에 node.js로 처음부터 문제를 풀게 되었는데 node.js 문제가 맞았다고 떠도 자꾸만 c언어로 1년전에 풀었던 문제가 업로드가 되네요 ㅠㅠ
가장 최근 버전에서 '개인 제출 페이지 접근 시 의도치 않은 업로드 발생 버그 해결' 이 되었다고 적혀있는데 저는 각 문제 별 내 제출 카테고리에 들어가면 1년 전 c언어로 푼 문제가 자꾸만 업로드가 됩니다..ㅠㅠ 어떻게 해야 node.js로 푼 문제가 업로드 될 수 있을까요?

1개의 답글
comment-user-thumbnail
2022년 5월 9일

안녕하세요 혹시 같은 문제를 다른 언어로 풀게 되면 다른 언어로 푼 코드도 올려지게 할 수 없나요? 처음에 풀었던 언어로만 저장이 되는데 아직 그런 기능은 없나요?

1개의 답글
comment-user-thumbnail
2022년 7월 12일

안녕하세요. 백준 허브 확장 프로그램을 설치하고, 실행하면 leethub와 연동되는 창으로 넘어가는 것 같은데, 백준 허브를 사용하기 위해서는 leethub와 먼저 연동 되어야 하는 것인가요?

2개의 답글
comment-user-thumbnail
2022년 9월 5일

안녕하세요! 백준허브 잘 쓰고 있습니다!
백준허브에서 푸쉬되는 브랜치를 바꾸고 싶어서 레포의 default 브랜치를 바꾸고 링크를 재연결 해도 항상 master 브랜치로만 push 됩니다 ㅠㅠ
혹시 푸쉬되는 브랜치를 변경하는 방법이 있을까요?

1개의 답글
comment-user-thumbnail
2022년 10월 14일

혁명입니다..

답글 달기
comment-user-thumbnail
2023년 1월 12일

프로그램 잘 쓰고 있습니다. 오픈소스로 제공해주셔서 감사합니다 :)
그리고 최근 코드 업데이트 기능은 언제쯤 가능할까요??

답글 달기
comment-user-thumbnail
2023년 1월 13일

안녕하세요 좋은 기회로 알게 되어 사용해보려고 하는데요 혹시 기존에 푼 문제를 다시 풀었을 때는 업로드가 되지 않나요?

답글 달기
comment-user-thumbnail
2023년 1월 27일

편리한 프로그램 만들어 주셔서 감사합니다. 릿허브 기반으로 알고 있는데, 두 확장 프로그램을 동시에 사용할 수는 없을까요? 리트코드 문제풀이도 같이 올리고 싶은데 두개를 전부 활성화시키면 서로 충돌이 나는지 둘다 안올라가네요

답글 달기
comment-user-thumbnail
2023년 2월 6일

여러번 지웠다 깔아도, github에서 최신 버전으로 깔아도 작동하지 않아요.

답글 달기
comment-user-thumbnail
2023년 3월 10일

업로드 실패: 해당 문제를 한번 이상 해결한 경우, 깃허브에 연동이 되지 않은 경우
는 정확하게 무엇을 의미하는 건지 여쭤보고 싶습니다. 처음 제출한 문제에서 "맞았습니다!!"가 떴는데, 모든 문제들이 모두 업로드 실패가 뜨네요. f5 키를 누르고 재확인 해보아도, 로딩 아이콘이 약 2초 정도 떴다가 곧장 사라지고 업로드 실패 아이콘이 뜹니다. 뭐가 문제일까요?

1개의 답글