인스타그램 멀티링크용 링크트리 페이지 코딩으로 만들기(2)

안녕하세요.

링크트리 페이지 코딩으로 만들기 2탄입니다.

 

우리는 HTML과 CSS로 코딩한 페이지를 깃허브 저장소에 올리고,

Netlify를 깃허브 저장소에 연동시켜 웹페이지를 배포할 예정입니다.

 

1탄에서는 링크트리 페이지를 HTML과 CSS로 코딩해보았습니다.

2022.08.01 - [코딩/웹 프로그래밍] - 인스타그램 멀티링크용 링크트리 페이지 코딩으로 만들기(1)

인스타그램 멀티링크용 링크트리 페이지 코딩으로 만들기(1)

 

2탄에서는 코딩한 페이지를 깃허브 저장소에 올려보겠습니다.

 

깃허브를 이용하기에 앞서, 깃허브를 제대로 활용하기 위해서는 Git을 설치해주어야 합니다.

아래 링크에 접속해 깃에 대한 설명과 설치방법을 한번 읽어보시는걸 추천드립니다.

2020.01.03 - [코딩/Git&Git Hub] - 비전공자의 코딩 독학 - 깃&깃허브[1] 깃과 깃허브란?

비전공자의 코딩 독학 - 깃&깃허브[1] 깃과 깃허브란?

 

 

1. 깃허브 회원가입하기

https://github.com/

GitHub: Where the world builds software

위 링크로 접속해줍니다.

[Sign up]버튼을 눌러서 회원가입을 해줍니다.

email 주소를 입력해줍니다.

여기서 입력한 email은 깃허브에 로그인 할 수 있는 ID로도 쓰이지만, 인증번호를 전송하기 위해서도 사용되므로 꼭 실존하는 email주소를 입력해주세요.

비밀번호를 입력해줍니다.

username을 입력해줍니다.

단순 닉네임이 아니라 계속 쓰이므로 외우기 쉬운 걸로 설정해주세요.

이번엔 깃허브에서 이메일 연락을 받을거냐는 물음입니다.

깃허브로부터 연락을 받으려면 y를 입력하면 되고 아니라면 n을 입력해주세요.

본인이 인간인지 확인합니다. 문제를 풀어주세요.

다음은 [Create account]버튼을 눌러주면 됩니다.

 

 

2. 토큰 만들기

우리는 VSCode와 깃허브를 연동할 예정입니다.

또한 깃을 이용하여 깃허브의 저장소를 내 컴퓨터에 복사할 예정입니다.

 

내 컴퓨터에서 VSCode와 깃허브, 깃과 깃허브를 연동하기 위해서는 인증을 위한 토큰이 필요합니다.

깃허브에 로그인 후 우측 상단의 프로필 사진을 클릭하고, [Settings]을 눌러주세요.

좌측 하단에 있는 [Developer settings]를 클릭합니다.

[Personal access tokens]를 클릭합니다.

[Generate new token]을 클릭합니다.

Note 칸에는 이 토큰의 이름을 지정해줍니다.

이때, Expiration은 토큰의 유효기간을 의미합니다.

밑에 체크해주는건 만들어줄 토큰이 가질 권한을 의미합니다.

본인 기기에서만 사용하신다면 그냥 다 체크해주시면 됩니다.

이제 토큰이 생성되었습니다.

이때 토큰값은 1번만 노출되므로 반드시 지금 복사해서 다른 곳에 기록해두어야 합니다.

 

 

3. 레포지토리 만들기

깃허브를 사용하기 위해서는 코드를 저장할 저장소를 만들어주어야 합니다.

만들어진 저장소를 내 컴퓨터에 복사하면 저장소 이름으로 폴더가 생성됩니다.

생성된 폴더를 VSCode로 열어주면 깃허브와 VSCode를 연동할 수 있습니다.

깃허브에 로그인 한 후 좌측에 있는 초록색의 [New] 버튼을 눌러줍니다.

저장소 이름을 부여해줍니다.

이때, 저장소 이름은 내가 저장소에 담을 코드와 연관이 있는게 좋습니다.

저는 linktolink라는 이름으로 만들어주었습니다.

다음으로는  private나 public 중에서 선택해야 합니다.

private는 말그대로 개인 저장공간으로 설정하는거고, public은 공개 저장소로 설정하는 것입니다.

다음으로  [Add a README file]을 체크한 뒤 [Create repository] 버튼을 눌러줍니다.

저장소가 생성되었다면 초록색 [Code]버튼을 눌러 저장소의 주소를 복사해줍니다.

이제 저장소를 저장할 내 컴퓨터의 폴더에서 마우스를 오른쪽 클릭하고, [Git Bash Here]를 클릭합니다.

git clone 저장소주소

깃배쉬에 위와 같은 명령어를 입력한 후 엔터를 눌러주면 해당 폴더에 저장소가 복사됩니다.

혹시 위와 같이 로그인 하라는 창이 뜨나요?

이제 아까 만들어준 토큰을 사용해주겠습니다.

Token 탭을 선택한 후 아까 복사해둔 토큰값을 넣어 로그인해줍니다.

그럼 사용중인 기기가 깃허브에 로그인되고, 코드를 깃허브 저장소에 동기화할때 별도의 로그인 과정을 거치지 않아도 됩니다.

 

 

4. VSCode에서 깃허브 연동해보기

깃허브의 저장소에 소스코드를 업로드하는 과정은 크게 네 가지 과정으로 구분됩니다.

• 소스코드를 수정한다.
• 변경 사항을 스테이징하여 동기화를 준비시킨다.
• 스테이징된 변경사항을 커밋하여 동기화 시점을 기록한다.
• 동기화를 진행한다.

원래는 이 과정을 Git Bash를 이용해서 해줬지만,

VSCode를 이용하면 더 쉽게 위 과정을 진행할 수 있습니다.

 

천천히 따라와주세요.

동기화한 폴더를 VSCode에서 열어줍니다.

폴더를 무사히 열어주고 잠시 기다리면 좌측 소스제어 탭에 해당 폴더가 연동됩니다.

이후 코드를 작성하는 등 해당 폴더에 변경사항이 생기면 위 사진과 같이 변경사항 항목에 뜹니다.

[+] 버튼을 눌러서 변경사항을 스테이징해줍니다.

그럼 스테이징된 변경사항에 변경사항이 반영되고, 상단에 커밋 메시지(저는 커밋당시의 시점을 기재합니다.)를 작성하고, 커밋 버튼을 눌러줍니다.

마지막으로 변경 내용 동기화 버튼을 눌러 깃허브에 동기화해줍니다.

이제 깃허브 레포지토리를 확인해보면 위와 같이 변동사항이 반영된 것을 확인할 수 있습니다.

 

다음번에는 Netlify를 이용해 깃허브 저장소를 동기화하고, 우리가 만든 링크 페이지를 배포해보겠습니다.