탐구하는 취르미

리액트 컴포넌트를 작성하다 보면 반복되는 코드가 참 많습니다. 특히 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..

쇼핑몰 운영자라면 상세페이지 제작이 필수적이지만, 시간과 비용이 많이 듭니다. 이를 해결하기 위해 가비아(Gabia)에서 개발한 제디터 AI가 등장했습니다. 이 AI 도구는 상품 정보를 입력하면 자동으로 상세페이지를 생성해 주는 강력한 기능을 제공합니다. 이번 포스팅에서는 제디터 AI를 활용하는 방법을 단계별로 알아보겠습니다.제디터 AI 시작하기먼저 제디터 AI 사이트에 접속하여 회원가입을 합니다. 이후 로그인하면 AI 상세페이지 생성 기능을 사용할 수 있습니다. AI 기반 상품상세페이지 생성 에디터최신 AI 기술로 상품 상세 페이지를 몇 분 안에 생성하세요. AI 에디터는 마케팅 콘텐츠 제작을 간소화하고 창의적인 디자인을 가능하게 합니다. 지금 시작해 보세요!aieditor.gabia.com 요금제 ..

개발을 하다 보면 git rebase를 수행할 때 충돌이 발생하거나, 예상치 못한 커밋 메시지 편집 화면이 나타나는 경우가 있습니다. 이번 포스팅에서는 git rebase 중 충돌 해결 및 커밋 메시지 편집 방법에 대해 알아보겠습니다. git rebase 진행 중 충돌 발생예를 들어, git rebase를 실행한 후 다음과 같은 메시지를 받았다고 가정해 봅시다.현재 'feature' 브랜치를 'ab568b4fb5' 위로 리베이스하는 중입니다.커밋할 변경 사항: 수정함: src/modules/components/Community/Community.tsx 이는 리베이스 중 하나의 커밋이 적용되었고, 남은 커밋이 몇 개 더 있다는 의미입니다. 이 과정에서 충돌이 발생하면 Git이 이를 해..