보통 Google Analytics(GA)로 데이터 수집을 한다면 사이트에 GA 스크립트(analytics.js) GTM 스니펫 코드를 활용하여 사용자의 행동데이터를 수집하는 것이 일반적이다. 하지만 사용자들의 환경은 시시각각 다양해지고 있다 실제로 고객의 요구에 따라 웹사이트를 폐쇠망에서 운영하거나 키오스크 같은 웹이 아닌 환경을 만들 수도 있다. 이런 경우에는 GA를 포기해야하는 것인가? 그렇지 않다. GA 스크립트, GTM 스니펫 코드 없이도 각 채널에서 사용자의 행동 데이터를 수집할 수 있다. 바로 그 주인공이 Measurement Protocol이다. 1. Measurement Protocol이란? 구글은 공식적으로 이 Measurement Protocol을 지원하고 있다. https://dev..

개요 React는 기존의 Vanilla JS( 프레임워크를 쓰지 않은 순수 JavaScript )나 Jquery 사용시 불편했던 개발자의 욕구를 충분히 충족시켜주며 성장을 계속하고 있다. 하지만 인간은 편안함에 금방 익숙해지고 새로운 불편함을 또 찾고 그것을 고쳐내려 한다. 오늘은 React에서 개발한 프론트엔드 프로젝트 규모가 방대해져 import 해야 할 대상을 상대경로로 ../을 무한 반복하여 찾는 불편함을 해소할 craco에 대해 알아보고자 한다. 상대경로 지옥 - 페이지 컴포넌트 import 보통 App.js나 App.ts에 각 url에 따라 이동할 페이지 컴포넌트들을 정의 한다. 스타일에 따라 layout으로 분리하거나 몇개로 쪼개서 관리할 수 있겠지만 각 url에 맞는 페이지 컴포넌트들을 임..

React 설치 이 글에서는 무작정 리액트를 시작하는 법을 포스팅 하겠다. 윈도우라면 cmd창을, 맥이라면 터미널 앱을 연다 아래와 같이 설치를 진행한다. npm install -g create-react-app create-react-app my-app cd my-app npm start create-react-app 은 리엑트 프로젝를 만들기 위해 따로 설정해야할 기본 세팅을 자동으로 해주는 세트아이템 정도로 생각하면 된다. 프로그래밍을 배우기 위해 컴퓨터를 사는데 메인보드, 그래픽카드, 램 등을 따로 사서 조립해도 되지만 편리함을 위해 조립 PC를 살 수도 있다. create-react-app는 리액트를 하기위해 필요한 여러 라이브러리를 편리하게 세팅해주는 조립PC라고 생각하자. npm start를..

JavaScript와 TypeScript가 인기 언어로 급부상하면서 자바스크립트 라이브러리들이 다양하게 출시되었고 그 중 2021년 현재 왕좌를 차지하고 있는 녀석은 React 이다. 그래서 Web에서 React를 많이 쓰고 배워서 모바일 개발을 위해 React Native(이하 RN)을 배우고 싶어하는 개발자들이 많을 것으로 생각된다. React Native는 React와 문법이 매우 흡사하다. 또한 앱에 대한 전반적인 관리를 expo라는 뛰어난 관리 체계가 대신해줌으로써 React를 안다면 RN에 충분히 도전할 수 있다. 그래도 React와 RN은 다른 기기에서 구동되기 위해 다르게 만들어진 라이브러리이다. React만 알고 RN에 도전할 때 주의해야할 3가지 사항을 알아두고 도전한다면 더 배움이 수..

TypeScript를 사용하여 Stack을 구현해 보겠다. 배열(Array) 타입을 쓰면 너무 쉬우니 배열을 쓰지 않고 해보자. Stack(이하 스택)이 무엇인지는 위키에 잘 나와있다. 스택 - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. 스택(stack)은 제한적으로 접근할 수 있는 나열 구조이다. 그 접근 방법은 언제나 목록의 끝에서만 일어난다. 끝먼저내기 목록(Pushdown list)이라고도 한다. 스택은 ko.wikipedia.org 기본 설계 일단 스택이라는 클레스에는 많은 것이 필요할 수 있겠지만 기본적으로 3가지가 필요하다 size //지금 스택에 얼마나 많은 value들이 있는지 알려주는 변수 push(string):void // string 값 하나를 스택에 넣는 ..

지난 포스팅까지 해서 우리는 네비게이션까지 장착한 자동차를 얻은 것이다. [React Native] ② Navigation 설정 및 프로젝트 구조 잡기 React Navigation React Native(이하 RN)에서 네비게이션을 구현하는데 사용되는 많은 라이브러리들이 존재한다. 그 중 대표적인 것이 React Navigation이다. 난 이것을 사용해 지난 포스팅에 생성한 RN 프로젝 bgradecoding.tistory.com 이제 차의 겉면을 장식할 차례이다. 디자인도 예쁘게 뽑고 썬텐도 해야한다. 그것을 도와줄 친구가 바로 React Native Elements 이다. React Native Elements | React Native Elements Cross Platform React Nat..