코드로 우주평화

제가 최근에 만든 서비스는 홈 화면에 사용자들의 이용 수 보여주고 있습니다.이처럼 사용자의 이용 수를 카운트하여 보여주고 흥미를 끄는 방식이 있는데요. 이런 카운트 기능을 어떻게 구현할까 고민하다 supabase의 RPC를 이용해 구현해 보았습니다. 이 글은 그 과정에 대해 설명하는 글입니다. 이 글을 끝까지 읽으면 꼭 카운터가 아니더라도 비슷한 상황에서 적절히 사용하실 수 있을 겁니다.  사용자가 버튼을 클릭하면 숫자를 올려줘처음에는 이 기능을 이용 중에 생성된 DB row의 수를 기준으로 숫자를 카운트했습니다. 하지만 이 row는 서비스를 끝까지 이용했을 때에만 생성되기 때문에 중간에 이탈한 사용자의 수는 숫자로 카운트되지 않았죠.. 그래서 버튼을 클릭하자마자 숫자가 올라가도록 수정했습니다. 먼저 ..

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

Flutter에서 Wrap 위젯 사용법Flutter로 앱을 개발할 때, 여러 개의 위젯을 한 줄에 배치해야 하거나 화면 크기에 맞춰 유동적으로 배치하고 싶을 때가 있습니다. 이럴 때 유용한 것이 바로 Wrap 위젯이죠. 오늘은 Wrap 위젯의 사용법과 장점에 대해 소개해보겠습니다.  Wrap 위젯이란?Wrap은 말 그대로 아이템을 감싸주는 레이아웃입니다. 보통 Row나 Column을 사용하면 아이템들이 한 방향으로만 배치돼서 화면 크기에 따라 넘쳐버리는 문제가 생기곤 하는데요. 반면, Wrap은 공간이 부족할 때 자동으로 줄바꿈을 해주기 때문에, 반응형 레이아웃을 쉽게 만들 수 있습니다.   기본 사용법Wrap 위젯의 기본적인 구조는 아래와 같습니다.Wrap( spacing: 20.0, // 열 사이의..

웹 애플리케이션을 개발할 때, 특히 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 ..