1. 메인 브랜치에 핫픽스 반영하기
릴리즈 상태의 프로덕트에 핫픽스를 급히 적용해야 하는 경우, 작업 중인 브랜치를 나와 메인 브랜치에서 새로운 핫픽스를 브랜치를 따야 한다.
깃허브 레포에서 브랜치를 상태바를 선택하고 Find or create branch... 에 핫픽스용 브랜치 이름을 입력한다 (여기에서는 fix로).
Create branch: fix from 'main'을 클릭하여 브랜치를 생성한다.
VSCode에 돌아와 하단 왼쪽바에서 브랜치를 눌러 Select a ref to checkout에 fix를 입력하면, 아직 리모트에만 존재하고 로컬에 반영되지 않았으므로 검색되지 않는다.
SOURCE CONTROL > Pull, Push > Fetch를 선택하여 리모트 브랜치를 로컬에 반영한다.
다시 브랜치를 검색 후 이동하여 작업하고 PR 생성하여 반영하면 메인 브랜치에 병합, 핫픽스가 완료 된다.
2. Semantic HTML의 중요성
HTML에서의 시맨틱이란 문서를 구분하기 위한 표시로 쓰이는 태그를 말한다. 예를 들어 <p>는 paragraph를 나타낸다.
태그가 시맨틱 함으로서, 사람이 코드를 읽을 때는 태그의 성격을 알 수 있고 브라우저는 이 태그를 화면에 어떻게 표시할 것인지 결정할 수 있다.
(참고로 <b>나 <i>는 단지 텍스트가 어떻게 보여야하는지 만을 결정하며 마크업적인 의미는 없으므로 시맨틱하지 않은 태그이다.)
시맨틱이 중요한 이유는 무엇일까? 인터넷에서 어떤 페이지를 검색할 때를 예로 들어보자. 검색 엔진은 스타일을 제외한 페이지 내용을 읽으며, 이때 마크업 태그는 엘리먼트 간 상대적 중요도를 파악하게 해주는 유일한 단서이다. 만일 <p> 태그 안에 페이지 제목을 넣는다면 다른 컨텐트와 섞이면서 검색 엔진 결과에 보이지 않을 것이다. 반면, 페이지 제목을 <h1> 태그 안에 넣으면 검색 엔진은 이 태그가 더 중요하다는 것을 알게 된다. 검색 엔진 최적화(SEO)는 시맨틱한 마크업의 중요한 이유가 된다.
시맨틱 마크업의 이점을 정리하면 이렇다:
1. 더 깨끗하고 유지보수가 쉬운 코드
어떤 시맨틱은 굳이 필요없어 보이기도 한다. 예를 들어 내비게이션 바를 포함하는 <nav> 태그 같은 경우, <div>로 대체해도 컨텐트나 텍스트 배포에는 아무 차이가 없다.
그러나 시맨틱 태그 표기는 코드에 더욱 의미를 부여하고, 이를 통해 코드는 각 원소의 의미에 맞게 단어를 사용하는 자연어에 더 가까워질 수 있다.
덧붙여 프로젝트 규모가 커져 페이지와 코드양이 늘어났을 때, 시맨틱 태그가 혼동을 막아줄 것이다.
2. 접근성 상승
수많은 사용자들이 스크린 리더에 의존하거나 키보드만을 사용하여 인터넷 서핑을 한다.
그러므로 스크린 리더가 각각의 요소를 읽을 수 있게 하고, 그 요소들에 키보드로 접근 가능하도록 하는 것은 매우 중요하다. 코드를 모든 유저를 고려하여 작성해야 한다.
3. SEO 향상
컨텐트가 쓰여진 방식, '반응형' 디자인 그리고 사이트 접근성은 검색 엔진 최적화 전략에 유리하게, 또는 불리하게 영향을 미치는 요소들이다.
구글 검색 엔진의 경우 웹사이트의 코드와 페이지의 목적을 이해하는데 필요한 마크업 및 라벨 사용을 분석하는 알고리즘을 사용하고 있다.
그러므로 시맨틱 마크를 사용하면 알고리즘 최적화를 통해 더 많은 유저에게 노출될 것이다.
💬 반응형 디자인과 SEO의 관계에 대해서는 더 알아보아야 할 것 같다.
🔗 The importance of Semantic HTML
🔗 HTML CHEAT SHEET - 시맨틱 태그의 설명과 사용 예시를 볼 수 있는 사이트
