전체 글
-
구글 애널리틱스 (GA4) for developersReact.js, Next.js 2023. 7. 16. 21:44
Prerequisitestypescriptnextgoogle analytics default configgoogle analytics debuggerReferencesUnlock the Power of Google Analytics 4 in Just 5 Minutes with Next.js and TypeScript (2023 Edition) Unlock the Power of Google Analytics 4 in Just 5 Minutes with Next.js and TypeScript (2023 Edition)If you own a website, you know how important it is to track its performance and make data-driven decisions..
-
2023년 7월부터는 정말로 구글 애널리틱스 (GA4)!Book Study 2023. 7. 3. 18:18
들어가며 해당 내용은 '길벗 출판사'의 김도연님의 책 '모두의 구글 애널리틱스4 - GA4로 하는 디지털 마케팅 데이터 분석'을 읽은 요약본입니다. 개발자의 관점에서 구글 애널리틱스 4를 처음 도입하려고할 때 필요한 정보를 정리해보았습니다. 해당 내용은 요약본이며, 더 깊이있는 내용을 얻기 위해서는 반드시 책을 읽어보시는 것을 추천드립니다. 모두의 구글 애널리틱스4 : 네이버 도서 네이버 도서 상세정보를 제공합니다. search.shopping.naver.com 1장, 구글 애널리틱스 알아보기 1.5.1) 구글 애널리틱스란 구글 애널리틱스는 웹 사이트와 앱의 트래픽(traffic)을 추적하여 분석하는 분석 도구이자 서비스입니다. 구글 애널리틱스의 특징은 다음과 같습니다. 클라우드 기반의 무료 서비스 고객..
-
리액트에서 다중의 동적 폼 처리하기React.js, Next.js 2023. 6. 15. 20:04
들어가며 프론트엔드로 개발하게 될 경우, 정적으로 사전에 생성된 폼 데이터를 다루기도 하지만, 동적으로 추가하거나 제거 및 수정이 필요한 폼을 만들어야 하는 경우가 생깁니다. 스타일링 코드를 제거하고 자바스크립트 코드 위주로 동적 폼 처리에 대한 기본적인 흐름을 파악합니다. 예시 [wanted] 동적 폼 처리 뷰 코드 import React, { useEffect, useState } from 'react'; function DynamicFormComponent() { const [formFields, setFormFields] = useState([{ name: '', value: '' }]); const handleAddFields = () => { const values = [...formField..
-
3월이 지난지 2주 됐지만,,, 3월의 나끄적끄적 2023. 4. 10. 22:13
3월에는 가장 특별한 이벤트인 제 생일이 있습니다. 생일에는 별로 회사를 가고 싶지 않잖아요? 그래서 작년과 마찬가지로 무작정 연차를 올렸습니다. 작년에는 입사한 지 얼마 되지 않아서 기술 블로그던, 이런 기술 블로그의 작은 카테고리던 뭔가를 적을만한 여유가 없었습니다. 하지만 올해는 다르죠. 벌써 2년 차 (1년 4개월 차) 개발자인걸요? 계획은 없었고 그냥 생일만큼은 회사를 가고싶지 않은 느낌적인 느낌… 그래서 저는 뭐 할까 하다가 관심이 생겼던 갤러리에 다녀왔습니다. 보통 인스타그램이나 구독하는 블로그를 통해 전시 정보를 얻는데, 이번에도 그렇게 얻은 야무진 전시인 평창동에 위치한 ‘가나 포럼 스페이스’에서 주관한 유야 하시즈메의 'Eyewater - Common Jade' 에 다녀왔습니다. 전시 ..
-
다양한 파일 확장자 파일 미리보기 지원하기React.js, Next.js 2023. 4. 5. 21:25
목차 들어가며 text, image, pdf, video 대응하기 리팩터링 with ChatGPT 들어가며 실무에서 폼 양식을 작성할 때, 다양한 타입의 파일을 지원하게 됩니다. 아쉽게도 우리는 단순히 객체로만 파일을 가지고 있는 것이 아닌, UX를 위해 파일의 미리 보기를 요구받을 수 있습니다. 따라서 이번에는 다양한 확장자 파일에 대하여 미리 보기를 지원하는 방법 및 로직을 알아봅니다. text, image, pdf, video 대응하기 import React, { useState } from 'react'; const Test = () => { const [text, setText] = useState(''); const handleFileInputChange = (event: React.Chang..
-
input image 미리보기 구현하기React.js, Next.js 2023. 3. 31. 23:15
Prerequisites useRef typescript FileReader Object Code import React, { useRef } from 'react'; const Test3 = () => { const imgRef = useRef(null); const readImage = (e: React.ChangeEvent) => { if (!e.target.files?.length) return; const imageFile = e.target.files[0]; const reader = new FileReader(); reader.addEventListener('load', (e: ProgressEvent) => { if (!e || !e.target) return; if (typeof e.ta..
-
빠르게 시작하는 드래그 앤 드롭React.js, Next.js 2023. 3. 26. 20:15
prerequisites typescript interface react.js useRef useState Props inline-styling conditional render 전체 코드 import React, { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react'; interface IFileTypes { id: number; object: File; } const basicInputStyle = { width: '100%', height: '200px', border: '2px solid', borderRadius: '10px', cursor: 'pointer', transition: '0.12s ease-in', displa..
-
프로그래밍 패러다임Computer Science 2023. 3. 12. 20:25
목차 선언형과 함수형 프로그래밍 순수함수 고차함수 일급 객체 객체지향 프로그래밍 추상화 캡슐화 상속성 다형성 오버로딩 오버라이딩 OOP 설계 원칙 단일 책임 원칙 개방-폐쇄 원칙 리스코프 치환 원칙 인터페이스 분리 원칙 의존 역전 원칙 절차지향형 프로그래밍 프로그래밍 패러다임(programming paradigm)은 프로그래머에게 프로그래밍의 관점을 갖게 해주는 역할을 하는 개발 방법론입니다. 예를 들어 객체지향 프로그래밍은 프로그래머들이 프로그램을 상호 작용하는 객체들의 집합으로 볼 수 있게 하는 반면에, 함수형 프로그래밍은 상태 값을 지니지 않는 함숫값들의 연속으로 생각할 수 있게 해 줍니다. 프로그래밍 패러다임은 크게 선언형, 명령형으로 나누며, 선언형은 함수형이라는 하위 집합을 갖습니다. 또한, ..