본문 바로가기

전체 글521

UTM parameter는 무엇일까? 📍 UTM parameter는 무엇일까? 언젠가 마케팅팀과 협업할 때 UTM parameter 용어가 나왔는데, 해당 용어가 무엇인지 몰라 당황한 적이 있었다. 그래서 알아보자 what is UTM parameter? UTM(Urchin Tracking Module)은 마케팅 담당자가 트래픽 소스 및 매체 등에서 온라인 마케팅 캠페인의 효과를 추적하는 데 사용되며, 5개의 URL 매개변수(query string)로 사용된다. UTM 매개변수는 트래픽을 특정 웹사이트로 안내하는 캠페인을 식별하고 브라우저의 웹사이트 세션에 기여한다. 여담으로 Urchin은 Urchin Software Corporation에서 개발한 웹 통계 분석 프로그램이고, 웹 서버 로그 파일 콘텐츠를 분석하고 로그 데이터를 기반으로 해.. 2022. 12. 4.
[ CSS ] parents div에 의해 unclickable 하게 되는 children div를 clickable하게 만들기 📍 parents div에 의해 unclickable 하게 되는 children div를 clickable하게 만들기 제목이 어려울 수 있지만 background: transparent인 Parent Div 밑에 clickable 할 수 있는 Child div가 있을 때 클릭하는 방법을 작성하려고 한다. 기존에는 부모 Div만 클릭 할 수 있어 자식 Div는 클릭할 수 없었지만 css의 pointer-events 속성을 이용하여 해결 할 수 있었다. 글로 이해하기 힘들다면 하단의 그림을 보자.(그림은 발(🦶🏾)로 그렸다.) 내가 해결한 방법은 부모 Div에 pointer-events: none을 주고, clickable 할 target Div에 pointer-events: all을 주자. 추가로 poin.. 2022. 11. 23.
[ 자바스크립트(JavaScript) ] filter + join 메서드로 가독성있는 코드 작성하기 📍 filter + join 메서드로 가독성 있는 코드 작성하기 string | null 타입을 가지는 a, b를 사용하여 a·b로 나타내야한다. 만약, 둘 중에 하나라도 null일 경우 ·를 표시하지 않고, string 타입만 나타내야한다. 예를 들어 a = 'foo'이고, b = 'bar'일 때 둘 다 값이 존재하면 foo·bar로, a타입만 존재하면 foo, b타입만 존재하면 bar, a와 b 둘 다 존재하지 않는 경우 null 혹은 ''을 나타내야한다. 이럴 때 어떻게 가독성 있게 코드를 작성할 것인가? 리액트에서 사용할 때 AS-IS는 조건식과 join 메서드를 사용하여 a && b ? [a, b].join('·') : a || b로 나타냈는데, 가독성이 너무 떨어졌다. 그래서 TO-BE 처럼 .. 2022. 11. 15.
[ 리액트(React) ] && 대신 삼항연산자 사용하기 📍 && 대신 삼항연산자 사용하기 리액트로 렌더링 view를 그릴 때 종종 && 연산자를 이용해 조건부 렌더링을 할 때가 있을 것이다. 여담으로 &&연산자는 Logical AND, 단축평가(short circuit evaluation)라고 하며, 일반적으로 왼쪽에서 오른쪽으로 피연산자를 평가하여 처음 만나는 연산자가 falsy인 경우 false를 반환하고, 모든 연산자가 truthy 한 경우 마지막 연산자를 반환하는 개념이다. falsy는 Boolean context로 변경될 때 false로 평가되는 값으로 JS에서는 false, 0, -0, "", null, undefined, NaN가 있다. truthy는 falsy와 반대로 Boolean context로 변경될 때 true로 평가되는 값으로 JS에서.. 2022. 11. 7.
[ 자바스크립트(JavaScript) ] shuffle 함수를 만들어보자 📍 shuffle 함수를 만들어보자 JS로 shuffle 함수를 만들 때 가장 먼저 생각나는 메서드는 sort() 일 것이다. 아마도 다음 코드처럼 구성하지 않았을까?? // sort shuffle const arr = [1, 2, 3, 4, 5]; const shuffle = arr.sort(() => Math.random() - 0.5) console.log(shuffle); 👉🏾 [ 5, 3, 2, 1, 4 ] 구현 로직을 살펴보면 배열을 순회하면서 Math.random() 메서드를 사용하여 나온 랜덤 한 값에 -0.5를 하여 sort() 메서드를 거치게 된다. 만약, Math.random() - 0.5를 한 값이 양수라면 오름차순으로 정렬되고, 음수를 리턴하면 내림차순으로 정렬된다. arr 배열을.. 2022. 11. 5.

티스토리툴바