Frontend168 [ 자바스크립트(JavaScript) ] e.preventDefault()와 e.stopPropagation()을 알아보자. 📍 e.preventDefault()와 e.stopPropagation()을 알아보자. e.preventDefault()와 e.stopPropagation()은 자바스크립트의 이벤트 핸들러라는 공통점이 있지만, 차이점도 있다. e.preventDefault()는 이벤트의 기본 동작이 발생하지 않도록 하기 위해 이벤트 객체에서 호출하는 method이다. DOM요소는 저마다 기본 동작이 있다. 예를 들어 anchor 태그를 클릭하면 href에 지정된 링크로 이동하고, 를 클릭하면 체크모양이 생기거나 없어진다. 그리고 form 태그에서 submit을 하게되면 refresh가 일어난다. 이럴 때 e.preventDefault()를 사용하면 지정된 링크로 이동하거나 체크모양을 생기거나 없애는 동작 그리고 refr.. 2023. 3. 28. [ 자바스크립트(JavaScript) ] default parameter에 falsy value를 넘겨주면 어떻게 될까? 📍 default parameter에 falsy value를 넘겨주면 어떻게 될까? ES6 feature 중 하나인 default parameter는 function parameter에 값이 전달되지 않거나 undefined인 경우 default parameter를 기본값으로 사용하는 방법이다. 어느날 .env와 함께 default parameter를 사용하다 undefined를 제외한 falsy한 값(false, 0, '', null, etc..)을 넘겨주면 default parameter가 적용이 안 된다는 점을 찾았고, 블로그에 남기자는 생각을 했었다. 그럼, 예시를 살펴보자. function greet(name = "ted") { console.log(`Hello, ${name}!`); } gre.. 2023. 2. 23. [ CSS ] line-height 단위 알아보기 📍 line-height 단위 알아보기 css로 line-height를 작성하다 보면 값의 단위가 각기 다른 모습을 볼 수 있다. 가령, normal을 사용하거나, number 타입을 사용하거나, em을 붙이는 경우가 있다. 나는 주로 px를 사용하지만 동료들은 다른 단위를 사용하는 경우가 있어 기초적인 내용이지만 지금 기억해 두면 추후에 공식문서를 찾는 시간을 아낄 수 있지 않을까 하는 마음에 글로 남긴다. (내용은 MDN을 참고했다.) line-height는 주로 text line 사이의 거리를 조절 할 때 사용한다. line-height의 단위는 4가지가 있다. /* * 1. : line-height: 2.3; * 2. : line-height: 3em; * 3. : line-height: 50%;.. 2023. 2. 17. [ styled-components ] 특정 element hover시 tooltip 보여주기 📍 styled-components를 이용해 특정 element hover시 tooltip 보여주기 React에서 styled-component로 디자인 작업 중 제목 그대로 특정 element에 마우스 hover시 tooltip을 보여주는 스펙이 있었다. 이때까진 특정 element에 hover만 하면 끝이었는데, 추가로 tooltip까지 동작하게 하는 것은 처음이었다. 내키는 대로 코드를 작성했는데, 원하는 대로 작동하지 않았다. 공식문서를 찾아보니 component selector 패턴을 통해 스타일에 지정된 다른 구성 요소를 보간하여 자동으로 생성된 클래스 이름을 참조할 수 있는 강력한 패턴이라고 나와있었다. 즉, styled로 선언한 컴포넌트를 다른 클래스에서 호출 할 수 있다는 이야기인데, 이.. 2023. 2. 2. [ Meta tag ] 카카오톡 링크 공유시 og:description이 표시되지 않을 때 📍 카카오톡 링크 공유시 og:description이 표시되지 않을 때 카카오톡에 링크 공유시 기존 openGraph와 다른 정보를 보여주기 위해 meta tag를 수정하는 작업을 하는데, og:title과 og:description을 넣었음에도 og:description이 보이지 않는 이슈가 있었다. 물론 kakao-developers사이트에서 URL 캐시 초기화를 진행했고 og:url도 내가 보여주려고 하는 url과 동일하게 설정했다. 결정적으로 mobile환경에서는 잘 나왔는데, deskTop에서는 잘 나오지 않았다. 여러 번의 삽질 후 원인을 찾았는데 링크 공유시 openGraph의 og:title이 2줄이면 og:description이 보이지 않았다. (kakao developer Docs에 o.. 2023. 1. 11. 이전 1 2 3 4 5 ··· 34 다음
