탐구하는 취르미

[Git] Git에서 특정 파일 변경분만 다른 브랜치에 반영하기 feat. Patch 활용

chim — Mon, 22 Sep 2025 15:07:29 +0900

가끔은 브랜치 전체를 합치고 싶진 않지만, 특정 파일의 변경사항만 다른 브랜치에도 적용하고 싶을 때가 있습니다. 해당 방법에 대해서 알아보겠습니다.

대상 브랜치로 이동하기

변경사항을 반영할 브랜치로 체크아웃합니다.

git checkout feature-b

브랜치 간 파일 차이 추출하기

feature-a 브랜치에서 product.module.scss 파일을 수정했는데 이 변경을 feature-b 브랜치에도 반영하고 싶은 경우입니다.

이럴 땐 Patch 파일을 만들어 적용하는 방법을 쓸 수 있습니다.

두 브랜치 간의 특정 파일 변경사항을 추출합니다.

앞에 오는 브랜치 = 기준점(현재 상태)
뒤에 오는 브랜치 = 가져오고 싶은 변경사항 쪽

git diff feature-b feature-a -- src/path/to/product.module.scss > diff.patch

이제 diff.patch라는 패치 파일이 생겼습니다.

Patch 적용하기

추출한 패치를 현재 브랜치에 적용합니다.

git apply diff.patch

이제 feature-a에서 수정된 product.module.scss의 변경분이 현재 브랜치 feature-b에도 적용됩니다.

스테이징 & 커밋

마지막으로 적용된 파일을 Git에 반영합니다.

git add src/path/to/product.module.scss
git commit -m "Apply product.module.scss changes from feature-a"

이 방식은 전체 브랜치를 합치지 않고도, 원하는 파일의 변경사항만 선택적으로 반영할 수 있다는 장점이 있습니다. 특히 대규모 프로젝트에서 충돌을 줄이고, 필요한 부분만 빠르게 공유할 때 유용합니다.

[AI] 미드저니(Midjourney) 비공개 서버 활용법 : 나만의 창작 공간을 만들고 싶다면?

Midjourney를 사용하다 보면 이런 고민을 하게 됩니다."내가 만든 이미지, 다른 사람들이 보는 거 싫은데...?" 특히 공식 Midjourney 디스코드 서버에서는 내가 프롬프트를 입력할 때마다 수많은 유저들

dev-chim.tistory.com

[Javascript] JavaScript로 스크롤 조작하기, scrollTo(), scrollBy(), scrollIntoView()

scrollTo(), scrollBy(), scrollIntoView() 메서드를 활용해 스크롤 조작하는 방법에 대해서 알아보겠습니다. scrollTo() 이동할 좌표값을 받아 절대적인 위치로 스크롤을 이동시킵니다. window.scrollTo(x좌표, y좌

dev-chim.tistory.com

[macOS] Xcode 시뮬레이터를 이용한 웹 페이지 디버깅 방법

Xcode 시뮬레이터를 이용한 웹 페이지 디버깅 방법에 대해서 알아보겠습니다. Xcode 시뮬레이터를 활용한 웹 페이지 디버깅반응형 웹 디자인의 중요성이 점점 커지면서, 다양한 기기에서 웹 페이

dev-chim.tistory.com

간단하게 Vite로 프로젝트 생성하는 방법

간단하게 Vite로 프로젝트 생성하는 방법에 대해서 알아보겠습니다. https://vitejs-kr.github.io/guide/ Vite Vite, 차세대 프런트엔드 개발 툴 vitejs-kr.github.io 선행 작업으로 node.js가 설치되어 있어야 합니다

dev-chim.tistory.com

[npm] npm 버전 확인, 초기화, 설치 및 옵션, 삭제 등 기본 사용법

npm(node package manage)는 cdn 방식으로 패키지를 가져와서 사용하는 것이 아니라, 모듈화 된 패키지를 node 환경에서 쉽고 간편하게 설치하고 버전 관리할 수 있는 자바스크립트 패키지 매니저입니다.

dev-chim.tistory.com

[CSS] 왜 <span>은 수직 중앙 정렬이 안 맞고, <img>는 맞을까?

chim — Wed, 17 Sep 2025 11:09:15 +0900

UI 작업하다 보면 이런 경험 있으실 거예요.
텍스트 옆에 작은 뱃지나 아이콘을 붙이고 싶은데, <span>으로 만들면 수직 중앙이 애매하게 어긋납니다.

<strong>타이틀 영역입니다 <span>뱃지</span></strong>

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: 16px;
    }
  }

랜더링된 화면

이렇게 했는데도 <span>이 살짝 아래로 치우쳐 보이는 경우가 있죠.

그런데 신기하게도 같은 자리에 <img>를 넣으면 중앙 정렬이 딱 맞습니다.

<strong>타이틀 영역입니다 <img src="./images/badge.svg" alt="" /></strong>

img {
  width: 20px;
  height: 11px;
}

뱃지 이미지 처리

왜 이런 차이가 생길까요?

span과 img의 차이

span: 텍스트 계열 요소

<span>은 원래 텍스트를 감싸는 inline 요소입니다.
브라우저는 이를 baseline(문자가 놓이는 기준선)을 기준으로 정렬하려고 해요.
그래서 line-height를 줄여도 실제 박스가 고정되지 않고, 폰트 메트릭스(ascender, descender)에 따라 살짝 어긋나게 보입니다.

즉, line-height만으로는 완벽한 “아이콘 박스”를 만들 수 없어요.

img: 치환 요소 (Replaced Element)

<img>는 텍스트가 아니라 외부 리소스로 대체되는 치환 요소입니다.
브라우저는 <img>를 하나의 고정 박스로 인식합니다. (width × height)
baseline 영향이 적기 때문에, vertical-align: middle이 적용되면 부모 라인박스 기준으로 정확히 중앙에 옵니다.

결국, 같은 inline 요소여도 성격이 달라서 정렬 결과가 다른 거죠.

span을 img처럼 쓰고 싶다면?

아이콘을 반드시 <span>으로 구현해야 할 때가 있습니다. 예를 들어, 접근성 텍스트 처리, 폰트 아이콘, CSS 배경 아이콘 등등

이때는 아래처럼 처리하면 됩니다.

strong > span {
  display: inline-block;   /* span을 박스처럼 */
  height: 11px;            /* 고정 높이 */
  vertical-align: middle;  /* 부모 기준 중앙 정렬 */
  line-height: normal;     /* baseline 영향 제거 */
}

line-height만 주면 안 될까?

많이 하는 실수가 line-height: 11px만 주는 겁니다.
이 경우 span은 여전히 텍스트 박스이기 때문에, 브라우저가 baseline을 기준으로 정렬해 버립니다.
그 결과 중앙이 미묘하게 어긋날 수 있어요.

그래서 반드시 height와 line-height: normal을 함께 써주는 게 안전합니다.

오늘 포스트에서는 span과 img의 동작 차이를 비교하며, 실무에서 헷갈리기 쉬운 수직 중앙 정렬의 비밀을 짚어봤습니다.

[React] React 개발 속도를 높이는 나만의 VS Code 스니펫 설정

리액트 컴포넌트를 작성하다 보면 반복되는 코드가 참 많습니다. 특히 className 처리, 인라인 스타일 작성, SCSS 모듈과 함께 컴포넌트를 구성하는 기본 템플릿까지~ 매번 복붙 하거나 타이핑하기

dev-chim.tistory.com

[Javascript] 직관적이고 유연한 슬라이더! Slick 슬라이더를 통해 갤러리를 구현해보세요.

웹 사이트에서 이미지 갤러리나 캐러셀처럼 슬라이더가 필요하다면, Slick 플러그인으로 간단하게 구현할 수 있습니다. slick - the last carousel you'll ever needslick is a responsive carousel jQuery plugin that sup

dev-chim.tistory.com

[Safari] 사파리 브라우저로 iPhone 웹 페이지 디버깅하는 방법 (feat. 웹 인스펙터)

사파리 브라우저로 iPhone 웹 디버깅하는 방법에 대해서 알아보겠습니다. 웹 페이지 디버깅웹 개발을 하다 보면 데스크탑 브라우저뿐만 아니라 실제 모바일 디바이스에서의 동작을 확인하고 디

dev-chim.tistory.com

[AI] 손필기는 이제 그만! 클로바 노트(CLOVA Note)의 음성 메모 혁신을 경험하세요!

클로바노트는 음성인식, 자연어 처리 등의 AI 기술을 활용한 회의록 관리 서비스입니다. 이 서비스는 긴 문장과 비정형화된 대화를 인식하는 데 특화된 음성인식 엔진을 사용하며 참석자의 목소

dev-chim.tistory.com

[Git] Git Stash : 변경사항을 임시로 저장하는 방법

보통 개발자들은 여러 작업을 동시에 진행하거나, 작업 중에 예기치 않은 변경이 필요할 때가 있습니다. 이런 상황에서는 현재 작업 중인 변경사항을 커밋(commit)하기 전에 보관할 필요가 있습니

dev-chim.tistory.com

[CSS/defect] 특정 디바이스에서 터치 하이라이트 오류 수정 (feat. ios)

chim — Fri, 16 May 2025 23:23:47 +0900

모바일 웹을 개발하다 보면 간혹 예상치 못한 터치 이슈를 만납니다. 특히 iPhone 15 Pro Max와 같은 최신 디바이스에서, 버튼을 눌렀을 때 터치 하이라이트가 엉뚱한 위치에 표시되는 문제를 겪은 적 없으신가요?
이번 포스팅에서는 그런 문제를 겪었을 때, CSS 속성 touch-action: manipulation;이 어떻게 해결책이 되었는지 공유해 보려 합니다.

어떤 문제에 효과적인가?

1. 더블탭 확대 방지

모바일 Safari 등에서 버튼이나 링크를 두 번 탭할 때 화면이 자동으로 확대되는 현상을 막습니다.

2. 터치 반응 지연 제거 (300ms 딜레이)

과거 모바일 브라우저는 더블탭 확대를 구분하기 위해 클릭 반응에 300ms 지연을 뒀습니다. touch-action: manipulation;으로 즉시 반응하도록 합니다.

3. iOS에서 터치 하이라이트 오작동 해결

iPhone 15 Pro Max 등 일부 기기에서 버튼 터치 시 하이라이트가 잘못 표시되는 문제를 해결합니다.

해결 방법: touch-action: manipulation;

해결책은 간단했습니다. 터치 관련 기본 동작을 제한해 주는 CSS 속성 한 줄을 추가하면 됩니다.

button {
  touch-action: manipulation;
}

이 속성은 사용자의 탭이나 클릭 같은 조작에만 반응하고, 브라우저가 기본적으로 처리하는 확대, 스크롤, 터치 하이라이트 등의 동작은 제외하도록 설정합니다.

touch-action 속성값에 대해서

속성값	설명	사용 예시
`auto` (기본값)	브라우저가 터치 이벤트에 대해 기본 동작(스크롤, 확대, 더블탭 등)을 자유롭게 처리	특별한 제약 없이 기본 상태로 유지하고 싶을 때
`none`	모든 브라우저 기본 터치 동작 차단 (스크롤 X, 확대 X, 터치 하이라이트 X)	캔버스, 지도, 드래그 등 커스텀 제스처 UI에 사용
`pan-x`	수평 스크롤만 허용, 수직 스크롤 차단	가로 슬라이더 영역에서 세로 스크롤 충돌 방지
`pan-y`	수직 스크롤만 허용, 수평 스크롤 차단	세로 스크롤은 허용하면서 가로 제스처 감지 시
`pan-x pan-y`	수직/수평 스크롤 모두 허용 (사실상 `auto`와 유사하나 명시적 설정 가능)	모든 방향 스크롤 허용하면서 다른 동작은 제한하고 싶을 때
`manipulation`	탭, 클릭 등 조작만 허용, 확대/스크롤은 차단	버튼, 탭, 링크 등에서 더블탭 확대 방지 및 빠른 반응 필요 시

주의사항

- touch-action 속성은 터치 인터페이스에서만 의미가 있으며, 마우스 기반 환경에서는 영향이 없습니다.

- 일부 속성값은 Internet Explorer/Edge 레거시 버전만 지원하는 것도 있으므로, 크로스 브라우징이 필요하면 Can I Use 사이트에서 지원 범위를 꼭 확인하세요.

- 부모 요소에 설정된 touch-action 값이 자식 터치 이벤트에 영향을 줄 수 있습니다.

저처럼 iPhone 최신 기기에서 발생하는 터치 하이라이트 이슈를 겪으셨다면, 이 속성을 꼭 적용해 보시길 추천드립니다.

[AI] 미드저니(Midjourney) 비공개 서버 활용법 : 나만의 창작 공간을 만들고 싶다면?

dev-chim.tistory.com

[Git] PR 커밋 해시를 활용한 브랜치 생성 : 쉽고 간단한 가이드

가끔 코드 리뷰나 협업 과정에서 특정 PR의 커밋 해시를 로컬 환경에서 확인해야 할 때가 있습니다. 이 글에서는 원격 저장소에서 해당 커밋을 로컬로 가져와, 그 해시를 기반으로 브랜치를 생성

dev-chim.tistory.com

[macOS] 메모(Memo)에서 PDF 파일로 변환하는 간단 방법

Mac OS에서 메모장을 사용하여 작성한 파일을 PDF 형식으로 내보내는 방법에 대해 알아보겠습니다. 메모장에서 PDF 파일로 내보내는 방법PDF 파일 형식은 문서를 안전하게 저장하고 다양한 디바이

dev-chim.tistory.com

[Javascript] JavaScript 이벤트 위임(Event Delegation): 효율적인 이벤트 핸들링 방법

이벤트 위임은 이벤트 핸들링을 효율적으로 관리하고 코드를 단순화하는 데에 도움을 줍니다. 이번 포스트 글에서는 이벤트 위임의 개념부터 활용 사례까지 자세히 살펴보겠습니다.이벤트 위

dev-chim.tistory.com

[HTML] video vs iframe, 어떤 것이 더 적합할까?

웹 페이지에서 동영상 콘텐츠를 삽입할 때, HTML 태그 중 video와 iframe을 주로 사용합니다. 그러나 이 두 가지 태그는 어떤 차이점이 있을까요? 어떤 것이 더 적합한 선택일까요? 이번에는 video와 ifr

dev-chim.tistory.com

[AI] 미드저니(Midjourney) 비공개 서버 활용법 : 나만의 창작 공간을 만들고 싶다면?

chim — Mon, 28 Apr 2025 08:30:48 +0900

Midjourney를 사용하다 보면 이런 고민을 하게 됩니다.

"내가 만든 이미지, 다른 사람들이 보는 거 싫은데...?"

특히 공식 Midjourney 디스코드 서버에서는 내가 프롬프트를 입력할 때마다 수많은 유저들과 함께 작업하다 보니, 내 이미지 생성 과정이 전부 공개됩니다. 그럼 어떻게 해야 할까요? 바로 서버 추가를 통해 해결할 수 있습니다.

미드저니 서버를 추가하는 이유

Midjourney에서 서버를 추가하는 이유는 크게 세 가지입니다.

개인 작업 공간 확보

공식 서버가 아닌, 나만의 서버를 만들어서 쓸 수 있습니다.
내가 생성하는 이미지가 공용 채널에 노출되지 않습니다.

초대한 사람만 접근 가능

새로 만든 서버는 초대된 사람만 들어올 수 있습니다.
원하는 사람만 초대해서 함께 Midjourney를 사용할 수 있습니다.

더 깔끔하고 조용한 작업 환경

수많은 메시지에 묻히지 않고, 오직 내 작업만 볼 수 있습니다.

공식 서버 vs 개인 서버 차이점

공식 서버는 누구나 볼 수 있는 오픈된 공간입니다. 반면, 개인 서버에 Midjourney Bot을 초대하면 외부 사용자들은 기본적으로 내가 만든 이미지를 볼 수 없습니다. 추가로, Midjourney의 Pro 요금제 이상을 이용하면 Stealth Mod"를 통해 Midjourney 공식 서버에서도 완전 비공개로 작업할 수 있습니다. 하지만 대부분의 경우, 개인 서버를 생성하는 것만으로도 충분히 프라이빗한 작업 환경을 만들 수 있습니다.

디스코드에서 개인 서버 추가 하는 방법

1. 왼쪽 메뉴에서 서버 추가하기(Add a Server) 버튼을 클릭합니다.

서버 추가하기

2. Create My Own을 클릭해 주시고 나만의 서버 공간을 만들어주세요.

나만의 서버를 만들기

3. 세팅 옵션을 설정해 주시면 되는데 For me and my friends를 클릭해 주시면 됩니다.

세팅 옵션 설정하기

4. 마지막 단계로 서버 이름(SERVER NAME)을 입력해 주시고 Create 버튼을 클릭하여 서버를 생성하세요.

개인서버에 Midjourney Bot 초대하는 방법

1. Midjourney 공식 서버에 접속합니다. 상단 메뉴 아이콘들 중 Hide Member List를 클릭해서 숨겨진 멤버들 중, Midjouney Bot을 찾아 클릭해 줍니다.

Midjourney Bot 찾기

2. Add App을 클릭합니다.

앱 추가하기

3. Add to Server를 클릭하여 내가 생성한 서버에 봇을 추가해 주세요.

서버에 미드저니 봇 추가하기

4. 이전에 생성한 나만의 서버를 드롭 메뉴에서 선택하여 미드저니 봇을 추가해 줍니다.

공식 서버의 혼잡함이나 공개된 환경이 부담스럽다면, 오늘부터 나만의 비공개 서버를 만들어 보세요. 조용하고 자유로운 공간에서 원하는 만큼 상상력을 펼칠 수 있습니다. 이렇게 미드저니 비공개 서버를 추가하는 방법에 대해서 알아보았습니다.

[AI] 스마트스토어 & 쿠팡 셀러 주목! AI로 상세페이지 5분 만에 완성하기 (제디터 AI)

쇼핑몰 운영자라면 상세페이지 제작이 필수적이지만, 시간과 비용이 많이 듭니다. 이를 해결하기 위해 가비아(Gabia)에서 개발한 제디터 AI가 등장했습니다. 이 AI 도구는 상품 정보를 입력하면 자

dev-chim.tistory.com

[Utility] 이미지 추출 기준이란? (feat. Figma를 활용한 이미지 추출 방법)

웹퍼블리셔로서 웹사이트나 앱의 사용자 경험을 향상하기 위해 디자이너와 협력하여 다양한 디자인 요소를 구현합니다. 이미지는 이러한 디자인 요소 중 하나로, 올바른 형식과 해상도로 이미

dev-chim.tistory.com

[Git] Git Stash : 변경사항을 임시로 저장하는 방법

dev-chim.tistory.com

[Safari] 개인 정보 보호의 첫걸음: 프라이버시 모드 알아보기

프라이버시 모드란? 웹 브라우저에서 제공하는 기능 중 하나로, 사용자의 브라우징 활동을 익명으로 유지하고 개인 정보를 보호하는 데 도움을 주는 모드입니다. 이 모드에서는 브라우징 기록,

dev-chim.tistory.com

[HTML] Image Map, 이미지맵으로 이미지에 링크 거는 방법

이미지맵(Image Map)으로 이미지에 링크를 거는 방법에 대해서 알아봅시다. 요즘에는 잘 쓰이지 않는 방법이긴 하지만 디엠(Direct Mail)/뉴스레터(News Letter) 등을 제작할 때 알아두면 꽤 유용합니다.

dev-chim.tistory.com

[React] React 개발 속도를 높이는 나만의 VS Code 스니펫 설정

chim — Mon, 21 Apr 2025 17:54:58 +0900

리액트 컴포넌트를 작성하다 보면 반복되는 코드가 참 많습니다. 특히 className 처리, 인라인 스타일 작성, SCSS 모듈과 함께 컴포넌트를 구성하는 기본 템플릿까지~ 매번 복붙 하거나 타이핑하기엔 너무 번거롭죠. 저는 이런 반복 작업을 줄이기 위해 VS Code 사용자 스니펫(User Snippets)을 설정해서 사용하고 있는데요, 오늘은 제가 실무에서 자주 쓰는 스니펫 3가지를 소개해드리겠습니다.

설정 파일 위치

먼저 스니펫을 설정하려면 아래 경로의 파일을 열어야 해요.

Ctrl + Shift + P (맥은 Cmd + Shift + P) > Preferences: Configure User Snippets > typescriptreact 선택 후 JSON 파일에 코드를 추가하면 됩니다.

1. cx - classNames 헬퍼 단축키

prefix에 cx를 입력하면 자동 완성이 되고, styles.클래스명 부분에 커서가 위치해 원하는 클래스명을 바로 입력할 수 있습니다.

classnames/bind 방식으로 스타일을 바인딩할 때 유용하게 사용됩니다.

"Add className using cx": {
  "prefix": "cx",
  "body": [
    "className={cx(styles.$1)}$0"
  ],
  "description": "Add className using cx"
}

2. style - 인라인 스타일 단축키

style 입력 시 자동 생성됩니다.

property에는 color, fontSize 등 원하는 스타일 속성을 입력하고, 값은 자동으로 문자열 형태로 감싸져 작성됩니다.

간단한 스타일을 빠르게 테스트할 때 유용합니다.

"Add inline style object": {
  "prefix": "style",
  "body": [
    "style={{ ${1:property}: \"$2\" }}$0"
  ],
  "description": "Add inline style object"
}

3. rscss - SCSS 모듈 기반 리액트 컴포넌트 템플릿

rscss 입력 시 React 컴포넌트 템플릿이 자동 생성됩니다.

TM_FILENAME_BASE는 현재 파일명을 자동으로 가져오며, classnames/bind와 SCSS 모듈을 자동으로 import 해줍니다. 컴포넌트 이름도 파일명을 기준으로 자동 생성됩니다.

컴포넌트를 새로 만들 때 매번 같은 패턴을 타이핑하지 않아도 돼서 정말 편리합니다.

"React Component with SCSS": {
  "prefix": "rscss",
  "body": [
    "import React from \"react\";",
    "import classNames from \"classnames/bind\";",
    "",
    "import styles from \"./${TM_FILENAME_BASE}.module.scss\";",
    "const cx = classNames.bind(styles);",
    "",
    "const ${TM_FILENAME_BASE} = () => {",
    "  return <div></div>;",
    "};",
    "",
    "export default ${TM_FILENAME_BASE};"
  ],
  "description": "React Component with SCSS module and classNames"
}

스니펫을 잘 설정해두면 개발 속도가 눈에 띄게 빨라집니다. 반복되는 타이핑을 줄이고, 스타일 가이드를 더 일관성 있게 유지할 수 있어요.

이외에도 props 인터페이스까지 자동으로 만들어주거나, 테스트 파일도 함께 생성되게 할 수 있으니 필요에 따라 확장해서 사용해 보세요.

[Git] git rebase에서 충돌이 날 때 대처법 (feat. 커밋 메시지 수정)

개발을 하다 보면 git rebase를 수행할 때 충돌이 발생하거나, 예상치 못한 커밋 메시지 편집 화면이 나타나는 경우가 있습니다. 이번 포스팅에서는 git rebase 중 충돌 해결 및 커밋 메시지 편집 방법

dev-chim.tistory.com

[AI] 빙챗(Bing Chat)/코파일럿(Copilot) 설치 방법 및 간단 사용법

빙챗(Bing Chat)은 사용자의 검색 경험을 향상하기 위해 AI 기반으로 마이크로소프트에서 개발한 채팅 기능입니다. 빙챗은 이제 마이크로소프트 코파일럿(Copilot)으로 브랜드명이 변경되었습니다.

dev-chim.tistory.com

[Utility] Microsoft Designer로 쉽게 디자인하기

Microsoft Designer는 간편하고 직관적인 인터페이스를 갖춘 AI(인공지능) 생성 디자인 툴입니다. 사용자가 전문적인 디자인 지식 없이도 손쉽게 다양한 디자인 작업을 할 수 있도록 다양한 템플릿과

dev-chim.tistory.com

[SCSS] 자연스러운 전환을 위한 Overlay 팝업의 Dim 영역 처리

CSS를 활용하여 overlay(오버레이) 및 toast(토스트) 팝업에서 dim(딤) 영역을 자연스러운 전환효과를 처리하는 방법에 대해서 알아보겠습니다. 이를 위해 opacity와 pointer-events 속성을 적절히 활용하여

dev-chim.tistory.com

[HTML] video vs iframe, 어떤 것이 더 적합할까?

dev-chim.tistory.com

[React] React에서 CSS Modules 자동완성 안 되면? 이 확장으로 정의 이동까지 해결하세요

chim — Sun, 20 Apr 2025 14:22:35 +0900

리액트에서 CSS Modules을 사용할 때 이런 코드 자주 쓰이죠?

import styles from './Component.module.css';

return <div className={styles.container}>Hello</div>;

리액트에서 CSS Modules을 사용할 때, styles. 입력 시 클래스명이 자동으로 추천되거나, styles.container를 클릭해도 CSS 정의로 바로 이동되지 않으면 불편할 수 있습니다. 이 문제, VS Code 확장 하나로 깔끔하게 해결할 수 있습니다.

CSS Modules 설치 방법

VS Code 에디터에서 CSS Modules 확장 프로그램을 검색하여 설치합니다.

CSS Modules 확장 프로그램 설치

또는 터미널에서 명령어로 바로 설치 가능합니다.

code --install-extension clinyong.vscode-css-modules

CSS Modules의 주요 기능

자동완성(Auto-complete)

styles. 입력 시 .module.css에 정의된 클래스명이 자동으로 제안됩니다.
이제 클래스명 외울 필요도, 복붙할 필요도 없습니다.

정의로 이동(Go to Definition)

styles.container에서 Ctrl(또는 Cmd)+클릭 시, 해당 클래스 정의 위치로 바로 이동합니다.
작은 기능 같지만 개발 흐름이 끊기지 않아 큰 차이를 만들어요.

CSS Modules의 사용 예시

이제 styles. 입력하면 container가 자동완성되고,
클릭만으로 CSS 정의로 이동할 수 있습니다. 두 기능 모두 아주 깔끔하게 동작해요.

.container {
  padding: 16px;
  background-color: #f2f2f2;
  .description {
    margin-top: 10px;
    font-size: 15px;
    font-weight: 400;
    line-height: 21px;
    text-align: center;

    &.skeleton {
      margin-top: 14.5px;
      margin-bottom: 34.5px;
    }
  }
}

import styles from './Component.module.css';

function Component() {
  return 
  <div className={cx(styles.container)}>
    Hello!
      <div className={cx(styles.description, styles.skeleton)}>
        <span></span>
      </div>
  </div>;
}

❗ 파일명이 반드시 *.module.css 또는 *.module.scss 형식이어야 하고, import styles from 형태로 스타일을 불러와야 합니다. 또한, 확장을 설치한 후에는 VS Code를 재시작해보세요. 위 조건들이 충족되지 않으면 기능이 제대로 동작하지 않을 수 있습니다.

예시 1. 배열을 활용한 CSS Modules 클래스 동적 적용

이 예시에서는 stars라는 배열을 .map()을 이용해 순회하며 별점을 렌더링 하고 있습니다. 포인트는 배열의 값(type)을 그대로 CSS Modules의 클래스 키로 사용하는 것입니다.

.reviewStarsArea {
  display: flex;
  position: absolute;
  right: 10px;
  bottom: 12px;
  gap: 1px;

  .star {
    width: 10px;
    height: 10px;
    background: url("/images/search/icon_star_empty.svg") no-repeat 0 0;
    background-size: cover;

    &.filled {
      background: url("/images/search/icon_star_filled.svg") no-repeat 0 0;
    }

    &.half {
      background: url("/images/search/icon_star_half.svg") no-repeat 0 0;
    }
  }
}

return (
    <div className={cx(styles.reviewStarsArea)}>
      {stars.map((type, index) => (
        <span key={index} className={cx(styles.star, styles[type])} />
      ))}
    </div>
);

이처럼 배열을 활용해 styles[배열값] 형태로 클래스명을 동적으로 지정하면, CSS Modules의 타입 안전성과 자동완성 기능을 그대로 유지하면서도 유연하게 스타일을 적용할 수 있습니다.

예시 2. subType을 활용한 클래스 동적 적용과 조건부 렌더링

이 컴포넌트는 리뷰의 타입(subType)에 따라 다른 컴포넌트를 렌더링하고, 동시에 CSS Modules 클래스를 동적으로 적용하는 구조입니다.

.review {
  &.photo {
    aspect-ratio: 168 / 213;
  }

  &.text {
    aspect-ratio: 168 / 252;
  }
}

const ReviewTypeItem = ({
  type,
  imageUrl = [],
  imageAlt = [],
  thumUrl,
  description,
  isTesters = false,
  hasKeyword = false,
  reviewStars = 0,
  subType,
}: ReviewTypeItemProps) => {
  return (
    <div className={cx(styles.review, styles[subType])}>
      {subType === "photo" ? (
        <PhotoReview type={type} imageUrl={imageUrl} imageAlt={imageAlt} thumUrl={thumUrl} description={description} />
      ) : (
        <TextReview type={type} thumUrl={thumUrl} description={description} isTesters={isTesters} hasKeyword={hasKeyword} reviewStars={reviewStars} />
      )}
    </div>
  );
};

CSS Modules에서는 객체 형태로 클래스명이 매핑되기 때문에, styles["photo"]나 styles[subType]처럼 문자열 키를 통해 접근할 수 있습니다.

예시 3. 드래그 상태에 따라 CSS Modules 클래스 동적으로 적용하기

useState를 사용해 드래그 상태를 관리하면, 드래그가 시작되거나 끝날 때마다 isDragging 값이 자동으로 변경됩니다. 이 상태 값을 기반으로 cx(styles.base, { [styles.active]: 조건 }) 형태로 조건부 클래스를 자연스럽게 조합할 수 있어, 특정 조건일 때만 스타일을 다르게 적용할 수 있습니다.

.dragItemWrapper {
  padding: 12px;
  border: 1px solid #ddd;
  background-color: #fff;
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
  cursor: grab;
  
  &.active {
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
      background-color: #f0f8ff;
  }
}

import React, { useState } from 'react';
import styles from './DraggableItem.module.css';
import cx from 'classnames';

const DraggableItem = () => {
  const [isDragging, setIsDragging] = useState<boolean>(false);

  const handleDragStart = () => {
    setIsDragging(true);
  };

  const handleDragEnd = () => {
    setIsDragging(false);
  };

  return (
    <div
      draggable
      onDragStart={handleDragStart}
      onDragEnd={handleDragEnd}
      className={cx(styles.dragItemWrapper, { [styles.active]: isDragging })}
    >
      드래그 가능한 아이템
    </div>
  );
};

export default DraggableItem;

React + CSS Modules 조합을 쓰는 개발자라면, 이 확장은 정말 생산성을 높여주는 필수템입니다.
클래스명 자동완성은 물론, 정의로 이동까지 한 번에 해결하세요!

[AI] 스마트스토어 & 쿠팡 셀러 주목! AI로 상세페이지 5분 만에 완성하기 (제디터 AI)

dev-chim.tistory.com

스크립트 선언 위치

자바스크립트 선언 위치에 대해서 알아보겠습니다. head 태그 안에 스크립트 선언할 경우 DOM이 읽혀지기 전에 스크립트가 먼저 읽히므로 common.js에서 따로 후처리 해줘야 합니다. load 이벤트는 리

dev-chim.tistory.com

반응형 페이지 작업할 때, 분기점 순서 설정하는 법

반응형(responsive) 페이지 작업할 때, css에서 미디어 쿼리(media query) 분기점(breakpoint) 작성 순서입니다 분기점은 해당 프로젝트에 맞게 설정하시면 됩니다 Mobile First 작은 너비 순으로 시작 @media scre

dev-chim.tistory.com

[Utility] 쉽고 간편하게 디자인하기 : 캔바(Canva) 사용법

많은 사람들은 전문적인 디자이너가 아니라면 디자인 작업을 시작하는 것이 어렵다고 생각합니다. 이는 복잡한 디자인 프로그램의 사용에 대한 부담 때문일 수 있습니다. 그러나 제가 소개드리

dev-chim.tistory.com

[Terminal] nvm 설치 방법 및 오류 해결 하기

Node.js 버전을 관리하기 위해 많이 사용하는 nvm(Node Version Manager)을 설치하려 했으나, 터미널에서 nvm 명령어를 찾을 수 없다는 메시지가 출력되는 경우가 있습니다. 이번 포스팅에서는 nvm 설치 방

dev-chim.tistory.com

[CSS/SCSS] className 없이 스타일 적용하는 트릭

chim — Thu, 17 Apr 2025 21:41:28 +0900

리액트를 쓰다 보면 간혹 스타일이 “왜 안 먹지?” 싶은 경험을 하게 됩니다. 최근 작업 중 실제로 겪은 사례를 정리해 보겠습니다.

이런 코드, 왜 CSS가 적용이 안 될까?

다음과 같은 구조의 React 컴포넌트가 있다고 가정해 보겠습니다

<div className={cx(styles.shortsArea)}>
  <Flag type={"shutter"} />
  <Thumbnail src={thumUrl} alt={""} />
  <div className={cx(styles.videoBox)}>
    <video ...></video>
  </div>
  <div className={cx(styles.desc)}>{description}</div>
</div>

여기서 Thumbnail에 스타일을 적용하고 싶은데, 아래처럼 작성한 CSS가 전혀 먹히지 않았습니다.

.thumbnail {
  bottom: 40px;
}

그런데 신기하게도 다음과 같이 수정하면 스타일이 정상적으로 적용됩니다.

.shortsArea {
  [class*="thumbnail"] {
    bottom: 40px;
  }
}

왜 이걸 쓰는 경우가 생기냐면…

Thumbnail 컴포넌트가 외부에서 className을 전달받지 않도록 만들어져 있을 때가 있습니다. 혹은 외부 라이브러리에서 제공하는 컴포넌트라 우리가 내부 코드를 수정할 수 없는 경우도 있죠. 또 어떤 경우엔 단순히 컴포넌트를 열어 className을 추가하는 게 번거롭거나, 프로젝트 구조상 컴포넌트 내부를 직접 건드리는 걸 피하고 싶을 때도 있습니다. 이런 상황에서는 어쩔 수 없이 트릭성 방법을 쓰게 되는데, 이 포스트에서 다룬 [class*="thumbnail"] 같은 CSS 선택자가 바로 그런 경우에 사용되는 방법입니다.

스타일이 안 먹는 진짜 이유

예를 들어 React 컴포넌트 Thumbnail이 외부에서 className을 전달받지 않도록 아래와 같이 정의되어 있다면, 문제가 발생할 수 있습니다. 이렇게 구성된 경우 실제 HTML로 렌더링 될 때 <img> 태그에는 클래스 속성이 포함되지 않게 되고, 그 결과 .thumbnail로 지정한 CSS도 적용되지 않습니다. 결국 스타일이 적용되지 않았던 이유는 클래스 자체가 HTML에 존재하지 않았기 때문입니다.

interface ThumbnailProps {
  src: string;
  alt: string;
}

const Thumbnail = ({ src, alt }: ThumbnailProps) => {
  return <img src={src} alt={alt} />;
};

그런데 CSS Modules나 styled-components를 사용하면 클래스명이 예를 들어 다음과 같이 자동 생성됩니다.

<img class="Thumbnail_thumbnail__a3Xk2" />

이때 [class*="thumbnail"] 선택자는 "thumbnail"이라는 문자열이 클래스명에 포함돼 있으므로, 우연히 스타일이 적용됩니다.
즉, 이건 엄밀히 말해 트릭입니다. 클래스명이 바뀌거나 컴파일 방식이 바뀌면 언제든지 깨질 수 있습니다.

React에서 스타일 제대로 먹이는 법

정석은 단순합니다: className을 명시적으로 넘기세요.

interface ThumbnailProps {
  src: string;
  alt: string;
  className?: string; //   className 추가
}

const Thumbnail = ({ src, alt, className }: ThumbnailProps) => {
  return <img src={src} alt={alt} className={className} />;
};

이렇게 하면 .thumbnail 스타일이 정확하게 적용됩니다.

<Thumbnail src={thumUrl} alt="" className={styles.thumbnail} />

우연에 의존한 스타일 적용은 언젠가 깨질 폭탄입니다.
특히 CSS Modules, styled-components, tailwind 등 자동 클래스명 체계를 사용하는 경우에는 명시적인 className 전달이 필수입니다. 트릭을 알아두는 건 좋지만, 명시적이고 유지보수를 위해 항상 정석을 먼저 고려하세요.

[Terminal] nvm 설치 방법 및 오류 해결 하기

dev-chim.tistory.com

[VSCode] 초보자를 위한 VSCode 단축키 가이드: 빠르고 효율적인 개발을 위해

VSCode는 Microsoft에서 개발한 가벼우면서 강력한 오픈 소스 코드 편집기로, 다양한 플랫폼에서 널리 사용되고 있습니다. 이 글에서는 VSCode의 핵심 기능 중 하나인 단축키 설정하는 방법에 대해 다

dev-chim.tistory.com

Array APIs - indexOf(), lastIndexOf(), includes()

indexOf : 특정한 요소의 위치를 찾을 때 indexOf(searchElement: T, fromIndex?: number): number; /** * Returns the index of the first occurrence of a value in an array. * @param searchElement The value to locate in the array. * @param fromIndex Th

dev-chim.tistory.com

간단하게 Vite로 프로젝트 생성하는 방법

dev-chim.tistory.com

[macOS] Mac에서 QuickTime Player로 화면 녹화하는 간단한 가이드 및 팁

Mac OS에서 기본적으로 제공되는 QuickTime Player를 사용하여 화면을 기록하는 방법에 대해 알아보겠습니다. QuickTime Player는 모든 Mac에 무료로 포함되어 있어 사용자들이 간편하게 화면을 녹화하고

dev-chim.tistory.com

[CSS/SCSS] React에서 Swiper 스타일이 안 먹힐 때 – .swiper 대신 :global(.swiper)를 써야 하는 이유

chim — Wed, 16 Apr 2025 11:11:06 +0900

리액트에서 Swiper 라이브러리를 사용할 때, SCSS로 커스텀 스타일을 주려는데 스타일이 전혀 적용되지 않았던 경험, 혹시 있으신가요?

이 문제는 SCSS 모듈(CSS Modules) 때문에 발생합니다. 그 이유와 해결 방법에 대해서 알아봅시다.

문제의 원인: SCSS Modules의 클래스 네이밍 방식

SCSS 모듈을 사용하면 클래스명은 로컬 스코프(local scope)로 변환됩니다. 즉, 아래처럼 작성한 .swiper 클래스는 실제 HTML에선 swiper_xyz123처럼 바뀝니다.

하지만 Swiper 라이브러리는 HTML을 렌더링할 때 순수한 전역 클래스명인 .swiper를 사용합니다.
결과적으로, SCSS 모듈에서 정의한 스타일은 Swiper의 클래스에 적용되지 않는 거예요.

해결 방법: :global()을 사용하자

SCSS 모듈 안에서도 전역 클래스명을 그대로 적용하려면 :global()을 써야 합니다.

/* Swiper.module.scss */

:global(.swiper) {
  width: 100%;
  background: red;
}

이렇게 작성하면 Swiper가 렌더링하는 .swiper 요소에 스타일이 정확히 적용됩니다.

추가 팁: Swiper 내부 요소 커스터마이징

Swiper는 .swiper, .swiper-slide, .swiper-button-prev, .swiper-pagination 등 다양한 클래스명을 사용해요.
이런 클래스들에도 동일하게 :global을 적용하면 커스터마이징이 가능합니다.

:global(.swiper-slide) {
  padding: 10px;
}

:global(.swiper-button-prev),
:global(.swiper-button-next) {
  color: #000;
}

Swiper 커스터마이징 시 꼭 알아야 할 포인트

SCSS 모듈을 사용할 때 Swiper의 기본 클래스명인 .swiper, .swiper-slide 등에 스타일을 적용하려면 :global()을 반드시 사용해야 합니다. SCSS 모듈은 클래스명을 자동으로 고유화하기 때문에, 그냥 .swiper라고 작성하면 Swiper가 생성한 실제 DOM 클래스와 일치하지 않아 스타일이 적용되지 않습니다. 반면, 일반 SCSS 파일을 사용할 경우에는 이런 문제가 발생하지 않기 때문에 그대로 클래스명을 써도 무방합니다. Swiper를 커스터마이징할 때 어떤 방식으로 스타일을 관리하고 있는지에 따라, 적절히 :global()을 활용하는 것이 중요합니다.

이렇게 SCSS 모듈을 사용할 때 Swiper의 전역 클래스에 :global()을 꼭 써야 스타일이 제대로 적용되는 이유에 대해 알아보았습니다.

[Git] git rebase에서 충돌이 날 때 대처법 (feat. 커밋 메시지 수정)

dev-chim.tistory.com

[Javascript] e.target vs e.currentTarget : 웹 개발자가 알아야 할 이벤트 객체의 중요한 속성

브라우저에서 이벤트가 발생하면 해당 이벤트에 대한 정보를 담은 이벤트 객체(event)가 생성됩니다. 이 객체는 다양한 정보와 메서드를 제공하며, 이벤트 핸들러 내에서 이를 활용하여 작업을

dev-chim.tistory.com

[Utility] 구독 없이 바로 사용 가능한 무료 온라인 디자인 툴 : Photopea(포토피아)

포토피아(Photopea)에 대해서 들어보셨나요? 오늘은 이 인기 있는 온라인 이미지 편집 도구에 대해 알아보겠습니다. 포토피아는 Adobe Photoshop과 유사한 기능을 무료로 제공하는데요. 인터넷 브라우

dev-chim.tistory.com

[macOS] 화면 공간을 더 넓게 사용하는 방법은?

사용자 맞춤형으로 작업 습관과 선호에 따라 화면 공간을 더욱 효율적으로 활용할 수 있습니다. 그와 관련하여 몇 가지 방법에 대해서 소개하겠습니다. 1. Dock bar 가리기 아무래도 작업할 때는

dev-chim.tistory.com

유용한 터미널 명령어

자주 사용하는 터미널 CLI(Command Line Interface)에 대해서 알아봅시다. pwd 현재 경로 출력하기 pwd #현재 경로 출력 cd 디렉터리로 이동하기 cd #홈 이동 cd ../ #이전 디렉토리 이동 cd ../../ #이전 이전 디

dev-chim.tistory.com

[AI] 스마트스토어 & 쿠팡 셀러 주목! AI로 상세페이지 5분 만에 완성하기 (제디터 AI)

chim — Thu, 3 Apr 2025 16:01:20 +0900

쇼핑몰 운영자라면 상세페이지 제작이 필수적이지만, 시간과 비용이 많이 듭니다. 이를 해결하기 위해 가비아(Gabia)에서 개발한 제디터 AI가 등장했습니다. 이 AI 도구는 상품 정보를 입력하면 자동으로 상세페이지를 생성해 주는 강력한 기능을 제공합니다. 이번 포스팅에서는 제디터 AI를 활용하는 방법을 단계별로 알아보겠습니다.

제디터 AI 시작하기

먼저 제디터 AI 사이트에 접속하여 회원가입을 합니다. 이후 로그인하면 AI 상세페이지 생성 기능을 사용할 수 있습니다.

AI 기반 상품상세페이지 생성 에디터

최신 AI 기술로 상품 상세 페이지를 몇 분 안에 생성하세요. AI 에디터는 마케팅 콘텐츠 제작을 간소화하고 창의적인 디자인을 가능하게 합니다. 지금 시작해 보세요!

aieditor.gabia.com

요금제 및 무료 체험

무료 체험 혜택도 제공하니, 먼저 이용해 보시길 추천드립니다.
제디터 AI는 Free, Basic, Advanced, Premium, Enterprise 요금제를 제공합니다. 각 요금제별 혜택은 다음과 같습니다.

출처 : 제디터 AI > 요금제 안내

회원가입 및 로그인

무료신청하기를 통해 서비스를 체험해 보겠습니다. 우선 가비아 계정이 필요합니다.

1. 회원가입을 하세요.

회원가입 페이지

2. 신청하기 버튼을 클릭합니다.

신규 신청하기 페이지

3. 약관 동의를 체크하시고 다음 단계 버튼을 클릭합니다.

신청 정보입력 페이지

4. 결제가 성공적으로 완료되었습니다.

정보 확인 페이지

상세페이지 제작하기

아래의 제디터 AI 바로가기 링크를 클릭하세요.

AI 기반 상품상세페이지 생성 에디터

geditor.gabia.com

제디터 AI는 사용자가 입력한 상품 정보를 바탕으로 자동으로 최적화된 상세페이지를 생성하는 AI 기반 편집 도구입니다. 이를 통해 디자인 경험이 없는 사용자도 손쉽게 고품질의 상세페이지를 제작할 수 있습니다.

제디터 화면

상품 정보 입력하기

1. 상품명: 상세페이지에 표시될 상품명을 입력합니다.
2. 상품 페이지 주소: 기존 상품 페이지가 있다면 URL을 입력하여 AI가 참고할 수 있도록 합니다.
3. 사진: 상품 이미지를 업로드하면 AI가 더욱 정확한 상세페이지를 생성하는 데 도움을 줍니다.
4. 무료 이용권 클릭하고, 생성 버튼 클릭하면 상세페이지가 생성됩니다.

상품 정보 입력 > 생성 버튼 클릭

텍스트 및 이미지 수정

AI가 생성한 상세페이지는 기본적으로 템플릿이 적용됩니다. 원하는 스타일의 템플릿을 선택하여 페이지의 디자인을 조정할 수 있습니다.
상품 설명 문구를 사용자의 브랜드에 맞게 수정하고, 필요한 경우 이미지를 추가하거나 교체하여 더욱 매력적인 상세페이지를 만들 수 있습니다.

제디터 AI로 생성된 상세 페이지

제디터 AI 활용 팁

✅ 키워드를 신중하게 선택하세요 – AI는 입력된 키워드를 바탕으로 상세페이지를 제작하므로, 상품의 핵심 특징을 정확히 반영하는 키워드를 넣는 것이 중요합니다.

✅ 생성된 내용을 검토하고 수정하세요 – AI가 자동으로 생성한 문구가 100% 완벽하지 않을 수 있으므로, 브랜드 톤에 맞게 조정하는 것이 좋습니다.

✅ 다양한 템플릿을 활용하세요 – 제품에 따라 가장 적합한 디자인을 선택하여 경쟁력 있는 상세페이지를 제작할 수 있습니다.

제디터 AI 메뉴얼

더 자세한 사용 방법과 기능에 대한 설명은 제디터 AI 메뉴얼을 참고하세요.

제디터 사용자 매뉴얼

manual.geditor.co.kr

제디터 AI는 쇼핑몰 운영자, 상세페이지 제작 시간이 부족한 판매자, 디자인 경험이 없는 초보자에게 매우 유용한 도구입니다. 빠르고 효율적으로 상세페이지를 만들고 싶은 분들에게 강력히 추천합니다.

[macOS] 메모(Memo)에서 PDF 파일로 변환하는 간단 방법

dev-chim.tistory.com

[Utility] 쉽고 간편하게 디자인하기 : 캔바(Canva) 사용법

dev-chim.tistory.com

[AI] 손필기는 이제 그만! 클로바 노트(CLOVA Note)의 음성 메모 혁신을 경험하세요!

dev-chim.tistory.com

[HTML] 반응형으로 이미지맵 생성하는 방법

반응형으로 이미지맵을 생성하는 방법을 공유하겠습니다. 적응형 이미지맵 처리적응형으로 이미지맵을 생성하는 방법은 이전 포스팅 참고하시면 되겠습니다. [HTML] Image Map, 이미지맵으로 이미

dev-chim.tistory.com

[Utility] Snipaste - 무료 캡쳐 도구, 핀(Pin) 고정, 클립보드(Clipboard), 색상 추출(Color Picker)

스니페이스트(Snipaste)는 화면 캡쳐부터 다양한 편집 기능을 제공하여 작업 효율성을 높여주는 도구입니다. 가장 매력적인 기능으로 핀 고정이 있고, 스크린샷을 저장할 수 있음은 물론이고, 클

dev-chim.tistory.com

[Git] git rebase에서 충돌이 날 때 대처법 (feat. 커밋 메시지 수정)

chim — Sat, 29 Mar 2025 12:00:09 +0900

개발을 하다 보면 git rebase를 수행할 때 충돌이 발생하거나, 예상치 못한 커밋 메시지 편집 화면이 나타나는 경우가 있습니다. 이번 포스팅에서는 git rebase 중 충돌 해결 및 커밋 메시지 편집 방법에 대해 알아보겠습니다.

git rebase 진행 중 충돌 발생

예를 들어, git rebase를 실행한 후 다음과 같은 메시지를 받았다고 가정해 봅시다.

현재 'feature' 브랜치를 'ab568b4fb5' 위로 리베이스하는 중입니다.

커밋할 변경 사항:
      수정함:        src/modules/components/Community/Community.tsx

이는 리베이스 중 하나의 커밋이 적용되었고, 남은 커밋이 몇 개 더 있다는 의미입니다. 이 과정에서 충돌이 발생하면 Git이 이를 해결하도록 요구합니다.

Git 충돌 해결 방법

1. git status를 실행하여 충돌이 발생한 파일을 확인합니다.

git status

2. 충돌이 발생한 파일을 열어 수동으로 수정한 후 저장합니다.

3. 수정이 완료되면 해당 파일을 git add 명령어로 스테이징 합니다.

git add <충돌이 발생한 파일>

4. 변경 사항을 스테이징한 후, git rebase --continue 명령어를 실행합니다.

git rebase --continue

커밋 메시지 편집 화면이 나타날 경우

git rebase --continue를 실행했을 때, 아래와 같은 메시지가 나타나면서 텍스트 에디터가 열릴 수 있습니다.

# 변경 사항에 대한 커밋 메시지를 입력하십시오. '#' 문자로 시작하는 줄은 무시되고, 메시지를 입력하지 않으면 커밋이 중지됩니다.

해결 방법

커밋 메시지를 수정할 경우, 원하는 메시지로 변경 후 저장합니다.
커밋 메시지를 변경하지 않을 경우, 그대로 저장 후 닫습니다.

텍스트 에디터별 저장 방법

Vim: ESC → :wq → Enter

Nano: Ctrl + X → Y → Enter

이후, 리베이스가 정상적으로 계속 진행됩니다.

리베이스 진행 상태 확인

다음 커밋을 적용하는 과정에서 또 다른 충돌이 발생할 수도 있습니다. 따라서 git status를 실행하여 현재 상태를 확인하는 것이 좋습니다.

git status

만약 모든 충돌이 해결되었다면, git rebase --continue를 반복하여 리베이스를 완료할 수 있습니다.

리베이스 도중 문제가 발생했을 때 복구 방법

리베이스 도중 문제가 발생하여 되돌리고 싶다면 다음 명령어를 사용할 수 있습니다.

git rebase --abort

이 명령어를 실행하면 리베이스가 중단되고, 원래 상태로 돌아갑니다.

이렇게 이번 포스팅에서 Git Rebase 중 충돌 해결 및 커밋 메시지 편집 방법에 대해 알아보았습니다.

[Git] git rebase 취소하는 방법에 대해서 알아보자 (feat. git reflog, git reset)

git rebase는 커밋 히스토리를 정리하거나 수정할 때 유용한 명령어입니다. 하지만 실수로 잘못 진행하거나 충돌이 발생했을 때 이를 취소하고 원래 상태로 되돌리고 싶을 수 있습니다. 이번 포스

dev-chim.tistory.com

[Figma] 디자인 협업의 핵심 팁(Tip) : 피그마를 활용한 효율적인 공유 전략

피그마를 통해 팀원들과 효과적으로 협업하고 공유할 수 있는 몇 가지 주요 기능들에 대해서 알아봅시다. 공유 링크상단 메뉴바 우측을 보시면 Share(공유하기) 버튼을 클릭해 주세요. Copy

dev-chim.tistory.com

[CSS] 노치(Notch)와 홈 바(Home Bar)에 대응하는 CSS 환경 변수(env()) 활용 방법

모바일 기기의 노치(Notch) 디자인과 홈 바(Home Bar)는 iPhone X 디바이스 이후로 흔히 볼 수 있는 특징 중 하나로, 디스플레이의 상단과 하단에 존재하는 공간을 차지합니다. 이러한 특수한 디자인 요

dev-chim.tistory.com

[Safari] 웹접근성 향상을 위한 Tab 키 하이라이트 표시 설정 방법

웹접근성을 높이기 위해 키보드 탐색을 사용하는 사용자들을 위한 중요한 기능 중 하나는 Tab 키를 통한 요소 간의 이동입니다. 이를 시각적으로 확인하기 위한 하이라이트 표시 설정에 대해 알

dev-chim.tistory.com

[git] Github Desktop으로 아주 쉽게 저장소(repository)를 로컬에 클론(clone)하기

Github Desktop으로 아주 쉽게 저장소(repository)를 로컬에 클론(clone)하는 방법에 대해서 알아보겠습니다. Github Desktop 사이트 바로가기 Github에서 제공하는 애플리케이션으로 GUI(Graphical User Interface)로

dev-chim.tistory.com

[CSS] 입력폼에서 readonly와 disabled, 언제 어떻게 쓰고 스타일링할까?

chim — Fri, 28 Mar 2025 12:00:14 +0900

웹 개발을 하다 보면 <input type="text"> 요소에 이미 값이 들어가 있는 상태에서 특정한 스타일을 적용해야 하는 경우가 있습니다. 예를 들어, 사용자가 직접 입력한 값과 미리 설정된 값을 시각적으로 구분해야 하거나, 읽기 전용(readonly) 또는 비활성화(disabled) 상태로 설정해야 할 수도 있죠. 이번 포스팅에서는 readonly 및 disabled 속성의 차이와 CSS 스타일링 방법에 대해서 알아보겠습니다.

readonly와 disabled 속성의 차이

readonly가 적용되는 태그

readonly는 사용자가 값을 수정할 수 없지만, 해당 요소의 값은 폼에 포함되는 속성입니다. 이 속성은 텍스트 입력 요소에만 사용 가능하며, 사용자가 입력을 변경할 수 없도록 하면서도 해당 값은 폼 제출 시 포함됩니다.

✅ 적용 가능한 태그

<input type="text">, <input type="password">, <input type="email">, <input type="number"> 등
<textarea>

❌ 적용되지 않는 태그

<input type="checkbox">, <input type="radio">, <input type="button">, <input type="submit">, <input type="file">
<select>, <button>
<fieldset>, <option>, <optgroup> 등

<input type="text" value="홍길동" readonly />
<textarea readonly>이 텍스트는 수정할 수 없습니다.</textarea>

disabled가 적용되는 태그

disabled는 해당 요소를 완전히 비활성화하고, 폼 제출 시에도 제외되는 속성입니다. 이 속성은 대부분의 폼 요소에 적용할 수 있으며, 사용자가 값을 입력하거나 클릭할 수 없게 됩니다. 또한, disabled 속성이 적용된 요소는 폼 제출 시 그 값이 포함되지 않습니다.

✅ 적용 가능한 태그

<input> (모든 타입)
<textarea>
<select>
<button>
<fieldset>
<option>, <optgroup>

<input type="text" value="홍길동" disabled />
<select disabled>
  <option>선택할 수 없음</option>
</select>
<button disabled>클릭할 수 없음</button>

readonly와 disabled 상태에서 스타일 적용하기

readonly 속성을 활용한 스타일링

input:readonly 속성을 사용하면 값이 폼에 포함되지만 사용자는 편집할 수 없습니다.

input[readonly] {
  background-color: #f8f8f8;
  color: #999;
  border: 1px solid #ddd;
  cursor: default;
}

disabled 속성을 활용한 스타일링

disabled는 폼 제출 시 값이 포함되지 않으며, 클릭이나 포커스도 불가능합니다.

input:disabled {
  background-color: #eee;
  color: #aaa;
  border: 1px solid #ccc;
  cursor: not-allowed;
}

이렇게 이번 포스팅에서는 readonly 및 disabled 속성의 차이와 CSS 스타일링 방법에 대해서 알아보았습니다.

[Git] PR 커밋 해시를 활용한 브랜치 생성 : 쉽고 간단한 가이드

dev-chim.tistory.com

[Safari] 사파리 브라우저로 iPhone 웹 페이지 디버깅하는 방법 (feat. 웹 인스펙터)

dev-chim.tistory.com

[firebase] 구글 Firebase로 무료 웹호스팅하는 방법에 대해서 알아보자

이전 포스팅에서 github pages로 간단하게 사이트 url을 생성해 본 적이 있었는데요. [git] github pages로 나만의 포트폴리오 웹페이지 배포해 보기 [git] github pages로 나만의 포트폴리오 웹페이지 배포해

dev-chim.tistory.com

[HTML] 반응형으로 이미지맵 생성하는 방법

dev-chim.tistory.com

Vite에서 모듈들 간단하게 설치해서 사용하기 (feat. sass) - 1편

프로젝트 생성 초기 폴더 구조 Vite로 프로젝트 생성 시, 초기 폴더 구조입니다 1. SASS를 설치하기 npm i sass -D package.json 파일에 sass가 설치되어 있는 것을 확인할 수 있다 SCSS로 스타일을 작성할 것

dev-chim.tistory.com

[Javascript] 스크롤 위치에 맞춰 팝업을 화면 중앙에 띄우기

chim — Thu, 27 Mar 2025 13:00:56 +0900

팝업을 화면 중앙에 띄우는 방법은 매우 직관적이지만, 스크롤 위치에 따라 팝업의 위치가 달라져야 할 때는 조금 더 신경을 써야 합니다. 이번 포스팅에서는 스크롤 위치에 맞춰 팝업을 화면 중앙에 띄우는 방법을 자바스크립트를 이용해 구현하는 방법을 알아보겠습니다.

팝업(popup) CSS

팝업을 화면 중앙에 띄우는 기본적인 스타일입니다. transform: translate(-50%, -50%);는 팝업의 크기에 관계없이 정확히 중앙에 배치되도록 해줍니다.

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  width: 300px;
  height: 200px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  display: none; /* 기본적으로 숨김 */
}

스크롤에 따라 중앙 위치 조정하기

스크롤을 내리거나 올릴 때 팝업이 화면 중앙에 위치하도록 하려면, 자바스크립트를 사용하여 스크롤 이벤트에 맞춰 팝업의 위치를 동적으로 업데이트해야 합니다.

function adjustPopupPosition() {
  const popup = document.querySelector('.popup');
  
  // 뷰포트의 높이에서 팝업의 높이를 빼고, 그 절반을 계산
  const popupHeight = popup.offsetHeight;
  const windowHeight = window.innerHeight;
  
  // 스크롤 위치에 따라 팝업의 top 값을 조정
  const scrollTop = window.scrollY;
  const topPosition = scrollTop + (windowHeight - popupHeight) / 2;
  
  popup.style.top = `${topPosition}px`;
}

// 페이지 로딩 시와 스크롤 시마다 팝업 위치 조정
window.addEventListener('scroll', adjustPopupPosition);
window.addEventListener('resize', adjustPopupPosition);

팝업 열기 및 닫기

팝업을 열고 닫는 동작을 구현하기 위해서는 팝업의 display 속성을 조정해야 합니다. 이를 위해 버튼 클릭 시 팝업을 표시하고, 다시 클릭하면 닫히도록 할 수 있습니다.

function togglePopup() {
  const popup = document.querySelector('.popup');
  
  if (popup.style.display === 'none' || !popup.style.display) {
    popup.style.display = 'block';
    adjustPopupPosition(); // 팝업이 열릴 때 바로 위치를 맞춤
  } else {
    popup.style.display = 'none';
  }
}

// 버튼 클릭 시 팝업 열기/닫기
document.querySelector('.popup-toggle-btn').addEventListener('click', togglePopup);

전체 코드 예시

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>스크롤 위치에 맞춘 팝업</title>
  <style>
    .popup {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: white;
      width: 300px;
      height: 200px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      padding: 20px;
      display: none;
    }
    .popup-toggle-btn {
      position: fixed;
      bottom: 20px;
      right: 20px;
      padding: 10px 20px;
      background-color: #007bff;
      color: white;
      border: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <button class="popup-toggle-btn">팝업 열기/닫기</button>
  <div class="popup">
    <h2>팝업 내용</h2>
    <p>여기에 팝업 내용이 들어갑니다.</p>
  </div>

  <script>
    function adjustPopupPosition() {
      const popup = document.querySelector('.popup');
      const popupHeight = popup.offsetHeight;
      const windowHeight = window.innerHeight;
      const scrollTop = window.scrollY;
      const topPosition = scrollTop + (windowHeight - popupHeight) / 2;
      popup.style.top = `${topPosition}px`;
    }

    function togglePopup() {
      const popup = document.querySelector('.popup');
      if (popup.style.display === 'none' || !popup.style.display) {
        popup.style.display = 'block';
        adjustPopupPosition();
      } else {
        popup.style.display = 'none';
      }
    }

    window.addEventListener('scroll', adjustPopupPosition);
    window.addEventListener('resize', adjustPopupPosition);
    document.querySelector('.popup-toggle-btn').addEventListener('click', togglePopup);
  </script>
</body>
</html>

이 방법을 통해 스크롤 위치에 맞춰 팝업을 화면 중앙에 띄울 수 있습니다. 사용자가 페이지를 스크롤하거나 창 크기를 변경할 때마다 팝업이 중앙에 정확히 위치하게 되어, 보다 직관적인 사용자 경험을 제공할 수 있습니다.

[HTML] video vs iframe, 어떤 것이 더 적합할까?

dev-chim.tistory.com

Array APIs - find(), findIndex(), filter(), map(), some(), every(), reduce(), sort()

find : 배열을 순회하며 요소들 중, 조건에 만족하는 첫 번째 요소만 반환 find(predicate: (this: void, value: T, index: number, obj: T[]) => value is S, thisArg?: any): S | undefined; find(predicate: (value: T, index: number, obj: T[]

dev-chim.tistory.com

[npm] npm 버전 확인, 초기화, 설치 및 옵션, 삭제 등 기본 사용법

dev-chim.tistory.com

[Utility] Microsoft Designer로 쉽게 디자인하기

dev-chim.tistory.com

[CSS] 유튜브(Youtube) 영상을 비율 유지한 채 반응형으로 삽입하는 방법

유튜브(Youtube) 영상을 비율 유지한 채 반응형으로 삽입하는 방법에 대해서 알아보겠습니다. iframe 코드 복사하기 데모 영상으로 Google Developers의 영상으로 연습해 보았습니다. 1. 공유 버튼을 클릭

dev-chim.tistory.com

[CSS] CSS만으로 라디오 버튼 체크 시 요소 보이게 하기 (display: block)

chim — Wed, 26 Mar 2025 15:09:45 +0900

웹사이트에서 input[type="radio"]가 체크되었을 때 특정 요소를 보이게 하려면 CSS만으로도 쉽게 구현할 수 있습니다. 이번 포스팅에서는 :checked 가상 클래스와 + 및 ~ 형제 결합자(Combinator)를 활용하는 방법에 대해서 알아보겠습니다.

기본 예제: + (인접 형제 선택자) 사용하기

input[type="radio"]:checked + .content는 체크된 input 바로 다음에 오는 .content 요소를 선택하여 display: block;으로 변경합니다.
* 주의할 점은 +는 인접한 형제 요소만 선택할 수 있기 때문에, 중간에 다른 요소가 있으면 .content에 스타일이 적용되지 않습니다.

<label>
  <input type="radio" name="toggle" id="radio1">
  옵션 선택
</label>
<div class="content">이 내용이 표시됩니다!</div>

<style>
  .content {
    display: none;
  }

  input[type="radio"]:checked + .content {
    display: block;
  }
</style>

~ (일반 형제 선택자) 사용하기

+ 선택자는 바로 다음 형제 요소만 선택할 수 있는 반면, ~ 선택자는 같은 부모 안에 있는 모든 뒤에 나오는 형제 요소를 선택할 수 있습니다.
input[type="radio"]:checked ~ .content는 같은 부모 요소 내에서 input 뒤에 있는 모든 .content 요소를 선택하여 표시합니다. 따라서 중간에 다른 요소가 있어도 정상적으로 동작하며, 보다 유연한 스타일링이 가능합니다.

<div>
  <input type="radio" id="radio1" name="toggle">
  <label for="radio1">옵션 1</label>
  
  <p>이 요소가 중간에 있음</p>
  
  <div class="content">이 내용이 표시됩니다!</div>
</div>

<style>
  .content {
    display: none;
  }

  input[type="radio"]:checked ~ .content {
    display: block;
  }
</style>

언제 + 와 ~ 를 사용할까?

+를 사용할 때 → input 바로 다음 요소를 표시해야 할 때
~를 사용할 때 → input과 .content 사이에 다른 요소가 있어도 적용되길 원할 때

여러 개의 라디오 버튼으로 콘텐츠 변경하기

라디오 버튼을 여러 개 만들어 하나의 name 그룹으로 묶으면, 체크된 버튼에 따라 특정 .content만 표시할 수 있습니다. 이때 + label + .content를 사용하면 라벨 다음에 나오는 .content 요소를 선택하여 스타일을 적용할 수 있습니다.

<input type="radio" name="toggle" id="radio1">
<label for="radio1">옵션 1</label>
<div class="content">옵션 1 내용</div>

<input type="radio" name="toggle" id="radio2">
<label for="radio2">옵션 2</label>
<div class="content">옵션 2 내용</div>

<style>
  .content {
    display: none;
  }

  input[type="radio"]:checked + label + .content {
    display: block;
  }
</style>

CSS만으로도 간단히 탭 메뉴 구현!

위의 방법을 활용하여 탭 메뉴를 CSS만으로 구현할 때도 유용하게 사용할 수 있습니다.

각 탭을 input[type="radio"]로 만들고, 탭에 해당하는 콘텐츠를 .content로 지정하면 클릭할 때마다 특정 콘텐츠만 보이도록 설정할 수 있습니다.

<div class="tabMenu">
  <input type="radio" name="tab" id="tab1" checked>
  <label for="tab1">탭 1</label>
  <div class="content">탭 1의 내용</div>
  
  <input type="radio" name="tab" id="tab2">
  <label for="tab2">탭 2</label>
  <div class="content">탭 2의 내용</div>
</div>

<style>
  .content {
    display: none;
  }
  
  input[type="radio"]:checked + label + .content {
    display: block;
  }
</style>

CSS만으로 라디오 버튼을 이용해 요소를 보이게 하는 방법은 웹 개발에서 유용한 기술입니다. +와 ~ 선택자를 적절히 활용하면, 구조에 따라 보다 유연하고 효율적인 스타일링이 가능합니다. 이를 통해 간단한 탭 메뉴 구현이나 다양한 콘텐츠 표시를 CSS만으로 쉽게 활용해 보세요!

[Git] git rebase 취소하는 방법에 대해서 알아보자 (feat. git reflog, git reset)

dev-chim.tistory.com

[macOS] Xcode 시뮬레이터를 이용한 웹 페이지 디버깅 방법

dev-chim.tistory.com

[Server] 외부에서 파일을 보다 안전하게 공유하는 방법 (feat. Synology Nas Server)

일을 하다 보면 잠시 자리를 비우는 동안 업무 요청사항이 올 때가 있습니다. 그럴 때마다 바로바로 대응을 해줘야 하는 경우에 마음이 급할 때가 있지요 이런 상황에 외부에서 파일을 보다 안

dev-chim.tistory.com

[Javascript] e.target vs e.currentTarget : 웹 개발자가 알아야 할 이벤트 객체의 중요한 속성

dev-chim.tistory.com

[AI] 1분이면 가능! Gamma로 빠르고 멋진 PPT와 웹사이트 제작하기

현대사회에서는 빠르게 변화하는 환경에서 새로운 아이디어를 신속하게 전달하는 것이 중요합니다. 이를 위해 AI 생성을 기반으로 하는 Gamma는 간편한 인터페이스를 제공하여 PPT, 문서, 웹사이

dev-chim.tistory.com

[Git] git rebase 취소하는 방법에 대해서 알아보자 (feat. git reflog, git reset)

chim — Thu, 19 Dec 2024 22:18:32 +0900

git rebase는 커밋 히스토리를 정리하거나 수정할 때 유용한 명령어입니다. 하지만 실수로 잘못 진행하거나 충돌이 발생했을 때 이를 취소하고 원래 상태로 되돌리고 싶을 수 있습니다. 이번 포스팅에서는 git rebase를 취소하는 방법과 상황별 해결책을 정리했습니다.

git rebase 취소하기

Rebase 진행으로 충돌이 발생하여 더 이상 진행을 원하지 않을 경우, 아래 명령어를 사용해 Rebase를 완전히 취소할 수 있습니다.

git rebase --abort

git reflog 분석 및 상태 되돌리기

Rebase가 이미 완료된 경우, 이전 상태로 복구하려면 우선 git reflog를 통해 HEAD가 이동한 모든 기록을 확인합니다.

1. 현재 브랜치의 커밋 기록 확인

git reflog

주어진 git reflog 출력은 시간순으로 가장 최근 작업이 위쪽에 위치합니다. 각 항목은 HEAD의 이동 기록을 나타내며, 가장 최근 상태부터 과거로 거슬러 올라갑니다.

...
5dc89caf4b6 (origin/feature/qa7-base) HEAD@{9}: rebase (start): checkout origin/feature/qa7-base
c6519bd8940 (origin/feature/moloco-add) HEAD@{10}: checkout: moving from dev to feature/moloco-add
...

HEAD@{9} : origin/feature/qa7-base 브랜치로 rebase를 시작한 상태입니다.
HEAD@{10} : dev 브랜치에서 feature/moloco-add로 체크아웃한 상태입니다. rebase 시작하기 전 상태입니다.

2. 이전 상태로 복구
git reset --hard는 작업 디렉토리의 모든 변경 사항을 삭제합니다. 만약 변경 사항을 잃고 싶지 않다면, 먼저 git stash를 사용해 안전하게 저장하세요.

git reset --hard HEAD@{9}

Rebase를 다시 시작하고 싶다면
현재 상태를 유지하거나, HEAD@{9}으로 돌아간 후 Rebase를 재시도할 수 있습니다.

git reset --hard HEAD@{10}

Rebase를 완전히 취소하고 싶다면
HEAD@{10}으로 돌아가면 Rebase 이전 상태로 복구됩니다.

이렇게 git rebase를 취소하는 방법과 상황별 대응에 대해서 알아보았습니다.

[Safari] 사파리 브라우저로 iPhone 웹 페이지 디버깅하는 방법 (feat. 웹 인스펙터)

dev-chim.tistory.com

[Javascript] e.target vs e.currentTarget : 웹 개발자가 알아야 할 이벤트 객체의 중요한 속성

dev-chim.tistory.com

[CSS] 노치(Notch)와 홈 바(Home Bar)에 대응하는 CSS 환경 변수(env()) 활용 방법

dev-chim.tistory.com

[firebase] 구글 Firebase로 무료 웹호스팅하는 방법에 대해서 알아보자

dev-chim.tistory.com

[CSS] 유튜브(Youtube) 영상을 비율 유지한 채 반응형으로 삽입하는 방법

dev-chim.tistory.com

[CSS] inset과 position으로 완성하는 레이아웃

chim — Sat, 7 Dec 2024 00:11:40 +0900

CSS를 다루다 보면 위치를 설정할 때 자주 사용하는 속성이 top, right, bottom, left입니다. 하지만 이 속성들을 각각 지정하다 보면 코드가 길어지고 유지보수가 어렵게 느껴질 때가 있죠. 이런 문제를 해결하기 위해 등장한 속성이 바로 inset 속성입니다. 이 포스팅에서는 inset 속성의 기본 사용법과 실전 활용 팁을 알려드리겠습니다.

inset 속성이란?

inset은 CSS에서 top, right, bottom, left를 한 번에 지정할 수 있는 단축 속성(Shorthand)입니다. 간결한 코드를 작성할 수 있도록 도와주며, 특히 레이아웃 작업 시 깔끔하고 직관적인 스타일링을 제공합니다.

element {
  inset: <top> <right> <bottom> <left>;
}

position 값별 inset 적용 가능 여부

✅ relative, absolute, fixed

inset이 적용됩니다.
각각 다음 기준으로 요소의 위치를 설정합니다.
- relative: 요소의 원래 위치에서 상대적으로 이동합니다.
- absolute: 가장 가까운 positioned 부모 요소(relative, absolute, fixed)를 기준으로 이동합니다.
- fixed: 브라우저 뷰포트(화면)를 기준으로 이동합니다.

❌ static

inset이 적용되지 않습니다.
static은 문서의 기본 흐름(normal flow)을 따르며, top, right, bottom, left, inset 등의 위치 속성이 모두 무시됩니다.

⚠️ sticky

inset이 제한적으로 작동합니다.
스크롤 시 부모 요소의 스크롤 영역 경계를 기준으로 위치를 설정합니다.
주로 inset: <top> 값이 사용됩니다. 다른 방향(right, bottom, left)은 스크롤 컨테이너와의 관계에 따라 제한적으로 작동하거나 무시될 수 있습니다.

예시 코드로 inset 속성 이해하기

1. HTML

<div class="wrap">
   <div class="box">item</div>
</div>

2. CSS

.wrap {
  position: fixed;
  height:100vh;
  inset:0;
  background-color:lightgray;
}
.box {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 200px;
  height: 200px;
  background-color: green;
  display:flex;
  align-items:center;
  justify-content:center;
}

예시코드 Preview

이렇게 inset 속성의 기본 사용법과 실전 활용 팁을 알아보았습니다.

[Terminal] nvm 설치 방법 및 오류 해결 하기

dev-chim.tistory.com

[Utility] 이미지 추출 기준이란? (feat. Figma를 활용한 이미지 추출 방법)

dev-chim.tistory.com

[Javascript] 브라우저 창 크기를 측정하는 주요 속성들에 대해서 알아보자

window.screen.width, window.screen.height, window.outerWidth, window.outerHeight, window.innerWidth, window.innerHeight, document.documentElement.clientWidth, document.documentElement.clientHeight 이러한 속성들은 모두 창의 크기를 나타내지

dev-chim.tistory.com

[CSS] 유튜브(Youtube) 영상을 비율 유지한 채 반응형으로 삽입하는 방법

dev-chim.tistory.com

[Server] QuickConnect로 외부에서 서버 접속하는 방법

QuickConnect로 외부에서 서버 접속하는 방법에 대해서 알아보겠습니다. 퇴근했는데 급하게 업무 요청이 왔을 때, 집이나 외부 환경에서 노트북과 인터넷만 있다면, 사내 서버에 접속하는 방법을

dev-chim.tistory.com

[Terminal] nvm 설치 방법 및 오류 해결 하기

chim — Thu, 5 Dec 2024 23:37:18 +0900

Node.js 버전을 관리하기 위해 많이 사용하는 nvm(Node Version Manager)을 설치하려 했으나, 터미널에서 nvm 명령어를 찾을 수 없다는 메시지가 출력되는 경우가 있습니다. 이번 포스팅에서는 nvm 설치 방법과 문제 해결 방법에 대해서 알아봅시다.

nvm 이란?

nvm(Node Version Manager)**는 Node.js의 버전을 관리하기 위한 도구입니다.
프로젝트별로 다른 Node.js 버전이 필요할 때, 손쉽게 설치, 변경, 삭제할 수 있도록 도와줍니다.

nvm 주요 명령어

설치

nvm install <version>

사용

nvm use <version>

설치된 버전 확인

nvm ls

Node.js 버전 확인

node -v

오류 1 : Node.js 버전이 맞지 않을 때 경고 메시지 확인

yarn 또는 npm을 실행할 때 아래와 같은 오류 메시지가 출력될 수 있습니다

error The engine "node" is incompatible with this module. Expected version "20.x". Got "23.1.0".

1. 프로젝트의 Node.js 버전 요구 사항 확인

package.json 파일의 engines 필드에 명시된 Node.js 버전을 확인합니다

"engines": {
  "node": "v20"
}

2. 현재 사용 중인 Node.js 버전 확인

node -v

3. nvm으로 올바른 Node.js 버전 설치

프로젝트에서 요구하는 Node.js 버전을 설치합니다

nvm install v20

설치 후, 해당 버전을 사용하도록 전환합니다

nvm use v20

오류 2 : nvm 명령어를 찾을 수 없다는 메시지

zsh: command not found: nvm 또는 bash: nvm: command not found와 같은 메시지가 출력된다면, 아래 두 가지 중 하나의 문제일 가능성이 높습니다

nvm이 설치되지 않음
nvm이 설치되었으나, 쉘 환경 설정(~/.zshrc 또는 ~/.bashrc)에 제대로 연결되지 않음

nvm 버전 전환하기

nvm 버전 및 설치 확인하기

nvm 설치

macOS/Linux
nvm 설치는 공식 스크립트를 사용하는 것이 가장 간단합니다. 터미널에서 다음 명령을 실행하세요

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

쉘 재시작

1. 환경 설정 코드 추가

설치 후, 쉘 환경 파일(~/.zshrc, ~/.bashrc, 또는 ~/.bash_profile)에 아래 내용을 추가하세요

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

2. 환경 설정 적용

쉘 설정을 재적용하려면 아래 명령을 실행하세요

source ~/.zshrc

nvm 버전 및 설치 확인

nvm 버전 번호가 출력되면 설치가 완료된 것입니다.

nvm --version

nvm 설치 완료

nvm 특정 버전 사용

개발 환경에 따라 Node.js 버전을 사용해 보세요.

nvm 특정 버전 사용

nvm은 Node.js 버전을 관리하는 필수 도구로, 다양한 프로젝트에 적합한 개발 환경을 제공합니다. 위 단계를 따라 설치하고 문제를 해결해 보세요.

[Git] GitHub에서 Squash Merge로 프로젝트 히스토리 깔끔하게 정리하기

Git의 다양한 병합(merge) 방법 중 하나인 Squash Merge에 대해 알아봅시다.Squash Merge (스쿼시 머지) 란?여러 커밋을 하나의 커밋으로 압축(squash)하여 병합하는 Git의 기능입니다. 이를 통해 개발 브랜치

dev-chim.tistory.com

[CSS] 유튜브(Youtube) 영상을 비율 유지한 채 반응형으로 삽입하는 방법

dev-chim.tistory.com

[VSCode] 초보자를 위한 VSCode 단축키 가이드: 빠르고 효율적인 개발을 위해

dev-chim.tistory.com

[Webpack] webpack.config.js, 웹팩 주요 속성 5가지(entry/output/loader/plugins/mode)

웹팩 주요 속성 5가지에 대해서 알아보도록 합시다. Webpack 이란? webpack 웹팩은 모듈 번들러입니다. 주요 목적은 브라우저에서 사용할 수 있도록 JavaScript 파일을 번들로 묶는 것이지만, 리소스나

dev-chim.tistory.com

[AI] 손필기는 이제 그만! 클로바 노트(CLOVA Note)의 음성 메모 혁신을 경험하세요!

dev-chim.tistory.com

[CSS/defect] 모바일 팝업에서 스크롤 방지 최적화: AOS와 iOS 이슈 해결 방법 (touch-action: none)

chim — Wed, 4 Dec 2024 23:48:08 +0900

overflow: hidden 대신 CSS의 touch-action: none 속성을 활용해 스크롤 방지를 구현하는 방법에 대해서 알아보겠습니다.

웹에서 팝업을 띄울 때, 배경 스크롤을 막는 것은 흔한 UX 요구사항입니다. 이를 위해 보통 overflow: hidden을 사용하지만, 이 방식은 스크롤바를 숨기고 강제로 스크롤을 차단하는 방식이라 사용자 경험에 영향을 줄 수 있습니다. 특히, 모바일 환경에서는 더 섬세한 조작이 필요합니다.

AOS와 iOS 환경에서의 팝업 스크롤 결함

1. AOS 환경에서의 문제

팝업이 열릴 때 overflow: hidden으로 인해 dim 뒤로 보이는 배경이 scrollTop: 0 위치로 초기화되는 이슈가 발생했습니다.

2. iOS에서의 문제

overflow: hidden이 적용된 상태에서도 터치 스크롤 이벤트가 실행되는 문제가 있었습니다.

위의 문제들을 해결하기 위해, 팝업을 오픈 시 현재 스크롤 위치를 유지하면서 배경을 고정하고, 터치 스크롤을 완전히 방지하는 방법에 대해서 알아봅시다.

touch-action: none;

터치 장치에서 사용자가 터치 제스처(스크롤, 줌)를 사용할 때 브라우저가 기본적으로 처리할 동작을 정의합니다. none 값은 터치 동작을 완전히 비활성화하여, 터치 입력이 스크롤을 포함한 모든 기본 동작을 차단합니다.

1. HTML

<div class="popupWrap">
    <div class="dim"></div>
    <div class="popupContainer">
      <h2>제목</h2>
      <p>본문</p>
    </div>
</div>

2. SCSS

.popupWrap {
    touch-action: none; /* 스크롤 방지 */
    overscroll-behavior: none;
    &.open {
        .dim {
            display: block;
        }
        .popupContainer {
            transform: translateY(0);
        }
    }
    .dim {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 18;
        background-color: rgba(0,0,0,0.8);
    }
    .popupContainer {
        position: fixed;
        bottom: 0;
        left: 0;
        transform: translateY(100%);
        z-index: 19;
        width: 100%;
        background-color: #fff;
        border-radius: 18px 18px 0 0;
        transition: all .3s;
    }
}

3. Javascript

const btnPopupOpen = document.querySelector('.btnPopupOpen');
const popupContainer = document.querySelector('.popupContainer');
const dim = document.querySelector('.dim');

function PopupOpen () {
    popupContainer.classList.add('open');
}
function PopupClose () {
    popupContainer.classList.remove('open');
}
    
btnPopupOpen.addEventListener('click', PopupOpen);
dim.addEventListener('click', PopupClose);

touch-action: none은 터치 기반 입력(터치스크린, 제스처 등)에 대한 제어만을 담당하기 때문에, PC 환경에서 마우스 스크롤까지 막지는 못합니다. 하지만 PC에서도 마우스 스크롤을 차단하려면 touch-action: none과 함께 다른 CSS 및 JavaScript를 활용해야 합니다.

이렇게 overflow: hidden 대신 CSS의 touch-action: none 속성을 활용해 스크롤 방지를 구현하는 방법에 대해서 알아보았습니다.

[Git] PR 커밋 해시를 활용한 브랜치 생성 : 쉽고 간단한 가이드

dev-chim.tistory.com

[Utility] 구독 없이 바로 사용 가능한 무료 온라인 디자인 툴 : Photopea(포토피아)

dev-chim.tistory.com

유용한 터미널 명령어

dev-chim.tistory.com

[Javascript] JavaScript로 스크롤 조작하기, scrollTo(), scrollBy(), scrollIntoView()

dev-chim.tistory.com

[Server] QuickConnect로 외부에서 서버 접속하는 방법

dev-chim.tistory.com

[Javascript] 직관적이고 유연한 슬라이더! Slick 슬라이더를 통해 갤러리를 구현해보세요.

chim — Wed, 4 Dec 2024 00:57:22 +0900

웹 사이트에서 이미지 갤러리나 캐러셀처럼 슬라이더가 필요하다면, Slick 플러그인으로 간단하게 구현할 수 있습니다.

slick - the last carousel you'll ever need

slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!

kenwheeler.github.io

더 자세한 내용은 Slick 공식 문서를 참조해 주세요.

Slick 플러그인 설치 및 사용법

1. Slick은 jQuery 기반 플러그인입니다. 아래 코드를 사용해 jQuery와 Slick을 설치하세요.

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.8.1/slick.css"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.8.1/slick.min.js"></script>

2. 슬라이더를 표시할 HTML 구조를 작성합니다.

<div class="slider">
    <div>Slide 1</div>
    <div>Slide 2</div>
    <div>Slide 3</div>
</div>

3. 슬라이더를 동작하게 하려면 아래처럼 JavaScript를 작성합니다.

$(document).ready(function(){
    $('.slider').slick({
        infinite: true, //슬라이더가 무한 반복될지 여부
        slidesToShow: 3, //한 화면에 표시할 슬라이드 개수
        slidesToScroll: 1, //한번에 이동할 슬라이드 개수
        autoplay: true, //자동 재생 여부
        autoplaySpeed: 2000, //자동 재생 속도(밀리초)
        arrows: true, //화살표 네비게이션 표시 여부
        dots: true, //도트 네비게이션 표시 여부
        centerMode: true, //활성화된 슬라이드를 중앙에 배치
        variableWidth: true, //슬라이드의 너비를 콘텐츠의 크기에 따라 동적으로 조정
        fade: true, //슬라이드 전환 방식을 페이드 인/아웃 효과로 변경
        cssEase: 'linear', //라이드 전환 효과의 CSS 이징(easing) 방식을 지정
        responsive: [
        {
            breakpoint: 1024, //뷰포트가 1024px 이하일 때
            settings: {
                slidesToShow: 2, 
                slidesToScroll: 1,
            }
        },
        {
            breakpoint: 768, //뷰포트가 768px 이하일 때
            settings: {
                slidesToShow: 1, 
                slidesToScroll: 1,
            }
        },
        {
            breakpoint: 480, //뷰포트가 480px 이하일 때
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1,
                dots: true, 
                arrows: false 
            }
        }
    ]
    });
});

Slick Slider에서 조건별로 다른 설정 적용하기

Slick Slider는 특정 클래스에 따라 슬라이더 설정을 다르게 적용하여 유연한 커스터마이징을 가능하게 하는 플러그인입니다.

코드 예시를 통해, 슬라이드 아이템의 개수에 따라 한 화면에 보이는 아이템 수와 정렬 방식을 다르게 설정하는 방법에 대해서 알아보겠습니다.

<ul class="list">
  <li class="item">Slide 1</li>
  <li class="item">Slide 2</li>
  <li class="item">Slide 3</li>
</ul>

<ul class="list one">
  <li class="item">Single Slide</li>
</ul>

슬라이드 아이템이 여러 개일 때는 한 화면에 2개씩 슬라이드를 표시하도록 설정합니다. 이때, 무한 스크롤 기능을 활성화하고, 좌우 화살표를 표시하여 슬라이드를 이동할 수 있게 합니다.

슬라이드 아이템이 하나일 때는 해당 슬라이드를 중앙 정렬로 표시하고, 무한 스크롤을 비활성화하고, 한 화면에 하나의 아이템만 보이도록 설정합니다.

if ( listData.length == 1) {
    $(".list").addClass("one");
} else {
    $(".list").removeClass("one");
}

$(".list").not(".one").slick({ //슬라이드 아이템이 여러 개인 슬라이더 초기화 (one 클래스를 제외)
  dots: false,
  arrows: true,
  variableWidth: true,
  infinite: true,
  slidesToShow: 2,
  slidesToScroll: 1,
});

$(".list.one").slick({ //슬라이드 아이템이 하나인 슬라이더 (one 클래스가 있는 경우) 초기화
  centerMode: true,
  centerPadding: '0px',
  dots: false,
  arrows: true,
  variableWidth: true,
  infinite: false,
  slidesToShow: 1,
  slidesToScroll: 1,
});

Slick 슬라이더는 다양한 기능과 높은 유연성으로 반응형 슬라이더를 쉽게 구현할 수 있는 강력한 플러그인입니다. 무한 스크롤, 페이드 전환, 가변 너비, 중앙 정렬 등 다양한 옵션을 지원하여 디자인 요구에 유연하게 대응합니다. 또 responsive 옵션을 통해 화면 크기에 따라 설정을 동적으로 변경할 수 있어 모바일 친화적인 슬라이더 구현이 가능합니다. 주요 브라우저와 모바일 환경에서 안정적으로 작동하며, CSS와 JavaScript를 활용한 커스터마이징도 용이합니다. 직관적이고 유연한 슬라이더! Slick 슬라이더를 통해 갤러리를 구현해 보세요.

[Git] GitHub에서 Squash Merge로 프로젝트 히스토리 깔끔하게 정리하기

dev-chim.tistory.com

[Utility] 이미지 추출 기준이란? (feat. Figma를 활용한 이미지 추출 방법)

dev-chim.tistory.com

[SCSS] 자연스러운 전환을 위한 Overlay 팝업의 Dim 영역 처리

dev-chim.tistory.com

[AI] 클로바 더빙(CLOVA Dubbing으로 전문가처럼 더빙하기 : 초보자 튜토리얼

네이버 인공지능 기술인 클로바 더빙을 통해 간편하면서도 전문적인 더빙을 무료로 사용하는 방법에 대해서 알아봅시다. 클로바 더빙(CLOVA Dubbing) 클로바 더빙은 사용자가 더빙할 내용을 입력하

dev-chim.tistory.com

유용한 터미널 명령어

dev-chim.tistory.com

[Git] PR 커밋 해시를 활용한 브랜치 생성 : 쉽고 간단한 가이드

chim — Wed, 23 Oct 2024 14:01:38 +0900

가끔 코드 리뷰나 협업 과정에서 특정 PR의 커밋 해시를 로컬 환경에서 확인해야 할 때가 있습니다. 이 글에서는 원격 저장소에서 해당 커밋을 로컬로 가져와, 그 해시를 기반으로 브랜치를 생성하는 방법을 설명하겠습니다.

git fetch로 원격 저장소 업데이트

먼저, 원격 저장소에서 최신 정보를 로컬로 가져와야 합니다. 원격 브랜치에서 최신 커밋들이 로컬에 반영되지 않은 경우가 많기 때문이죠.

git fetch origin

이 명령어는 원격 저장소(origin)에 있는 모든 브랜치와 태그 정보를 로컬에 업데이트합니다. 이렇게 하면 나중에 필요한 특정 커밋 해시도 로컬에서 접근할 수 있게 됩니다.

해당 커밋 해시가 있는지 확인하고 직접 체크아웃

먼저 해당 해시가 로컬에 존재하는지 확인하려면, git log 명령어를 사용해 특정 해시를 찾아볼 수 있습니다.

git log --all --grep=<commit-hash>

PR에서 확인하라는 커밋 해시가 있다면, 그 해시를 기반으로 바로 체크아웃할 수 있습니다. 여기서 git log 같은 커밋 검색 과정을 꼭 거칠 필요는 없습니다. 커밋 해시만 알고 있다면 바로 체크아웃해서 해당 커밋을 확인할 수 있습니다.

pull request에서 해시 복사하기

git checkout <commit-hash>

예를 들어, 커밋 해시가 8e10f21라면 다음과 같이 입력하면 됩니다

이 명령어는 해당 커밋으로 작업 디렉토리를 이동시키고, 그 상태를 로컬에서 확인할 수 있게 해 줍니다.

git checkout 8e10f21

소스트리(Source Tree)를 확인해 보면 특정 브랜치가 아닌 Detached HEAD 상태입니다.

(보통 HEAD는 브랜치를 가리키지만, 특정 커밋 해시로 이동하면 HEAD는 브랜치가 아닌 그 커밋 자체를 가리킵니다.)

이 상태에서 새로운 커밋을 만들거나 수정 작업을 할 수 있지만, 이 작업들은 임시적이며 브랜치에 연결되지 않기 때문에 나중에 잃어버릴 수 있습니다. 따라서 이 상태에서 작업을 계속하고 싶다면, 새로운 브랜치를 생성하여 작업 내용을 안전하게 저장해야 합니다.

소스트리(Source Tree) 현재 상태

해당 커밋 기반으로 브랜치 생성

특정 커밋 해시로 체크아웃한 후, 해당 상태에서 브랜치를 생성하고 싶다면 간단히 다음 명령어를 입력합니다

git checkout -b <new-branch-name>

예를 들어, 커밋 해시 8e10f21를 기반으로 feature/divider-defect라는 새 브랜치를 만들고 싶다면 다음과 같이 실행할 수 있습니다:

git checkout -b feature/divider-defect

이렇게 하면 feature/divider-defect 커밋을 기반으로 새로운 브랜치가 생성되며, 해당 브랜치에서 자유롭게 작업을 이어갈 수 있습니다.

이처럼 Git에서 특정 커밋 해시를 기반으로 브랜치를 생성하는 방법은 매우 간단합니다. 협업 과정에서 특정 커밋을 확인해야 할 때 이 과정을 이용하면 효율적으로 작업할 수 있습니다.

[macOS] Xcode 시뮬레이터를 이용한 웹 페이지 디버깅 방법

dev-chim.tistory.com

[VSCode] 초보자를 위한 VSCode 단축키 가이드: 빠르고 효율적인 개발을 위해

dev-chim.tistory.com

[git] README.md 파일 작성시, Markdown 문법(Syntax) 사용법

README.md 파일 작성 시, Markdown 문법(Syntax) 사용법에 대해서 알아봅시다. README.md 파일 이란? README.md 파일은 주로 소프트웨어 프로젝트의 루트(Root) 디렉터리에 위치하며, Github, Gitlab, Bitbucket 등의 코

dev-chim.tistory.com

[CSS] 스크롤바(scrollbar) 스타일 제거하는 방법

스크롤바 동작은 유지하면서 스타일을 없애는 방법에 대해 알려드리겠습니다. 대부분의 웹 브라우저는 스크롤바에 대해 일부 CSS 스타일을 지원하므로, 스크롤바를 숨기거나 사용자 정의할 수

dev-chim.tistory.com

[Server] 외부에서 파일을 보다 안전하게 공유하는 방법 (feat. Synology Nas Server)

dev-chim.tistory.com

[Chrome] 웹 개발자 도구 활용 가이드 - 기본편

chim — Wed, 7 Aug 2024 00:07:01 +0900

크롬 웹 개발자 도구(Chrome DevTools)를 활용하는 법에 대해서 알아봅시다

크롬 웹 개발자 도구 (Chrome DevTools)

크롬 웹 개발자 도구는 구글 크롬 브라우저에 내장된 강력한 도구로, 웹 페이지를 실시간으로 검사하고 디버깅하며 성능을 분석할 수 있게 해 줍니다. 웹퍼블리셔와 개발자 모두에게 유용하며, 웹 페이지의 HTML, CSS, 자바스크립트 등 다양한 요소를 실시간으로 수정해 보고 테스트할 수 있습니다.

개발자 도구 열기

가장 빠르게 개발자 도구를 여는 방법은 키보드 단축키를 사용하는 것입니다. macOS 기준으로 단축키 option + cmd + i를 눌러 개발자 도구를 열 수 있습니다. ( windows 기준은 ctrl + shift + i )

모바일 모드 전환

모바일 디바이스 모드는 모바일 환경에서 웹 페이지를 테스트할 수 있게 해 줍니다. 개발자 도구를 연 후 좌측 상단의 Toggle device toolbar 아이콘을 클릭하여 모바일 디바이스 모드로 전환할 수 있습니다.

토글 디바이스 툴바 아이콘 클릭하기

모바일 모드 활용법

모바일 모드로 전환한 후 웹 페이지를 새로고침하는 것은 매우 중요합니다. 새로고침을 통해 최신 모바일 스타일 시트(CSS)와 스크립트가 적용된 페이지를 확인할 수 있습니다. 그 밖에 캐시 문제를 해결하며, 반응형 레이아웃이 제대로 작동하는지 확인하는 데에도 중요합니다. 즉, 모바일 환경에서의 최적화된 테스트를 위한 필수 단계입니다.

모바일 모드

Dimensions

Dimensions은 모바일 디바이스 모드에서 웹 페이지의 뷰포트(보이는 영역) 크기를 조정하는 기능입니다. 입력란에서 너비(Width)와 높이(Height)를 직접 입력하거나 드롭다운 메뉴에서 미리 설정된 디바이스 크기를 선택합니다.

Zoom

Zoom 속성은 웹 페이지의 확대/축소 비율을 조정할 수 있는 기능입니다. 기본적으로는 100%로 설정되어 있으며, 사용자가 페이지를 더 크게 또는 작게 볼 수 있도록 합니다.

No Throttling

No Throttling은 네트워크 속도와 CPU 성능의 제한을 없애는 옵션입니다. 기본적으로 개발자 도구는 모바일 환경을 시뮬레이션하기 위해 느린 네트워크 속도와 낮은 CPU 성능을 에뮬레이션합니다. 이 옵션을 선택하면 이러한 제한이 제거되어 실제 성능에 가까운 테스트가 가능합니다.

Rotate

Rotate 기능은 모바일 디바이스의 화면 방향을 가로(Landscape) 또는 세로 모드(Portrait)로 전환할 수 있게 해 줍니다. 이를 통해 페이지가 다른 화면 방향에서 어떻게 표시되는지 확인할 수 있습니다.

Dock side 설정

개발자 도구의 위치를 브라우저 창의 상단, 하단, 좌측 또는 우측에 배치할 수 있는 옵션입니다. 시각적 배치를 통해 작업의 효율성을 높일 수 있습니다. 옵션은 분리, 좌측, 하단, 우측이 있습니다.

Dock side 설정하기

More tools 메뉴를 통해 패널 추가

More Tools 메뉴를 통해 개발자 도구의 기능을 확장하고, 웹 페이지의 다양한 측면을 보다 세밀하게 분석할 수 있습니다. 이를 통해 웹 개발과 디버깅을 보다 효율적으로 수행할 수 있습니다. 기본적으로 제공되는 패널(Elements, Console, Network, Application 등) 외에도, More Tools 메뉴를 통해 추가적인 기능을 확장해 보세요.

More tools 확장 기능 추가하기

설정(Settings)

개발자 도구의 설정(Settings) 아이콘을 클릭하시면 도구의 기본 설정(Preferences)을 조정할 수 있습니다.

1. 개발자 도구를 연 후 우측 상단에 설정 아이콘을 클릭하세요.

설정 아이콘 클릭하기

2. 여기서 디버깅 옵션(Preferences), 네트워크 속도 시뮬레이션(Throttling), 단축키(Shortcuts) 등을 설정하여 개발자 도구의 동작 방식을 사용자에 맞게 최적화할 수 있습니다.

설정 > 기본 설정 > 옵션 설정하기

이렇게 크롬 웹 개발자 도구(Chrome DevTools)를 활용하는 법에 대해서 알아보았습니다. 이번 가이드를 통해 기본적인 도구 사용법과 주요 기능을 익히고, 더 효과적으로 웹 개발과 디버깅을 진행할 수 있기를 바랍니다.

[macOS] Xcode 시뮬레이터를 이용한 웹 페이지 디버깅 방법

dev-chim.tistory.com

[CSS] 반응형 웹페이지, object-fit 속성으로 미디어 컨텐츠를 완벽히 제어하기

반응형 디자인은 현대 웹 개발에서 필수적인 요소로 자리 잡았습니다. 다양한 디바이스와 화면 크기에 맞게 웹 페이지를 최적화하는 것은 사용자 경험을 향상하는 중요한 과제 중 하나입니다.

dev-chim.tistory.com

유용한 터미널 명령어

dev-chim.tistory.com

[AI] 손필기는 이제 그만! 클로바 노트(CLOVA Note)의 음성 메모 혁신을 경험하세요!

dev-chim.tistory.com

[Webpack] webpack.config.js, 웹팩 주요 속성 5가지(entry/output/loader/plugins/mode)

dev-chim.tistory.com

[macOS] Xcode 시뮬레이터를 이용한 웹 페이지 디버깅 방법

chim — Tue, 6 Aug 2024 18:51:55 +0900

Xcode 시뮬레이터를 이용한 웹 페이지 디버깅 방법에 대해서 알아보겠습니다.

Xcode 시뮬레이터를 활용한 웹 페이지 디버깅

반응형 웹 디자인의 중요성이 점점 커지면서, 다양한 기기에서 웹 페이지를 테스트하는 것은 필수적입니다. 하지만 모든 물리적 기기를 준비하는 것은 비용과 시간 면에서 비효율적일 수 있습니다. 이때 Xcode 시뮬레이터는 실 디바이스를 대신하여 다양한 iOS 환경에서 웹 페이지를 테스트하고 디버깅할 수 있는 강력한 도구입니다. 이 글에서는 Xcode 시뮬레이터를 이용해 웹 페이지를 디버깅하는 방법에 대해서 알아보겠습니다.

Xcode 시뮬레이터 실행

우선, Xcode 앱이 없다면 App Store에서 설치해 주세요. 그리고 Xcode가 설치된 Mac에서 Simulator 앱을 실행합니다.

Xcode > Simulator 실행하기

시뮬레이터가 실행되면 기본적으로 설정된 iPhone 기기가 나타납니다.

기본 설정을 사용하거나, Simulator 상단 메뉴에서 File > Open Simulator에 접근하시면 다른 기기를 선택할 수 있습니다.

다른 기기 선택하기

Safari 브라우저 실행

1. 시뮬레이터의 홈 화면에서 Safari 아이콘을 찾아 클릭합니다. 만약 홈 화면에 없으면, 화면을 아래로 스와이프 하여 검색창에 Safari를 입력해 찾을 수 있습니다.

Safari 실행하기

디버깅 도구 활성화

디버깅 도구 활성화하는 방법에 대해선 이전 포스팅을 참고해 주세요.

[Safari] 사파리 브라우저로 iPhone 웹 페이지 디버깅하는 방법 (feat. 웹 인스펙터)

dev-chim.tistory.com

2. Safari가 열리면 주소창에 디버깅하고자 하는 웹 URL을 입력합니다. 예시로 올리브영 사이트에 접속했습니다.

디버깅하고자 하는 웹페이지 접속하기

3. 개발자용 메뉴에서 디버깅할 시뮬레이터 기기를 선택합니다. 현재 시뮬레이터에서 열려 있는 웹 페이지 목록이 나타납니다. 디버깅하고자 하는 웹페이지를 선택해 줍니다.

디버깅할 시뮬레이터 및 웹 페이지 선택하기

4. 원하는 웹 페이지를 선택하면, Safari 브라우저에서 해당 페이지의 디버깅 도구 즉, 웹 인스텍터가 활성화됩니다. 실제 디바이스와 유사한 환경에서 버그나 에러를 발견할 수 있어 더 정확한 디버깅이 가능합니다.

웹 인스펙터

Xcode 시뮬레이터는 실제 디바이스 없이도 다양한 iOS 환경에서 웹 페이지를 테스트하고 디버깅할 수 있는 강력한 도구입니다. 하지만 시뮬레이터와 실제 디바이스 간에는 성능, 하드웨어, 운영체제 차이로 인해 일부 버그나 에러가 다를 수 있습니다. 이 점을 감안하여 디버깅 과정을 진행해야 합니다. 이 글에서 설명한 방법을 활용하여 다양한 iOS 기기에서 웹 페이지의 호환성을 확인하고, 사용자 경험을 최적화할 수 있기를 바랍니다.

이렇게 Xcode 시뮬레이터를 이용한 웹 페이지 디버깅 방법에 대해서 알아보았습니다.

[Safari] 사파리 브라우저에서 모바일 모드로 보려면?

사파리(Safari) 브라우저는 macOS 및 iOS 기기에서 가장 널리 사용되는 웹 브라우저 중 하나입니다. 웹 개발자들은 웹사이트를 디자인하고 개발할 때 사파리에서의 호환성을 고려해야 합니다. 반응

dev-chim.tistory.com

[CSS] 스크롤바(scrollbar) 스타일 제거하는 방법

dev-chim.tistory.com

[Utility] Jump Desktop을 활용한 원격 접속 : 어디서든 컴퓨터를 제어하세요!

잠시 외출 중에도 필요한 파일에 접근하거나 작업을 수행할 수 있는 Jump Desktop 앱에 대해서 소개해보겠습니다. 유료 앱이긴 하지만, 다양한 운영 체제에서 사용할 수 있어 장치 간에 무리 없이

dev-chim.tistory.com

[CSS] 반응형 웹페이지, object-fit 속성으로 미디어 컨텐츠를 완벽히 제어하기

dev-chim.tistory.com

[Utility] 이미지 추출 기준이란? (feat. Figma를 활용한 이미지 추출 방법)

dev-chim.tistory.com

[Safari] 사파리 브라우저로 iPhone 웹 페이지 디버깅하는 방법 (feat. 웹 인스펙터)

chim — Mon, 5 Aug 2024 23:28:02 +0900

사파리 브라우저로 iPhone 웹 디버깅하는 방법에 대해서 알아보겠습니다.

웹 페이지 디버깅

웹 개발을 하다 보면 데스크탑 브라우저뿐만 아니라 실제 모바일 디바이스에서의 동작을 확인하고 디버깅해야 할 때가 많습니다. 사파리(Safari) 브라우저는 iOS 디바이스와의 연결을 통해 이러한 작업을 가능하게 합니다. 이 글에서는 실제 디바이스를 USB로 연결하여 사파리에서 웹 인스펙터를 사용하는 방법에 대해서 알아보겠습니다.

사파리(Safari) 브라우저와 iOS 디바이스 설정

웹 인스펙터를 사용하기 위해서는 먼저 사파리 브라우저와 iOS 디바이스에서 설정을 완료해야 합니다.

사파리 브라우저 설정

1. 사파리 브라우저를 열고 왼쪽 상단의 Safari 메뉴를 클릭한 후, 설정(Preferences)을 선택합니다.

설정 선택하기

2. 설정 창에서 상단의 고급(Advanced) 탭을 클릭합니다. 그리고 맨 하단에 웹 개발자를 위한 기능 보기(Show Develop menu in menu bar) 옵션을 체크합니다.

고급 > 웹 개발자를 위한 기능 보기 체크하기

iOS 디바이스 설정

1. iPhone 또는 iPad에서 설정(Settings) 앱을 열고, 아래로 스크롤하여 Safari를 선택합니다.

설정 > Safari 선택하기

2. 고급(Advanced) 옵션을 선택합니다.

고급 선택하기

3. 웹 인스펙터(Web Inspector) 옵션을 활성화합니다.

웹 인스펙터 옵션 활성화하기

USB 케이블을 사용하여 Mac에 연결하기

iPhone 또는 iPad 디바이스를 USB 케이블을 사용하여 Mac에 연결합니다. iOS 디바이스(iPhone 또는 iPad 디바이스)에 신뢰 요청 승인 팝업에 신뢰(Trust)를 선택합니다.

1. 사파리 브라우저를 열고 상단 메뉴 막대의 개발자용(Develop) 메뉴를 클릭합니다.

개발자용(Develop) 메뉴 아래에 연결된 iOS 디바이스의 이름이 나타납니다. 해당 디바이스를 선택하면, 디바이스에서 열린 웹 페이지 목록이 표시됩니다. 예시로 유튜브 웹사이트를 접속한 상태입니다.

디버깅하고자 하는 웹페이지 선택하기

2. 디버깅하고자 하는 URL에 접속하면, Mac의 사파리 브라우저에 웹 인스펙터가 열립니다.

웹 인스펙터

이제 데스크탑에서 사용하던 것과 동일한 방식으로 웹 인스펙터를 사용할 수 있습니다.

사파리에서 실제 iOS 디바이스를 USB로 연결하여 웹 인스펙터를 사용하는 방법을 통해 모바일 환경에서의 웹 페이지 동작을 더욱 정확하게 확인하고 디버깅할 수 있습니다. 이렇게 사파리 브라우저로 iPhone 웹 디버깅하는 방법에 대해서 알아보았습니다.

[Safari] 사파리 브라우저에서 모바일 모드로 보려면?

dev-chim.tistory.com

[CSS] 노치(Notch)와 홈 바(Home Bar)에 대응하는 CSS 환경 변수(env()) 활용 방법

dev-chim.tistory.com

[AI] 빙챗(Bing Chat)/코파일럿(Copilot) 설치 방법 및 간단 사용법

dev-chim.tistory.com

[firebase] 구글 Firebase로 무료 웹호스팅하는 방법에 대해서 알아보자

dev-chim.tistory.com

[Utility] Jump Desktop을 활용한 원격 접속 : 어디서든 컴퓨터를 제어하세요!

dev-chim.tistory.com

[Git] GitHub에서 Squash Merge로 프로젝트 히스토리 깔끔하게 정리하기

chim — Sun, 7 Jul 2024 00:37:52 +0900

Git의 다양한 병합(merge) 방법 중 하나인 Squash Merge에 대해 알아봅시다.

Squash Merge (스쿼시 머지) 란?

여러 커밋을 하나의 커밋으로 압축(squash)하여 병합하는 Git의 기능입니다. 이를 통해 개발 브랜치에서 작업한 여러 개의 작은 커밋을 한 번에 메인 브랜치에 병합할 수 있습니다. 이 방법은 깔끔한 커밋 히스토리를 유지할 수 있게 합니다.

다이어그램을 통해 Squash Merge 이해하기

기본 main 브랜치에서 feature 사본 브랜치를 생성하여 작업을 시작합니다. feature 브랜치에서 여러 개의 커밋을 생성합니다.

main:    A---B---C
              \
feature:       D---E---F

feature 브랜치의 모든 커밋을 하나의 커밋으로 합쳐서 main 브랜치에 병합(merge)합니다. 이 과정을 통해 main 브랜치에는 하나의 새로운 커밋이 추가됩니다.

main:    A---B---C-------G
              \         /
feature:       D---E---F

Github에서 Squash Merge 수행하는 방법

1. Pull Request(PR)을 생성

feature 브랜치에서 작업을 완료한 후, 이를 main 브랜치에 병합(merge) 하기 위한 Pull Request(PR)을 생성합니다.

[Git] GitHub에서 Pull Request(PR) 올리는 방법: 초보자를 위한 안내

GitHub은 소프트웨어 개발에서 핵심적인 역할을 하는 플랫폼으로, 오픈 소스부터 기업용 프로젝트까지 다양한 협업 공간으로 자리 잡고 있습니다. 그중에서도 Pull Request(PR)는 프로젝트에 기여하

dev-chim.tistory.com

2. Squash and merge 옵션 선택

팀원들의 코드 리뷰 및 승인이 된 후, Squash and merge 옵션을 선택하여 PR을 병합합니다.

Squash and merge 옵션을 선택하기

3. 병합(merge) 결과

main 브랜치에 feature 브랜치의 모든 변경 사항이 하나의 커밋으로 병합됩니다.

Squash Merge 장단점

Squash Merge는 여러 개의 작은 커밋을 하나로 합쳐 깔끔한 히스토리를 유지하고, 코드 리뷰를 용이하게 하며, 롤백을 간단하게 해주는 장점이 있습니다. 그러나 세부 히스토리를 잃어 특정 변경 사항을 추적하기 어려워지고, 협업 시 충돌 관리가 복잡해질 수 있는 단점도 있습니다. 이와 같이 Squash Merge는 히스토리 관리와 코드 리뷰에 유용하지만, 세부 히스토리 손실과 협업 복잡성 증가를 고려해야 합니다. 프로젝트의 성격과 팀의 협업 방식을 평가하여 Squash Merge를 적절히 활용하는 것이 중요합니다.

Squash Merge는 깔끔한 커밋 히스토리를 유지하고 코드 리뷰를 쉽게 하기 위해 매우 유용한 도구입니다. 하지만 모든 상황에 적합한 것은 아니므로, 필요에 따라 적절한 병합 전략을 선택하는 것이 중요합니다. 이렇게 Squash Merge의 개념과 사용 방법에 대해서 알아보았습니다.

[macOS] 메모(Memo)에서 PDF 파일로 변환하는 간단 방법

dev-chim.tistory.com

[Utility] Photopea : Content-Aware 기능으로 객체 손쉽게 제거하기

Photopea의 Content-Aware 기능은 작은 결함들을 보정하는 데 있어 손쉽게 도와주는 기능입니다. 이 기능을 통해 작업의 결과물을 보다 완성도 있게 만들 수 있는데요~ 이 기능에 대해서 알아봅시다.

dev-chim.tistory.com

[AI] 손필기는 이제 그만! 클로바 노트(CLOVA Note)의 음성 메모 혁신을 경험하세요!

dev-chim.tistory.com

[CSS] 워드(Word)에서 텍스트 배치와 유사한 레이아웃을 CSS의 float 속성으로 적용하기

float 속성을 활용함으로써 웹 페이지의 구성 요소들을 자유롭게 배치하고 조합할 수 있으며, 창의적인 디자인을 구현하는 데에 큰 도움이 됩니다. float 속성에 대해서 알아보도록 합시다. float

dev-chim.tistory.com

[npm] npm 버전 확인, 초기화, 설치 및 옵션, 삭제 등 기본 사용법

dev-chim.tistory.com

[CSS] @font-face 디자인에 맞춘, 맞춤형 폰트 적용 방법

chim — Thu, 4 Jul 2024 23:44:17 +0900

웹사이트에 맞춤형 폰트를 적용하는 방법에 대해서 알아보겠습니다.

@font-face 란?

@font-face는 CSS 규칙으로, 외부 폰트를 불러와 웹페이지에서 사용할 수 있게 해 줍니다. 이를 통해 디자이너와 개발자는 웹브라우저에 기본으로 설치된 폰트 외에도 다양한 폰트를 활용할 수 있습니다.

- font-family : 폰트의 이름을 정의

- src : 폰트 파일의 경로를 지정

- font-weight, font-style : 굵기와 스타일 설정

다양한 폰트 파일 형식

웹에서 사용되는 주요 폰트 파일 형식은 다음과 같습니다.

- TTF (TrueType Font): 가장 일반적인 폰트 형식으로, 대부분의 운영 체제에서 지원됩니다.

- OTF (OpenType Font): TTF와 유사하지만, 더 많은 타이포그래피 기능을 제공합니다.

- WOFF (Web Open Font Format): 웹에서 사용하기 위해 최적화된 폰트 형식입니다.

- WOFF2: WOFF의 개선된 버전으로, 더 작은 파일 크기를 제공합니다.

- EOT (Embedded OpenType): 주로 Internet Explorer에서 사용됩니다.

@font-face 사용 예제

먼저, 원하는 폰트 파일의 경로도 맞춰줍니다.

'CustomFontName'이라는 이름의 폰트를 지정하고, 이를 기본 폰트로 사용하도록 설정했습니다. 폴백(fallback)으로 Arial과 sans-serif를 지정해 브라우저가 CustomFontName 폰트를 불러오지 못할 때, 기본 시스템 폰트를 사용하도록 했습니다.

폴백 폰트를 지정하는 것은 브라우저 호환성과 사용자 경험을 고려한 것으로 설정해 주시면 좋습니다.

@font-face {
    font-family: 'CustomFontName';
    src: url('fonts/CustomFont.woff2') format('woff2'),
         url('fonts/CustomFont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'CustomFontName', Arial, sans-serif;
}

폴백(fallback) 폰트 추천

아래의 폰트들은 대부분의 브라우저와 운영 체제에 널리 지원되며, 각 스타일에 맞는 폴백을 제공합니다. 고딕체와 궁서체 폰트를 적절히 조합하여 사용하면, 웹페이지가 더 일관된 느낌을 줄 수 있습니다.

고딕체(sans-serif) 폰트

획의 끝에 장식이 없는 글꼴 스타일을 의미합니다. 모던하고 현대적인 느낌을 주고 가독성이 좋아 본문 텍스트에 많이 사용됩니다.

body {
    font-family: 'CustomFontName', Arial, Helvetica, Verdana, Tahoma, sans-serif;
}

궁서체(serif) 폰트

획의 끝에 장식이 있는 글꼴 스타일을 의미합니다. 전통적이고 고전적인 느낌을 주고 제목 텍스트에 많이 사용됩니다.

body {
    font-family: 'CustomFontName', 'Times New Roman', Georgia, Garamond, Palatino, serif;
}

@font-face 최적화 방법

서브셋팅을 통해 필요한 문자만 포함한 경량화된 폰트 파일을 사용하는 것이 좋습니다. 이는 웹사이트 성능 최적화의 중요한 전략 중 하나입니다. 경량화된 폰트 파일은 빠르게 다운로드되어 초기 로딩 속도를 개선하며, 데이터 전송 비용을 절감하는 데 도움이 됩니다. 따라서 서브셋팅을 통해 사용자 경험을 향상하고 웹사이트 성능을 최적화할 수 있습니다.

@font-face는 웹사이트에 개성 있는 폰트를 적용할 수 있는 강력한 문법입니다. 올바르게 사용하면 웹사이트의 디자인을 한 단계 발전시킬 수 있습니다. 이번 포스팅을 통해 @font-face의 기본 개념과 활용법을 이해하고, 웹사이트에 맞춤형 폰트를 적용하는 데 도움이 되시길 바랍니다.

[Utility] 이미지 추출 기준이란? (feat. Figma를 활용한 이미지 추출 방법)

dev-chim.tistory.com

[Git] Git 리베이스: 작업 브랜치의 변경 사항을 최신 상태로 유지하는 방법

소프트웨어 개발에서 협업은 중요한 요소입니다. 하지만 여러 명이 같은 코드베이스에서 작업하다 보면 복잡한 작업 흐름과 충돌이 발생할 수 있습니다. Git에서 제공하는 리베이스(Rebase)는 이

dev-chim.tistory.com

[AI] 1분이면 가능! Gamma로 빠르고 멋진 PPT와 웹사이트 제작하기

dev-chim.tistory.com

[macOS] macOS에서 다양한 문자 입력하기: 이모티콘, 특수문자, 한자

이번 포스팅에서는 macOS에서 특수문자와 한자를 쉽게 입력하는 방법에 대해서 알아보겠습니다. 특수문자 및 이모티콘 입력 방법macOS 운영체제를 사용하면서 다양한 특수문자와 한자를 입력해

dev-chim.tistory.com

[Javascript] 브라우저 창 크기를 측정하는 주요 속성들에 대해서 알아보자

dev-chim.tistory.com

[macOS] macOS에서 다양한 문자 입력하기: 이모티콘, 특수문자, 한자

chim — Fri, 28 Jun 2024 22:43:00 +0900

이번 포스팅에서는 macOS에서 특수문자와 한자를 쉽게 입력하는 방법에 대해서 알아보겠습니다.

특수문자 및 이모티콘 입력 방법

macOS 운영체제를 사용하면서 다양한 특수문자와 한자를 입력해야 할 때가 종종 있습니다. 특히 문서 작성이나 메시지 전송 시 더욱 그렇죠. 다행히 macOS는 이러한 문자를 쉽게 입력할 수 있는 기능을 제공하고 있습니다. 먼저 특수문자 및 이모티콘을 입력하는 방법에 대해서 알아보겠습니다.

1. 오른쪽 상단에 있는 메뉴바에서 문자 한을 클릭하여 드롭다운 메뉴를 열어봅시다. 메뉴에서 이모티콘 및 기호 보기를 클릭합니다.
단축키로는 키보드에서 control + command + space 키를 클릭하면 이모티콘 및 기호 뷰어가 열립니다.

이모티콘 및 기호 보기

2. 원하는 문자를 찾아 클릭하면 됩니다.

이모티콘 뷰어

` 백틱(backtick) 입력 방법

백틱은 프로그래밍에서 자주 사용하는 특수 문자입니다. 키보드 option + ₩ 키를 클릭하면 됩니다.

・ 중점(middle dot) 입력 방법

키보드 control + command + space 키를 클릭하면 문자 뷰어가 열립니다. 해당 문자를 찾아 클릭하면 됩니다.

특수 문자 뷰어

고정 폭 공백(Non-breaking Space) 입력 방법

고정 폭 공백(Non-breaking Space)은 단어가 줄 바꿈 시 분리되지 않도록 하는 공백 문자입니다. 키보드 option + space 키를 클릭하면 공백이 입력됩니다.

한자 입력 방법

변환할 한자를 입력한 다음, 키보드 option + enter 키를 입력하여 나타나는 한자 목록에서 원하는 한자를 선택하면 해당 한자로 변환됩니다.

이렇게 macOS에서 특수문자와 한자를 입력하는 방법에 대해서 알아보았습니다.

[macOS] 메모(Memo)에서 PDF 파일로 변환하는 간단 방법

dev-chim.tistory.com

[Utility] Photopea : Content-Aware 기능으로 객체 손쉽게 제거하기

dev-chim.tistory.com

[AI] 빙챗(Bing Chat)/코파일럿(Copilot) 설치 방법 및 간단 사용법

dev-chim.tistory.com

[HTML] Image Map, 이미지맵으로 이미지에 링크 거는 방법

dev-chim.tistory.com

[Notion] Notion Web Clipper, 스크랩한 웹페이지를 한 데 모아서 관리하는 방법

Notion Web Clipper 기능을 아시나요? 웹페이지를 저장하고 싶은데 한 데 모아서 관리하고 싶지 않으신가요? 노션 웹 클리퍼(Notion Web Clipper)가 이러한 서비스를 제공합니다. Notion Web Clipper는 웹 브라우

dev-chim.tistory.com

[Figma] 디자인 협업의 핵심 팁(Tip) : 피그마를 활용한 효율적인 공유 전략

chim — Sat, 18 May 2024 19:31:57 +0900

피그마를 통해 팀원들과 효과적으로 협업하고 공유할 수 있는 몇 가지 주요 기능들에 대해서 알아봅시다.

공유 링크

상단 메뉴바 우측을 보시면 Share(공유하기) 버튼을 클릭해 주세요.

공유하기 버튼 클릭하기

Copy link(링크 복사하기) 버튼을 클릭하시면, 공유할 수 있는 링크가 복사됩니다.

또 Email(이메일)을 통해, 디자인 파일 링크를 쉽게 공유할 수 있습니다. 공유하려는 사람의 권한을 설정할 수 있어 편집 가능(can edit), 보기 전용(can view)의 권한을 부여할 수 있습니다. 이메일 입력창에 초대하려는 팀원들의 주소를 입력하고 invite(초대하기) 버튼을 클릭하여 디자인 파일을 공유해 보세요.

공유 링크 권한 옵션

공유된 링크가 누구나 접근 가능(Anyone with the link)하도록 기본 설정되어 있습니다. 옵션을 통해 초대된 사람만이 접근 가능(Only people invited to this file)하게도 변경할 수 있습니다.

공유 링크 접근 가능 옵션

댓글 및 멘션

댓글 기능을 사용하여 디자인 파일의 특정 부분에 피드백을 달 수 있습니다. 댓글은 디자인의 특정 위치에 달 수 있기 때문에 더욱 직관적이게 논의가 가능하여 원활한 협업이 가능해집니다.

상단 메뉴바 좌측 아이콘들 중 Add comment(댓글 추가하기) 버튼을 클릭하세요.

댓글 추가하기 버튼 클릭하기

피드백을 입력하고 제출하기 버튼을 클릭하여 댓글을 추가해 보세요.

피드백 입력하여 제출하기

우측 패널을 통해 피드백 목록들을 한 번에 확인할 수 있습니다.

패널이 나타나 있지 않다면 댓글 추가하기 버튼을 한번 더 클릭해 보세요.

우측 패널에서 댓글 목록

Reply(답변하기) 입력창에 댓글을 달 수 있습니다. 이슈를 해결한 써머리(Summay)를 적거나 더 논의될 내용을 입력하면 됩니다.

관련된 논의가 더 이상 필요하지 않다면, Mark as resolved(문제 해결) 아이콘을 클릭하여 다른 팀원들에게 해당 문제나 논의가 종결됐음을 나타냅니다.

피드백 댓글 달기

종결된 피드백들은 우측 패널 목록에 기본적으로 나타나지 않지만 옵션을 통해, 다시 확인할 수 있습니다.

- Sort by date(날짜별 정렬)

- Sort by unread(읽지 않은 것 우선 정렬)

- Show resolved comments(해결된 댓글 표시)

- Only your threads(내가 작성한 항목만 보기)

- Only current page(현재 페이지만 보기)

옵션들은 중복으로도 선택이 가능하므로 필요한 사항들을 클릭하여 활용해 보세요.

피드백 목록 보기 옵션 선택하기

이렇게 피그마를 통해 팀원들과 효과적으로 협업하고 공유할 수 있는 몇 가지 기능들에 대해서 알아보았습니다.

[CSS] SCSS를 활용한 툴팁(tooltip) 구현해보자! (feat. transform-origin)

툴팁 레이아웃(html) 및 스타일(scss) New 새로운 소식! .wrap { display: flex; justify-content: center; align-items: center; outline: 1px solid red; button { position: relative; } .tooltip{ position: absolute; bottom: calc(-100% - 20px - 6px -

dev-chim.tistory.com

[Utility] 쉽고 간편하게 디자인하기 : 캔바(Canva) 사용법

dev-chim.tistory.com

[CSS] 유튜브(Youtube) 영상을 비율 유지한 채 반응형으로 삽입하는 방법

dev-chim.tistory.com

간단하게 Vite로 프로젝트 생성하는 방법

dev-chim.tistory.com

[Javascript] 구조 분해 할당, import, export default 와 연관지어 알아보기

구조 분해 할당 배열이나 객체의 속성을 해체하여 그 인덱스 혹은 키 값을 개별 변수(상수)에 담을 수 있도록 사용하는 Javascript 표현식 //const { 객체 내 key값 } = 객체명 //정해진 key값이 있기 때문

dev-chim.tistory.com

[macOS] 메모(Memo)에서 PDF 파일로 변환하는 간단 방법

chim — Sat, 18 May 2024 15:25:03 +0900

Mac OS에서 메모장을 사용하여 작성한 파일을 PDF 형식으로 내보내는 방법에 대해 알아보겠습니다.

메모장에서 PDF 파일로 내보내는 방법

PDF 파일 형식은 문서를 안전하게 저장하고 다양한 디바이스에서 일관된 형식으로 볼 수 있게 해주는 매우 유용한 형식입니다. 따라서 중요한 메모나 문서를 공유할 때 PDF로 변환하여 저장하는 것이 매우 유용합니다.

Mac OS에서 기본 앱으로 제공하는 텍스트 편집기 메모장에서 PDF 파일로 내보내는 방법을 간단하게 설명해 드리겠습니다.

메모장에서 파일 열기

메모장에서 PDF로 변환할 파일을 여세요.

메모장에서 파일 열기

PDF로 내보내기

상단 메뉴바에서 파일 > PDF로 내보내기를 클릭하세요.

파일 내보내기

파일 저장하기

PDF로 변환된 파일

PDF 파일 변환 및 공유의 유용성

비즈니스 문서

계약서, 보고서, 프레젠테이션 자료 등

학업 자료

과제, 강의 노트 등

개인 기록

일기, 개인 노트, 여행 계획, 체크 리스트 등

디지털 아카이빙

사진 및 스캔 문서 등

법률 및 금융 문서

법률 문서, 계약서, 금융 보고서 등

프로젝트 협업

팀 프로젝트 문서, 피드백 등

이처럼, 메모장에서 PDF로 변환하고 파일을 공유하는 방법은 문서의 형식을 유지하고 안전하게 전송할 수 있어 다양한 상황에서 매우 유용합니다. 각 상황에 맞는 활용 방법을 잘 이해하고 활용한다면, 업무나 개인 생활에서 많은 도움이 될 것입니다.

이렇게 해서 Mac OS의 메모장에서 PDF 파일로 내보내는 방법에 대해 알아보았습니다.

[Safari] 사파리 브라우저에서 모바일 모드로 보려면?

dev-chim.tistory.com

[CSS] 노치(Notch)와 홈 바(Home Bar)에 대응하는 CSS 환경 변수(env()) 활용 방법

dev-chim.tistory.com

[Git] GitHub에서 Pull Request(PR) 올리는 방법: 초보자를 위한 안내

dev-chim.tistory.com

[AI] 1분이면 가능! Gamma로 빠르고 멋진 PPT와 웹사이트 제작하기

dev-chim.tistory.com

[CSS] 스크롤바(scrollbar) 스타일 제거하는 방법

dev-chim.tistory.com

[CSS] 메모리 부담을 고려한 웹 성능 최적화: Composite 단계 CSS 속성 활용

chim — Thu, 2 May 2024 16:45:07 +0900

CSS 랜더링 과정은 레이아웃(Layout), 페인트(Paint), 컴포짓(Composite) 단계를 거쳐 화면에 웹페이지를 표시하는데 각각의 단계에서 브라우저는 다른 작업을 수행합니다. 이에 대해 알아봅시다.

Layout (레이아웃)

레이아웃 단계에서 브라우저는 요소들의 위치와 크기를 결정합니다. 이 단계에서는 각 요소의 크기, 위치, 레이아웃 트리(layout tree)를 구축하는 과정이 포함되어 있습니다. 브라우저는 요소의 스타일과 구조를 분석하고, 각 요소의 크기와 위치를 계산해 화면에 배치합니다.

Paint (페인트)

레이아웃이 단계가 완료되면, 브라우저는 화면에 표시할 내용을 그리는 작업을 합니다. 이 단계에서는 픽셀을 채우고 색상을 입히는 등의 작업이 이뤄집니다. 이는 각 요소의 스타일과 내용에 따라 결정되는데, 예를 들어 배경색, 테두리, 텍스트 등이 여기에 포함됩니다.

Composite (컴포짓, 합성)

페인트 단계에서 그려진 요소들이 적절한 순서와 방식으로 조합되어 화면에 표시됩니다. 이는 브라우저의 내부 과정으로, 각 요소가 화면에 나타날 위치를 결정하고, 필요한 경우 레이어를 합성해 최종 화면을 생성합니다. 이 단계에서는 요소들이 겹쳐져 있을 때 적절한 순서로 그려져 화면에 표시되도록 합니다.

CSS 속성 선택과 웹 성능

메모리 부담을 고려하여 CSS 속성을 선택하고 사용하는 것은 웹 성능을 향상하는데 도움이 됩니다. 특히 레이아웃과 페인트 단계에서 메모리 사용량이 많을 수 있으므로, 모바일 기기나 메모리 제한이 있는 환경에서는 이를 고려하여 최적화하는 것이 중요합니다.

아래의 속성들은 composite 단계에서만 처리됩니다. 이를 활용하여 메모리 부담을 줄이고 웹 성능을 향상할 수 있습니다

Composite 단계에 영향을 주는 CSS 속성들

- opacity : 투명도가 변경되면 브라우저가 요소의 레이어를 다시 합성해야 하므로, composite 단계에서만 영향을 미칩니다.

- transform : 변형은 요소의 레이아웃이나 페인트 단계에 영향을 주지 않고, 브라우저가 레이어를 합성할 때만 적용됩니다.

- filter

- will-change ...등등

Layout 단계에 영향을 주는 CSS 속성들

- width, height : 요소의 크기를 결정하는 데 사용되어 layout 단계에서 처리됩니다.

- margin, padding : 요소의 배치와 크기를 결정하는데 중요한 역할을 하며, layout 단계에서 처리됩니다.

- position : 요소의 배치에 영향을 주므로 layout 단계에서 처리됩니다.

- display : 요소의 표시 방법으로 레이아웃이 결정되므로 layout 단계에서 처리됩니다.

- float

- overflow ...등등

참고 사이트 추천!

단계별 영향을 주는 CSS 속성들에 대해 더 자세히 알고 싶다면 아래의 사이트를 참고해 주세요!

CSS Triggers

@PROPERTY_DESCRIPTION@ B G W E Change from default B G W E Subsequent updates

www.lmame-geek.com

메모리 부담을 고려하여 CSS 속성을 선택하고 사용하는 것은 웹 성능을 향상하는 중요한 요소입니다. 특히 composite 단계에서만 처리되는 속성을 활용하여 메모리 부담을 줄이면서도 웹 페이지의 로딩 속도와 사용자 경험을 개선할 수 있습니다. 따라서 웹 개발자들은 이러한 최적화 전략을 적극적으로 활용하여 웹 성능을 향상하는데 주력해야 합니다.

[Server] QuickConnect로 외부에서 서버 접속하는 방법

dev-chim.tistory.com

[CSS] 유튜브(Youtube) 영상을 비율 유지한 채 반응형으로 삽입하는 방법

dev-chim.tistory.com

[Git] GitHub에서 Pull Request(PR) 올리는 방법: 초보자를 위한 안내

dev-chim.tistory.com

[Utility] Jump Desktop을 활용한 원격 접속 : 어디서든 컴퓨터를 제어하세요!

dev-chim.tistory.com

[Javascript] 브라우저 창 크기를 측정하는 주요 속성들에 대해서 알아보자

dev-chim.tistory.com

[Javascript] e.target vs e.currentTarget : 웹 개발자가 알아야 할 이벤트 객체의 중요한 속성

chim — Wed, 1 May 2024 10:24:33 +0900

브라우저에서 이벤트가 발생하면 해당 이벤트에 대한 정보를 담은 이벤트 객체(event)가 생성됩니다. 이 객체는 다양한 정보와 메서드를 제공하며, 이벤트 핸들러 내에서 이를 활용하여 작업을 수행할 수 있습니다.
이벤트 객체의 두 가지 주요 속성인 e.target과 e.currentTarget은 이벤트 관리와 처리에 있어서 다른 의미를 가지고 있으며, 정확히 이해하는 것이 중요합니다. 두 속성의 차이를 자세히 살펴보겠습니다.

e.target

e.target은 이벤트가 발생한 요소를 가리킵니다. 예를 들어, 사용자가 버튼을 클릭했다면 e.target은 해당 버튼 요소를 가리킵니다. 이를 통해 이벤트 핸들러 내에서 클릭된 요소에 대한 다양한 작업을 수행할 수 있습니다.

<html>
  ...
  <body>
     <button id="myButton">클릭하세요!</button>
  </body>
</html>

<script>
document.getElementById('myButton').addEventListener('click', function(e) {
  console.log('클릭된 요소:', e.target); // 클릭된 버튼 요소를 가리킵니다.
});
</script>

e.currentTarget

e.currentTarget은 현재 이벤트 핸들러가 연결된 요소를 가리킵니다. 이는 일반적으로 이벤트 핸들러를 등록한 요소와 동일합니다. 하지만 이벤트 버블링이 발생하는 경우에는 다를 수 있습니다. 이벤트 버블링은 하위 요소에서 상위 요소로 이벤트가 전파되는 현상을 말합니다. 예를 들어, 하위 요소에서 이벤트가 발생하면 해당 이벤트는 상위 요소로 전파됩니다.

이때 이벤트 핸들러가 등록된 요소와 현재 이벤트가 발생한 요소가 다르면 e.currentTarget은 이벤트 핸들러가 등록된 요소를 가리키고, e.target은 실제 이벤트가 발생한 요소를 가리킵니다.

<html>
  ...
  <div id="parent" data-id="parent">
    <button id="child" data-id="child">클릭하세요!</button>
  </div>
</html>


<script>
document.getElementById('parent').addEventListener('click', function(e) {
  console.log('현재 이벤트 핸들러가 등록된 요소:', e.currentTarget.dataset.id); // div#parent를 가리킵니다.
  console.log('이벤트가 발생한 요소:', e.target.dataset.id); // 클릭된 button#child 요소를 가리킵니다.
});
</script>

이벤트 위임에 관련된 내용이 자세히 알고 싶다면, 이전 포스트를 참고해 주세요.

[Javascript] JavaScript 이벤트 위임(Event Delegation): 효율적인 이벤트 핸들링 방법

이벤트 위임은 이벤트 핸들링을 효율적으로 관리하고 코드를 단순화하는 데에 도움을 줍니다. 이번 포스트 글에서는 이벤트 위임의 개념부터 활용 사례까지 자세히 살펴보겠습니다.이벤트 위..

dev-chim.tistory.com

e.target과 e.currentTarget은 이벤트 핸들링에서 핵심적인 역할을 수행합니다. 두 속성의 이해는 웹 개발자가 효율적인 이벤트 처리를 위해 반드시 숙지해야 할 부분입니다. 이를 통해 이벤트 관리와 디버깅이 더욱 쉬워지고 코드의 가독성과 유지 보수성을 향상할 수 있습니다.
이렇게 이벤트 객체에 대해서 알아보았습니다.

[Safari] 사파리 브라우저에서 모바일 모드로 보려면?

dev-chim.tistory.com

[AI] 1분이면 가능! Gamma로 빠르고 멋진 PPT와 웹사이트 제작하기

dev-chim.tistory.com

[Utility] 구독 없이 바로 사용 가능한 무료 온라인 디자인 툴 : Photopea(포토피아)

dev-chim.tistory.com

[Git] GitHub에서 Pull Request(PR) 올리는 방법: 초보자를 위한 안내

dev-chim.tistory.com

[AI] 손필기는 이제 그만! 클로바 노트(CLOVA Note)의 음성 메모 혁신을 경험하세요!

dev-chim.tistory.com

[Javascript] JavaScript 이벤트 위임(Event Delegation): 효율적인 이벤트 핸들링 방법

chim — Tue, 30 Apr 2024 16:02:06 +0900

이벤트 위임은 이벤트 핸들링을 효율적으로 관리하고 코드를 단순화하는 데에 도움을 줍니다. 이번 포스트 글에서는 이벤트 위임의 개념부터 활용 사례까지 자세히 살펴보겠습니다.

이벤트 위임

이벤트 위임이란 하위 요소에 직접 이벤트 핸들러를 할당하는 대신, 상위 요소에서 이벤트를 처리하는 것입니다. 이를 통해 많은 이벤트 핸들러를 줄이고, 동적으로 생성되는 요소에 대한 이벤트 처리를 쉽게 할 수 있습니다.

아래의 예시 코드와 함께 살펴보겠습니다.

하위 요소에 직접 이벤트 핸들러를 할당한 예시 코드

각 버튼에 개별적으로 클릭(click) 이벤트 핸들러를 할당하고 있습니다.

<html>
  ...
  <body>
    <button id="button1">버튼 1</button>
    <button id="button2">버튼 2</button>
    <button id="button3">버튼 3</button>
  </body>
</html>


<script>
document.getElementById('button1').addEventListener('click', function() {
  console.log('버튼 1이 클릭되었습니다!');
});

document.getElementById('button2').addEventListener('click', function() {
  console.log('버튼 2가 클릭되었습니다!');
});

document.getElementById('button3').addEventListener('click', function() {
  console.log('버튼 3이 클릭되었습니다!');
});
</script>

상위 요소에 이벤트 핸들러를 할당한 예시 코드

아래의 코드에서는 상위 요소인 div#parent에 클릭(click) 이벤트 핸들러를 할당하고 있습니다. 클릭된 요소가 버튼인 경우에만 해당 이벤트를 처리하고 있습니다. 이렇게 하면 버튼이 추가되거나 제거되더라도 이벤트 핸들러를 변경할 필요가 없어집니다.

<html>
  ...
  <body>
    <div id="parent">
      <button id="button1">버튼 1</button>
      <button id="button2">버튼 2</button>
      <button id="button3">버튼 3</button>
  </div>
  </body>
</html>


<script>
document.getElementById('parent').addEventListener('click', function(event) {
  if (event.target.tagName === 'BUTTON') {
    console.log('클릭된 버튼:', event.target.textContent);
  }
});
</script>

이벤트 위임을 활용하여 리스트 아이템을 추가해 보자

요소 ul#parent-list에 이벤트 핸들러를 할당하여 클릭 이벤트를 처리하고 있습니다. 클릭된 요소가 li인 경우에만 해당 이벤트를 처리하도록 하였습니다. 이렇게 함으로써 이벤트 위임을 통해 모든 리스트 아이템에 대한 클릭 이벤트를 한 곳에서 관리할 수 있습니다.

또한 추가 버튼을 클릭하면 새로운 아이템이 동적으로 추가되며, 이 역시 이벤트 위임을 통해 새로운 아이템에 대한 클릭 이벤트를 자동으로 처리합니다.

<html>
  ...
  <body>
    <ul id="parent-list">
      <li>아이템 1</li>
      <li>아이템 2</li>
      <li>아이템 3</li>
    </ul>

    <button id="add-button">
    아이템 추가하기
    </button>

  </body>
</html>


<script>
// 상위 요소인 ul에 이벤트 핸들러를 할당합니다.
document.getElementById('parent-list').addEventListener('click', function(event) {
  // 클릭된 요소가 li인 경우에만 처리합니다.
  if (event.target.tagName === 'LI') {
    // 클릭된 li 요소의 텍스트 내용을 출력합니다.
    console.log('클릭된 아이템:', event.target.textContent);
  }
});

// 동적으로 새로운 li 요소를 추가하는 함수
function addNewItem(text) {
  var newItem = document.createElement('li');
  newItem.textContent = text;
  document.getElementById('parent-list').appendChild(newItem);
}

// 버튼을 클릭할 때마다 새로운 아이템을 추가합니다.
document.getElementById('add-button').addEventListener('click', function() {
  var newItemText = prompt('새로운 아이템의 내용을 입력하세요:');
  if (newItemText) {
    addNewItem(newItemText);
  }
});
</script>

이벤트 위임 패턴을 활용하는 이유

성능 개선

개별적으로 각 요소에 이벤트 핸들러를 할당하는 것보다 하나의 상위 요소에 이벤트 핸들러를 할당하는 것이 성능상 이점이 있습니다. 이는 이벤트 핸들러의 수가 줄어들어 메모리 사용량과 로딩 시간을 줄여줍니다.

동적 요소 처리

동적으로 생성되는 요소에 대해서도 이벤트 처리할 수 있습니다. 상위 요소에 이벤트 핸들러를 할당하면 새로운 하위 요소가 추가되어도 자동으로 이벤트를 처리할 수 있습니다.

코드의 간결성

하나의 이벤트 핸들러를 여러 요소에 적용할 수 있으므로 코드가 더 간결해집니다.

유지보수의 용이성

상위 요소에 이벤트 핸들러를 할당하면 요소의 추가, 제거 또는 이동과 관련된 변경 사항에 대해 더 쉽게 대응할 수 있습니다. 하위 요소가 변경되더라도 이벤트 핸들러를 수정할 필요가 없습니다.

이벤트 버블링 활용

이벤트 위임은 이벤트 버블링을 활용하여 상위 요소에서 하위 요소까지 이벤트가 전파되는 것을 이용합니다. 즉 이벤트가 하위 요소에서 발생하더라도 상위 요소로 이벤트가 전파되어 상위 요소에 할당된 이벤트 핸들러가 이벤트를 감지하고 처리할 수 있습니다.

부모 요소에 이벤트 핸들러가 등록되어 있어야만 이벤트 위임이 제대로 작동합니다. 이를 통해 중첩된 요소들에 대한 이벤트 처리를 효율적으로 관리할 수 있습니다.

이번에 다룬 내용을 바탕으로 Javascript 개발에서 이벤트 위임을 활용하여 코드의 품질을 향상해 보세요.

[Defect] 브라우저 리사이징(Resizing)할 때, 불안정한 Swiper 동작 해결

웹 개발에서 Swiper를 사용하면 간편하게 슬라이드 기능을 구현할 수 있지만, 브라우저 리사이징 중에 Swiper가 제대로 동작하지 않는 문제가 발생할 수 있습니다. 이를 해결하기 위해 아래와 같은

dev-chim.tistory.com

[AI] 빙챗(Bing Chat)/코파일럿(Copilot) 설치 방법 및 간단 사용법

dev-chim.tistory.com

[CSS] 플렉스 박스(Flexbox)와 아이템 속성 살펴보기

플렉스 박스(Flexbox)는 웹 레이아웃을 구성하는 데 유용한 강력한 도구입니다. 이를 통해 요소들을 유연하게 정렬하고 배치할 수 있으며, 다양한 디바이스와 화면 크기에 대응하여 일관된 레이아

dev-chim.tistory.com

[Utility] Snipaste - 무료 캡쳐 도구, 핀(Pin) 고정, 클립보드(Clipboard), 색상 추출(Color Picker)

dev-chim.tistory.com

초보자를 위한 Safari 브라우저 개발자 도구 설정 방법

Safari 브라우저 개발자 도구 세팅 방법 Safari 브라우저의 개발자 도구는 웹 개발을 보다 효과적으로 수행할 수 있게 도와주는 강력한 도구입니다. Safari의 개발자 도구를 활성화하는 방법에 대해

dev-chim.tistory.com

[AI] 카카오톡(KakaoTalk) AI로 더 스마트하게! 설정 방법 안내

chim — Sun, 31 Mar 2024 00:37:43 +0900

카카오톡 실험실은 사용자들이 카카오톡의 새로운 기능을 미리 체험해 볼 수 있는 공간입니다. 이곳에서 인기를 끈 기능들은 카카오톡의 정식 기능으로 채택되기도 해요. 사용자들은 직접 기능을 켜고 끌 수 있으며, 다양한 실험적 기능들을 경험할 수 있습니다.

베타로 선보이는 서비스 중 AI 기능 이용하기 서비스에 대해서 소개드리겠습니다.

카카오톡 실험실의 AI 기능 설정하는 방법

카카오톡 실험실에서는 사용자들이 일상에서 겪는 불편함을 해소하고, 더 편리한 대화를 돕기 위해 AI 기능을 선보이고 있습니다.

우선 카카오톡 최신 버전으로 업데이트해 주세요.

1. 카카오톡 설정 메뉴로 이동합니다.

설정 메뉴 클릭하기

2. 카카오톡 실험실을 선택합니다.

설정 > 실험실 메뉴 클릭하기

3. 실험실 이용하기 옵션을 활성화하고, AI 기능 이용하기를 선택합니다.

실험실 이용하기 토글 활성화하기

4. AI 기능 이용하기 옵션을 활성화해 줍니다.

AI 기능 이용하기 토글 활성화하기

5. 카카오톡 AI 기능 이용 동의하고 시작하기 버튼을 선택합니다.

카카오톡 AI 기능 이용 동의하고 시작하기

AI 주요 기능 소개

카카오톡 실험실의 AI 기능 중에서도 특히 주목받는 기능은 안 읽은 대화 요약하기와 말투 변경하기입니다.

안 읽은 대화 요약하기

잠시 대화에 참여하지 못한 사이 쌓인 메시지를 AI가 요약해 주는 기능입니다. 이를 통해 중요한 정보를 빠르게 파악할 수 있습니다.
한글 기준으로 최대 3000자까지 요약 가능합니다.

안 읽은 메시지가 있는 채팅방에 들어가면 안 읽은 대화 요약하기 버튼을 클릭하면 AI가 메시지를 요약해 줍니다.

말투 변경하기

사용자가 작성한 메시지를 다양한 말투로 변경해 주는 AI 기능입니다. 정중체, 상냥체, 임금체, 신하체, 로봇체 등 다양한 말투로 메시지를 변환할 수 있습니다. 한글 기준 최대 100자까지 변경 가능하며, 말투 변경 여부는 메시지에 표시되지 않아 대화 상대방은 알 수 없습니다.

메시지 작성 후 대화창 하단에 있는 AI 버튼을 클릭하면 원하는 말투로 메시지를 변경할 수 있습니다.

새로운 기능을 체험해보고 싶다면, 지금 바로 카카오톡 실험실을 방문해 보세요!

이렇게 간단하게 카카오톡 AI 기능 설정하는 방법에 대해서 알아보았습니다.

[Safari] 개인 정보 보호의 첫걸음: 프라이버시 모드 알아보기

dev-chim.tistory.com

[AI] 클로바 더빙(CLOVA Dubbing으로 전문가처럼 더빙하기 : 초보자 튜토리얼

dev-chim.tistory.com

[Utility] Photopea : Content-Aware 기능으로 객체 손쉽게 제거하기

dev-chim.tistory.com

[AI] 손필기는 이제 그만! 클로바 노트(CLOVA Note)의 음성 메모 혁신을 경험하세요!

dev-chim.tistory.com

[VSCode] 초보자를 위한 VSCode 단축키 가이드: 빠르고 효율적인 개발을 위해

dev-chim.tistory.com

[VSCode] 초보자를 위한 VSCode 단축키 가이드: 빠르고 효율적인 개발을 위해

chim — Sat, 30 Mar 2024 00:54:34 +0900

VSCode는 Microsoft에서 개발한 가벼우면서 강력한 오픈 소스 코드 편집기로, 다양한 플랫폼에서 널리 사용되고 있습니다. 이 글에서는 VSCode의 핵심 기능 중 하나인 단축키 설정하는 방법에 대해 다뤄보려고 합니다.

사용자 정의 단축키 설정하기

단축키는 작업을 빠르게 수행하고 생산성을 향상하는 데 중요한 역할을 합니다. 키보드 조작을 통해 마우스로 수행하는 작업보다 훨씬 효율적이며, VSCode에서는 다양한 기능에 대한 단축키를 제공하여 개발자의 작업 효율을 높일 수 있습니다. 사용자가 정의하는 단축키 설정 방법에 대해서 알아보겠습니다.

설정 > 바로 가기 키

왼쪽 하단에 설정 아이콘 > 바로 가기 키 클릭하세요.

설정 > 바로 가기 키

키 바인딩 리스트 창이 띄어집니다. 각 키 또는 키 조합에 할당된 작업 또는 명령의 리스트입니다. 이 목록을 통해 사용자는 프로그램에서 사용 가능한 단축키를 확인하고 원하는 작업에 해당하는 키를 설정할 수 있습니다.

키 바인딩 목록

이미 할당된 단축키를 사용자 정의로 변경할 수도 있습니다. 해당 단축키를 더블 클릭하여 원하는 단축키로 변경해 보세요.

아래 소개할 단축키는 제가 VSCode를 설정할 때 항상 추가하는 유용한 단축키입니다.

balaceOut으로 검색해 보세요. 그리고 원하는 키를 조합하여 설정해 줍니다.

단축키 설정하기

이 단축키는 선택한 태그 안의 내용만을 선택할 수 있게 해 줍니다. 특히 텍스트만 선택하고 싶을 때, 너무 유용합니다.

예시 코드

이렇게 하면 사용자 정의 단축키를 설정할 수 있습니다. 원하는 기능에 맞게 단축키를 설정하여 작업 효율을 높여보세요!

[firebase] 구글 Firebase로 무료 웹호스팅하는 방법에 대해서 알아보자

dev-chim.tistory.com

[Webpack] webpack.config.js, 웹팩 주요 속성 5가지(entry/output/loader/plugins/mode)

dev-chim.tistory.com

[AI] 클로바 더빙(CLOVA Dubbing으로 전문가처럼 더빙하기 : 초보자 튜토리얼

dev-chim.tistory.com

[CSS] 마크업(markup)할 때, img vs background-image 선택하는 기준은?

background-image와 img는 모두 이미지를 웹 페이지에 표시하는 데 사용되는 요소들이지만, 사용되는 목적에 따라 다르게 활용됩니다. 마크업(markup)할 때, img vs background-image 선택하는 기준에 대해서

dev-chim.tistory.com

[Git] Git 리베이스: 작업 브랜치의 변경 사항을 최신 상태로 유지하는 방법

dev-chim.tistory.com

[Utility] 이미지 추출 기준이란? (feat. Figma를 활용한 이미지 추출 방법)

chim — Fri, 29 Mar 2024 00:20:02 +0900

웹퍼블리셔로서 웹사이트나 앱의 사용자 경험을 향상하기 위해 디자이너와 협력하여 다양한 디자인 요소를 구현합니다. 이미지는 이러한 디자인 요소 중 하나로, 올바른 형식과 해상도로 이미지를 추출하는 것은 웹사이트나 앱의 성능과 사용자 경험에 직접적으로 영향을 미칩니다. 이번 포스팅 글에서는 이미지 추출의 기준과 피그마를 활용한 이미지 추출 방법에 대해 알아보겠습니다.

이미지 추출의 기준?

PNG

- 이미지를 여러 번 저장하거나 압축해도 품질이 손상되지 않습니다.

- 예를 들어 로고(Logo)나 아이콘(Icon)같이 투명한 배경이 필요한 경우 사용됩니다.

JPG

- 압축률을 조정하여 파일 크기를 줄일 수 있습니다. 따라서 이미지 파일 크기를 최소화해야 할 때 유용합니다.

- 사진이나 복합적인 이미지를 저장할 때 주로 사용됩니다.

SVG

- 백터 형식이기 때문에 크기를 조정해도 이미지 품질이 유지됩니다. 따라서 확대 및 축소가 필요한 이미지를 저장할 때 유용합니다.

- 예를 들어 로고나 아이콘과 같이 크기를 자주 변경해야 하는 이미지에 적합합니다.

따라서 이미지 추출의 기준은 이미지의 용도, 투명도의 필요 여부, 품질 유지, 파일 크기 등을 고려하여 png, jpg, svg 중에서 선택할 수 있습니다.

Figma에서 이미지 추출하는 방법

피그마(Figma)에 로그인하셔서 이미지를 추출하려는 파일을 엽니다.

1. 이미지 선택하기

이미지를 선택합니다. 그런 다음, 우측 패널에서 Export 섹션을 확인하세요. 선택한 이미지를 내보내고자 할 때 해당 섹션을 이용하면 됩니다.

추출하려는 이미지 선택하기

2. 내보내려는 이미지의 해상도와 형식 선택하기

고해상도 이미지를 사용할 때에는 그의 필요성을 고려해야 합니다. 모든 상황에서 고해상도 이미지를 사용할 필요는 없습니다. 예를 들어 간단한 아이콘이나 배경 이미지의 경우에는 고해상도가 필요하지 않을 수 있습니다. 또한 고해상도 이미지는 파일 크기가 크므로 로딩 속도를 늦출 수 있고, 이는 사용자 경험을 저하시킬 수 있습니다. 따라서 고해상도 이미지를 사용하는 것이 항상 좋은 것은 아닙니다. 상황에 따라 고려해서 사용하시길 바랍니다.

해상도, 이미지 형식 선택하기

3. 이미지 내보내기

미리 보기(Preview)로 확인한 후 Export 버튼을 클릭하면 이미지가 내보내집니다.

추출하기 클릭하기

이미지 추출은 웹사이트나 앱의 성능과 사용자 경험에 중요한 부분을 차지합니다. 올바른 형식과 해상도로 이미지를 추출하여 디자이너와의 협력을 통해 더 나은 결과물을 창출할 수 있습니다. Figma와 같은 디자인 도구를 활용하여 이미지 추출하는 방법에 대해서 알아보았습니다.

[git] github pages로 나만의 포트폴리오 웹페이지 배포해보기

개발자들은 버전관리시스템(Version Control Systyem)으로 git을 많이 사용하는데요. github 서비스로, 계정만 있다면 무료로 웹페이지를 호스팅(hosting)할 수 있는 방법에 대해서 알아보겠습니다. 배포할

dev-chim.tistory.com

[HTML] ios/Safari 에서의 SVG 랜더링 이슈: 해결책 탐색

SVG는 웹 디자인과 개발에서 매우 유용한 포맷으로, 화면 해상도와 크기 조절에 유연하고 고품질의 이미지를 제공합니다. 그러나 때로는 SVG가 다양한 환경에서 제대로 랜더링 되지 않을 수 있습

dev-chim.tistory.com

[Utility] 구독 없이 바로 사용 가능한 무료 온라인 디자인 툴 : Photopea(포토피아)

dev-chim.tistory.com

[CSS] 마크업(markup)할 때, img vs background-image 선택하는 기준은?

dev-chim.tistory.com

[HTML] Image Map, 이미지맵으로 이미지에 링크 거는 방법

dev-chim.tistory.com

[CSS] 플렉스 박스(Flexbox)와 아이템 속성 살펴보기

chim — Wed, 27 Mar 2024 23:27:19 +0900

플렉스 박스(Flexbox)는 웹 레이아웃을 구성하는 데 유용한 강력한 도구입니다. 이를 통해 요소들을 유연하게 정렬하고 배치할 수 있으며, 다양한 디바이스와 화면 크기에 대응하여 일관된 레이아웃을 제공할 수 있습니다. 이번 글에서는 플렉스 컨테이너와 아이템을 제어하는 주요 속성에 대해 살펴보겠습니다.

Flex Container

display:flex;로 설정하면 해당 요소가 플렉스 컨테이너로 작동합니다. 이는 그 안에 있는 아이템들을 플렉스 아이템으로 만듭니다.

플렉스 아이템들의 배치 및 정렬을 제어하는 각 속성들에 대해 간단히 알아보겠습니다.

flex-direction

플렉스 아이템의 배치 방향을 결정합니다. 주요 값으로는 row(가로 방향), row-reverse(가로, 반대 방향), column(세로 방향), column-reverse(세로, 반대 방향)가 있습니다.

flex-wrap

플렉스 아이템이 한 줄에 모두 배치되는지 또는 여러 줄에 걸쳐 나눠지는지를 설정합니다. 주요 값으로는 nowrap(한 줄), wrap(줄 바꿈), wrap-reverse(줄 바꿈, 반대 방향)가 있습니다.

flex-flow

flex-flow는 flex-direction과 flex-wrap의 단축 속성입니다.

.container {
    display: flex;
    flex-flow: row wrap;
}

따라서, flex-flow: row wrap; 는 flex-direction은 row(가로 방향), flex-wrap은 wrap(줄 바꿈)으로 설정됩니다.

justify-content

플렉스 아이템을 가로로 정렬하는 방법을 결정합니다. 주요 값으로는 flex-start, flex-end, center, space-between, space-around, space-evenly가 있습니다.

align-items

플렉스 아이템을 세로로 정렬하는 방법을 결정합니다. 주요 값으로는 stretch, flex-start, flex-end, center, baseline이 있습니다.

align-content

여러 줄 사이의 간격을 조절하고 플렉스 컨테이너 안에서의 정렬, 즉 여러 줄 사이의 정렬을 결정합니다. 주요 값으로는 flex-start, flex-end, center, space-between, space-around, space-evenly, stretch가 있습니다.

Flex Item

플렉스 아이템 속성은 플렉스 컨테이너 내의 개별 아이템들의 동작을 제어하는 데 사용됩니다. 각 속성에 대해 간단히 알아보겠습니다.

order

order 속성은 아이템들의 순서를 변경할 수 있습니다. 기본적으로 모든 아이템의 order값은 0이며, 이 값을 변경하여 아이템의 순서를 조정할 수 있습니다. 음수 값도 설정할 수 있습니다.

flex-grow

플렉스 아이템이 남은 공간을 차지하는 비율을 설정합니다. 기본값은 0, 이 값이 클수록 해당 아이템이 플렉스 컨테이너의 남은 공간을 많이 차지합니다.

예를 들어, flex-grow 값이 2인 아이템은 flex-grow 값이 1인 아이템보다 두 배 더 많은 공간을 차지하게 됩니다.

flex-shrink

플렉스 아이템이 축소되는 비율을 설정합니다. 기본값은 1, 만약 플렉스 아이템의 크기가 플렉스 컨테이너보다 크다면, 이 속성을 사용하여 해당 아이템이 얼마나 축소될지 결정할 수 있습니다. 이 값이 0이면 아이템은 축소되지 않고, 1보다 큰 값이면 다른 아이템보다 더 많이 축소됩니다.

flex-basis

플렉스 아이템의 기본 크기를 설정합니다. 기본값은 auto, 이 값은 플렉스 아이템이 플렉스 컨테이너 내에서 차지하는 공간의 초기 크기를 결정합니다.

이전 포스팅에서는 flex-basis를 이용하여 플렉스 아이템의 초기 크기를 제어하는 방법에 대해 다뤘습니다.

자세한 내용이 궁금하시다면 아래의 링크를 클릭하세요.

[CSS] Flexbox 크기 제어 전략 : flex-basis, flex-grow, flex-shrink, width, max-width, min-width

Flexbox는 웹 개발자들이 레이아웃을 구성하는 데 매우 유용한 도구 중 하나입니다. 그러나 Flexbox를 처음 사용하는 사람들에게는 각 속성들의 역할과 상호작용이 혼란스러울 수 있습니다. 특히,

dev-chim.tistory.com

flex

flex 속성은 flex-grow, flex-shrink, flex-basis 속성들을 단축하여 표현하는 속성입니다.

.item {
	flex: 1;
    /*
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    */
}

flex: 1; 은 flex-grow: 1;, flex-shrink: 1;, flex-basis: 0;의 축약 표현입니다. 이것은 각각의 아이템이 컨테이너의 남은 공간을 모두 차지할 수 있고, 축소가 가능하며, 아이템의 초기 크기를 설정하지 않는 것을 의미합니다.

align-self

개별 플렉스 아이템의 정렬을 설정합니다. 이 값은 align-items 속성보다 우선하여 개별 아이템의 정렬을 결정합니다.

이러한 속성들을 이용하여 다양한 레이아웃을 손쉽게 구성할 수 있으며, 반응형 디자인과 모바일 친화적인 레이아웃을 구현하는 데 큰 도움이 됩니다. 플렉스박스를 활용하여 웹 페이지의 사용자 경험을 향상하고, 보다 유연하고 동적인 인터페이스를 제공하는 것이 중요합니다.

[firebase] 구글 Firebase로 무료 웹호스팅하는 방법에 대해서 알아보자

dev-chim.tistory.com

[git] Github Desktop으로 아주 쉽게 저장소(repository)를 로컬에 클론(clone)하기

dev-chim.tistory.com

[CSS] 스크롤바(scrollbar) 스타일 제거하는 방법

dev-chim.tistory.com

[AI] 빙챗(Bing Chat)/코파일럿(Copilot) 설치 방법 및 간단 사용법

dev-chim.tistory.com

[Safari] 사파리 브라우저에서 모바일 모드로 보려면?

dev-chim.tistory.com

[CSS] Flexbox 크기 제어 전략 : flex-basis, flex-grow, flex-shrink, width, max-width, min-width

chim — Tue, 26 Mar 2024 22:12:51 +0900

Flexbox는 웹 개발자들이 레이아웃을 구성하는 데 매우 유용한 도구 중 하나입니다. 그러나 Flexbox를 처음 사용하는 사람들에게는 각 속성들의 역할과 상호작용이 혼란스러울 수 있습니다. 특히, 크기를 제어하는 데 사용되는 속성들인 flex-basis, flex-grow, flex-shrink, width, max-width, min-width의 차이점에 대해 이해하는 것은 중요합니다. 이러한 속성들을 올바르게 이해하는 시간을 가져보겠습니다.

flex-basis

플렉스(flex) 아이템(item)이 플렉스 컨테이너(container) 내에서 차지할 초기 크기를 지정합니다.

기본값은 auto이며, 해당 아이템의 너비(width)를 해당 아이템의 내용 또는 고정된 너비에 따라 결정합니다.

width

요소의 너비를 지정합니다.

만약 flex-basis가 지정되지 않았다면 width 속성이 적용됩니다.

.container {
  list-style: none;
  outline: 1px solid black;
  background-color: #fff;
  margin: 10px;
  width: 500px;
  height: 50px;
  display: flex;
  
  .item {
    width: 50px;
    height: 50px;
    flex-basis: auto; /* flex-basis 기본값 */

    &:nth-of-type(1){
      background-color: yellow;
    }
    &:nth-of-type(2){
      background-color: red;
    }
    &:nth-of-type(3){
      background-color: orange;
    }
  }
}

아이템들의 너비는 50px

flex-basis가 지정되어 있으면 width 값을 무시하고 flex-basis 값을 따릅니다.

.item {
      width: 50px;
      height: 50px;
      flex-basis: 100px;
  }

아이템들의 너비는 100px

max- width

요소의 최대 너비를 지정합니다. 즉, 요소의 크기가 이 값을 초과할 수 없습니다.

max-width가 flex-basis 보다 작을 경우, max-width값에 의해 제한됩니다.

.item {
      width: 50px;
      height: 50px;
      flex-basis: 100px;
      max-width: 80px;
  }

아이템들의 너비는 80px

단순히 max-width가 flex-basis 보다 경우 어떤 값이 적용되는지 살펴보았습니다. flex-basis 값을 100px 적용하였고, max-width 값은 150px까지 될 수 있습니다.

.item {
      width: 50px;
      height: 50px;
      flex-basis: 100px;
      max-width: 150px;
  }

아이템들의 너비는 100px

flex-grow를 1로 설정하여 여유공간 만큼 .item 요소가 늘어나는 경우를 추가하면 너비값은 150px이 적용됩니다.

.item {
      width: 50px;
      height: 50px;
      flex-basis: 100px;
      flex-grow: 1;
      max-width: 150px;
  }

아이템들의 너비는 150px

min- width

요소의 최소 너비를 지정합니다. 즉, 요소의 크기가 이 값을 미만으로 줄어들지 않습니다.

min-width가 flex-basis 보다 클 경우, min-width 값이 적용됩니다.

.item {
      width: 50px;
      height: 50px;
      flex-basis: 100px;
      min-width: 120px;
  }

아이템들의 너비는 120px

min-width가 flex-basis 보다 작을 경우에도 살펴보겠습니다. flex-basis 값이 적용됩니다. 이 부분은 너무 당연한 결과입니다. 최소 너비값이 120px 이상이면 되기 때문입니다.

.item {
      width: 50px;
      height: 50px;
      flex-basis: 150px;
      min-width: 120px;
  }

아이템들의 너비는 150px

flex-shrink : 0;

Flexbox 레이아웃에서 아이템이 축소되는 정도를 제어하는 속성입니다. 이 값을 0으로 설정하면 해당 아이템은 축소되지 않고, 자신의 크기를 유지하려고 합니다.

부모 컨테이너(.container)에 display: flex 속성을 적용하면 기본값으로 flex-grow: 0, flex-shrink: 1, flex-basis: auto로 설정됩니다.

.container {
    width: 500px;
    height: 50px;
    display: flex; 

    .item {
      width: 50px;
      height: 50px;
      flex-basis: 200px;
    }
}

flex-basis 값이 200px이었지만 여유공간이 부족해서 .item의 너비값이 줄어들었습니다.

flex-shrink: 1

flex-shrink: 0 값을 적용하여 아예 줄어들지 않도록 설정할 수 있습니다.

.item {
      width: 50px;
      height: 50px;
      flex-basis: 200px;
      flex-shrink: 0;
  }

flex-shrink: 0

flex-grow : 1;

Flexbox 레이아웃에서 아이템이 컨테이너의 남은 공간을 어떻게 확장할지를 제어하는 속성입니다. 이 값을 0으로 설정하면 해당 아이템은 추가적인 공간을 차지하지 않으며, 그 크기를 유지하려고 합니다.

.item {
      width: 50px;
      height: 50px;
      flex-basis: 100px;
      flex-grow: 1;
  }

flex-basis 값이 100px이지만 flex-grow를 1로 설정하면 해당 아이템은 컨테이너의 남은 공간을 모두 차지하려고 합니다.

flex-grow: 1;

Flexbox를 사용하면 레이아웃을 훨씬 유연하게 제어할 수 있습니다. flex-basis, flex-grow, flex-shrink, width, max-width, min-width와 같은 속성들을 올바르게 이해하고 활용하면, 다양한 디바이스 및 화면 크기에 맞게 반응형 디자인을 구현하는 데 도움이 됩니다. 이러한 속성들을 효과적으로 활용하여 사용자 경험을 향상하고, 웹 애플리케이션의 성능을 최적화할 수 있습니다.

[firebase] 구글 Firebase로 무료 웹호스팅하는 방법에 대해서 알아보자

dev-chim.tistory.com

[Utility] Jump Desktop을 활용한 원격 접속 : 어디서든 컴퓨터를 제어하세요!

dev-chim.tistory.com

[AI] 클로바 더빙(CLOVA Dubbing으로 전문가처럼 더빙하기 : 초보자 튜토리얼

dev-chim.tistory.com

[Git] Git 리베이스: 작업 브랜치의 변경 사항을 최신 상태로 유지하는 방법

dev-chim.tistory.com

[Safari] 사파리 브라우저에서 모바일 모드로 보려면?

dev-chim.tistory.com

[Utility] Photopea : Content-Aware 기능으로 객체 손쉽게 제거하기

chim — Mon, 25 Mar 2024 23:31:23 +0900

앞서 포스팅된 글에서는 Photopea의 주요 기능을 간략히 살펴보았습니다.
자세한 내용이 궁금하시다면 아래의 링크를 확인해 주세요!

[Utility] 구독 없이 바로 사용 가능한 무료 온라인 디자인 툴 : Photopea(포토피아)

dev-chim.tistory.com

Content-Aware

이미지를 편집할 때 특정 요소를 제거하거나 이동시킬 때 사용됩니다. 이 기능은 주변 픽셀을 분석하여 픽셀을 제거하고 다른 요소들을 채우는 데 사용됩니다. 이를 통해 이미지를 조작하고 수정할 때 보다 자연스러운 결과물을 얻을 수 있습니다.

이 기능은 특히 사진 편집에서 유용하며, 보정, 리터치 및 임의의 사진 조작 작업에 사용됩니다.

참고로 Photoshop(포토샵) Content-Aware Fill과 유사한 기능을 제공합니다.

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

포토피아 웹사이트에 접근합니다.

Photopea | Online Photo Editor

✕ Photopea: advanced photo editor Free online photo editor supporting PSD, XCF, Sketch, XD and CDR formats. (Adobe Photoshop, GIMP, Sketch App, Adobe XD and CorelDRAW). Create a new image or open existing files from your computer. Save your work as PSD (

www.photopea.com

이미지를 불러오세요.

작업하려는 이미지를 불러오기 위해 상단 메뉴 파일(File) > 열기(Open)를 클릭합니다. 원하는 이미지 파일을 선택하여 이미지를 불러옵니다.

이미지 불러오기

사진 출처 : Unsplash의Mathilde Langevin

Content-Aware를 선택하세요.

이미지에 편집하려는 부분을 올가미 선택 도구를 사용하여 원하는 영역을 선택합니다. 일반적으로 이것은 제거하려는 객체 또는 배경을 포함하는 영역입니다.

원하는 영역 선택하기

편집 메뉴를 여세요.

선택한 영역을 편집하기 위해 상단 메뉴 편집(Edit)을 클릭합니다.

Content-Aware 기능을 사용하세요.

상단 메뉴에서 편집 > 채우기(Fill)를 클릭하세요.

편집 > 채우기

채우기 드롭 메뉴에서 내용 인식(Content-Aware)을 선택하시고 확인을 클릭하세요.

내용 인식 > 확인

Content-Aware 기능이 적용된 후에는 결과를 확인하고 만족할 때까지 여러 번 재시도해봅니다.

최종 결과물입니다.

최종 결과물

이미지 작업의 결과물을 선보일 때 완성도는 매우 중요합니다. Photopea의 Content-Aware 기능을 활용하여 작업의 결과물의 완성도를 한층 높여보세요.

유용한 터미널 명령어

dev-chim.tistory.com

[Server] 외부에서 파일을 보다 안전하게 공유하는 방법 (feat. Synology Nas Server)

dev-chim.tistory.com

[git] Github Desktop으로 아주 쉽게 저장소(repository)를 로컬에 클론(clone)하기

dev-chim.tistory.com

[AI] 글쓰기 고민? 뤼튼(;wrtn) AI가 도와드립니다!

글 초안 작성 플랫폼 뤼튼을 소개하겠습니다. 가장 큰 특징은 한국어에 최적화된 글쓰기 버티컬(vertical) AI 서비스를 제공합니다. 한국어로 글쓰기에서 가장 앞선 서비스가 아닐까 생각합니다.

dev-chim.tistory.com

[Safari] 사파리 브라우저에서 모바일 모드로 보려면?

dev-chim.tistory.com

[Git] 2가지 방법으로 변경사항 가져오기 (feat. git checkout, git cherry-pick)

chim — Sun, 24 Mar 2024 22:17:35 +0900

코드를 관리하는 과정에서 이전 상태로 돌아가야 할 때나 다른 브랜치에서의 변경 사항을 현재 브랜치로 가져와야 할 때가 있습니다. 이럴 때 사용하는 주요 명령어에 대해서 살펴보겠습니다.

git checkout으로 파일 가져오기

이전 커밋 상태로 되돌리는 명령어입니다.

--를 사용하여 git에게 파일 이름으로 해석하라고 명시적으로 알려줍니다.

git checkout HEAD~1 -- [경로/파일명]

git checkout 명령어를 사용하여 파일을 이전 커밋의 상태로 가져오면, 해당 파일의 현재 상태는 이전 커밋의 상태로 완전히 교체됩니다. 그러므로 충돌이 발생하지 않습니다.

주의할 점은 현재 작업 디렉토리에 변경 사항이 있는 경우, 해당 파일을 checkout 하기 전에 변경 사항을 stash에 잠시 보관하는 것이 변경사항을 잃지 않는 방법입니다.

다른 브랜치에서 파일을 가져오는 명령어입니다.

git checkout [다른 브랜치명] -- [경로/파일명]

git cherry-pick으로 변경 사항 가져오기

다른 브랜치에서 특정 커밋을 현재 브랜치로 가져오는 방법입니다.

git cherry-pick [커밋 해시값]

주의할 점은 가져온 커밋이 충동을 일으킬 수 있으며, 충돌이 발생할 경우에는 충돌을 해결해야 합니다.

아래의 명령어는 현재 진행 중인 체리픽(cherry-pick)을 중단하고 이전 상태로 되돌리는 것입니다.

git cherry-pick --abort

이는 특히 다른 브랜치에서 필요한 마이너한 수정 사항을 가져오는데 유용합니다.

이렇게 git checkout과 git cherry-pick은 각각 파일을 되돌리거나 가져오는 작업을 수행하는 데 사용됩니다. 항상 목적에 맞게 적절한 명령어를 사용하여 코드를 관리해야 합니다.

[Javascript] 브라우저 창 크기를 측정하는 주요 속성들에 대해서 알아보자

dev-chim.tistory.com

[git] README.md 파일 작성시, Markdown 문법(Syntax) 사용법

dev-chim.tistory.com

[Safari] 사파리 브라우저에서 모바일 모드로 보려면?

dev-chim.tistory.com

[Utility] Snipaste - 무료 캡쳐 도구, 핀(Pin) 고정, 클립보드(Clipboard), 색상 추출(Color Picker)

dev-chim.tistory.com

[AI] 클로바 더빙(CLOVA Dubbing으로 전문가처럼 더빙하기 : 초보자 튜토리얼

dev-chim.tistory.com

[AI] 손필기는 이제 그만! 클로바 노트(CLOVA Note)의 음성 메모 혁신을 경험하세요!

chim — Sun, 24 Mar 2024 00:27:24 +0900

클로바노트는 음성인식, 자연어 처리 등의 AI 기술을 활용한 회의록 관리 서비스입니다. 이 서비스는 긴 문장과 비정형화된 대화를 인식하는 데 특화된 음성인식 엔진을 사용하며 참석자의 목소리 차이를 구분할 수 있습니다. 최근에는 회의록 요약, 노트 공유, 하이라이트 표시, 메모 등의 기능이 추가되어 사용자 경험을 한층 업그레이드했습니다. 이에 대해 알아봅시다.

클로바 노트 설치 방법

클로바 노트 홈페이지에 접속하시고, 상단 메뉴에서 앱 다운로드 > 운영 체제 앱 스토어 > 설치하세요.

네이버 로그인을 하시고 서비스를 이용하시면 됩니다.

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

클로바노트

음성 그 이상의 기록

clovanote.naver.com

클로바노트 앱 다운로드

사용 전 알아두면 좋은 팁 ✨

클로바노트는 모바일 앱뿐만 아니라 PC에서도 사용할 수 있어 언제 어디서나 편리하게 회의록을 관리할 수 있습니다.

장소가 넓거나 발표자와의 거리가 멀어서 녹음 마이크 위치를 유연하게 옮겨야 하는 경우에는 모바일 앱을, 노트북에서 화상 회의나 강의에 참여 중인 경우에는 PC에서 녹음 기능을 이용하시면 편리합니다.

사용 방법

대화 중에 중요한 정보를 듣고 기록하는 것이 어려울 때가 있습니다. 회의, 강의, 인터뷰, 상담 등의 상황에서 대화의 흐름을 놓치지 않고 정확하게 기록하고 싶다면, 클로바 노트의 녹음 기능을 활용해 보세요. 이를 통해 대화에 집중하면서 동시에 모든 내용을 빠르게 기록할 수 있습니다.

녹음 기능

모바일 기준으로 안내드리겠습니다. 우선 하단에 위치한 더하기 버튼을 탭한 후, 그 다음에 녹음 버튼을 탭 해주세요. 그러면 동시에 녹음 기능이 활성화됩니다.

더하기 버튼 클릭 > 녹음 버튼 클릭

일시 정지 버튼을 탭 하여 녹음을 중지할 수 있고, 종료 버튼을 클릭하여 녹음을 완전히 종료할 수 있습니다.

일시 정지 버튼 클릭 > 종료 버튼 클릭 > 녹음 종료 버튼 클릭

최종적으로 녹음 종료 버튼을 탭 하면 세부 정보를 설정할 수 있는 옵션 창이 나타납니다. 여기서 원하는 설정을 선택한 후 확인 버튼을 탭 하면, 음성이 텍스트로 변환되고 서버에 업로드됩니다.

옵션 선택 > 확인 클릭

대화 내용 하이라이트, 메모, 북마크 기능

녹음 도중 중요한 순간에는 가볍게 메모나 북마크로 표시해 두면 해당 구간을 다시 찾아보거나 참고할 때 편리합니다.

하이라이트(Highlight) 기능

음성 기록 내용을 길게 탭 하면 하이라이트를 추가할 수 있는 창이 표시됩니다. 거기서 하이라이트 버튼을 탭 하면 원하는 부분을 선택하여 하이라이트 추가할 수 있습니다.

하이라이트 기능

메모(Memo) 기능

녹음 중에 메모하기 버튼을 탭하면 메모를 추가할 수 있습니다. 추가적인 메모가 필요하다면 메모 추가 버튼을 통해 기록해 보세요. 녹음이 종료되고 음성 파일이 텍스트로 변환된 후, 메모/요약 탭을 탭하면 메모 목록을 확인할 수 있습니다.

메모 기능

북마크(Bookmark) 기능

음성 기록 내용을 길게 탭 하면 북마크를 추가할 수 있는 창이 표시됩니다. 거기서 북마크 버튼을 탭 하여 북마크를 추가해 보세요.

재생 버튼 우측 가장자리에 위치한 컬렉션(Collection) 버튼을 탭 하면 북마크 목록을 확인할 수 있습니다.

북마크 기능

노트 공유 기능

사용자는 노트 공유하기 기능을 활용하여 팀원들과 효율적으로 정보를 공유할 수 있습니다. 음성 파일이 텍스트로 변환된 후, 상단 메뉴에서 공유하기 버튼을 탭 하여 링크 공유하세요.

노트 공유 기능

클로바노트를 통해 회의나 강의, 일상 대화의 중요한 내용을 효과적으로 기록하고 관리해 보세요. 이렇게 클로바 노트의 주요 기능을 사용하는 방법에 대해서 알아보았습니다.

[Notion] Notion Web Clipper, 스크랩한 웹페이지를 한 데 모아서 관리하는 방법

dev-chim.tistory.com

[git] Github Desktop으로 아주 쉽게 저장소(repository)를 로컬에 클론(clone)하기

dev-chim.tistory.com

[Utility] Jump Desktop을 활용한 원격 접속 : 어디서든 컴퓨터를 제어하세요!

dev-chim.tistory.com

[Utility] 구독 없이 바로 사용 가능한 무료 온라인 디자인 툴 : Photopea(포토피아)

dev-chim.tistory.com

[Safari] 사파리 브라우저에서 모바일 모드로 보려면?

dev-chim.tistory.com

[Utility] 구독 없이 바로 사용 가능한 무료 온라인 디자인 툴 : Photopea(포토피아)

chim — Sat, 23 Mar 2024 00:39:08 +0900

포토피아(Photopea)에 대해서 들어보셨나요? 오늘은 이 인기 있는 온라인 이미지 편집 도구에 대해 알아보겠습니다. 포토피아는 Adobe Photoshop과 유사한 기능을 무료로 제공하는데요. 인터넷 브라우저만 있다면 언제 어디서나 접근할 수 있어 편리하며, 다양한 이미지 편집 작업을 수행할 수 있습니다. 이제 포토피아의 기능과 장점을 자세히 알아보도록 하겠습니다.

Photopea 그래픽 디자인 편집기 바로가기

아래의 링크를 클릭하여 Photopea 디자인 편집 도구를 사용해 보세요.

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

Photopea | Online Photo Editor

www.photopea.com

포토피아의 이점

- 포토피아는 Adobe Photoshop과 유사한 사용자 인터페이스를 갖추고 있어 사용자들이 친숙한 환경에서 작업할 수 있습니다. 이는 Photoshop을 사용했던 사용자들에게는 적응이 쉬우며, 새로운 사용자들도 빠르게 익숙해질 수 있습니다.
- 무료로 사용 가능하다는 점입니다. 사용자들은 별도의 비용 없이 포토피아를 자유롭게 이용할 수 있어서 소프트웨어 구매에 따른 부담을 덜 수 있습니다.

- 웹 브라우저에서 바로 사용할 수 있어 별도의 구독이 필요하지 않습니다. 이는 사용자가 어디서든 인터넷에 접속한 상태에서 포토피아를 사용할 수 있다는 것을 의미합니다. 따라서 별도의 소프트웨어 설치 없이도 필요할 때마다 편리하게 포토피아를 활용할 수 있습니다.

단점이라면...

일부 고급 기능이 부족할 수 있어서, 매우 전문적인 작업이나 복잡한 편집을 원하는 경우에는 포토피아로는 충분하지 않을 수 있습니다.

포토피아의 주요 기능

이미지 편집 기능 예시 - 백그라운드 제거

상단 메뉴바에서 파일 > 열기를 클릭하여 원하는 이미지를 불러옵니다.

배경을 삭제해보려고 합니다.

출처 사진:  Unsplash 의 micheile henderson

상단 메뉴바에서 선택 > Remove BG를 클릭하세요.

Remove BG

너무 만족스러운 결과입니다.

복잡한 누끼 작업 없이도 고품질의 배경 제거 결과물을 얻을 수 있습니다.

작업 결과물

파일 > 저장을 클릭하여 결과물을 저장해 보세요.

파일 저장하기

파일 형식 지원

.PSD, .AI, .XD, .FIG, .sketch, .PDF, RAW, JPG, PNG, GIF, TIFF, SVG, DDS 등 다양한 형식을 지원합니다.

다양한 파일 형식 지원

클라우드 기반 작업

작업 파일을 클라우드에 저장하여 언제든지 필요할 때 불러올 수 있습니다. 이는 로컬 컴퓨터에 저장된 파일과는 달리 어디서든 접근할 수 있어 편리합니다. 또 클라우드를 통해 여러 사용자가 동시에 작업 파일에 접근하여 함께 작업할 수 있습니다. 이는 프로젝트에 참여하는 다른 사람들과 실시간으로 작업 내용을 공유하고 피드백을 주고받을 수 있어 협업에 매우 유용합니다.

클라우드 기반

단축키

포토피아는 Adobe Photoshop과 유사한 인터페이스를 갖추고 있으므로, 일부 기능 및 단축키는 비슷할 수 있습니다. 하지만 각 소프트웨어는 고유한 특징과 단축키를 가지고 있기 때문에 완전히 동일하지는 않습니다.

아래의 이미지를 참고하여 키보드 단축키를 활용하여 작업의 효율을 높여보세요.

포토피아 단축키 1

포토피아 단축키 2

포토피아는 많은 사용자들에게 이미지 편집 작업을 수행하는 데 필요한 편의성과 기능성을 제공합니다. 무료로 이용 가능하며, 웹 브라우저만 있으면 언제든지 작업을 할 수 있습니다. 여러분도 포토피아를 이용하여 다양한 이미지 작업을 편리하게 작업해 보세요. 이렇게 포토피아에 대해서 알아보았습니다.

[Server] QuickConnect로 외부에서 서버 접속하는 방법

dev-chim.tistory.com

[Utility] Snipaste - 무료 캡쳐 도구, 핀(Pin) 고정, 클립보드(Clipboard), 색상 추출(Color Picker)

dev-chim.tistory.com

[CSS] 유튜브(Youtube) 영상을 비율 유지한 채 반응형으로 삽입하는 방법

dev-chim.tistory.com

[macOS] Mac에서 QuickTime Player로 화면 녹화하는 간단한 가이드 및 팁

dev-chim.tistory.com

[AI] 글쓰기 고민? 뤼튼(;wrtn) AI가 도와드립니다!

dev-chim.tistory.com

[AI] 1분이면 가능! Gamma로 빠르고 멋진 PPT와 웹사이트 제작하기

chim — Thu, 21 Mar 2024 19:00:51 +0900

현대사회에서는 빠르게 변화하는 환경에서 새로운 아이디어를 신속하게 전달하는 것이 중요합니다. 이를 위해 AI 생성을 기반으로 하는 Gamma는 간편한 인터페이스를 제공하여 PPT, 문서, 웹사이트를 신속하게 제작할 수 있습니다. 함께 더 자세히 살펴보겠습니다.

Gamma 회원가입하기

https://gamma.app/

이메일을 통한 간편한 회원가입으로 서비스를 이용해 보세요. Sign up for free 버튼을 클릭하세요.

작업 공간 만들기 버튼을 클릭합니다.
일부 정보를 입력하여 생성 페이지로 이동하시면 됩니다.

작업 공간 만들기 버튼 클릭

1분 만에 웹사이트 만들기

프레젠테이션(PPT), 문서(Document), 웹 페이지(Web page) 중에 목적에 맞는 옵션을 선택해 주세요. 저는 예시로 웹페이지를 선택했습니다. 어떤 종류의 웹사이트를 생성할지 정보를 입력하고 개요 생성 버튼을 클릭하세요.

웹사이트 생성하기

한 번의 클릭으로 웹페이지의 목차를 생성해 주었습니다.

설정에서 더 구체적인 옵션을 제공해 주세요. 그리고 계속 버튼을 클릭합니다.

설정 > 옵션 설정하기

셔플 테마를 클릭하여 다양한 테마를 둘러보세요.

원하는 테마를 선택하고 생성 버튼을 클릭합니다.

테마 선택하기

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

1분 만에 웹사이트 초안 완성!

이렇게 Gamma를 사용하면 프레젠테이션, 문서, 웹사이트를 쉽고 간단하게 만들 수 있습니다. 브라우저 상에서 작업되며 어디서든 접근 가능하고 아무것도 다운로드하거나 설치할 필요가 없습니다. 공유도 용이하 고 피드백을 남기기도 간편하여 협업에 굉장히 편리한 소프트웨어입니다.

부분 편집

우측 위젯에서 AI 아이콘을 클릭하여 챗봇처럼 도움을 받아보세요.

위젯 > AI 아이콘

우선, 수정할 요소를 클릭하세요.

대화창에 변경할 사항을 입력하여 수정해 보세요.

변경할 사항을 입력하여 수정하기

위젯 > 앱 및 웹페이지 임베딩 > 드래그하여 삽입하세요.

Google Drive, PDF, Figma, Tweet, Office 365 등 다양한 콘텐츠 유형들을 임베드(embed)하세요.

다양한 콘텐츠를 임베드하기

요소를 클릭하면 편집 툴(edit tool)을 통해 수정하실 수 있습니다.

강조 이미지 아이콘 > 강조 이미지 드롭 메뉴 > AI images > 프롬프트를 작성 > 생성 버튼을 클릭합니다.

개인적으로 Unsplash에서 키워드로 이미지를 검색하는 것이 AI images에서 프롬프트를 작성하여 얻는 것보다 원하는 이미지를 찾기가 더 수월했습니다.

강조 이미지 > AI images

이 페이지 미리보기

더욱 놀라운 점은 반응형 웹페이지로 제작해 준다는 것입니다. 이는 콘텐츠가 모바일(mobile), 태블릿(tablet), 데스크탑(PC)에서 모두 잘 보이도록 최적화되어 있다는 뜻입니다. 사용자는 미리보기를 통해 각각의 화면 크기에 맞게 콘텐츠가 어떻게 표시될지 확인하실 수 있습니다.

우측 상단 메뉴 > 게시 드롭 메뉴 > 이 페이지 미리보기를 클릭합니다.

이 페이지 미리보기를 클릭하기

디바이스별 미리보기를 통해 콘텐츠의 레이아웃을 확인해 보세요.

모바일 프리뷰(Preview)

웹사이트 배포

웹호스팅하고 업로드를 고민할 필요 없이 아주 간단하고 빠르게 웹사이트를 게시할 수 있습니다.
게시와 동시에 제공되는 URL을 통해 어디서나 접근 가능하고 공유하실 수 있습니다.

웹사이트 배포

커스텀 도메인 설정

사용자가 원하는 도메인 주소를 사용하여 웹사이트를 설정할 수 있습니다. 즉 사용자는 자신의 웹사이트에 사용할 도메인 주소를 선택하고 설정할 수 있습니다. 다만 유료 서비스로 pro 버전으로 업그레이드하세요!

좌측 상단 메뉴 > 프로젝트명 드롭 메뉴 > 사이트 설정 > 도메인 탭 > 업그레이드를 클릭하세요.

프로젝트명 드롭메뉴 접근

사이트 설정 > 도메인 탭 > 업그레이드 클릭

AI 생성을 기반으로 한 간편한 인터페이스를 통해 PPT, 문서, 웹사이트를 신속하게 제작할 수 있어, 창의적인 아이디어를 효과적으로 발표하고 공유할 수 있습니다. 따라서, Gamma를 활용하여 아이디어를 현실로 구현해 보세요. 이렇게 Gamma에 대해서 알아보았습니다.

[git] Github Desktop으로 아주 쉽게 저장소(repository)를 로컬에 클론(clone)하기

dev-chim.tistory.com

[CSS] 유튜브(Youtube) 영상을 비율 유지한 채 반응형으로 삽입하는 방법

dev-chim.tistory.com

Vite에서 모듈들 간단하게 설치해서 사용하기 (feat. sass) - 1편

dev-chim.tistory.com

[npm] npm 버전 확인, 초기화, 설치 및 옵션, 삭제 등 기본 사용법

dev-chim.tistory.com

[Utility] Jump Desktop을 활용한 원격 접속 : 어디서든 컴퓨터를 제어하세요!

dev-chim.tistory.com

[Git] Git Stash : 변경사항을 임시로 저장하는 방법

chim — Wed, 20 Mar 2024 17:11:18 +0900

보통 개발자들은 여러 작업을 동시에 진행하거나, 작업 중에 예기치 않은 변경이 필요할 때가 있습니다. 이런 상황에서는 현재 작업 중인 변경사항을 커밋(commit)하기 전에 보관할 필요가 있습니다. 여기서 git stash가 유용하게 사용됩니다. 이를 알아봅시다.

Stash 활용 예시

개발 중, 갑자기 다른 브랜치로 전환해야 하는 상황이 발생했다고 해봅시다. 이때 현재 작업 중인 변경사항을 임시 저장하고 싶을 것입니다. 이때 stash를 사용하면 됩니다. 왜냐하면 커밋하지 않은 변경사항이 남아있는 상태에서는 브랜치를 전환할 수 없기 때문에 stash 기능으로 잠시 저장하고 나중에 다시 돌아와서 이를 다시 적용할 수 있습니다.

커밋을 하지 않은 이유로는 아직 완료되지 않은 작업이나 실험적인 변경사항이었다면 이를 커밋하지 않고 stash에 일시적으로 보관할 수 있습니다. 이렇게 함으로써 불필요한 커밋을 방지할 수 있습니다.

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

Stash 명령어

메시지를 지정하지 않고 stash를 생성하기

git stash

메시지를 지정하여 stash를 생성하기

git stash save "message"

stash 리스트(목록) 확인하기

git stash list

가장 최근에 저장된 stash 변경사항 diff 보기

git stash show

stash@{0}: WIP on master: 1234abcd Commit message
file1.txt | 2 +-
file2.txt | 1 +
2 files changed, 2 insertions(+), 1 deletion(-)

특정 stash(예: stash 번호 2)의 저장된 변경사항 보기

git stash show stash@{2}

변경된 내용을 패치 형식으로 보기

git stash show -p

diff --git a/file1.txt b/file1.txt
index 1234567..abcdefg 100644
--- a/file1.txt
+++ b/file1.txt
@@ -1,4 +1,4 @@
-Old line
+New line

stash에서 가장 최근에 저장된 변경사항을 다시 가져오기

git stash apply

stash에서 가장 최근에 저장된 변경사항을 다시 가져오고 stash를 삭제하기

git stash pop

특정 stash(예: stash 번호 2)를 삭제하기

git stash drop stash@{2}

저장된 모든 stash를 삭제하기

git stash clear

저장된 stash를 새로운 브랜치를 만들어 체크아웃하고 변경사항 적용해 주기

#git checkout -b [newBranchName]
#git stash apply stash@{number}
git stash branch [newBranchName] stash@{number}

참고로 stash는 해당 브랜치에만 임시로 저장됩니다. 다른 브랜치로 이동하면 해당 브랜치에서 저장한 stash 목록을 확인할 수 없습니다.

이렇게 git stash의 다양한 명령어를 활용하여 개발 작업을 보다 효율적으로 관리할 수 있습니다.

[Server] 외부에서 파일을 보다 안전하게 공유하는 방법 (feat. Synology Nas Server)

dev-chim.tistory.com

[npm] npm 버전 확인, 초기화, 설치 및 옵션, 삭제 등 기본 사용법

dev-chim.tistory.com

[macOS] Mac에서 QuickTime Player로 화면 녹화하는 간단한 가이드 및 팁

dev-chim.tistory.com

현재 스크롤Y값 구하기

브라우저에서 현재 scrollY 값을 구하는 방법에 대해서 알아보겠습니다. window.pageYOffset === window.scrollY; //true window 안의 document가 수직 방향으로 스크롤된 거리를 픽셀 단위로 나타낸 부동소수점 수

dev-chim.tistory.com

[Utility] 쉽고 간편하게 디자인하기 : 캔바(Canva) 사용법

dev-chim.tistory.com

[Git] Git 리베이스: 작업 브랜치의 변경 사항을 최신 상태로 유지하는 방법

chim — Tue, 19 Mar 2024 23:16:18 +0900

소프트웨어 개발에서 협업은 중요한 요소입니다. 하지만 여러 명이 같은 코드베이스에서 작업하다 보면 복잡한 작업 흐름과 충돌이 발생할 수 있습니다. Git에서 제공하는 리베이스(Rebase)는 이러한 문제를 해결하고, 작업 흐름을 보다 체계적으로 관리할 수 있게 도와줍니다.

이번 포스트에서는 rebase에 대해 알아봅시다.

Rebase란?

Rebase는 Git에서 브랜치를 다른 브랜치의 기준으로 옮기는 것을 의미합니다. 이는 브랜치의 커밋 기록을 변경하거나 재정렬하는 과정입니다. Rebase를 하면 현재 브랜치의 commit(커밋)들을 다른 브랜치 위에 올려놓고, 마치 그 브랜치에서 직접 커밋한 것처럼 보입니다.

브랜치의 커밋 history(기록)를 깔끔하게 유지하기 위해 사용됩니다. 여러 명이 함께 작업하기 때문에 커밋들이 복잡해질 수 있는데 Rebase를 통해 이를 정리할 수 있습니다.

다른 브랜치의 최신 변경 사항을 통합하기 위해 사용됩니다. Rebase를 통해 다른 브랜치의 변경 사항을 현재 작업 중인 브랜치에 반영할 수 있습니다.

다이어그램을 통한 Rebase 이해하기

        A---B---C feature
       /
  D---E---F---G main

main 브랜치는 프로젝트의 메인 브랜치로 가장 최신으로 반영된 변경 사항은 G 커밋입니다.

feature 브랜치는 main 브랜치 E 커밋에서 새롭게 분기된 브랜치입니다. 그 후 main 브랜치와는 별도로 발전해 온 A, B, C 커밋을 포함하고 있습니다. 이러한 상황에서 Rebase를 수행하면 feature 브랜치의 커밋들을 main 브랜치의 최신 커밋 위에 올려놓을 수 있습니다.

                    A'--B'--C' feature
                   /
  D---E---F---G main

이를 통해 개발 브랜치가 main 브랜치의 최신 상태를 반영하면서도 개발 작업을 계속할 수 있습니다. 이는 충돌을 최소화하고 작업을 원활하게 진행할 수 있도록 도와줍니다.

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

기반 브랜치(base branch)에 merge 된 이후, rebase 예시

1. 현재 원격 저장소에 있는 모든 브랜치의 최신 상태를 확인하고, 로컬 저장소에 해당 정보를 가져옵니다.

실제로 로컬 저장소에는 아무런 변경 사항이 반영되지 않습니다.

git fetch --all

2. main 브랜치(기반 브랜치)로 변경합니다.

git checkout main

3. origin/main 브랜치의 최신 커밋 위로 재배치합니다.

git rebase origin/main

4. 다시 feature 브랜치(작업 브랜치)로 변경합니다.

git checkout feature

5. feature 브랜치를 main 브랜치의 최신 커밋 위로 재배치합니다.

git rebase main

6. 이전에 origin/feature에 push(푸시)한 이력이 있기 때문에 이력을 강제로 업데이트해야 합니다.

git push -f

7. 작업 재시작!

git push -f (강제 푸시)에 대한 이해

주로 개발 과정에서는 로컬에서 작업한 후 원격 저장소에 변경 사항을 반영합니다. 하지만 때로는 이전에 이미 푸시(Push)한 변경 사항을 수정하거나 제거해야 할 때가 있습니다. 이때 강제 푸시를 사용하여 원격 저장소의 이력을 강제로 업데이트할 수 있습니다.

*다른 개발자들과 협업하는 브랜치에는 작업에 영향을 줄 수 있으므로 사용을 지양하는 것이 좋습니다.

함께 작업 중인 브랜치에 rebase를 받아야 할 때, 예시

1. 우선 로컬의 작업 내용을 커밋합니다.

git add .
git commit -m "commit message"

2. 원격 브랜치에서 변경 사항을 가져옵니다. 작업 브랜치는 feature입니다.

git fetch origin feature

3. rebase 받기

git rebase origin/feature

4. 필요 시 충돌 해결하기

해당 파일의 충돌을 해결합니다. 해결된 파일을 스테이징 합니다.

git add .

rebase를 이어갑니다.

git rebase --continue

*참고로 rebase 취소 명령어는 git rebase --abort 입니다.

5. 필요 시 원격 브랜치에 강제 푸시합니다.

git push -f

리베이스는 git에서 중요한 작업 흐름 중 하나입니다. 올바르게 사용하면 이력의 가독성을 향상하고 작업을 보다 체계적으로 관리할 수 있습니다. 하지만 잘못 사용할 경우 커밋 이력을 손상시킬 수 있으므로 주의 있게 사용하시길 바랍니다. 이렇게 rebase에 대해 알아보았습니다.

[Utility] 쉽고 간편하게 디자인하기 : 캔바(Canva) 사용법

dev-chim.tistory.com

[AI] 빙챗(Bing Chat)/코파일럿(Copilot) 설치 방법 및 간단 사용법

dev-chim.tistory.com

[CSS] 마크업(markup)할 때, img vs background-image 선택하는 기준은?

dev-chim.tistory.com

[Safari] 개인 정보 보호의 첫걸음: 프라이버시 모드 알아보기

dev-chim.tistory.com

[npm] npm 버전 확인, 초기화, 설치 및 옵션, 삭제 등 기본 사용법

dev-chim.tistory.com

[Git] GitHub에서 Pull Request(PR) 올리는 방법: 초보자를 위한 안내

chim — Mon, 18 Mar 2024 21:59:25 +0900

GitHub은 소프트웨어 개발에서 핵심적인 역할을 하는 플랫폼으로, 오픈 소스부터 기업용 프로젝트까지 다양한 협업 공간으로 자리 잡고 있습니다. 그중에서도 Pull Request(PR)는 프로젝트에 기여하고 협업하는 데 중요한 역할을 합니다. 이 포스트에서는 GitHub에서 PR을 올리는 방법에 대해 알아보겠습니다.

PR 생성하기(Create pull request)

Pull Request(PR)은 코드 변경 사항을 다른 개발자들과 공유하고 검토받는 기능입니다. 이를 통해 우리는 코드를 함께 개선하고 품질을 높일 수 있어요~

Github 저장소에 로그인하시고, 상단 메뉴에 Pull requests 탭을 클릭합니다.

New pull request 버튼을 클릭하여 새로운 PR을 생성합니다.

PR 생성하기

compare 드롭다운 메뉴에서 변경 사항이 포함된 즉, 작업한 브랜치를 선택합니다.

저의 기준은 0318-add-project입니다.

base 드롭다운 메뉴는 머지(merge)가 돼야 할 베이스(base) 브랜치를 선택하시면 됩니다.

작업한 브랜치와 베이스 브랜치 선택하기

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

Add a title에 PR을 올리는 목적과 변경 사항에 대한 간결한 제목을 작성합니다.

필요시, Add a description 항목에 변경 사항에 대한 자세한 설명을 작성합니다.

Reviewers(검토자)를 검색하셔서 선택하시고, Assigness(담당자)는 assign yourself를 클릭하시면 됩니다.

변경사항에 대한 제목 및 설명 적기

Create pull request 버튼을 클릭하기 전에 하단으로 스크롤하시면 변경 이력이 보입니다.

변경 이력 확인하기

한번 더 수정사항이 제대로 반영됐는지 확인을 완료한 후, Create pull request 버튼을 클릭하여 PR을 올립니다.

PR 올리기

PR 닫기(Close pull request)

다른 이유로 인해 더 이상 해당 변경 사항이 필요하지 않을 때 PR을 닫습니다. PR을 닫으면 해당 변경 사항에 대한 더 이상의 논의나 검토가 중지되며, 일부 저장소에서는 해당 PR을 닫았다는 사실을 기록하기 위해 코멘트가 추가될 수도 있습니다.

PR 닫기

GitHub에서의 Pull Request는 커뮤니티의 협업과 지식 공유의 흐름에 기여하는 것이며, 개발자로서 성장하는 과정에서 중요한 마일스톤 중 하나입니다. 여러분의 코드와 아이디어로 다양한 프로젝트에 기여해 보세요. 이렇게 GitHub에서 PR을 올리고 닫는 방법에 대해 알아보았습니다.

[Utility] 쉽고 간편하게 디자인하기 : 캔바(Canva) 사용법

dev-chim.tistory.com

초보자를 위한 Safari 브라우저 개발자 도구 설정 방법

dev-chim.tistory.com

[CSS] 유튜브(Youtube) 영상을 비율 유지한 채 반응형으로 삽입하는 방법

dev-chim.tistory.com

Array APIs - join(), split()

join : 배열을 원하는 구분자를 더해서 문자열로 반환 join(separator?: string): string; /** * Reverses the elements in an array in place. * This method mutates the array and returns a reference to the same array. */ const arr = ['Lorem', 'i

dev-chim.tistory.com

유용한 터미널 명령어

dev-chim.tistory.com

[Safari] 사파리 브라우저에서 모바일 모드로 보려면?

chim — Sun, 17 Mar 2024 00:34:00 +0900

사파리(Safari) 브라우저는 macOS 및 iOS 기기에서 가장 널리 사용되는 웹 브라우저 중 하나입니다. 웹 개발자들은 웹사이트를 디자인하고 개발할 때 사파리에서의 호환성을 고려해야 합니다. 반응형 웹 디자인은 모바일 기기 및 데스크톱 환경에서 웹사이트가 어떻게 표시되는지를 확인하는 데 중요합니다. 이를 위해 사파리 브라우저에서 제공하는 반응형 모드에 접근하는 방법에 대해서 알아봅시다.

메뉴 막대에서 개발자용 메뉴 보기 체크하기

우선 사파리 브라우저를 엽니다.

또 선행으로 Safari 설정 > 고급 > ✅ 메뉴 막대에서 개발자용 메뉴 보기가 체크가 되어 있어야 개발자용 메뉴를 사용하실 수 있습니다.

자세한 설정 방법이 보고 싶으시다면 아래의 링크를 참고해 주세요.

초보자를 위한 Safari 브라우저 개발자 도구 설정 방법

dev-chim.tistory.com

반응형 모드 진입

상단 메뉴바에 보시면 개발자용 > 응답형 디자인 모드 시작을 클릭하시면 반응형 모드를 접근하실 수 있습니다.

*참고로 단축키는 control + cmd + R 입니다.

개발자용 > 응답형 디자인 모드 시작

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

가로 모드(landscape)

접근하시고 한번 새로고침을 해주세요.

*참고로 단축키는 cmd + R 입니다.

확인하고 싶은 디바이스를 클릭하시면 됩니다.

디바이스를 한 번 더 클릭하시면 가로 모드(landscape)로 보실 수 있습니다.

디바이스 선택하기

분할 화면(split view)

태블릿(Tablet) 모드에서도 똑같이 클릭으로 가로 모드에 접근하실 수 있으며 여러 번 클릭해 보시면 분할 화면(split view)도 접근 가능합니다.

태블릿 모드 > 분할 화면

해상도 크기 조절하기

제공된 디바이스 크기 외에 반응형 모드로 접근하고 싶다면, 우측에 웹페이지 아이콘을 클릭하여 화면의 가장자리를 마우스로 드래그하여 해상도 크기를 조절해 보세요.

해상도 크기 조절하기

반응형 모드 종료

반응형 모드를 빠져나오려면 상단 메뉴에서 개발자용 > 응답형 디자인 모드 종료를 클릭하거나, 단축키 control + cmd + R 누르시면 됩니다.

사파리 브라우저의 반응형 모드를 활용하면 모바일 및 데스크톱 환경에서 웹사이트를 효과적으로 테스트할 수 있습니다. 다양한 기기와 화면 크기에서 웹사이트의 모습을 확인하고, 성능을 향상하는 데 도움이 됩니다. 웹 개발 및 디자인 작업을 수행할 때 사파리 브라우저의 반응형 모드를 적극적으로 활용하여 사용자 경험을 향상할 수 있습니다. 이렇게 사파리 브라우저에서 제공하는 반응형 모드에 접근하는 방법에 대해서 알아보았습니다.

[AI] 글쓰기 고민? 뤼튼(;wrtn) AI가 도와드립니다!

dev-chim.tistory.com

[Utility] Jump Desktop을 활용한 원격 접속 : 어디서든 컴퓨터를 제어하세요!

dev-chim.tistory.com

[CSS] 노치(Notch)와 홈 바(Home Bar)에 대응하는 CSS 환경 변수(env()) 활용 방법

dev-chim.tistory.com

[CSS] SCSS를 활용한 동적 Spinner 애니메이션 만들기

Spinner는 주로 웹이나 애플리케이션에서 비동기 작업이나 데이터 로딩이 진행 중임을 사용자에게 시각적으로 알리기 위해 활용됩니다. Spinner의 UI를 제공함으로써 사용자 경험을 향상하고 사용

dev-chim.tistory.com

[Javascript] 다양한 방법으로 스타일 적용하기

HTMLElement.style const ele = document.querySelector('.ele'); ele.style.display = 'flex'; /* 스타일 속성 해제(삭제)하기 */ ele.style.display = ''; HTMLElement.style.cssText const ele = document.querySelector('.ele'); ele.style.cssText = `display

dev-chim.tistory.com

[Utility] 쉽고 간편하게 디자인하기 : 캔바(Canva) 사용법

chim — Sat, 16 Mar 2024 22:02:36 +0900

많은 사람들은 전문적인 디자이너가 아니라면 디자인 작업을 시작하는 것이 어렵다고 생각합니다. 이는 복잡한 디자인 프로그램의 사용에 대한 부담 때문일 수 있습니다. 그러나 제가 소개드리는 Canva는 이러한 고충을 해소할 수 있습니다. Canva에서 제공하는 다양한 템플릿을 활용하여 누구나 디자인에 대한 전문성이 없어도 손쉽게 훌륭한 결과물을 만들 수 있습니다. Canva 기본 사용법에 대해서 알아봅시다.

Canva로 디자인 만들기

캔바 홈페이지로 이동하려면 아래의 링크를 클릭하세요!

https://www.canva.com/

Canva 사이트에서 회원가입을 하시고 서비스를 이용해 보세요.

로그인 후, 우측 상단에 디자인 만들기 버튼을 클릭하세요.

디자인 만들기 클릭하기

다양한 템플릿 중 예시로 Instagram 스토리를 클릭했습니다.

인스타그램 스토리 템플릿 선택하기

작업 공간입니다.

좌측 메뉴 탭에서 인스타 스토리의 다양한 템플릿이 제공되는 것을 확인하실 수 있습니다.

키워드로 검색하거나 원하는 아이템을 둘러보시고 클릭해 보세요.

작업 공간

유료 버전인 경우는 유료 아이콘을 통해 구별하실 수 있습니다. 워낙 템플릿 종류도 다양하고 템플릿을 선택하고 자기 취향에 맞게 커스텀화 할 수 있기 때문에 굳이 유료 버전까지는 사용하실 필요 없을 것 같아요.

유료 버전 아이콘

인스타로 마케팅을 하시는 분들께 더없이 무료로 좋은 서비스가 아닐까 생각합니다.

그 밖에도 Canva의 디자인 활용 범위는 다양합니다.

마케팅 전문가 - 광고, 소셜 상세 페이지

교육자 - 강의자료, 프레젠테이션(PPT)

이벤트 기획자 - 초대장 및 이벤트 포스터

인플루언서 및 유튜브 크리에이터 - 썸네일(Thumnail) 및 비디오 인트로 제작

개인 브랜딩 등 다양하게 활용할 수 있습니다.

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

원하는 디자인을 선택하였습니다.

원하는 템플릿 선택

요소 하나하나를 클릭하여 편집하실 수 있습니다.

가장 쉬운 텍스트를 편집해 보았습니다. 텍스트를 더블클릭하시고 편집해 보세요.

아이템 클릭해서 편집하기

이미지 요소도 바꿔보겠습니다.

이미지를 클릭하시고 삭제 버튼을 클릭하세요.

아이템 삭제하기

아이템을 삭제 후, 좌측 패널에서 다른 아이템을 검색하여 추가해 봤습니다.

아이템을 선택한 후 마우스를 해당 아이템의 가장자리에 가져가면 크기를 조정할 수 있습니다.

회전도 할 수 있고, 요소끼리 정렬도 가능하며 다양한 기능이 제공되니 한번 이것저것 클릭해 보시고 습득하시면 될 것 같습니다.

아이템 추가 및 크기 조정하기

전체적인 톤을 맞추되 적당한 아이템을 선택했고, 뒤에 배경으로 처리된 텍스트도 변경했더니 정말 그럴싸한 디자인이 완성되었습니다.

디자인 전문가가 아니어도 다양한 테마와 스타일의 템플릿 이 제공되기 때문에 초보자들도 쉽게 시작할 수 있습니다.

완성된 디자인

Canva는 다양한 분야의 사람들에게 도움이 되는 강력한 도구입니다. Canva를 이용하여 창의적인 디자인을 만들어보세요.

이렇게 Canva 기본 사용법에 대해서 알아보았습니다.

[Utility] Microsoft Designer로 쉽게 디자인하기

dev-chim.tistory.com

[macOS] 화면 공간을 더 넓게 사용하는 방법은?

dev-chim.tistory.com

[CSS] 유튜브(Youtube) 영상을 비율 유지한 채 반응형으로 삽입하는 방법

dev-chim.tistory.com

[Server] 외부에서 파일을 보다 안전하게 공유하는 방법 (feat. Synology Nas Server)

dev-chim.tistory.com

[AI] 빙챗(Bing Chat)/코파일럿(Copilot) 설치 방법 및 간단 사용법

dev-chim.tistory.com

[AI] 글쓰기 고민? 뤼튼(;wrtn) AI가 도와드립니다!

chim — Fri, 15 Mar 2024 22:06:48 +0900

글 초안 작성 플랫폼 뤼튼을 소개하겠습니다. 가장 큰 특징은 한국어에 최적화된 글쓰기 버티컬(vertical) AI 서비스를 제공합니다. 한국어로 글쓰기에서 가장 앞선 서비스가 아닐까 생각합니다. 글쓰기 초안 작성으로 인공지능 중 활용도가 굉장히 높은 뤼튼에 대해서 알아보도록 합시다.

뤼튼의 소개

뤼튼은 오픈AI의 GPT3.5와 GPT4, 네이버 하이퍼클로바, 스테이블 AI의 스테이블 디퓨전 등 다양한 LLM 모델을 활용하고 있습니다.
그중 한국어 데이터를 더 많이 학습한 네이버 하이퍼클로바를 가장 많이 반영하고 있어 한국어를 잘한다고 합니다. 본인에게 최적화된 AI를 선택하여 사용해 보세요.

- gpt 3.5 : gpt 4.0에 비해 비교적 빠른 명령어 처리 속도를 제공

- gpt 4.0 : gpt 3.5에 비해 더 똑똑하고 창의적인 답변 제공

- gpt 3.5 16K는 더 길게 답변을 제공

- PaLM2는 더 빠르고 가독성 높은 답변 제공

다양한 LLM 모델을 활용

참고로 뤼튼의 서비스가 작년 12월 20일 이후 모든 기능을 무료로 이용할 수 있도록 개편되었습니다.
이렇게나 혜자로울수가 없습니다

뤼튼 서비스 무료화

뤼튼이 모두에게 한도 없는 AI를 제공하는 이유 | WRTN Community

인공지능은 발전을 거듭하고, 생성 AI의 영향력은 산업의 경계를 넘어 우리 일상의 모든 측면에 스며들고 있습니다. AI의 등장으로 우리는 반복적이고 지루한 업무에서부터 해방되어 창의성과

wrtn.circle.so

뤼튼의 기본 사용법

우측 상단 메뉴에 있는 툴을 클릭해 보세요.

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

우측 상단 메뉴 > 툴

좌측 서브 메뉴에 보시면, 글쓰기 관련 형식들이 있습니다.

자기소개서, 면접 예상 질문, 독서감상문, 인스타 피드, 유튜브 숏츠 대본 등 글을 창작해서 써야 하는 웬만한 형식들을 제공해주고 있습니다.

아래 이미지 이상의 형식들이 제공되므로 한 번 어떤 서비스들이 제공되고 있는지 살펴보시고 다양하게 활용해 보시길 추천드려요!

좌측 서브 메뉴 > 글쓰기 형식

서비스를 이용하시려면 이메일 인증이 필요합니다. 절차에 맞게 뤼튼 회원가입을 하시고 로그인 처리하시면 사용 가능합니다.

가입 및 로그인 하러가기

실시간 검색이 필요하다면

일반 모드에서는 2021년까지의 정보만 학습한 모델의 한계로 실시간 정보를 반영하지 못하는 문제가 있는데 실시간 정보가 필요한 상황에는 WRTN Search를 선택하여 검색해 보세요. 웹 정보 탐색을 기반으로 답변을 제공합니다.

실시간 정보 검색

답변이 마음에 들지 않는다면 다시 생성을 클릭하고 결과물을 생성하세요.

이미지는 생성에는 그려줘~

AI를 gpt-4로 선택하고 원하는 이미지를 그려달라고 했습니다.

구체적으로 묘사할수록 더 좋은 퀄리티의 이미지를 그릴 수 있습니다.

결과물을 저장하고 공유할 수 있는 기능도 제공되니 이미지를 그려보고 링크로 한 번 SNS에 공유해 보세요!

AI 생성형 이미지 추출

PDF 파일 업로드

파일의 내용을 기반으로 답변하는 기능도 제공합니다. 제가 포스트 글을 쓰는 시점에는 점검 중이네요!

굉장히 유용한 서비스일 것 같아요! 파일 내용을 전부 읽지 않아도 질문을 통해 답변을 얻을 수 있는 서비스입니다.

파일 첨부 기능 점검 중

이렇게 뤼튼 서비스에 대해서 알아보았습니다.

Array APIs - forEach()

forEach forEach(callbackfn: (value: T, index: number, array: T[]) => void, thisArg?: any): void; /** * Performs the specified action for each element in an array. * @param callbackfn A function that accepts up to three arguments. forEach calls the callback

dev-chim.tistory.com

[Utility] Jump Desktop을 활용한 원격 접속 : 어디서든 컴퓨터를 제어하세요!

dev-chim.tistory.com

초보자를 위한 Safari 브라우저 개발자 도구 설정 방법

dev-chim.tistory.com

[CSS] 텍스트 말줄임 처리 방법 : 제한된 공간에서 효율적인 디자인으로 사용자 경험 개선 하기

텍스트 말줄임 효과는 긴 텍스트를 제한된 공간에 맞추어 보기 좋게 표시하는 디자인 기법으로, 레이아웃을 깔끔하게 유지하고 사용자 경험을 향상합니다. 디바이스의 화면 크기에 따라 텍스트

dev-chim.tistory.com

[firebase] 구글 Firebase로 무료 웹호스팅하는 방법에 대해서 알아보자

dev-chim.tistory.com

[AI] 빙챗(Bing Chat)/코파일럿(Copilot) 설치 방법 및 간단 사용법

chim — Fri, 15 Mar 2024 00:11:13 +0900

빙챗(Bing Chat)은 사용자의 검색 경험을 향상하기 위해 AI 기반으로 마이크로소프트에서 개발한 채팅 기능입니다. 빙챗은 이제 마이크로소프트 코파일럿(Copilot)으로 브랜드명이 변경되었습니다. 코파일럿을 설치하고 간단한 사용법에 대해서 알아보겠습니다.

코파일럿 설치 방법

코파일럿은 마이크로소프트 엣지 브라우저에 내장되어 있으므로, 엣지 브라우저가 선행으로 설치가 되어 있어야 합니다.

아래의 링크는 마이크로소프트 엣지 브라우저 다운로드 하러 가기입니다.

>> https://www.microsoft.com/ko-kr/edge/download?form=MA13FJ

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

엣지(Edge) 브라우저를 다운로드해서 실행하세요

마이크로소프트 엣지 다운로드 하기

웹 버전 코파일럿을 이용하려면 마이크로소프트(Microsoft) 혹은 계정에 로그인해야 사용이 가능합니다.

코파일럿 열기

사용자가 자연스러운 대화 형식으로 정보를 검색하고 답변을 얻을 수 있습니다.
오픈 AI의 챗GPT는 GPT-4를 사용하는 경우 비용을 지불해야 하지만 코파일럿에서는 GPT-4를 무료로 이용할 수 있다는 점이 메리트가 있습니다.

우측에 코파일럿이 함께 제공

브라우저 창의 우측 사이드바에 코파일럿 아이콘을 클릭해 보시면, 더욱 디테일하게 검색할 수 있는 기능을 제공합니다.

채팅 탭에서 원하는 대화 스타일 을 선택하여 답변을 얻어보세요.

채팅 탭 살펴보기

작성 탭에 이동해보시면, 업무에 도움이 될 만한 문서 작성 및 이메일 작성에 필요한 지원을 받으실 수 있습니다.

더욱 스마트하게 문서를 작성해보고 업무 도움을 받아보세요.

작성 탭 살펴보기

이렇게 코파일럿을 설치하고 간단한 사용법에 대해서 알아보았습니다.

코파일럿을 통해 보다 효율적이고 편리하게 정보를 검색하고 다양한 컨텐츠를 생성해보세요.

[Utility] Jump Desktop을 활용한 원격 접속 : 어디서든 컴퓨터를 제어하세요!

dev-chim.tistory.com

[CSS] 스크롤바(scrollbar) 스타일 제거하는 방법

dev-chim.tistory.com

[Defect] 브라우저 리사이징(Resizing)할 때, 불안정한 Swiper 동작 해결

dev-chim.tistory.com

[Webpack] webpack.config.js, 웹팩 주요 속성 5가지(entry/output/loader/plugins/mode)

dev-chim.tistory.com

[CSS] 노치(Notch)와 홈 바(Home Bar)에 대응하는 CSS 환경 변수(env()) 활용 방법

dev-chim.tistory.com

[CSS] 텍스트 말줄임 처리 방법 : 제한된 공간에서 효율적인 디자인으로 사용자 경험 개선 하기

chim — Wed, 13 Mar 2024 22:26:33 +0900

텍스트 말줄임 효과는 긴 텍스트를 제한된 공간에 맞추어 보기 좋게 표시하는 디자인 기법으로, 레이아웃을 깔끔하게 유지하고 사용자 경험을 향상합니다. 디바이스의 화면 크기에 따라 텍스트를 자동으로 조절하여 다양한 화면 크기에 대응합니다. CSS로 텍스트 말줄임 효과를 어떻게 반영하는지 알아보겠습니다.

한 줄 텍스트 말줄임

.textBox {
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  width: 200px; 
}

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

두줄 이상 텍스트 말줄임

다중 행 텍스트 말줄임은 -webkit-line-clamp 속성에 원하는 줄 수의 값을 부여하면 됩니다.

.textBox {
  display: -webkit-box;
  -webkit-box-orient: vertical; 
  overflow: hidden; 
  -webkit-line-clamp: 2; 
  width: 200px;
}

2줄 이상의 말줄임

이렇게 하면 텍스트가 해당 요소의 영역을 벗어날 때 말줄임 효과가 적용됩니다.

또 텍스트 말줄임은 특히 제한된 공간에서 긴 텍스트를 표시할 때 유용한 기능이며, 너비 값을 명시하여 요소의 크기를 제한하는 것이 중요합니다.

반응형 웹페이지에서 말줄임 예시 코드

.textBox의 너비가 width: auto;로 설정되어 있기 때문에 해당 요소는 내부 콘텐츠에 맞게 자동으로 너비를 조절하게 됩니다. 또 .num 요소의 너비 변화에 따라 .textBox의 너비도 함께 조정됩니다. 따라서 .num 요소의 너비가 변할 때 .textBox의 텍스트 말줄임 효과도 유동적으로 조정될 것입니다.

.num 요소는 동적으로 제어되는 공간이라고 가정했습니다.

<div class="wrap">
  <div class="textBox">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores eum saepe ipsa eveniet veniam, tempore vel ullam, ab magnam voluptatem consequatur, vero doloremque recusandae. Dicta voluptas neque autem voluptates ad?
  </div>
  <div class="num">1234512345</div>
</div>

.wrap{
  display: flex;
  .textBox {
    display: -webkit-box;
    -webkit-box-orient: vertical; 
    overflow: hidden; 
    -webkit-line-clamp: 2; 
    width: auto;
    outline: 1px solid blue;
  }
  .num {
    margin-left: 15px;
  }
}

.num 요소의 길이가 짧을 때 예시

.num 요소의 길이가 조금 넓을 때 예시

이렇게 텍스트 말줄임 처리 방법 : 제한된 공간에서 효율적인 디자인으로 사용자 경험 개선 하기에 대해서 알아보았습니다.

[AI] 클로바 더빙(CLOVA Dubbing으로 전문가처럼 더빙하기 : 초보자 튜토리얼

dev-chim.tistory.com

[Safari] 개인 정보 보호의 첫걸음: 프라이버시 모드 알아보기

dev-chim.tistory.com

작업 생산성을 높여주는 확장 프로그램 : Prettier(프리티어) 설정법

Prettier(프리티어)에 대해서 프리티어는 vs code 확장 프로그램으로 제공되는 코드 포매터(code formatter)인데요~ 팀 프로젝트에서 정의한 코드 컨벤션(code convention)을 지키는데 매우 효과적입니다. 들

dev-chim.tistory.com

[npm] npm 버전 확인, 초기화, 설치 및 옵션, 삭제 등 기본 사용법

dev-chim.tistory.com

[Server] QuickConnect로 외부에서 서버 접속하는 방법

dev-chim.tistory.com

[HTML] ios/Safari 에서의 SVG 랜더링 이슈: 해결책 탐색

chim — Tue, 12 Mar 2024 21:28:54 +0900

SVG는 웹 디자인과 개발에서 매우 유용한 포맷으로, 화면 해상도와 크기 조절에 유연하고 고품질의 이미지를 제공합니다. 그러나 때로는 SVG가 다양한 환경에서 제대로 랜더링 되지 않을 수 있습니다. 특히 iOS Safari와 같은 플랫폼에서는 SVG 렌더링 문제가 발생할 가능성이 높습니다. 이 문제를 해결한 방법에 대해서 공유드리겠습니다.

SVG 렌더링 문제를 해결하기 위해 추가적으로 체크해 볼 수 있는 몇 가지 방법

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

SVG의 width, height, viewBox 들의 값 확인해보기

이들 값이 일치하지 않으면 SVG가 원하는 대로 화면에 표시되지 않을 수 있습니다.

width, height, viewBox들의 값 확인하기

XML 네임스페이스 (XMLNS) 선언 확인해 보기

XML 네임스페이스 (XMLNS) 선언이 SVG 문서에 적절하게 포함되어 있는지 확인하는 것도 중요합니다. XMLNS 선언은 XML 문서에서 사용되는 요소와 속성의 이름을 구별하는 데 사용됩니다. SVG 문서에서 XMLNS 선언이 제대로 되어 있지 않으면 브라우저가 SVG를 올바르게 해석하지 못할 수 있습니다.

XML 네임스페이스 (XMLNS) 선언 확인해보기

mask 속성을 제거해 보기

일부 브라우저에서 mask 속성을 지원하지 않거나 제대로 처리하지 못할 수 있습니다. 이런 경우에는 mask 속성을 제거하는 것이 도움이 될 수 있습니다. mask 속성 대신 clip-path나 opacity 등의 다른 SVG 속성을 사용하여 원하는 효과를 구현할 수 있습니다. 이러한 속성은 브라우저 호환성이 더 좋을 수 있습니다.

mask 속성을 제거해보기

SVG 대체 방법 고려해 보기

SVG 대신 PNG 또는 JPEG 이미지를 사용하는 대체 방법을 고려할 수 있습니다. 특히 SVG가 브라우저에서 지원되지 않거나 제대로 랜더링 되지 않는 경우에는 이미지를 대체할 수 있습니다.

이러한 방법들을 통해 SVG 렌더링 문제를 해결하고 브라우저 호환성을 향상할 수 있습니다.

[Safari] 웹접근성 향상을 위한 Tab 키 하이라이트 표시 설정 방법

dev-chim.tistory.com

[Utility] Jump Desktop을 활용한 원격 접속 : 어디서든 컴퓨터를 제어하세요!

dev-chim.tistory.com

[git] Github Desktop으로 아주 쉽게 저장소(repository)를 로컬에 클론(clone)하기

dev-chim.tistory.com

[macOS] 화면 공간을 더 넓게 사용하는 방법은?

dev-chim.tistory.com

[Notion] Notion Web Clipper, 스크랩한 웹페이지를 한 데 모아서 관리하는 방법

dev-chim.tistory.com

[HTML]  를 활용하여 반응형 디자인에서 글자 떨어짐 조절하기

chim — Mon, 11 Mar 2024 23:25:08 +0900

텍스트 요소 사이의 간격을 조절하고, 반응형 디자인에서 글자 간의 간격을 조절하는 데에는 여러 가지 방법이 있습니다. 그 중 하나가  입니다. HTML 엔터티(entity)는 텍스트의 레이아웃을 세밀하게 제어하는 데에 유용하며, 특히 텍스트 간의 간격을 조절하는 데에 사용됩니다.  의 활용 방법에 대해 알아보겠습니다.

  란?

 는 HTML에서 사용되는 특수 문자로서, non-breaking space의 약어입니다.

HTML에서 일반적인 공백 문자와는 달리, 줄 바꿈이 되지 않고 항상 공백으로 유지됩니다.

텍스트 레이아웃 및 요소 간의 간격 조절을 위해 사용됩니다.

  활용 방법

 를 활용하는 방법에 대해서 2가지 소개해드리겠습니다.

텍스트 사이의 강제 공백 생성

HTML에서 일반적인 공백 문자(스페이스 또는 탭)는 연속된 여러 개를 하나로 압축하여 랜더링 됩니다. 이는 텍스트 간의 간격을 유연하게 제어하기 어렵게 만들 수 있습니다. 그러나  를 사용하면 브라우저는 해당 공백을 무시하지 않고 텍스트 사이에 공백을 추가하여 간격을 조절합니다.

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

스페이스바로 공백 설정해보기

공백은 하나로 압축되어 랜더링 됨

 로 공백 제어하기

원하는 공백으로 제어 가능함

margin과 padding은 일반적으로 유연하고 다양한 레이아웃을 만드는 데에 가장 적합한 방법이지만, 때로는 특정한 상황에서  를 사용할 수 있습니다. 이러한 유연성을 알고 있다면 웹 디자인 및 개발 작업을 보다 효율적으로 수행할 수 있습니다.

반응형 레이아웃에서의 글자 떨어짐

다양한 화면 크기에 대응하기 위해  를 활용하여 레이아웃을 조절할 수 있습니다.

특히, 특정 기업의 브랜드 사이트 프로젝트에서는 프로덕트 네임(Product Name)이 어떠한 해상도일지라도 항상 글자 떨어짐이 붙어 있어야 하는 경우가 있습니다. 이런 경우  를 사용하여 텍스트가 항상 붙어 있는 레이아웃을 유지할 수 있습니다. 추가로,  를 사용할 때에는 따로 태그를 감싸서 CSS의 white-space: nowrap; 속성을 처리하지 않아도 되므로 코드가 더욱 간결해집니다.

출처 - 애플 코리아 홈페이지

이렇게   활용 방법에 대해 알아보았습니다.

[CSS] SCSS를 활용한 툴팁(tooltip) 구현해보자! (feat. transform-origin)

dev-chim.tistory.com

[CSS] 스크롤바(scrollbar) 스타일 제거하는 방법

dev-chim.tistory.com

[Safari] 웹접근성 향상을 위한 Tab 키 하이라이트 표시 설정 방법

dev-chim.tistory.com

[Utility] Snipaste - 무료 캡쳐 도구, 핀(Pin) 고정, 클립보드(Clipboard), 색상 추출(Color Picker)

dev-chim.tistory.com

유용한 터미널 명령어

dev-chim.tistory.com