탐구하는 취르미

가끔은 브랜치 전체를 합치고 싶진 않지만, 특정 파일의 변경사항만 다른 브랜치에도 적용하고 싶을 때가 있습니다. 해당 방법에 대해서 알아보겠습니다.대상 브랜치로 이동하기👇 변경사항을 반영할 브랜치로 체크아웃합니다.git checkout feature-b브랜치 간 파일 차이 추출하기feature-a 브랜치에서 product.module.scss 파일을 수정했는데 이 변경을 feature-b 브랜치에도 반영하고 싶은 경우입니다.이럴 땐 Patch 파일을 만들어 적용하는 방법을 쓸 수 있습니다.👇 두 브랜치 간의 특정 파일 변경사항을 추출합니다.앞에 오는 브랜치 = 기준점(현재 상태)뒤에 오는 브랜치 = 가져오고 싶은 변경사항 쪽git diff feature-b feature-a -- src/path/to..

UI 작업하다 보면 이런 경험 있으실 거예요.텍스트 옆에 작은 뱃지나 아이콘을 붙이고 싶은데, 으로 만들면 수직 중앙이 애매하게 어긋납니다.타이틀 영역입니다 뱃지strong { display: inline-block; color: #131518; font-size: 16px; font-style: normal; font-weight: 700; line-height: 22px; word-break: keep-all; >span { margin-left: 5px; color: #99A1A8; font-size: 13px; font-style: italic; font-weight: 400; line-height: ..

모바일 웹을 개발하다 보면 간혹 예상치 못한 터치 이슈를 만납니다. 특히 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..