1년 가까이 한 프로젝트를 운영하다 보니 버전 관리는 필수 업무가 되었다. 배포할 때마다 버전을 올리곤 했지만, 1.4.2라는 버전에서 각 숫자가 어떤 의미를 가지는지 궁금해졌다.이번에는 가장 널리 사용되는 버전 관리 방식인 SemVer(Semantic Versioning)에 대해 정리해 보았다. SemVer(Semantic Versioning)란?SemVer는 아래와 같이 MAJOR, MINOR, PATCH 세 가지 숫자로 버전을 표현한다.MAJOR.MINOR.PATCH// 예시1.4.2 MAJOR (메이저 버전)기존과 호환되지 않는 변경 사항이 있을 때 증가한다. 여기서 말하는 호환되지 않는 변경이란 기존 사용자 코드가 깨질 수 있는 변화를 말한다.1.4.2 -> 2.0.0예:함수 이름 변경API ..

WebP는 2010년 구글(Google)이 만든 이미지 파일 포맷으로, 기존 이미지 포맷(JPEG, PNG, GIF 등)과 비교해 용량은 작고, 화질이 좋은 것이 가장 큰 특징이다. WebP 주요 특징WebP는 크게 4가지 특징이 있다.파일 용량이 작다JPG보다 평균 30% 더 작음PNG보다 26% 더 작은 용량손실/무손실 압축 모두 지원손실 압축: JPG처럼 용량 축소무손실 압축: PNG처럼 원본 유지WebP는 두 가지 모두 지원하므로 상황에 맞게 선택 가능투명도(알파 채널) 지원PNG처럼 배경 투명 이미지 가능로고, 아이콘에 적합애니메이션 지원GIF 대체 가능GIF보다 용량이 작고, 색상 품질이 좋음 손실 압축과 무손실 압축손실 압축: 사람이 눈치채지 못하는 세부 정보를 버리는 방식파일 크기가 매우..

IntersectionObserver와 React Query(useInfiniteQuery 기반)를 활용해 무한 스크롤을 구현한 과정을 정리해 보았다. IntersectionObserver란?IntersectionObserver는 특정 DOM 요소가 화면(Viewport)에 들어왔는지 감지하는 브라우저 API이다.쉽게 말해, “이 요소가 지금 화면에 보이냐?”를 알려주는 기능을 한다. 기존 scroll 이벤트를 기반으로 하는 무한 스크롤 방식은:scroll 이벤트로 직접 위치를 계산해야 하고성능 부담 및 디바운싱/스로틀링 추가 등 코드가 복잡하다. 그에 반해, IntersectionObserver는:브라우저가 Viewport 감지를 대신 처리하고성능이 최적화되어있으며 코드가 훨씬 직관적이다. 구현 방..

최근 체크박스 UI를 구현하면서, 텍스트 영역을 로 감싸두었던 부분을 로 변경한 경험이 있었다.단순한 태그 변경처럼 보이지만, 실제로는 사용성과 접근성에 큰 차이를 만드는 중요한 수정 건이었다. div와 label의 차이1. (division)의미: 특별한 의미가 없는 일반적인 컨테이너역할: 레이아웃 구성이나 스타일 적용을 위한 구조적 요소동작: 클릭해도 별도의 기능 없음접근성: 스크린 리더는 단순한 “그룹” 정도로만 인식하고, 폼 요소와의 관계를 알 수 없음 2. 의미: 폼 컨트롤(input 등)에 대한 이름 또는 설명역할: 사용자에게 해당 입력 요소가 무엇인지 알려줌동작 (중요):label 영역을 클릭하면 연결된 input이 함께 동작함예: 체크박스 텍스트를 클릭해도 체크/해제가 가능연결 방식:암..

“다른 브랜치에 있는 커밋을 그대로 복사해서 가져오기” 순서1️⃣ 먼저 옮기고 싶은 브랜치로 이동git checkout {target-branch}2️⃣ 다른 브랜치의 커밋 해시 확인3️⃣ 커밋 복사git cherry-pick abc1234커밋 내용 + 메시지 그대로 복사됨 여러 커밋 한 번에 옮기기git cherry-pick abc1234 def5678 ghi9012또는 연속된 커밋이면:git cherry-pick abc1234..def5678⚠️ abc1234는 포함 안 되고, 그다음부터 충돌이 났을 때# 충돌 해결 후git add .git cherry-pick --continue 취소하고 싶을 때git cherry-pick --abort 실제 예시dev-v3.5에 있는 커밋을 dev에 옮기고 ..

제가요? 이걸요? 왜요?회사에서 가장 많이 한 말이 뭘까 생각해 보면 제가요? 이걸요? 왜요? 딱 이 3개인 것 같다.사실 3개는 세트라서 하나하나가 언제 쓰이는지 구분하는 건 쉽지 않지만 가끔 황당할 정도로 업무 담당자가 잘못 할당되는 일이 있다. 예를 들자면, 신규 기획으로 새 디자인이 필요한 영역을 기획자가 아닌 프론트 개발자인 나에게 찾아달라는 요청이 왔을 때.. "제가 이걸 먼저 하나요? 왜죠? 순서가 잘못된거 같습니다만.."자주 있는 일이라 생각만 해도 피곤하지만 돌아오는 대답은 "한 번만 부탁드려요!" 한 번이 두 번이 되고 두 번이 세 번이 되고 이게 쌓이다 보니업무를 분배하는 관리자 입장에서는 내가 준 적이 없는데 왜 업무가 많은지 이해할 수 없는 상황이 벌어지게 되었고이런 경험들이 쌓이..