터미널을 이용해서 git push를 진행 중 마주하게 된 오류다.

보고 있는 강의가 21년 8월 이전에 만들어진 강의인데, 

나는 이미 소스트리를 통해 깃을 사용했던 상태...

터미널로 연결은 이번이 처음이다보니 인증 방식이 바뀌면서 오류가 발생된 듯 하다.

fatal: Authentication failed for 'https://github.com/xxx.git/'

와 같이 내 깃에 인증이 실패했다고 한다.

username, password 모두 잘 작성했는데도 이러니 ㅠㅠ

원인

21년 8월 13일부터 비밀번호 방식이 아닌 토큰방식으로 

github계정 인증 방식이 변경이 되었다고 한다.

토큰 발급 받기

1. 먼저 오른쪽 상단에 내 프로필 아이콘을 클릭한다.

2. 오른쪽 사이드바를 쭉 내리면 Settings 클릭

3. 그럼 왼쪽 메뉴들 중 가장 아래에 Developer settings가 보인다.

4. 새로운 페이지의 왼쪽 메뉴가 보여지는데, 이 중 Tokens를 선택해주고, 

중간에 위치한  Generate a personal access token 를 눌러서 개인 액세스 토큰을 생성해준다.

그럼 권한을 설정 할 수 있는데,  Note에 간단하게 적어주고, 개인 저장소에 대한 모든 권한(가장 위 repo)으로 체크 해준다.

만료일은 기본 30일인데 변경도 가능하다. 

그리고 가장 하단으로 내려서 버튼을 클릭!

그럼 이렇게 토큰을 복사 할 수 있다.

다시 볼 수 없으니 지금 복사하라고 뜨기 때문에 잘 적어둔다.

다시 git push -u origin main을 해주면 다시 username과 password를 받는데,

password에 내가 위에서 복사한 토큰을 넣어준다!

그럼 new branch가 생성되었다고 뜬다.

깃헙에도 잘 올라간 걸 확인 할 수 있다 :D

만약, 토큰을 잃어버렸다면?!

한 번 발급을 받았던 적이 있다면, 

아까 발급 받을 때 눌렀던 곳에 이렇게 발급 받은 토큰에 작성해둔 노트와 유효기간이 뜨는데,

이 중 노트 링크를 클릭.

그럼 토큰 재 생성이 가능하다.

이 페이지에서는 초기 설정과는 달리 만료일은 고정인데, 위의 경우 24년 2월 8일까지-

위에 버튼으로 재생성 버튼을 누르거나

만료일 옆의 regenerate the token를 눌러도 동일하게 재생성 화면으로 가게 된다.

여기서 만료일 선택 후 재생성을 할 수 있다. 

참고

문서를 보면 이렇게 깃 복제할 때 토큰을 사용하는 예시가 있다.

나는 푸쉬 할 때 사용하다가 난 오류지만, 클론 등에 발생되었다면 git clone으로 사용하면 될 듯. 

중요한 건, 패스워드에 내 깃헙 패스워드가 아닌 토큰을 넣어야 한다는 것이다 :) 

아래 깃 공식문서도 참고하면 좋을 것 같다. 

깃 공식문서 

터미널로 깃 폴더 생성부터 커밋까지 진행해보겠습니다!

⭐️참고로, 저는 터미널테마를 사용하기 때문에, PC정보가 상단 타이틀에만 보이고, 맨 앞에 생략되어 있어요.

다르다고 당황하지 마시구 참고해서 봐주세요. ⭐️

설치한 테마는 요기

깃 폴더 생성

cd 상위폴더명

ls

먼저 원하는 폴더로 들어가서 폴더 내용을 확인해줍니다.

$ mkdir 새폴더명

폴더명을 생성해주고요.

ls

폴더 안을 보면 내부 파일들이 보입니다.

cd 새폴더명

새로 만든 폴더 안으로 이동을 해줍니다. 

git init

새로운 폴더를 깃폴더로 설정해줍니다. 

그럼 비어있는 깃 저장소를 다시 초기화했다는 메시지가 나와요.

(저는 한글이지만, 영문으로 나오실 수도 있어요.)

깃폴더 내부 확인

ls

폴더 내부 파일을 확인하는데, 안보입니다.

ls -al

숨겨진 폴더까지 보면 .git이 보여요.

cd .git

숨겨진 .git으로 이동을 해주고요.

ls -al

.git내부를 살펴보았더니 다양한 것들이 보이네요. 

깃에 올리기 위한 파일 생성

폴더에 직접 들어가서 생성해도 되지만, 저는 깃으로 만들어봤어요.

cat > 파일명.확장자

파일을 생성하고 엔터를 눌러 계속 작성해줍니다.

모두 작성했으면,control + z를 눌러주면, 파일 생성과 동시에 내용을 넣어서 저장이 되어요.

연달아 두개의 파일을 생성해주었어요.

ls 또는 ls -al

내부 파일보기 또는 숨겨진 파일 포함 파일보기를 통해 파일이 잘 생성되었는지 파일 목록을 봐줍니다.

처음 내부를 보았을 때 .git까지만 있었는데, 추가 파일들이 생성되었어요.

깃정보 입력 후 커밋하기

git config user.name "이름" 

git config user.email "이메일주소"

git commit -m "Create 파일1.확장자 and 파일2.확장자"

이름과 메일주소를 지정하고 커밋을 하니 추적이 필요하다고 해요. staging영역에 올려줘야 하는데요.

git add를 통해 어떤것들을 커밋할지 올려주라고 합니다.

git add 파일1.확장자 

git add 파일2.확장자

git commit -m "커밋메시지"

git add를 통해 두개의 파일을 올려준 뒤,

-m뒤에 커밋 메시지를 입력해주고 커밋을 다시 진행해주면 커밋이 되었어요 :)

staging 여부 확인하기

mkdir 폴더명

새로운 폴더 생성

cd 만든폴더명

만들 폴더 안으로 이동

touch day1

touch day2

두개의 파일들을 추가해줍니다. 

git staus

깃 상태를 볼 수 있는데요. 커밋이 가능한 변경된 사항들을 알 수 있어요.

만약, 커밋 후 따로 staging에 올린 게 없으면커밋할 사항 없음, 작업 폴더 깨끗함 이라고 보여집니다.

git add . 

수정한 파일 모두를 staging에 올릴 수 있어요. 

그 외 깃 명령어

git init : 현재 디렉토리를 Git working directory로 설정하고, .git 레포지토리를 생성한다.

git reset 파일명 : staging area에서 파일을 제거한다. (수정한 건 그대로 남아있다!)

git help : git명령어들 정보 알아보기

- add의 사용법을 알아보고 싶다면 : git help 커맨드명(git help add ) 이런식으로 해당 명령어에 대한 것으로 알아볼 수도 있다.

-> man git-커맨드명 역시 같은 내용을 알아볼 수 있다.

시맨틱 태그란?

<div>와 기능은 동일하지만, 콘텐츠의 특정 의미가 담겨있는 태그를 의미하는데요.

div는 어디든 사용해도 무방하지만, 시맨틱 태그는 해당 태그에 의미를 담고 있는데요.

이 엘리먼트의 역할이 무엇인지 보다 명확하게 드러내주는 것이라고 볼 수 있을 듯 해요. 

예를들어, header에는 페이지의 머릿글로 제목이나 로고 등등을 포함하고 있고, 

nav는 내비게이션이나 목차, section은 본문에 포함된 다양한 내용들을 나눈것, 

footer에는 하단 바닥글로 저작권이나 회사 정보 등등이 담겨있어요. 

그럼, 이런 시맨틱 태그를 사용하게 되는 장점을 알아봅시다 :)

시맨틱 태그의 장점

검색엔진 최적화

의미 있는 태그를 통해 검색시 정확한 구조 분석에 도움을 주어 사이트 검색 시 노출 순위를 높일 수 있습니다. 

웹 접근성 향상

시각장애가 있는 사용자가 화면 판독기를 통해서 접근하게 되면, 마크업을 푯말로 사용해서 접근이 쉬워지겠죠?

또한 소스코드가 구조화 되어 원하는 위치를 빠르게 찾을 수도 있겠네요. 

코드 가독성을 높여 유지보수 용이

해당 부분이 화면상 어디에 위치하는지 빠른 판단이 가능해져서 유지보수를 하게 될 때 빠르게 이해할 수 있습니다.

a태그를 텍스트 그대로 사용 하는 경우도 있지만,

마치 버튼처럼 만들어서 사용하는 경우가 굉장히 많다.

a태그를 이용해서 버튼처럼 활용하는 css를 공유해보려고 한다. 

	
  .aButton{  
  cursor: pointer;    
    text-decoration: none;
    
    border-radius: 8px;
    height: 50px;
    width: 130px;
    padding: 16px 32px;
    text-align: center;
    
    background: #6d6afe;
    color: #ffffff;
    font-weight: 600;
    font-size: 17px;
}

위 코드를 순서대로 설명하자면-

 cursor: pointer;    :  a태그의 경우엔 마우스를 대면 기본이 손 모양(pointer)으로 되니 생략해도 되지만, 마우스를 댔을 때 나타나는 마우스 포인터에 다양한 모양의 옵션을 설정할 수 있다. 

text-decoration: none; : a태그 특성상 링크라는 걸 언더바를 통해 보여주는데 이 옵션을 해야 아래 언더라인이 사라진다. 

border-radius : 테두리의 둥근정도를 의미한다. 혹시 직각을 원하면 생략해도 된다.

height, width : 버튼의 높이와 너비

padding : 이걸 사용해야 아래 위 정렬도 할 수 있다! 정확히는 정렬이라기보다 버튼 안에 실제 텍스트(컨텐츠)와 라인의 간격을 만들어줘서 가운데에 위치한 것처럼 효과를 내는 것이다. 

위 이미지는 차례대로 패딩을 위 코드처럼 준 경우, 16px로 하나로 통일, 상하만 16px, 좌우는 0으로 준 경우이다.

-> 정해진 버튼의 사이즈가 있거나 한개에만 적용하는 경우 버튼 사이즈만으로 크게 상관은 없지만, 여러군데 사용한다면 좌우 여백을 통일해주고, 버튼의 가로길이를 유동적으로 하는 것이 좋을 듯 하다. 

text-align : 텍스트를 가운데로 정렬해준다. (padding으로 어느정도 정렬은 되지만, 컨텐츠의 길이에 꼭 맞게 간격을 줄 수 없으니 가운데 정렬을 해준다. 

background : 버튼 배경의 컬러, color는 텍스트의 컬러이다. (그라데이션을 사용해도 예쁘다!☺️)

font-weight : 폰트의 두께 font-size는 폰트의 크기이다. 

자주 쓰는 기능이다보니 기억해두는 것이 좋다.