탐구하는 취르미

모바일 웹을 개발하다 보면 간혹 예상치 못한 터치 이슈를 만납니다. 특히 iPhone 15 Pro Max와 같은 최신 디바이스에서, 버튼을 눌렀을 때 터치 하이라이트가 엉뚱한 위치에 표시되는 문제를 겪은 적 없으신가요?이번 포스팅에서는 그런 문제를 겪었을 때, CSS 속성 touch-action: manipulation;이 어떻게 해결책이 되었는지 공유해 보려 합니다.어떤 문제에 효과적인가?1. 더블탭 확대 방지모바일 Safari 등에서 버튼이나 링크를 두 번 탭할 때 화면이 자동으로 확대되는 현상을 막습니다.2. 터치 반응 지연 제거 (300ms 딜레이)과거 모바일 브라우저는 더블탭 확대를 구분하기 위해 클릭 반응에 300ms 지연을 뒀습니다. touch-action: manipulation;으로 즉시..

Midjourney를 사용하다 보면 이런 고민을 하게 됩니다."내가 만든 이미지, 다른 사람들이 보는 거 싫은데...?" 특히 공식 Midjourney 디스코드 서버에서는 내가 프롬프트를 입력할 때마다 수많은 유저들과 함께 작업하다 보니, 내 이미지 생성 과정이 전부 공개됩니다. 그럼 어떻게 해야 할까요? 바로 서버 추가를 통해 해결할 수 있습니다.미드저니 서버를 추가하는 이유Midjourney에서 서버를 추가하는 이유는 크게 세 가지입니다.개인 작업 공간 확보공식 서버가 아닌, 나만의 서버를 만들어서 쓸 수 있습니다.내가 생성하는 이미지가 공용 채널에 노출되지 않습니다.초대한 사람만 접근 가능새로 만든 서버는 초대된 사람만 들어올 수 있습니다.원하는 사람만 초대해서 함께 Midjourney를 사용할 수..

리액트 컴포넌트를 작성하다 보면 반복되는 코드가 참 많습니다. 특히 className 처리, 인라인 스타일 작성, SCSS 모듈과 함께 컴포넌트를 구성하는 기본 템플릿까지~ 매번 복붙 하거나 타이핑하기엔 너무 번거롭죠. 저는 이런 반복 작업을 줄이기 위해 VS Code 사용자 스니펫(User Snippets)을 설정해서 사용하고 있는데요, 오늘은 제가 실무에서 자주 쓰는 스니펫 3가지를 소개해드리겠습니다. 설정 파일 위치먼저 스니펫을 설정하려면 아래 경로의 파일을 열어야 해요.Ctrl + Shift + P (맥은 Cmd + Shift + P) > Preferences: Configure User Snippets > typescriptreact 선택 후 JSON 파일에 코드를 추가하면 됩니다. 1. ..

리액트에서 CSS Modules을 사용할 때 이런 코드 자주 쓰이죠?import styles from './Component.module.css';return Hello; 리액트에서 CSS Modules을 사용할 때, styles. 입력 시 클래스명이 자동으로 추천되거나, styles.container를 클릭해도 CSS 정의로 바로 이동되지 않으면 불편할 수 있습니다. 이 문제, VS Code 확장 하나로 깔끔하게 해결할 수 있습니다. CSS Modules 설치 방법VS Code 에디터에서 CSS Modules 확장 프로그램을 검색하여 설치합니다. 또는 터미널에서 명령어로 바로 설치 가능합니다.code --install-extension clinyong.vscode-css-modulesCSS Modu..

리액트를 쓰다 보면 간혹 스타일이 “왜 안 먹지?” 싶은 경험을 하게 됩니다. 최근 작업 중 실제로 겪은 사례를 정리해 보겠습니다. 이런 코드, 왜 CSS가 적용이 안 될까?다음과 같은 구조의 React 컴포넌트가 있다고 가정해 보겠습니다 {description} 여기서 Thumbnail에 스타일을 적용하고 싶은데, 아래처럼 작성한 CSS가 전혀 먹히지 않았습니다..thumbnail { bottom: 40px;} 그런데 신기하게도 다음과 같이 수정하면 스타일이 정상적으로 적용됩니다..shortsArea { [class*="thumbnail"] { bottom: 40px; }} 왜 이걸 쓰는 경우가 생기냐면…Thumbnail 컴포넌트가 외부에서 className을 전달..

리액트에서 Swiper 라이브러리를 사용할 때, SCSS로 커스텀 스타일을 주려는데 스타일이 전혀 적용되지 않았던 경험, 혹시 있으신가요?이 문제는 SCSS 모듈(CSS Modules) 때문에 발생합니다. 그 이유와 해결 방법에 대해서 알아봅시다.문제의 원인: SCSS Modules의 클래스 네이밍 방식SCSS 모듈을 사용하면 클래스명은 로컬 스코프(local scope)로 변환됩니다. 즉, 아래처럼 작성한 .swiper 클래스는 실제 HTML에선 swiper_xyz123처럼 바뀝니다.하지만 Swiper 라이브러리는 HTML을 렌더링할 때 순수한 전역 클래스명인 .swiper를 사용합니다.결과적으로, SCSS 모듈에서 정의한 스타일은 Swiper의 클래스에 적용되지 않는 거예요. 해결 방법: :globa..