반응형

전체 글 104

[Google Analytics4] ga4 UTM이란?

현재 사내 홈페이지에 구글 광고와 네이버 광고를 게재하였다. 구글 애널리틱스에서 어느 채널에서 광고로 유입되는 지 확인하기 위해 utm 태그를 달아서 광고에 띄워주기로 했다. 네이버, 구글 광고 링트에 첨부할 때 아래의 https로 시작하는 url과 같은 형태로 url을 구성하여 만들어주면 된다. 네이버 광고의 경우 https://도메인주소?utm_source=naver&utm_medium=cpc&utm_campaign=naver_상품_sales 이런 식으로 작성해주면 된다. 마지막의 / 유무는 상관 없이 작성해주면 된다. 구글 애널리틱스 > 보고서 > 수명 주기 > 참여도 > 이벤트 보여지는 표에서 이벤트 이름 옆의 추가 항목을 선택하여 트개픽 소스의 세션 소스/매체를 선택해준다. 그러면 다음과 같이 ..

카테고리 없음 2023.11.01

[Redux] Redux의 단방향 데이터 흐름

Redux의 단방향 데이터 흐름이란? - state는 특정 시점의 앱 상태를 설명한다. - UI는 해당 상태를 기반으로 렌더링된다. - 어떤 이벤트가 발생하면 발생한 일에 따라 state가 업데이트 된다. - 새로운 상태에 따라 UI가 다시 렌더링된다. 위의 이미지는 리덕스에 대해 알고 있어요! 하면 무조건 설명이 가능해야하는 그림이다. 아래의 설명을 외우기보다는 그림을 보며 꼭! 이해해야한다. 사실 별 거 없다ㅎㅎ Redux에 대해 기억해야 되는 것들 ✔️Redux는 전역 어플리케이션 상태를 관리하기 위한 라이브러리이다. - Redux는 일반적으로 Redux와 React를 함께 통합하기 위해 React-Redux 라이브러리와 함께 사용된다. - Redux Toolkit는 Redux 로직을 작성하는 데 ..

React 2023.10.29

[Redux] 불변성이란 무엇인가? 복사본을 만들어 저장하자.

JavaScript에서 객체와 배열은 모두 변경 가능하다. 객체를 생성하면 해당 필드의 내용을 아래와 같이 변경 가능하다. 메모리 안에서 객체나 배열의 참조값은 같지만 객체/배열 내부 값이 바뀌었다. (불변성을 지키지 못함) const obj = { a: 1, b: 2 } // still the same object outside, but the contents have changed obj.b = 3 const arr = ['a', 'b'] // In the same way, we can change the contents of this array arr.push('c') arr[1] = 'd' 값을 불변하게 업데이트하려면 기존의 객체/배열의 복사본을 만든 다음 복사본을 수정해야 된다.(불변성 지킴) ..

카테고리 없음 2023.10.29

[Redux] Redux를 쓰는 이유? props 귀찮아. 디버깅 쉽게.

React를 사용하면 거의 필수적으로 사용하는 Redux 그런데 막상 Redux에 대해 설명하려고 하니 잘 모르겠어서 정리해본다. 우선 공식 홈페이지를 참고해서 글을 작성한다. https://redux.js.org/ Redux - A predictable state container for JavaScript apps. | Redux A predictable state container for JavaScript apps. redux.js.org Redux? JS앱을 위한 예측 가능한 상태 컨테이터 ✔️ 예측 가능 - Redux는 일관성 있게 동작하고 다양한 환경(클라이언트, 서버)에서 실행되며 테스트하기 쉬운 어플리케이션을 작성하는데 도움이 된다. ✔️ 중앙 집중식 - Redux DevTools를 사용..

React 2023.10.28

[Google Analytics4] page view 데이터가 쌓이지 않을 때 해결 방법

Page view란? GA4에서 ‘page_view’는 주요 내장 이벤트 중 하나입니다. 사용자가 웹 사이트를 방문할 때마다 자동으로 추적되는 이벤트입니다. 기본적으로 추적되는 정보: 사용자가 페이지를 로드하거나 새로 고치면 ‘page_view’ 이벤트가 자동으로 보내집니다. 관련 파라미터: 이 이벤트와 함께 전송되는 기본 파라미터에는 다음과 같은 정보가 포함될 수 있습니다. page_location: 방문한 페이지의 URL page_referrer: 사용자를 해당 페이지로 인도한 이전 페이지의 URL page_title: 방문한 페이지의 제목 사용자 정의 파라미터: 필요에 따라 추가 파라미터를 설정하여 page_view 이벤트에 추가 정보를 포함시킬 수 있습니다. 이용 사례: 웹사이트의 특정 페이지 방..

카테고리 없음 2023.10.26

[VSCode 단축키] 같은 단어 변수 모두 선택하기

VSCode 에디터를 더 유용하게 쓰기 위한 단축키들을 알아봅시다! 같은 단어/변수명을 모두 선택하는 2가지 단축키가 있는데 각각 어떤 것인지 정리해보았습니다. cmd + shift + L / ctrl + shift + L 1. 원하는 단어로 커서를 가져다 놓고 2. cmd + shift + L / ctrl + shift + L 단축키를 이용하면 3. 모든 potato 변수에 커서가 가는 것을 볼 수 있다. cmd + D/ ctrl + D 1. 원하는 단어로 커서를 가져다 놓고 2. cmd + D / ctrl + D 단축키를 이용하면 3. 단축키를 누른 횟수만큼의 potato 변수에 커서가 가는 것을 볼 수 있다. VSCode 에디터에서 단축키로 같은 변수명/단어를 선택하는 방법에 대해 알아보았습니다! ..

카테고리 없음 2023.10.26

JS 원시값과 객체가 매개변수로 들어왔을 때

JavaScript 함수에 원시값과 객체를 매개변수로 넣었을 때 어떻게 다른 지에 대해서 궁금증이 생겼다. 조금 더 확실하게 정리하고자 기록으로 남긴다. 원시값(primitive values)을 매개변수로 전달할 때 Boolean, Number, String, BigInt, Symbol, null, undefined은 JS의 원시값에 해당합니다. 함수에 원시값을 매개변수로 전달하면 그 값의 복사본이 함수 내부로 전달됩니다. 따라서 함수 내에서 해당 매개변수를 변경해도 원래의 값에는 영향을 주지 않습니다. function modifyValue(x) { x = x + 1; console.log('Inside function:', x); } let value = 5; modifyValue(value); // ..

JavaScript 2023.10.24

VSCode로 Dart 시작하기

더 늦기 전에 flutter 개발에 탑승하기 위해 Dart를 학습하기로 마음먹었다. flutter를 배우기 전에 Dart를 배우는 것이 중요한 이유는 나중에 결국 2가지 다 공부해야되기 때문이다. Dart의 주요 특징으로는 1) 정적 타입 언어 변수의 데이터 타입을 명시적으로 선언하고 컴파일할 때 타입 검사를 수행한다. 빠른 버그 픽스 가능. 2) 객체 지향 프로그래밍 클래스, 상속 사용 지원 3) JIT 및 AOT 컴파일러 Dart는 Just-In-Time(JIT)컴파일러와 Ahead-Of-Time(AOT)컴파일러를 지원한다. JIT컴파일러는 개발자를 위한 빠른 개발과 디버깅을 가은하게 한다. AOT컴파일러는 프로덕션 환경에서 빠른 실행 성능을 제공한다. 4) 빠른 실행 속도 Dart는 빠른 실행 속도..

웹 개발 2023.10.22
반응형