Mong dev blog

개발 기술/개발 이야기70

내 조직의 리뷰 할당 현황 구하기(3) - github actions로 메시지 스케쥴링하기
0. 들어가기에 앞서 앞선 두 포스팅에서 Github API와 discord webhook로 내 조직의 리뷰 할당 현황을 구해보았다. 이번 시간에는 “내 조직의 리뷰 할당 현황 구하기”의 마지막으로, github actions를 사용해 리뷰 할당 현황을 매일 일정 시간 디스코드 채널로 전송해보겠다. 이번 포스팅을 읽게 되면 github actions의 스케쥴링 기능으로 일정 시간에 스크립트를 실행할 수 있게 된다. 😎 시리즈 순서 (1) github API로 내 조직의 리뷰 할당 현황 구하기(포스팅 링크) (2) discord webhook을 사용하여 discord 채널에 할당 현황 데이터를 전송하기(포스팅 링크) (3) github actions로 discord webhook 주소에 자동으로 할당 현황..
2023. 7. 9.
내 조직의 리뷰 할당 현황 구하기(2) - discord webhook 사용법
0. 들어가기에 앞서 앞선 포스팅에서 Github API를 사용해 내 조직의 리뷰 할당 현황을 구해보았다. 이번 시간에는 “내 조직의 리뷰 할당 현황 구하기”의 2번째로, discord webhook으로 할당 현황을 디스코드 채널에 전송해보겠다. 이 포스팅을 읽게 되면 node 환경에서 discord 채널에 메시지를 보낼 수 있게 된다. 😎 시리즈 순서 (1) github API로 내 조직의 리뷰 할당 현황 구하기(포스팅 링크) (2) discord webhook을 사용하여 discord 채널에 할당 현황 데이터를 전송하기 (3) github actions로 discord webhook 주소에 자동으로 할당 현황 메시지 전송하기(포스팅 링크) 1. node환경에서 discord webhook을 사용하기 ..
2023. 6. 25.
내 조직의 리뷰 할당 현황 구하기(1) - github API 사용법
0. 들어가기에 앞서… 우리 개발팀은 코드 리뷰를 통해 코드의 품질을 유지하고 개발자들의 성장을 돕는 걸 중요하게 생각한다. 대체적으로 리뷰는 매일 오후 2시 전에 완료하고, 한 사람에게 많은 리뷰를 할당하는 건 지양하지만… 때로는 한 사람이 많은 리뷰를 받는 경우도 있다. 이는 개인의 선호도나 코드 이해도 등의 이유로 인해 발생할 수 있다. 이러한 상황은 리뷰어가 자신의 작업을 진행할 시간이 적어지게 만들고 일정 지연을 초래할 수 있다. 또한 리뷰어가 다른 작업으로 바쁜 날에는 할당된 리뷰를 놓치는 경우가 있는데, 개발자들이 리뷰를 기다리는 시간이 길어지게 만든다. 마침 우리 팀은 Discord를 팀챗으로 사용하고 있었는데, 이 두가지 현상을 해결하고자 “Discord webhook을 사용하여 매일 아..
2023. 6. 19.
CSRF를 막는 방법(with. 쿠키)
0. 들어가기에 앞서 웹을 통한 거래와 정보 공유가 더욱 활발해지면서, 웹 보안은 점점 더 중요해지는 이슈가 되고 있다. 이번 시간에는 웹 보안의 중요한 이슈 중 하나인 CSRF(Cross-Site Request Forgery) 공격에 대해 다루면서, CSRF 공격을 막는 방법 중 쿠키를 이용하는 방법을 알아보았다. 1. 쿠키란 무엇인가? 🙂 쿠키의 개념, 주요용도, 그리고 사용법을 알고 있다면, 바로 2. CSRF와 서드 파티 쿠키를 읽자! 1) 쿠키에 대해 알아보자! 쿠키는 서버가 웹 브라우저에 전송하는 데이터이다. 서버에서 브라우저 요청에 대한 응답을 전송할 때, Set-Cookie 헤더에 데이터(쿠키)를 전송한다. 아래는 서버 응답 예시로 Set-Cookie 헤더로 브라우저에 데이터(쿠키)를 전송..
2023. 6. 4.
Typedoc, ts 유틸 함수를 문서화해줘!
1. typedoc의 필요성 프로젝트에서 많은 수의 유틸 함수가 있으면, 각 함수의 용도와 사용법을 파악하기 어려워진다. 특히 프로젝트가 복잡해지고, 많은 사람들이 참여할 때 문제가 커진다. 이러한 문제는 typedoc을 사용해 유틸 함수를 문서화하면 해결할 수 있다! typedoc을 사용하면 함수의 용도와 사용법을 명확하게 알 수 있어, 유지 보수가 쉬워지고 개발자들의 생산성을 높일 수 있다 🙂 그렇다면 이 typedoc은 무엇이며 어떻게 설정해야할까? 한 번 알아보자! 2. typedoc이란? 1) typedoc은 무엇일까? TypeDoc은 TypeScript 코드에서 JSDoc 주석을 추출하여 API 문서로 생성하는 도구이다. TypeDoc을 사용하면 TypeScript 코드의 문서화를 쉽게 할 수..
2023. 4. 23.
CSS 색상 변수에 투명도를 주는 방법(feat. js)
0. 들어가기에 앞서… 서비스에서는 각 서비스의 고유한 성격에 맞는 색상이 존재하며, 각 색상들은 개발자와 디자이너의 원활한 소통을 위해 변수화한다. 이렇게 색상을 변수화하면 서비스 컬러를 유지보수하기 쉽고, 다크모드를 적용할 때도 유용하다. 하지만 색상 변수에 투명도를 주어야 하는 경우, 예상치 못한 문제가 발생한다. 아래 코드는 CSS 색상 변수를 root에 선언한 것이다. /* Light Mode Colors */ :root { --primary-color: #007bff; } See the Pen css variable example by KumJungMin (@kumjungmin) on CodePen. 만약 색상 변수에 투명도를 주고 싶다면 어떻게 해야 할까? rgba() 함수로 투명도를 줄까 ..
2023. 4. 9.
[JS] 커스텀 이벤트를 만드는 2가지 방법(Event, CustomEvent)
🤜 이번 시간에는 JS에서 커스텀 이벤트를 만드는 방법에 대해 알아보았다! 1. Custom event란? 커스텀 이벤트는 말 그대로, JS의 내장 이벤트(click, scroll 등)가 아닌 사용자가 생성한 이벤트를 말한다. Event 혹은 CustomEvent 생성자를 사용해 커스텀 이벤트를 만들 수 있다. 커스텀 이벤트는 용도에 따라 특정 인수를 보낼 수 있는 장점이 있다. 한 예로, 리스트에서 메뉴 클릭시 select 이벤트를 발생시키고, 이 이벤트가 발생할 때 상위요소에서 어떤 처리를 할 수 있다. See the Pen new Event example by KumJungMin (@kumjungmin) on CodePen. 2. Custom event 생성하는 방법 1) new Event 방법 (..
2023. 3. 5.
[JS] AbortController로 웹 요청 취소하기(비동기, dom 이벤트)
💡 이번 시간에는 웹 요청을 중단할 수 있는 AbortController에 대해 알아보았다! 1. AbortController는 무엇일까? 1) AbortController란 AbortController는 하나 이상의 웹 요청을 중단할 수 있는 인터페이스이다. 대표적으로 fetch API, Dom Event를 특정 시점에 중단시킬 수 있다. 2) AbortController API (1) new AbortController() 웹 요청을 중단할 수 있는, AbortController 인터페이스를 생성한다. const controller = new AbortController(); (2) AbortController.signal 요청을 취소할 수 있는 AbortSignal 객체 인터페이스를 반환한다. co..
2023. 2. 26.
[npm] package.json의 version 방식, tilde(~)와 caret(^)
💡 이번 시간에는 package.json에 추가된, 모듈의 버전 형식(~, ^ 등)에 대해 알아보았다! 우선 package.json의 역할을 간략히 알고 본론으로 넘어가보자~ 1. package.json은 어떤 역할을 할까? package.json은 프로젝트의 정보와 패키지 매니저(npm, yarn)로 설치된 모듈(이름, 버전)을 관리하는 파일이다. // package.json { "name": "프로젝트이름", // 프로젝트 정보 "version": "1.0.0", "private": true, ... "dependencies": { ... }, // 설치된 모듈 정보(프로덕션 환경에서 응용 프로그램에 필요한 모듈) "devDependencies": { ... }// 설치된 모듈 정보(로컬 개발 & 테..
2023. 1. 29.

티스토리툴바