Mong dev blog

개발 기술192

[html] 더 나은 사용자 입력을 위한 inputmode 속성
0. 들어가기에 앞서… 모바일 디바이스 사용자가 늘어나면서, 웹 사이트에서 모바일 입력 폼을 사용하는 경우가 많아졌다. 하지만 용도에 맞지 않는 가상 키보드를 제공하는 경우가 있어, 사용성에 부정적인 영향을 주곤 한다. 예를 들어 전화번호 입력창을 클릭했는데 문자 키보드가 떠서, 사용자가 키보드 탭을 전환해야하는 수고가 발생한다. 이때, inputmode 속성을 사용하면 입력 폼에 적합한 가상 키보드를 사용자에게 제공할 수 있다! 이번시간에는 가상 키보드 모드를 지정할 수 있는 inputmode(공식문서 링크)에 알아보았다. 1. inputmode이란? 1) inputmode는 무엇일까? inputmode는 브라우저가 어떤 키보드를 표시할지 지정할 수 있는 속성이다. 기본값은 inputmode=”text..
2023. 8. 20.
DocumentFragment 객체로, 성능 좋게 DOM 조작하기
0. 들어가기에 앞서 우리는 DOM 트리에 노드를 추가할 때 createElement와 appendChild를 사용하곤 한다. const p = document.createElement("p"); // 1. 노드를 만들고 document.body.appendChild(p); // 2. 생성한 요소를 DOM 트리에 추가! 그런데 만약 20개에 달하는 노드를 추가해야할 때는 어떻게 할 수 있을까? appendChild 와 반복문을 사용할 수 있다. const parent = document.querySelector('#parent'); for (let i = 1; i
2023. 8. 7.
Page Visibility API, 유저가 페이지를 보고 있는지 알려줘!
Page Visibility API 0. 들어가기에 앞서… 우리 서비스는 소켓 통신이 많이 발생한다. 그렇다보니, 유저가 다른 탭을 보고 있거나 페이지를 최소화했을 때는 소켓 통신을 비활성화 해야한다. 그런데 유저가 서비스 페이지를 보고 있지 않은지 어떻게 알 수 있을까? 이번 시간엔 사용자가 웹 페이지를 보고 있는지를 알 수 있는 Page Visibility API에 대해 알아보았다! 😎 Page Visibility API를 알게 되면 아래와 같은 처리를 할 수 있게 된다. 1. 유저가 페이지를 보고 있지 않을 때 불필요한 소켓 통신 중단 가능 2. 유저가 페이지를 보고 있지 않을 때 video를 멈추고, 탭으로 돌아왔을 때 다시 재생 가능 3. 유저가 페이지를 보고 있지 않을 때 사운드를 줄이고, 탭..
2023. 7. 23.
내 조직의 리뷰 할당 현황 구하기(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.
[모노레포] 특정 폴더를 패키지화하는 방법
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.

티스토리툴바