아직도 PR 알림 카톡으로 직접 보내세요?
프론트엔드 개발자를 위한 깃허브와 디스코드 알림 연동 방법
글 미리보기
1. 아직도 PR 알람 카톡으로 보내시나요? 디스코드로 해결하세요
2. 깃허브 PR 알림을 실시간으로 받는 방법 ‘웹후크’
3. 디스코드 서버 설정 방법
4. 깃허브 Repository 설정 방법
5. 잠깐, 연동 후 PR 알림이 오지 않는다면?
* 패스트캠퍼스 부트캠프는 '커널 아카데미'로 명칭이 변경되었습니다.
개발자 취업을 준비하는 사람이라면 누구나 ‘깃허브(GitHub)’를 사용해본 경험이 있을 겁니다.
깃허브는 전 세계 개발자들이 코드를 호스팅하고, 공유할 수 있는 웹 기반 협업 플랫폼인데요.
코드를 저장하고 관리할 수 있을 뿐만 아니라 코드 리뷰, 커뮤니티, 오픈 소스 프로젝트 등 커뮤니케이션에 효과적인 도구를 제공합니다. 개발자 프로젝트를 위한 필수적인 플랫폼이라고 할 수 있죠.
그런데 깃허브에는 치명적인 단점이 존재합니다. 바로 실시간 알림을 받을 수 없다는 점이에요. 프론트엔드 개발자가 PR을 남기면, 카카오톡과 같은 메신저를 통해 팀원들에게 별도로 알려야 합니다. 한 두 건이면 모를까, 지속적으로 피드백을 주고받아야 하는 개발자들에게는 굉장히 불편한 시스템이에요.
패스트캠퍼스 프론트엔드 개발 부트캠프의 수강생으로 팀 프로젝트에 참여하고 있는 박준규 님도 마찬가지였습니다. 프론트엔드 개발자, 백엔드 개발자 뿐만 아니라 PM, UXUI 디자인 등 다양한 분야의 수강생들과 팀 협업을 해야 하는 만큼, 효율적인 진행을 위해 깃허브의 실시간 PR 알림 기능이 꼭 필요했는데요.
그래서 준규님은 ‘디스코드(Discord)’를 활용하게 되었습니다. 디스코드와 깃허브를 연동해서 자동으로 알림을 받을 수 있는 꿀팁을 알아낸 것이죠. 준규님은 자신이 알아낸 방법을 콘텐츠화하고, 협업 툴인 슬랙(Slack)을 통해 부트캠프의 모든 수강생들에게 공유했습니다. 덕분에 모두가 효율적으로 팀 프로젝트를 진행할 수 있게 되었죠.
디스코드를 통해 깃허브의 PR 알림을 받을 수 있는 방법은 무엇일까요? 패스트캠퍼스 수강생부터 깃허브를 사용하는 개발자들을 위한 준규님의 노하우 지금부터 함께 알아보시죠!
안녕하세요? 저는 패스트캠퍼스 프론트엔드 부트캠프 1기 수강생 박준규입니다.
전자공학과를 졸업 후 현재 프론트엔드 개발자로 취업을 준비 중인데요. 개발자 취업에 필요한 경험을 얻기 위해, 부트캠프에서 다양한 프로젝트를 진행하고 있습니다.
패스트캠퍼스 개발 부트캠프는 100% 온라인 과정인데요. 개발자로 성장하고 싶은 동료들과 이야기를 나누고, 공부한 내용에 대해 질의응답이 가능한 시스템이 잘 갖춰져 있어요. 개발에 대한 학습뿐만 아니라 협업에 필요한 커뮤니케이션 기술, 다양한 팀 프로젝트 경험, 현직자의 노하우부터 수강생의 인사이트까지 얻을 수 있죠.
저 역시 개발 부트캠프에서 프로젝트를 진행하던 중, 발견하게 된 노하우와 인사이트를 수강생들에게 공유했는데요. 이번에는 깃허브의 PR 알림을 실시간으로 받을 수 있는 방법을 알려드리려고 합니다.
팀 프로젝트에 꼭 필요한 디스코드
여러분, 혹시 디스코드 자주 사용하시나요?
디스코드는 음성, 채팅, 영상 공유, 화상 통화 등을 지원하는 인스턴트 메신저인데요. 친구들과 소통하거나 게임을 할 때 사용하는 경우도 많지만, 저는 주로 부트캠프에서 팀 프로젝트를 진행할 때 사용했습니다.
디스코드는 필요한 채팅방을 자유롭게 커스텀할 수 있다는 점이 장점인데요.
다수의 팀원들이 함께 회의를 진행하거나, 공지 사항을 전달하거나, 맡은 파트별로 개별적인 회의를 진행할 때 유용하게 쓸 수 있거든요.
아직도 PR 알람 카톡으로 보내시나요?
이젠 디스코드로 해결하세요
제가 팀 프로젝트에 디스코드를 활용하게 된 가장 큰 이유는 바로 ‘실시간 PR 알림 기능’ 덕분이에요.
보통 개발자들은 프로젝트를 진행할 때 깃허브를 자주 사용하는데요. 깃허브에는 실시간 알림 기능이 없습니다. 개발자들이 PR을 올릴 때마다 매번 다른 메신저로 직접 노티해야 하는 번거로움이 있었어요. PR을 늦게 확인하거나, 카톡 알림을 잊어버리는 바람에 프로젝트 진행에 많은 불편함을 겪기도 했죠.
그래서 저는 매번 고민했습니다.
‘깃허브에 PR을 업로드할 때마다 자동으로 알림이 오게 만들 수는 없을까?’
특히 패스트캠퍼스 부트캠프의 파이널 프로젝트는 프론트엔드, 백엔드 개발 뿐만 아니라 PM, UXUI 디자인 등 다양한 분야의 수강생들과 팀 협업을 해야 하는 만큼 PR 알림 기능이 꼭 필요했거든요.
그러던 중, 웹후크를 이용하여 디스코드에서 깃허브를 연동하고, 실시간 알림을 줄 수 있는 방법을 찾아냈습니다.
깃허브를 자주 사용하는 개발자와 팀 프로젝트를 진행 중인 개발자 취업 준비생들을 위해 디스코드와 깃허브를 연동하는 법, 또 원하는 알림을 받아오는 방법을 알려드리겠습니다.
깃허브 PR 알림을 실시간으로 받는 방법 ‘웹후크’
디스코드와 깃허브는 ‘웹후크(webhook)’이라는 기능으로 연동할 수 있는데요. 웹후크란 하나의 웹 애플리케이션에 다른 웹 애플리케이션의 실시간 정보를 제공하는 기능입니다.
더 자세히 설명하자면, 웹 개발에서 사용자 정의 콜백을 사용하여 웹 페이지 또는 웹 애플리케이션의 동작을 강화하거나 변경하는 방법으로 사용이 가능한데요. 이러한 콜백은 원래의 웹사이트나 애플리케이션과 관련이 없는 제3자 사용자 및 개발자에 의해 유지, 수정 및 관리될 수 있어요.
웹후크를 사용하면 여러분의 깃허브 Repository에 새로운 PR이 등록됐을 때, 실시간으로 알림을 받을 수 있어요.
그리고 디스코드에는 웹후크 기능이 지원됩니다.
안타깝게도 카카오톡은 보안상의 문제 때문에 웹후크 기능을 지원하지 않고 있으니, 현재로서는 디스코드를 사용하는 것이 베스트입니다.
디스코드 서버 설정 방법
지금부터 웹후크를 이용해서 디스코드에서 깃허브의 PR 알림을 받는 방법을 알려드리겠습니다. 디스코드 서버와 깃허브 Repository 이 두곳을 이용할 건데요. 먼저 디스코드 설정법부터 진행해볼게요. 디스코드 서버 관리자 권한을 꼭 부여받은 상태에서 진행해주세요.
2️⃣ PR 알림을 받고자 하는 서버를 우클릭 한 후 [서버설정] > [연동] 순서로 들어갑니다.
[연동]에 접속하면 웹훅(이하 웹후크)과 관련된 내용을 추가하거나 수정할 수 있는 설정창으로 이동할 수 있습니다.
상단의 [스스로 만들어보세요] 라는 링크를 참고해서 직접 커스텀할 수 있지만, 생각보다 번거롭습니다. 디스코드는 커스텀 과정에서 발생하는 시간적인 리소스를 줄여주기 위해, 쉽게 웹북을 생성할 수 있는 자동 생성 기능을 지원하고 있어요.
[새 웹후크] 버튼을 누르면 랜덤으로 봇이 생성됩니다. 그럼 이제 이 봇을 설정 해볼게요.
기본적으로 봇의 프로필 사진과 이름 그리고 실시간 알림을 수신할 서버 내 채팅 채널을 직접 선택할 수 있습니다. 우리는 깃허브 알림을 수신하고 싶으니, 이름은 ‘GitHub 알리미’로, 프로필 사진은 깃허브 로고로 지정해볼게요.
그러고 나면 웹후크 URL이 생성되는데요. 생성된 URL은 여러분만의 웹 URL이니까, 꼭 외부로 노출되지 않도록 주의해주세요.
여기까지가 디스코드 세팅입니다.
깃허브 Repository 설정 방법
다음은 깃허브 Repository 설정이 필요한데요. 깃허브 역시 최고 관리자인 ‘admin’으로 설정이 되어있어야 합니다.
2️⃣ 상단 우측의 [Settings] 버튼을 눌러줍니다.
이러면 웹후크 설정 페이지로 이동하게 되는데요.
이런 화면이 열렸다면 잘 따라오신 겁니다.
6️⃣ 이때 반드시 [디스코드 웹후크 생성 URL] 주소 끝에 /github를 추가로 입력해야 합니다.
꼭 /github를 추가로 넣어야 깃허브에서 제대로 동작하니까, 잊지 말고 반드시 넣어주세요. Content type은 json 타입으로 받아올 수 있도록 설정값을 application/json으로 바꿔줍니다.
그리고 하단의 Secret 칸은 비워주셔도 괜찮습니다.
오직 PR 알림만 받는 방법
자, 이제 거의 다 왔습니다. 이제 어떤 이벤트를 알림으로 보낼지 선택하면 되는데요.
하단에 3가지의 옵션이 있죠.
② [Send me everything.]은 깃허브에서 발생하는 이슈, 위키 등록 PR 등 전체적인 알림을 받을 수 있습니다.
③ [Let me select individual events.]는 받고 싶은 알림을 직접 선택할 수 있습니다.
저는 처음에 잘 모르고 ① [Just the push event.]로 설정을 해두니까, 작업을 진행 중인 모든 팀원분들의 Branch에서 발생하는 Commit Push가 전부 알림으로 오더라고요.
우리의 본 목적은 PR에 대한 알림만 수신되도록 설정하는 것이니, ③ [Let me select individual events.]을 통해서 커스터마이징을 직접 진행해주셔야 합니다.
③ [Let me select individual events.]를 선택합니다.
이 항목을 선택하면 깃허브에서 지원하는 다양한 알림을 확인할 수 있는데요. 이 중에서 PR과 관련된 알림으로 추천하는 항목은 [Pull request review comments], [Pull request reviews] 그리고 [Pull requests] 이렇게 3가지 입니다.
[Pull request review comments]가 PR 알림을 뜻한다는 것은 다들 아실텐데, 다른 두 설정은 생소하실 수도 있어요.
간단한 예시로, 패스트캠퍼스 프론트엔드 개발 부트캠프에서 진행했던 프로젝트의 코드 리뷰 코멘트를 가져와 봤습니다.
위 이미지에서 표시된 1번이 [Pull request reviews] 그리고 2번이 [Pull requests]라고 이해해주시면 되겠습니다.
여러분들께서 잘 판단하셔서 원하는 부분에 알림만 받을지, 혹은 전체 알림을 받을지 결정하시고 선택해 주시면 됩니다.
이제 디스코드와 깃허브가 연동 완료되었습니다.
이렇게 설정 완료된 웹 자동 알림은 PR을 업로드 할 때마다 미리 지정해둔 디스코드 채널에 자동으로 올라오게 됩니다.
잠깐, 연동 후 PR 알림이 오지 않는다면?
디스코드로 깃허브의 PR 알림이 오지 않는다면, 이렇게 해결해보세요.
PR을 작성할 때 Reviewer 및 Assignees와 Labels는 PR 작성이 완료된 이후에 작성하세요.
깃허브 웹후크의 기능 자체에 request 과부하가 걸리는 경우가 종종 있기 때문입니다.
협업 툴인 슬랙(Slack)을 통해 부트캠프 팀 프로젝트의 프론트엔드 개발자 분들에게 오류 해결 방법을 전달했습니다.
3시간 더 빨리 알림을 확인할 수 있어요
이렇게 디스코드를 통해 실시간으로 PR 알림을 받으니, 프로젝트 작업을 훨씬 더 원활하게 진행할 수 있었습니다. 이전 대비 2~3시간 정도로 빠르게 확인했고요.
기존에 카톡으로 PR 확인을 요청할 때는 묻히는 경우도 많았고, 확인한 팀원분께서 수동으로 Repository로 이동해서 확인해야한다는 번거로움이 있었는데요.
디스코드에서는 오직 PR 알림만을 위해 채널을 따로 개설할 수 있다 보니, 굉장히 편리했습니다.
여담이지만, PR 확인 주기가 빨라져서 일어난 에피소드도 있었습니다.
제가 코드 리뷰를 남기던 중 하필 PR approve 인원이 다 차버려서, 팀원분께서 merge를 바로 진행한 거예요. 그래서 approve 인원을 추가로 늘리기도 했습니다.
수강생들의 노하우 & 인사이트를 상시 공유하는
패스트캠퍼스 부트캠프
실시간 PR 알림 기능으로 프로젝트 진행에 아주 큰 도움을 받은 만큼, 프론트엔드 개발자 역할의 팀원들 뿐만 아니라 부트캠프의 모든 수강생에게 공유했는데요. 많은 분들이 잘 사용하시더라구요.
패스트캠퍼스 개발 부트캠프는 협업 툴인 슬랙(Slack)을 통해 다른 수강생님들과 교류하고, 유용한 인사이트를 공유할 수 있어서 만족스럽습니다.
지금까지 디스코드에서 깃허브의 PR 알림을 받는 방법을 알려드렸습니다.
여러분이 프론트엔드 개발자로 프로젝트 협업을 진행 중이라면, 디스코드와 깃허브를 웹후크로 연동하여 더 수월한 개발 경험을 하실 수 있을 겁니다.
* 패스트캠퍼스 부트캠프는 '커널 아카데미'로 명칭이 변경되었습니다.
커널 아카데미 개발 부트캠프는 관련 경험, 지식이 없는 입문자도 약 6개월 동안 개발자로 취업할 수 있게 만들어주는 과정입니다. 탄탄한 커리큘럼으로 진행되는 현직자의 실시간 강의부터 최고의 팀원들과 함께하는 그룹스터디와 팀 프로젝트까지 다양한 경험으로 좋은 개발자에게 꼭 필요한 역량을 습득할 수 있습니다.
커리어 서비스, 커리어 챌린지, 파트너사 취업 연계 등 수료생에 대한 집중적인 관리와 풍부한 혜택도 받아볼 수 있고요.
개발자 포트폴리오에 꼭 필요한 협업 경험을 채우지 못해서 고민하고 있나요? 경력에 준하는 경험을 쌓기 위해 혼자서 고군분투 하고 계신다고요? 그렇다면 다면 주저 없이 합류하세요. 커널 아카데미가 여러분의 꿈의 지름길이 되어드리겠습니다.
커널 아카데미와 함께 커리어를 시작해보세요
다른 후기가 더 궁금하다면
