코드로 우주평화

까먹방지를 위해 적는 글. 1. gtag 적용하기gtag 적용하는 방법은 아래 링크 참고해주세요. (이 글에서는 생략!) https://coyo-hm.github.io/post/nextjs-gtaghttps://kimyanglogging.tistory.com/3 다만, 위 글은 Next.js 14 이전 버전인듯 합니다. Next.js 14 에서는 _app.tsx 파일이 없으므로 Script 선언은 layout.tsx 에서 해주시면 됩니다.  2. gtag config 에 user_id 넣기저의 경우 authenticate.ts 파일을 만들어 로그인 로직을 이곳에 두었습니다. // authenticate.ts import { GA_KEY } from "./gtag";export async function ..

SVG 색상 변경 문제개발을 하다 보면 SVG 파일의 색상을 상황에 따라 바꿔야 할 때가 있습니다. 아이콘이나 로고 색상을 테마에 맞춰 변경하거나, 사용자 인터랙션에 따라 유연하게 조절하고 싶은 경우도 있을 거예요. 저의 경우 종이비행기 SVG 이미지를 만들었는데요. 배경색과 그림자색을 동적으로 할당하여 사용자에게 시각적인 즐거움을 주고 싶었습니다.   하지만 그렇다고 매번 SVG 코드를 수정하는 것은 번거로운 일이죠.🥵 한 번 생각해보세요. 프로젝트에서 SVG를 사용하고 있고, 그 색상을 자주 변경해야 한다면 어떻게 하시겠어요? SVG 파일을 열어서 직접 fill 속성을 바꿔주나요? 아니면 특정 상황마다 다른 색상으로 변환된 이미지를 새로 준비하나요? 이 글에서는 SVG의 색상을 동적으로 변경하는 방..

Next.js 14 환경에서 간단한 다국어 지원 방법이번 글에서는 Next.js 14 환경에서 외부 라이브러리 없이 간단하게 다국어 지원을 구현하는 방법을 소개하겠습니다. 다국어 지원을 위해 보통 next-i18next 같은 라이브러리를 사용하지만, 막상 적용해보려고 하니 module 추가하고, path 추가하고, 컴포넌트 추가하고, 솔직히 말해서 굳이 이렇게까지 해야하나? 싶더라고요. 게다가 인터넷에 올라온 자료들이 Next.js 14 이전 버전에 맞춰져 있어서 실제로 적용이 잘 안되더군요. 그래서 깔끔하게 포기하고 라이브러리 없이 직접 간단하게 구현하기로 합니다. 아래는 그 과정을 간단한 예시로 정리한 내용이니 참고해서 본인 프로젝트에도 적용해보세요.   1. 다국어 데이터 파일 생성하기먼저, 각 언..

웹 애플리케이션을 개발할 때, 특히 Android 환경에서 인앱 브라우저 대신 외부 브라우저(주로 Chrome)로 사용자를 강제 이동시켜야 하는 상황이 종종 발생합니다. 이 글에서는 Android의 Intent를 활용해 외부 브라우저로 리다이렉트하는 방법을 살펴보겠습니다.  Intent URL을 사용한 외부 브라우저 리다이렉트아래는 Android 디바이스에서 특정 URL을 외부 브라우저로 열기 위해 Intent URL을 생성하는 코드입니다.const currentUrl = window.location.href;const redirectUrl = "intent://domain.co.kr/#Intent;scheme=https;package=com.android.chrome;S.browser_fallback..

웹사이트나 웹 애플리케이션을 개발할 때, 사용자 경험을 최적화하기 위해 iOS와 Android 사용자를 구분해서 처리해야 할 때가 있습니다. 특히, 카카오톡이나 라인, 인스타그램 같은 인앱 브라우저에서 서비스를 불러오는 경우, 사용자가 어떤 기기를 사용하느냐에 따라 구현한 내용과 다르게 동작하는 경우가 많습니다. 소셜 로그인이 되지 않는다거나 이미지를 다운받을 수 없거나 등이죠. 이번 포스팅에서는 Next.js에서 iOS와 Android 사용자를 구분하고, 각각의 사용자에게 맞는 행동을 취하는 방법을 소개하겠습니다.  전체 코드아래는 iOS와 Android 사용자를 구분하여 처리하는 전체 코드입니다."use client";import Editor from "components/Editor";import ..

최근 프로젝트에서 두 개의 버튼 메뉴를 만들었습니다. 사용자가 어떤 페이지에 있는지에 따라 버튼의 활성화 상태를 변경해야 했죠. 처음에는 useState로 두 버튼의 상태를 관리했어요. 하지만 사용자가 뒤로 가기 버튼을 클릭할 때 상태가 제대로 업데이트되지 않는 문제가 발생했습니다. [유의어 반의어 찾기] 버튼이 활성화 되었지만 실제 페이지는 [그 단어 뭐였더라?] 페이지를 가리키고 있었죠.  문제기본적인 상태 관리는 다음과 같은 방식으로 이루어졌습니다:const [selectedButton, setSelectedButton] = useState(1);const handleClick = (buttonId) => { setSelectedButton(buttonId);}; 이 방식은 버튼을 클릭할 때는 잘..

프로젝트를 하다 보면, 사용자가 입력한 단어가 유효한지 검사해야 하는 경우가 많습니다. 특히, 'ㅁㄴㅇ', 'wwwww' 와 같은 무의미한 단어를 어떻게 걸러낼 수 있을까요? 이번 글에서는 간단한 정규식과 사전 API 를 사용해 한글과 영어 단어의 유효성을 검사하는 방법을 소개하겠습니다. 왜 단어 유효성 검사가 필요할까요?단어 유효성 검사는 사용자가 입력하는 단어가 실제로 존재하는 단어인지 확인하는 과정입니다. 예를 들어, 단어 검색기를 만든다고 할 때 무작위 문자가 입력되면 제대로된 결과가 나오지 않거나 에러가 발생할 수 있겠죠. 개발자는 이러한 경우를 별도로 핸들링해야하기 때문에 미리 사전에 유효성을 검사하는 것이 좋습니다. 정규식을 활용한 단어 유효성 검사먼저, 우리는 단어가 한글 또는 영어로만 구..

Tailwind CSS 는 간단한 유틸리티 클래스를 제공해 마크업에 쉽게 스타일링을 적용할 수 있습니다. 이번 글에서는 텍스트의 줄바꿈을 방지하고 긴 문자열을 생략(...)하는 방법을 소개하겠습니다.이를 위해 Tailwind CSS 의 whitespace-nowrap와 truncate 클래스를 사용해보겠습니다.  예제 코드아래 코드는 Tailwind CSS를 사용해 줄바꿈이 발생하지 않도록 하고긴 문자열이 있을 때 ...로 생략되도록 설정하는 간단한 예제입니다. 줄바꿈되지 않는 레이블입니다. 이 내용은 매우 긴 설명입니다. 이 설명은 이 컨테이너의 너비를 초과하면 생략 기호로 표시됩니다.   클래스 설명1. whitespace-nowrap이 클래스는 텍스트가 줄바꿈되지 않고 한 줄..

TypeScript는 JavaScript와 비슷한 프로그래밍 언어로, 데이터 유형을 명시적으로 기재하여 코드를 좀 더 안전하고 수월하게 유지보수 할 수 있도록 도와주는 언어입니다. 그렇다면 타입스크립트가 다루는 타입에는 어떤 것들이 있을까요? 이번 글에서는 원자값 타입, 인터섹션 타입, 인터페이스와 타입 앨리어스, 제네릭 타입에 대해 간단히 알아보겠습니다.  1. 원자값 타입 (Primitive Types)원자값 타입은 가장 기본적인 데이터의 종류라고 생각하면 됩니다.이런 타입들은 더 이상 쪼개질 수 없는 단순한 데이터를 의미합니다. string: 글자들로 이루어진 문자열입니다.let name: string = 'Alice'; number: 숫자 값을 나타냅니다.let age: number = 14; b..

React를 사용하다 보면, 컴포넌트가 화면에 나타나거나 사라질 때, 또는 특정 값이 변경될 때 어떤 작업을 하고 싶을 때가 많습니다. 예를 들어, 데이터를 가져오거나, 타이머를 설정하거나, 특정 작업을 정리(cleanup)해야 할 때 말이죠. 이럴 때 우리가 사용하는 것이 바로 useEffect입니다. useEffect를 사용하면 컴포넌트가 렌더링될 때 또는 특정 값이 바뀔 때 필요한 작업을 자동으로 처리할 수 있습니다. 이번 글에서는 useEffect의 다양한 사용 시점을 알아보고, 실제 예시 코드를 통해 그 사용법을 익혀보도록 하겠습니다.  useEffect의 사용 시점useEffect는 다음과 같은 시점에서 사용됩니다.컴포넌트가 처음 화면에 나타날 때특정 값이 바뀔 때컴포넌트가 매 렌더링마다 실행..