Mong dev blog

JS43

[CSS] clip-path로 별점(Rating) UI 구현하는 법 (with. vue 컴포넌트 예시 포함)

1. 들어가며…이번 시간에는 별점을 매기는 Rating 기능을 구현하는 법을 알아보았다.Rating을 구현할 때 키 포인트는 (1) 빈 별 & 색이 차있는 별를 겹쳐야 하며, (2) clip-path로 색이 차 있는 별 일부를 보여줘야 한다.해당 포스팅을 다 읽고 나면, css의 clip-path 사용법과 Rating 기능 구현을 할 수 있게 된다.1) clip-path는 무엇일까?clip-path는 CSS 속성 중 하나로, 요소의 일부분을 잘라내거나 요소의 특정 영역만 표시할 때 쓴다..element { clip-path: ;}: 요소를 자르는 도형의 형태(ex. clircle, ploygon, inset 등): 도형의 위치와 크기를 결정하는 좌표 값 (1) 속성 살펴보기circle()은 원형으..

[JS] RangeSlider를 구현하는 법(feat. 중첩 range input)

1. 들어가기 전에…범위 슬라이더(range slider)는 사용자가 특정 범위 내에서 최소, 최대값을 선택할 수 있는 UI 요소이다.이번 포스팅에서는 두 개의 input을 이용해 범위 슬라이더를 구현하는 방법에 대해 알아보았다!이 포스팅을 다 읽고 나면 아래와 같은 형태의 범위 슬라이드를 구현할 수 있다 🙂2. 어떻게 구현할 수 있을까?1) HTML 구조💡 먼저, 범위 슬라이더를 구성할 기본 HTML 구조를 정의해야한다.구조는 두 개의 input 요소와 진행 상태를 표시하는 요소, 두 개의 핸들로 구성된다.(1) 코드보기 요소역할range-slider-container- 최상위 컨테이너slider-track- 슬라이더의 트랙 또는 배경 역할p..

[JS/CSS] corner smoothing을 구현하는 법(feat. 부드러운 둥근 모서리)

1. 들어가기 전에…우리는 iOS 디바이스에서 표현되는 요소가 부드럽다는 느낌을 받는다. 특히 둥근 모서리를 가진 요소는 더욱 부드럽게 보인다. 물론 iOS의 소프트웨어나 디스플레이가 우수한 이유도 있지만, 모서리를 부드럽게 표현하는 기능이 적용되어 있기 때문이다…!Swift의 경우, IOS 구현시 코너를 부드럽게 하는 옵션(.continuous)을 제공한다.그래서 RoundedRectangle에 style을 “.continuous”로 지정하면 부드러운 모서리가 적용된다.RoundedRectangle(cornerRadius: 100, style: .continuous).fill(-pink).frame(width: 200, height: 150)물론 Swift를 쓰지 않아도 Figma에서 부드러운 모서리를..

Page Visibility API, 유저가 페이지를 보고 있는지 알려줘!

Page Visibility API 0. 들어가기에 앞서… 우리 서비스는 소켓 통신이 많이 발생한다. 그렇다보니, 유저가 다른 탭을 보고 있거나 페이지를 최소화했을 때는 소켓 통신을 비활성화 해야한다. 그런데 유저가 서비스 페이지를 보고 있지 않은지 어떻게 알 수 있을까? 이번 시간엔 사용자가 웹 페이지를 보고 있는지를 알 수 있는 Page Visibility API에 대해 알아보았다! 😎 Page Visibility API를 알게 되면 아래와 같은 처리를 할 수 있게 된다. 1. 유저가 페이지를 보고 있지 않을 때 불필요한 소켓 통신 중단 가능 2. 유저가 페이지를 보고 있지 않을 때 video를 멈추고, 탭으로 돌아왔을 때 다시 재생 가능 3. 유저가 페이지를 보고 있지 않을 때 사운드를 줄이고, 탭..

내 조직의 리뷰 할당 현황 구하기(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을 사용하기 ..

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() 함수로 투명도를 줄까 ..

[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 방법 (..

[JS/Module] CommonJS와 ES Modules는 무엇일까?

1. CommonJS, ES Modules는 무엇일까? 우리는 JS 모듈을 내보내거나 가져올 때 2가지 방식을 사용한다. 첫번째 방법은 module.exports로 모듈을 내보내고 require()로 접근하는 CJS(CommonJS), 두번째 방법은 export로 모듈을 내보내고 import로 접근하는 ESM(ES Modules)이 있다. // CJS 방법 module.exports = { ... } // 모듈 내보낼 때 const utils = require('utils'); // 모듈 가져올 때 // ESM 방법 export.default =()=> { ... }; // 모듈 내보낼 때 import utils from 'utils'; // 모듈 가져올 때 그런데 ESM, ..

[JS] Strict mode는 무엇일까?

이번 시간에는 엄격모드를 지정할 수 있는 Strict mode에 대해 알아보았다! 1. “use strict”란? (1) “use strict는 무엇일까? “use strict”는 코드를 엄격모드로 설정하는 문자열이다. 엄격모드에선 기존에 무시되던 에러가 throw되고, 추후 추가될 ECMAScript문법이 금지된다. JS에서 암묵적 변형이 없는 환경에서 코드를 동작시키고 싶은 때 사용한다. (2) 사용방법 파일 전체를 엄격모드로 지정하고 싶다면, 파일 최상단에 “use strict”를 추가한다. "use strict"; // 이 파일의 코드들은 엄격모드에서 동작한다. ... 함수 레벨에서 엄격모드를 지정하고 싶다면, 함수 구문 최상단에 “use strict”를 추가한다. 아래 코드는 strictFunc..

이전 1 2 3 4 5 다음

티스토리툴바