Mong dev blog

개발 기술214

내 조직의 리뷰 할당 현황 구하기(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.
[모노레포] 특정 폴더를 패키지화하는 방법
1. 들어가기에 앞서… 어플리케이션을 개발하다보면 모노레포에 여러 개의 패키지가 만들어지고, 의미 단위로 폴더를 구분하다보면 패키지 내부에도 여러 개의 폴더가 발생할 수 있다. 우리 서비스의 경우, components 패키지 내에 총 2개의 폴더가 존재하는데 서비스와 독립적이면서 재사용 가능한 컴포넌트를 모은 ui 폴더, 그리고 서비스에 종속되면서 재사용가능한 컴포넌트의 모음인 shares가 있다. |- components |-- ui // 서비스와 독립적, 디자인 시스템이 확립됨, 재사용 가능 |-- shares // 서비스에 종속적, 재사용 가능 그리고 우리는 불과 얼마 전까지만 해도 이 두 폴더의 컴포넌트를 접근할 때 아래와 같이 import 했다. import { Checkbox } from @g..
2023. 5. 15.
[CSS] 렌더링 퍼포먼스를 높여주는 content-visibility
모바일 기기의 사용이 증가함에 따라 웹 페이지의 렌더링 속도가 더욱 중요해졌으며, 느린 페이지 로딩 속도는 사용자들의 불만을 유발하고 페이지 이탈률을 높일 수 있다. 이러한 문제를 해결하기 위한 다양한 방법이 있는데 오늘 소개하고자 하는 건 content-visibility 라는 CSS 속성이다. content-visibility란? content-visibility는 페이지 로드 성능을 향상시킬 수 있는 CSS 속성이다. 이 속성은 불필요한 렌더링 작업을 최소화하여 초기 로드 속도를 개선할 수 있는데, 즉, 필요한 시점까지 렌더링 작업(레이아웃 및 페인팅)을 생략할 수 있어 초기 로드가 빨라진다. 이를 통해 사용자들은 빠르게 웹 페이지에 접근할 수 있고, 렌더링 작업이 끝날 때까지 대기할 필요가 없다...
2023. 5. 7.
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.
[CSS] hex 컬러에 투명도를 주는 2가지 방법
들어가기에 앞서… 우리는 요소의 글자색, 배경색 등을 지정할 때 hex(#000000) 혹은 rgba컬러 등을 사용한다. rgba의 경우, 투명도를 조정할 때 rgba(red, green, blue, opactiy) 마지막값인 opactiy를 수정하면 된다. 하지만 hex 컬러는 어떻게 투명도를 조정할 수 있을까? 이번 시간에는 hex 컬러에 투명도를 적용하는 2가지 방법에 대해 알아보았다. 1. hex8 사용하기 hex컬러는 hex6, hex8이 존재하는데 hex6은 6자리를 두자리씩 끊어서 빨강, 초록, 파랑을 표현한다. hex8은 8자리를 두자리씩 끊어서 빨강, 초록, 파랑, 투명도를 나타낸다. 만약 우리가 투명도를 적용할 컬러가 hex8인 경우, hex8의 마지막 2자리만 투명도에 해당하는 hex..
2023. 3. 22.
[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.

티스토리툴바