Mong dev blog

분류 전체보기210

[Vue] prop drilling을 예방하는 Provider Pattern 알아보기
0. 들어가기에 앞서… Vue와 React는 컴포넌트 기반으로 작동하며, 컴포넌트 간에 데이터를 전달할 때 props를 사용한다. props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용하는데, 자식 컴포넌트는 전달받은 데이터를 사용하여 뷰를 업데이트한다. 그러나 때로는 여러 개의 중간 컴포넌트를 거쳐야 하는 경우가 있다. 예를 들어, 부모 컴포넌트에서 데이터를 전달할 때 그 데이터를 사용하는 컴포넌트가 매우 깊은 계층에 위치해 있다면, 중간 컴포넌트를 거치는 과정이 필요한 것이다. 이 경우에는 중간 컴포넌트로 데이터를 전달하기 위해 props를 여러 계층을 거쳐 넘기는데 이를 Prop drilling이라고 한다. 이번 시간에는 Prop drilling 의 단점과 이를 예방할 수 있는 pr..
2023. 9. 30.
팝오버를 라이브러리 없이 웹 API로 구현하는 법, Popover API
1. popover를 아시나요? 팝오버는 도움말과 같이 요소에 대한 부연 설명을 창으로 표시할 때 주로 쓰이는데, 아래 이미지는 Bootstrap의 popover 예시이다. 이제까지 popover를 구현하기 위해 개발자가 처음부터 코드를 짜거나 라이브러리를 써야했다. 하지만 2023년에 Popover API가 출시되면서, 별도의 라이브러리 없이 웹 API로 팝오버를 구현할 수 있게 됐는데 Popover API는 어떤 특징을 가지며 어떻게 사용하는 지 한 번 알아보자! 2. Popover API 알아보기 1) 특징 💡 2023년에 출시된 Popover API의 경우 아래와 같은 특징을 가진다. 상위 레이어로 인식 팝오버는 웹 페이지에서 별도의 레이어에 위치한다. 그러므로 z-index를 설정하지 않아도 상..
2023. 9. 17.
[Team] 코드 리뷰 코멘트는 어떻게 작성하면 좋을까? 코드 리뷰 원칙 들여보기
0. 들어가기에 앞서 코드의 품질 향상은 물론 컨벤션 체크까지 할 수 있는 코드 리뷰! 그런데 코멘트를 잘 하기란 쉽지 않죠 😞 코드리뷰란, 말 그대로 개발자가 작성한 코드를 다른 개발자가 리뷰(피드백)하는 과정을 말한다. 이 과정을 거치면 개발자는 본인이 발견치 못한 실수(오타, 버그 등)를 초기에 대응할 수 있고 팀 내 정해진 컨벤션 규칙을 유지하고 기술 부채를 줄일 수 있다. 또한, 다수의 개발자가 참여하기에 해당 코드를 다른 관점에서 보고 더 나은 해결방법을 제시할 수도 있다. 하지만 리뷰를 하는 과정에서 코멘트로 인해 팀원 간 감정이 상하는 경우가 발생하곤 하는데… 이번시간에는 더 나은 리뷰 코멘트를 위해 구글, 뱅크샐러드, 카카오, 토스랩팀의 코멘트 원칙을 살펴보았다. 1. 리뷰 코멘트, 어떻..
2023. 9. 3.
[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.

티스토리툴바