본문 바로가기
반응형

전체 글

 (510)
[태그관리자] 데이터레이어 데이터레이어는 태그관리자에 전송할 정보를 담을 수 있는 객체입니다. 장점은 다양한 정보를 하나의 객체 형태로 전송할 수 있기 때문에 전송되는 데이터의 관리가 수월 해 집니다. 데이터레이어 만들기 데이터레이어 선언 데이터레이어는 아래와 같이 선언됩니다. 글로벌 태그나 태그관리자 설치 태그에 데이터레이어 생성문이 포함되어 있기 때문에 특별한 경우가 아닌 경우 따로 생성할 필요는 없습니다 (중복으로 선언하더라 기존의 데이터레이어를 대체하는 것은 아니므로 필요시 중복 선언도 가능). 데이터레이어에 데이터 추가하기 생성된 데이테레이어에 아래와 같이 .push() 를 사용하여 데이터를 추가 가능합니다. 데이터를 여러 차례 추가하여도 key의 이름이 다른 경우 배열의 푸시처럼 기존은 데이터는 유지됩니다. 데이터레이어..
[태그관리자] 트리거 - 스크롤 뷰 구현하기 관리자 로그인 '트리거' -> '새로 만들기' 구성박스를 누르고 열린 창에서 '스크롤 깊이' 선택 가로 또는 세로 스크롤을 선택하고 비율 또는 픽셀 값을 입력합니다 [복수의 값을 잡고 싶은 경우 콤마로 구분(10, 20, 30,...)] 실행조건은 해당 트리거의 실행시기를 결정하는 데 컨테이너 로드가 가장 빠르며 창 로드가 가장 느립니다 (여기서 무조건 빠른 것이 좋은 것은 아닙니다). 페이지의 모든 요소가 모드 로드된 시점인 창 로드 사용을 권장합니다. 이제, 페이지만 지정하면 됩니다. 모든 페이지 말 그대로 모든 페이지에서 발동합니다. 아래와 같이 '모든 페이지' 선택 후 '저장' 일부페이지 일부페이지를 선택하면 해당 페이지에서만 작동합니다. 예를 들어 특정 페이지의 주소가 아래와 같다면 일..
채널톡 event로 구글 태그 추적하기 채널톡과 같은 API는 웹사이트 고유의 요소가 아니기 때문에 일반적인 방법으로 해당 요소에 대한 접근이 불가하고 이로 인해 전환, 이벤트 추적 등이 불가합니다. 하지만, 채널톡의 경우 API임에도 불구하고 LauncherStyled 클래스에 대한 접근을 허가하여 해당 채널톡을 열기 버튼을 활용하여 추적하는 것이 가능하였다고 하네요. 최근 이러한 클래스를 활용하여 스타일의 변경을 막고자 채널톡에서 아래와 같이 해당 모듈을 쉐도우 돔의 옵션을 활용하여 자바스크립트를 통한 해당 클래스에 대한 접근이 불가능하도록 업데이트를 하면서 기존에 챗을 열기 위한 버튼을 자바스크립트를 통해 접근하는 것이 불가능해졌고 해당 클래스는 외부에서 더 이상 활용 할 수 없게 되었습니다. https://update-kr.channe..
시퀄라이트 사용하기 - 코드 우선 방식 .NET은 데이터베이스를 생성할 때 작성된 코드를 통해 데이터베이스를 생성하는 Code first (코드우선) 방식과 데이터베이스의 데이터를 바탕으로 코드를 작성하는 data first (데이터 우선) 방식을 제공합니다. 이 글에서는 시퀄라이트를 코드우선방식으로 연결해 보겠습니다. HTML 삽입 미리보기할 수 없는 소스
색 디자인에서 색은 너무 중요한 요소이죠. 색에 대한 기본이론과 활용가능한 툴들을 알아볼까요? 색의 이론 색의 이론이란 색과 색의 조합에 대해 사람이 느끼는 감정에 관한 이론으로 이를 설명하기 위해 원색인 빨강, 파랑, 노랑과 이의 조합으로 만들어진 주황, 보라, 초록을 담은 동그란 판을 활용합니다 (뉴턴이 개발했다고 하네요). 참고로, 원색은 다른 색의 조합으로 만들 수 없습니다. 용어들 먼저, 색의 이론과 관계된 용어들을 먼저 볼까요 ▶ 색조 (Hue) 기본이 되는 여섯 가지 색 빨강, 주황(오렌지), 노랑, 초록, 파랑, 보라의 고유한 색을 의미합니다. ▶ Tint 기본이 되는 여섯 가지 색 빨강, 파랑, 노랑, 주황, 보라, 초록에 흰색을 가미한 정도를 의미합니다. ▶ 음영 (Shade) 기본이 되는..
인터페이스 인터페이스는 지정할 타입만 분리하여 지정할 수 있게 해 주는 기능으로 클래스와 비슷하게 생겼지만 다른 점은 타입지정만 가능하고 값을 지정할 수 없다는 점입니다(다른 언어와 동일). 사용하기 아래와 같이 객체에 지정된 타입을 인터페이스를 활용하여 분리해 보겠습니다. let object: { name: string; age: number; married?: boolean } = { name: 'tom', age: 20, } 먼저 인터페이스를 생성하고 값과 타입을 지정합니다. 인터페이스도 메서드를 가질 수 있는 데 예시를 위해 메서드도 추가하였습니다. interface Person { name: string age: number married?: boolean walk?: () => void // method..
CSS 컴포넌트 - 로딩 CSS 애니메이션을 사용해서 로딩 효과를 만들어보겠습니다. 구현 로딩효과를 추가할 요소를 아래와 같이 추가합니다. 해당 컴포넌트는 애니메이션의 딜레이 효과와 before 및 after Selector를 사용하고 시간차로 효과를 주어 하나의 요소만 사용하여 로딩효과를 완성하였습니다. /* main.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; align-items: center; justify-content: center; height: 100vh; } .loading { border: 30px solid transparent; border-radius: 50%; position: relative; bord..
패키지 매니저 웹 애플리케이션을 개발할 때 일반적인 기능이라면 이미 구현된 기능을 가져와서(다운로드해서) 쓰는 것이 직접 개발하는 것보다 관리나 시간적 측면에서 효율적이겠죠? 이미 구현된 기능들을 라이브러리(또는 패키지)라고 하며 프로젝트에서 사용하기 위해 다운로드된 라이브러리의 목록들을 dependency라고 합니다. dependecy의 작동을 위해 dependency가 사용하는 다른 도구들이 있다면 해당 파일도 다운로드하여야 하므로 사용하는 기능들이 많아지면 파일들의 관리가 개발보다 더 힘들어지겠죠. 패키지 매니저는 소프트웨어 개발도구의 설치, 업그레이드 및 구성을 자동화하고 정형화된 방식으로 관리할 수 있게 해 줍니다. 또 다른 장점은 패키지 매니저는 각 dependency의 이름과 버전 정보를 담은 리스트 파일..
728x90

티스토리툴바