본문 바로가기

나는 이렇게 학습한다575

Intent URL로 Android 외부 브라우저로 리다이렉트하기 웹 애플리케이션을 개발할 때, 특히 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.. 2024. 9. 2.
Next.js 에서 iOS와 Android 사용자 핸들링 방법 웹사이트나 웹 애플리케이션을 개발할 때, 사용자 경험을 최적화하기 위해 iOS와 Android 사용자를 구분해서 처리해야 할 때가 있습니다. 특히, 카카오톡이나 라인, 인스타그램 같은 인앱 브라우저에서 서비스를 불러오는 경우, 사용자가 어떤 기기를 사용하느냐에 따라 구현한 내용과 다르게 동작하는 경우가 많습니다. 소셜 로그인이 되지 않는다거나 이미지를 다운받을 수 없거나 등이죠. 이번 포스팅에서는 Next.js에서 iOS와 Android 사용자를 구분하고, 각각의 사용자에게 맞는 행동을 취하는 방법을 소개하겠습니다.  전체 코드아래는 iOS와 Android 사용자를 구분하여 처리하는 전체 코드입니다."use client";import Editor from "components/Editor";import .. 2024. 9. 2.
Python Pillow를 이용해 이미지에 텍스트 추가하기 Pillow는 Python에서 이미지를 다룰 수 있게 해주는 라이브러리입니다. 원래는 Python Imaging Library(PIL)라는 이름으로 시작했는데, 현재는 Pillow라는 이름으로 널리 사용되고 있죠. 이 라이브러리는 이미지를 생성, 수정, 변환, 필터링하는 등 다양한 이미지 처리 기능을 제공합니다.   위의 이미지는 Pillow를 이용해 만든 이미지입니다. 이번 글에서는 위의 이미지 처럼 정사각형 이미지에 텍스트를 입히는 과정을 3단계로 설명하겠습니다 :)  1단계, 네모 박스에 색상 채우기먼저 Pillow를 사용해 이미지를 생성하는 것부터 시작하겠습니다. 아래 예제 코드를 통해 이미지의 크기와 배경색을 지정해주면, 네모난 박스에 원하는 색상을 채워줄 수 있습니다.from PIL impor.. 2024. 8. 22.
Next.js 컴포넌트에서 URL 경로 기반 상태 관리 최근 프로젝트에서 두 개의 버튼 메뉴를 만들었습니다. 사용자가 어떤 페이지에 있는지에 따라 버튼의 활성화 상태를 변경해야 했죠. 처음에는 useState로 두 버튼의 상태를 관리했어요. 하지만 사용자가 뒤로 가기 버튼을 클릭할 때 상태가 제대로 업데이트되지 않는 문제가 발생했습니다. [유의어 반의어 찾기] 버튼이 활성화 되었지만 실제 페이지는 [그 단어 뭐였더라?] 페이지를 가리키고 있었죠.  문제기본적인 상태 관리는 다음과 같은 방식으로 이루어졌습니다:const [selectedButton, setSelectedButton] = useState(1);const handleClick = (buttonId) => { setSelectedButton(buttonId);}; 이 방식은 버튼을 클릭할 때는 잘.. 2024. 8. 15.
JavaScript 로 단어 유효성 검사, 무의미한 단어 걸러내기 프로젝트를 하다 보면, 사용자가 입력한 단어가 유효한지 검사해야 하는 경우가 많습니다. 특히, 'ㅁㄴㅇ', 'wwwww' 와 같은 무의미한 단어를 어떻게 걸러낼 수 있을까요? 이번 글에서는 간단한 정규식과 사전 API 를 사용해 한글과 영어 단어의 유효성을 검사하는 방법을 소개하겠습니다. 왜 단어 유효성 검사가 필요할까요?단어 유효성 검사는 사용자가 입력하는 단어가 실제로 존재하는 단어인지 확인하는 과정입니다. 예를 들어, 단어 검색기를 만든다고 할 때 무작위 문자가 입력되면 제대로된 결과가 나오지 않거나 에러가 발생할 수 있겠죠. 개발자는 이러한 경우를 별도로 핸들링해야하기 때문에 미리 사전에 유효성을 검사하는 것이 좋습니다. 정규식을 활용한 단어 유효성 검사먼저, 우리는 단어가 한글 또는 영어로만 구.. 2024. 8. 10.
Tailwind CSS로 줄바꿈 방지와 긴 문자열 생략하기 Tailwind CSS 는 간단한 유틸리티 클래스를 제공해 마크업에 쉽게 스타일링을 적용할 수 있습니다. 이번 글에서는 텍스트의 줄바꿈을 방지하고 긴 문자열을 생략(...)하는 방법을 소개하겠습니다.이를 위해 Tailwind CSS 의 whitespace-nowrap와 truncate 클래스를 사용해보겠습니다.  예제 코드아래 코드는 Tailwind CSS를 사용해 줄바꿈이 발생하지 않도록 하고긴 문자열이 있을 때 ...로 생략되도록 설정하는 간단한 예제입니다. 줄바꿈되지 않는 레이블입니다. 이 내용은 매우 긴 설명입니다. 이 설명은 이 컨테이너의 너비를 초과하면 생략 기호로 표시됩니다.   클래스 설명1. whitespace-nowrap이 클래스는 텍스트가 줄바꿈되지 않고 한 줄.. 2024. 8. 7.

티스토리툴바