분류 전체보기

Next.js의 Middleware를 사용하여 A/B Testing하기 (with GA4)

Middleware Next.js는 12버전부터 미들웨어를 제공하고 있으며 주로 페이징 요청을 가로채어 필요한 로직을 수행한다. Next.js에서는 이 미들웨어를 활용하여 권한체크, A/B 테스트, 로컬라이징된 페이지 제공, 봇 방지 등의 기능을 수행할 수 있다고 설명한다. 이번 포스팅에서는 이중에서도 A/B 테스트를 미들웨어와 GA4를 사용해서 구현하는 방법을 설명한다. A/B Testing A/B 테스트의 정의에 대해 Chat GPT에게 물어보았더니 다음과 같이 대답하고 있다. A/B 테스트는 두 가지 이상의 버전을 비교하여 어떤 것이 더 효과적인지를 비교하는 실험입니다. A/B 테스트는 웹 사이트, 모바일 앱, 이메일, 광고 등 다양한 디지털 마케팅 채널에서 사용됩니다. A/B 테스트는 사용자의 응..

[React] React-query와 전역상태관리 라이브러리로 관심사분리하기

전역상태관리 라이브러리 (Redux, MobX) 웹 개발을 공부하다보면 Redux, MobX 혹은 Recoil등 전역상태관리 라이브러리에 대해 알게된다. 이 라이브러리들에 대해 간단히 말하면 각 컴포넌트간의 상태를 props만으로 전달하는것은 프로젝트가 커질수록 굉장히 복잡해지기 때문에, 이런 상태들을 한번에 관리할 일종의 저장소를 만들고, 각 컴포넌트에서 해당 저장소의 값을 참고하여 사용하는것이다. 전역상태관리 라이브러리 도입의 이유 새로 진행하는 프로젝트에 React-query를 도입할 계획이었는데, 해당 라이브러리를 이용하면 다음과 같이 비동기 통신등으로 부터 가져온 데이터를 일정시간동안 캐싱해놓고, 다른 컴포넌트에서도 필요할 때 언제든지 가져다가 쓸 수 있었다. // A Component cons..

[React] useState의 동작원리에 관하여

React를 함수형 컴포넌트로 작성할 때 가장 많이 쓰는 Hook이라고 한다면 아마 useState와 useEffect 이 두개가 아닐까 싶다. 이 중에서 useState는 이름 그대로, '상태'를 관리하는 Hook인데, 물론 웹 프로그래밍 특성상 독립된 컴포넌트간의 상태를 공유하는 경우가 굉장히 많기 때문에 이런 복잡한 상태관리를 편하게 하기 위해 Redux, MobX 혹은 Context API등 여러 방법들을 사용하기도 한다. 하지만 하나의 컴포넌트에서만 사용한다던지등 작은 규모의 상태 관리는 React에서 제공하는 useState를 자주 사용하고 있을 것이다. 그러나 한번도 이 useState를 자세히 살펴본적 없이, 그저 막연히 함수형 컴포넌트에서 실시간으로 상태관리를 해주며 리랜더링을 해주는 H..

next-sitemap을 사용하여 동적 생성 페이지 sitemap 생성하기

sitemap이란 해당 사이트에 어떠한 페이지나 파일등이 있는지 미리 안내함으로써 검색엔진이 더 효율적으로 크롤링을 하게 도와주는 파일이라고 볼 수 있다. 때문에 더 나은 SEO를 위하여 sitemap을 잘 만드는것이 중요하다. 그러나 정적인 페이지가 아니라, 블로그의 새로운 글이라던지, sns의 새로운 피드 등 동적으로 추가되는 페이지는 빌드할 때 미리 생성할 수 없으므로, 마찬가지로 동적으로 sitemap을 생성해주어야 한다. next-sitemap 라이브러리는 next 환경에서 아주 쉽게 동적으로 sitemap을 생성하게끔 도와준다. yarn add next-sitemap next-sitemap을 설치한다. /** @type {import('next-sitemap').IConfig} */ modul..

웹뷰 (WKWebview)에서 Javascript로 데이터 전송하기

안드로이드는 JavascriptInterface를 사용하면 쉽게 native -> javascript로 데이터 전송이 가능한 반면, IOS는 조금 더 설정해주어야 할 부분들이 있어서 정리하였다. let configuration = WKWebViewConfiguration() let contentController = WKUserContentController() configuration.userContentController = contentController //웹뷰 인스턴스 생성 let webview = WKWebView(frame: .zero, configuration: configuration) 웹뷰 인스턴스를 생성할 때, configuration을 먼저 설정해주어야 한다. 이때 반드시 WKUse..

DOM(Document Object Model)

DOM 개요 DOM이란 Document Object Model 즉 문서 객체 모델이란 웹 브라우저가 HTML, XML등 문서를 이해하고 접근하기위한 표준이며, 일종의 인터페이스이다. DOM은 문서의 구조화된 표현을 제공하여, 프로그래밍 언어가 DOM 구조에 객체로서 접근할 수 있게끔하여 문서의 구조,스타일, 내용등을 변경할 수 있게한다. 웹 문서의 동적 변경을 위해 DOM은 DOM API를 통해 프로그래밍 언어가 접근하고 수정할 수 있는 방법들을 제공하는데, 일반적으로 프로퍼티와 메소드를 갖는 자바스크립트의 객체로 제공된다. DOM 구조 DOM은 Tree구조로 이루어져있다. A heading Link text 위의 HTML 문서는 아래와 같은 노드 트리로 표현된다. 노드를 이용한 Tree구조로 되어있어 ..

CSS em & rem

01. 상대 단위 상대단위란, 단위가 절대적인 값을 갖는것이 아니라, 항상 상대적인 크기의 값을 갖는것을 말한다. 이런 상대단위를 사용하는 이유는 브라우저의 크기가 가변적이므로, 반응형으로 디자인 하기 위함이다. 대표적인 절대 단위중 하나인 1px은 모든 상황에 항상 1px만큼의 크기를 차지하지만, CSS에서 em 혹은 rem 같은 상대단위는 브라우저의 상황에 따라 다른 px의 값을 갖게 된다. 02. em과 rem의 변환 기준 em과 rem 둘다 font-size의 속성 값에 따라 브라우저가 적절한 px 값으로 변환해준다는 점은 같지만, 어떤 기준으로 변환할 것인가에 차이를 갖는다. em em값을 px로 변환하는 기준은 스타일 요소의 폰트 크기가 기준이 된다. 이 지정돤 요소의 폰트 크기에 em의 값만..

JavaScript 기본 동작 원리 (with Stack, Queue, Event Loop)

JavaScript 기본 동작 원리 01. 자바스크립트는 싱글 쓰레드 언어 자바스크립트는 싱글 쓰레드 언어이다. 자바스크립트는 하나의 Call Stack만을 가지고있기 때문에 Stack에 쌓이는 순서대로 한번에 하나의 명령만 수행한다. Stack이 하나뿐이므로 여러 동작이 같은 Stack에 쌓이고, 하나의 동작이 끝나고 pop이 되어야만 다음 동작을 수행한다. 이는 언뜻 자바스크립트에서는 오로지 동기(Synchronous) 처리만 가능하고 비동기(Asynchronous) 처리는 불가능한것으로 보인다. 이렇게되면 시간이 오래 걸리는 작업을 만나게 되면, 그 뒤의 작업들이 Block 되므로 정상적인 어플리케이션의 구현이 불가능하다. 그러나 사실 자바스크립트는 비동기 처리가 가능하다. 자바스크립트를 실행하는 ..