전체 글(91)
-
[Git] PR 커밋 해시를 활용한 브랜치 생성 : 쉽고 간단한 가이드
가끔 코드 리뷰나 협업 과정에서 특정 PR의 커밋 해시를 로컬 환경에서 확인해야 할 때가 있습니다. 이 글에서는 원격 저장소에서 해당 커밋을 로컬로 가져와, 그 해시를 기반으로 브랜치를 생성하는 방법을 설명하겠습니다.git fetch로 원격 저장소 업데이트먼저, 원격 저장소에서 최신 정보를 로컬로 가져와야 합니다. 원격 브랜치에서 최신 커밋들이 로컬에 반영되지 않은 경우가 많기 때문이죠.git fetch origin 이 명령어는 원격 저장소(origin)에 있는 모든 브랜치와 태그 정보를 로컬에 업데이트합니다. 이렇게 하면 나중에 필요한 특정 커밋 해시도 로컬에서 접근할 수 있게 됩니다. 해당 커밋 해시가 있는지 확인하고 직접 체크아웃먼저 해당 해시가 로컬에 존재하는지 확인하려면, git log 명..
2024.10.23 -
[Chrome] 웹 개발자 도구 활용 가이드 - 기본편
크롬 웹 개발자 도구(Chrome DevTools)를 활용하는 법에 대해서 알아봅시다크롬 웹 개발자 도구 (Chrome DevTools)크롬 웹 개발자 도구는 구글 크롬 브라우저에 내장된 강력한 도구로, 웹 페이지를 실시간으로 검사하고 디버깅하며 성능을 분석할 수 있게 해 줍니다. 웹퍼블리셔와 개발자 모두에게 유용하며, 웹 페이지의 HTML, CSS, 자바스크립트 등 다양한 요소를 실시간으로 수정해 보고 테스트할 수 있습니다.개발자 도구 열기가장 빠르게 개발자 도구를 여는 방법은 키보드 단축키를 사용하는 것입니다. macOS 기준으로 단축키 option + cmd + i를 눌러 개발자 도구를 열 수 있습니다. ( windows 기준은 ctrl + shift + i )모바일 모드 전환모바일 디바이스 모드는..
2024.08.07 -
[macOS] Xcode 시뮬레이터를 이용한 웹 페이지 디버깅 방법
Xcode 시뮬레이터를 이용한 웹 페이지 디버깅 방법에 대해서 알아보겠습니다. Xcode 시뮬레이터를 활용한 웹 페이지 디버깅반응형 웹 디자인의 중요성이 점점 커지면서, 다양한 기기에서 웹 페이지를 테스트하는 것은 필수적입니다. 하지만 모든 물리적 기기를 준비하는 것은 비용과 시간 면에서 비효율적일 수 있습니다. 이때 Xcode 시뮬레이터는 실 디바이스를 대신하여 다양한 iOS 환경에서 웹 페이지를 테스트하고 디버깅할 수 있는 강력한 도구입니다. 이 글에서는 Xcode 시뮬레이터를 이용해 웹 페이지를 디버깅하는 방법에 대해서 알아보겠습니다. Xcode 시뮬레이터 실행우선, Xcode 앱이 없다면 App Store에서 설치해 주세요. 그리고 Xcode가 설치된 Mac에서 Simulator 앱을 실행합니다...
2024.08.06 -
[Safari] 사파리 브라우저로 iPhone 웹 페이지 디버깅하는 방법 (feat. 웹 인스펙터)
사파리 브라우저로 iPhone 웹 디버깅하는 방법에 대해서 알아보겠습니다. 웹 페이지 디버깅웹 개발을 하다 보면 데스크탑 브라우저뿐만 아니라 실제 모바일 디바이스에서의 동작을 확인하고 디버깅해야 할 때가 많습니다. 사파리(Safari) 브라우저는 iOS 디바이스와의 연결을 통해 이러한 작업을 가능하게 합니다. 이 글에서는 실제 디바이스를 USB로 연결하여 사파리에서 웹 인스펙터를 사용하는 방법에 대해서 알아보겠습니다. 사파리(Safari) 브라우저와 iOS 디바이스 설정웹 인스펙터를 사용하기 위해서는 먼저 사파리 브라우저와 iOS 디바이스에서 설정을 완료해야 합니다.사파리 브라우저 설정1. 사파리 브라우저를 열고 왼쪽 상단의 Safari 메뉴를 클릭한 후, 설정(Preferences)을 선택합니다. ..
2024.08.05 -
[Git] GitHub에서 Squash Merge로 프로젝트 히스토리 깔끔하게 정리하기
Git의 다양한 병합(merge) 방법 중 하나인 Squash Merge에 대해 알아봅시다.Squash Merge (스쿼시 머지) 란?여러 커밋을 하나의 커밋으로 압축(squash)하여 병합하는 Git의 기능입니다. 이를 통해 개발 브랜치에서 작업한 여러 개의 작은 커밋을 한 번에 메인 브랜치에 병합할 수 있습니다. 이 방법은 깔끔한 커밋 히스토리를 유지할 수 있게 합니다.다이어그램을 통해 Squash Merge 이해하기기본 main 브랜치에서 feature 사본 브랜치를 생성하여 작업을 시작합니다. feature 브랜치에서 여러 개의 커밋을 생성합니다.main: A---B---C \feature: D---E---F feature 브랜치의 모든 커밋을 하나의 커밋..
2024.07.07 -
[CSS] @font-face 디자인에 맞춘, 맞춤형 폰트 적용 방법
웹사이트에 맞춤형 폰트를 적용하는 방법에 대해서 알아보겠습니다.@font-face 란?@font-face는 CSS 규칙으로, 외부 폰트를 불러와 웹페이지에서 사용할 수 있게 해 줍니다. 이를 통해 디자이너와 개발자는 웹브라우저에 기본으로 설치된 폰트 외에도 다양한 폰트를 활용할 수 있습니다. - font-family : 폰트의 이름을 정의- src : 폰트 파일의 경로를 지정- font-weight, font-style : 굵기와 스타일 설정다양한 폰트 파일 형식웹에서 사용되는 주요 폰트 파일 형식은 다음과 같습니다. - TTF (TrueType Font): 가장 일반적인 폰트 형식으로, 대부분의 운영 체제에서 지원됩니다.- OTF (OpenType Font): TTF와 유사하지만, 더 많은 타이포그래피..
2024.07.04