23.5.26 TIL

강의 내용

1. 웹표준과 웹접근성
2. git branch 생성
3. git merge ...

슬비쌤은 기초도 중요하게 생각하셔서 추가적으로 공부를 하길 원하셨다. 나도 학교 다닐때 기초는 그냥 시험 공부한다고 대충 본게 끝....이었기 때문에 이번 기회를 통해 제대로 공부해보기로 결심했다.

그리고 한 질문을 던지셨는데 시멘틱 마크업이 뭐냐느 질문이었다.
알고는 있지만 뭐라고 대답을 해야 할지 몰랐다.. 😥
그래서 찾아보았다.

시멘틱 마크업(semantic markup)은

웹 문서의 구조와 의미를 명확하게 표현하기 위해 HTML 요소를 사용하는 것으로, 이는 웹 페이지의 내용을 컴퓨터와 검색 엔진에게 더 의미롭게 전달하고, 웹 접근성을 개선하며, 유지 보수와 확장성을 향상시키는 데 도움된다.

시멘틱 마크업은 단순히 디자인을 위한 태그를 사용하는 대신 의미에 맞는 HTML 요소를 사용하여 문서를 작성하는 것을 말한다. 예를 들면, header, nav, section, article, aside, footer와 같은 HTML5에서 도입된 요소들이 시멘틱 마크업의 예다. 이러한 요소들은 문서의 구조와 의미를 명시적으로 표현하며, 검색 엔진은 이러한 요소들을 사용하여 페이지를 이해하고 분석할 수 있다.

시멘틱 마크업의 장점

• 웹 페이지의 의미를 명확하게 전달하여 사용자와 검색 엔진이 콘텐츠를 이해하기 쉽다.
• 웹 접근성을 향상시켜 시각적, 청각적 장애를 가진 사용자도 콘텐츠를 이해할 수 있도록 도와준다.
• 유지 보수와 확장성이 용이해진다. 요소의 의미에 따라 적절한 스타일과 동작을 적용할 수 있으며, 새로운 기능을 추가하기 쉽다.
• 시멘틱 마크업은 웹 페이지의 구조를 명확히 정의하고 의미를 부여하여 웹 개발자와 사용자 모두에게 이점을 제공하는 중요한 개념이다.

---

웹표준과 웹접근성

웹 표준이란?

웹표준은 W3C의 토론을 통해 나온 권고안(Recomendation)을 말하며 HTML, CSS, Javascript, DOM 등 웹에서 “표준”적으로 사용되는 기술을 의미합니다. 그리고 해당 기술은 구조, 표현, 동작의 세 가지 요소로 구분할 수 있습니다.

웹 표준의 세 가지 요소

1. 구조 (HTML) - HTML은 ‘HyperText Markup Language‘의 약자로, 하이퍼 텍스트를 표현하기 위한 마크업 언어
2. 표현 (CSS) - CSS(Cascading Style Sheet)는 HTML 3.2부터 지원하기 시작한 것으로, 웹 제작자와 사용자들의 필요에 의해 특별히 개발되었습니다.
   CSS에서는 폰트, 색상, 공백, 공간과 그 밖의 문서 표현 등을 자유롭게 지정할 수 있는 기능을 제공합니다.
3. 동작 (DOM & ECMA Script) - 웹 페이지의 요소를 객체화해서 동작을 제어하는 데 사용하는 웹 표준 기술에는 DOM과 ECMA Script가 있습니다.
   DOM(Document Object Model)은 웹 페이지의 구성 체계를 말하는데, 이것은 HTML을 작성하면서 생성되는 논리적 규칙입니다.

위 쪽에 시멘틱 마크업의 장점에서도 웹 접근성이라는 단어가 등장하는데

웹접근성이란?

웹 접근성 준수는 법적 의무사항으로 「지능정보화기본법」에 따라 ‘모든 사용자가 신체적·환경적 조건에 관계없이 웹에 접근하여 이용할 수 있도록 보장하는 것’입니다.

프로젝트를 진행할 때 장애를 가진 사람들을 고려해본 적이 없었다. 특히 시각 장애를 가지신 분들이 인터넷을 한다는 것을 생각조차 하지 않았던 것 같다.

웹 콘텐츠 접근성에는 가이드 라인(Web Content Accessibility Guidelines)이 있는데
다음과 같은 4가지 원칙이 있다.

접근성과 상호 운용성을 향상시키기 위한 WAI-ARIA는 역할(Role), 속성(Property), 상태(State) 등의 3가지
기능을 제공합니다.

• 역할(Role) - 유저 인터페이스(User Interface, 이하 UI)에 포함된 특정 컴포넌트의 역할을 정의
• 속성(Property) – 해당 컴포넌트의 특징이나 상황을 정의하며 속성명으로 “aria-*”라는 접두사를 사용
• 상태(State) - 해당 컴포넌트의 상태 정보를 정의

---

git branch & merge

어제에 이어 오후에는 깃 수업을 진행했다.

오늘 강사님께서 알려주신 꿀팁이당 설정을 저렇게 바꾸면 자동입력이 xhtml 형식으로 완성된다.

Git Command

1. git init : 저장소 생성

   # 현재 디렉토리를 Git 저장소로 생성
   # .git 폴더(숨김 폴더)가 생성됨
   git init

2. git status : 현재 상태 확인

   git status
   # 변경된 파일명이 빨간색으로 보일 경우 Working Directory 상태
   # 변경된 파일명이 초록색으로 보일 경우 Staging Area 상태
   # nothing to commit, working tree clean의 경우 변경 내용이 없음을 나타냄

3. git diff : 파일의 변경내용 비교하기

   # difftool을 사용하여 파일의 변경내용을 비교
   git config --global -e
   [diff]
   	tool = vscode
   [difftool "vscode"]
   	cmd = code --wait --diff $LOCAL $REMOTE
   
   git difftool

4. git add : 파일의 변경 사항을 index(Staging Area)에 추가

   # 특정 파일을 Staging Area에 추가하기
   git add <file>
   # 변경 내용이 있는 모든 파일을 Staging Area에 추가하기
   git add *
   git add .

5. git restore <file> : 작업 내용 취소

   # Working Directory에 변경 내용을 취소할 경우(Tracked File) 
   git restore <file>
   # Staging Area에 변경 내용을 Working Directory로 되돌릴 경우
   git restore --staged <file>

6. git commit -m  : 파일의 변경 사항에 대한 이력 생성

   # 마지막 커밋 메시지 수정
   git commit --amend "수정할 커밋 메시지"
   또는
   git commit --amend
   # VS Code에 COMMIT_EDITMSG 창에 수정할 커밋 메시지 입력 후 창 닫기

7. git rebase -i <hash>  : 특정 커밋 수정

   # pick -> reword로 수정한 후 커밋 메시지 수정
   reword <hash> "수정할 커밋 메시지"

8. git log : 커밋 이력 확인

   # Log를 한줄, 그래프 형태로 보기
   git log --oneline
   git log --oneline --graph

9. git checkout HEAD~ : 과거 커밋 이력 확인

   # 이전 2개의 커밋으로 이동
   git checkout HEAD~2
   # 특정 커밋으로 이동
   git checkout <hash>
   # 마지막 커밋으로 복귀
   git checkout main
   # 브랜치를 만든 후 해당 브랜치로 스위치
   git checkout -b [브랜치명] 

10. git reset HEAD~ : 이전 상태로 복원(이력 제거)

    # 이전 2개의 커밋으로 돌아가기 (--mixed : default)
    # 커밋 기록은 삭제되지만 Working Directory에 변경 사항은 남김
    git reset HEAD~2
    # 커밋 기록은 삭제되지만 Working Directory와 Staging Area에 변경 사항은 남김
    git reset --soft HEAD~2
    # HEAD~2 커밋으로 복원되며 이후에 변경된 커밋 기록은 모두 삭제
    git reset --hard HEAD~2

11. git branch : 브랜치 생성 및 이동

    # likelion이라는 브랜치를 생성
    git branch likelion
    # likelion이라는 브랜치로 이동
    # checkout 명령이 여러 기능을 가지고 있기때문에 Git 2.23.0 버전에서는 
    # 브랜치 이동을 위한 기능으로 switch 명령이 추가 됨 (checkout, switch 모두 사용 가능)
    git checkout likelion
    git switch likelion
    # main 브랜치로 복귀
    git switch main
    # likelion 브랜치를 main 브랜치로 병합
    git merge likelion
    # likelion 브랜치 삭제
    git branch -d likelion

12. git reset HEAD~ : 이전 상태로 복원(이력 제거)

    # 이전 2개의 커밋으로 돌아가기 (--mixed : default)
    # 커밋 기록은 삭제되지만 Working Directory에 변경 사항은 남김
    git reset HEAD~2
    # 커밋 기록은 삭제되지만 Working Directory와 Staging Area에 변경 사항은 남김
    git reset --soft HEAD~2
    # HEAD~2 커밋으로 복원되며 이후에 변경된 커밋 기록은 모두 삭제
    git reset --hard HEAD~2

13. git remote : 리모트(Remote) 브랜치

    # 리모트 브랜치 조회
    git remote -v
    # 리모트 브랜치 추가
    git remote add origin <https://github.com/ID/REPOSITORY>
    # 리모트 브랜치 삭제
    git remote remove origin
    git remote rm origin

14. git push : 로컬의 변경 이력을 리모트로 전송

    # 로컬의 main 브랜치의 변경 이력을 리모트 main 브랜치로 보내기
    git push origin main
    # 로컬의 main 브랜치의 변경 이력을 원격 저장소로 푸시하는 동시에 로컬 브랜치와 원격 브랜치 연결
    # 이후 push에서 git push만 입력해도 된다.
    git push --set-upstream origin main
    git push -u origin main

15. git pull : 리모트의 내용을 로컬에 반영 (fetch + merge)

    # 리모트 main 브랜치의 변경 이력을 로컬 main 브랜치로 가져오기
    git pull origin main

    만약 git pull 명령이 정상적으로 실행되지 않고 아래와 같은 오류가 발생할 경우
    다음과 같이 명령 창에 입력한다.

    # rebase 방식의 merge를 사용하지 않음
    git config --global pull.rebase false
    
    # fast-forward only 옵션 사용하지 않음
    git config --global --unset pull.ff
    
    # 서로 관련 기록이 없는 두 저장소의 병합을 허용하기
    git pull origin main --allow-unrelated-histories

16. git clone: 저장소 복제

    #로컬 저장소를 복제(clone)
    git clone /로컬/저장소/경로
    #원격 서버 저장소 복제
    git clone <클론할 깃 저장소 주소>
    

    📌 알아두면 유용한 Git Config 설정

     git config --global credential.helper store
     # 15분 동안 인증 유예
     git config --global credential.helper cache
     # timeout 옵션을 사용하여 인증 유예시간 지정 가능 (3600 = 1시간)
     git config --global credential.helper 'cache --timeout=3600'
    
     # Github 폴더 및 파일명 대소문자 구분 (!주의 필요)
     git config --global core.ignorecase false