'Git' 카테고리의 글 목록

Git

깃 (git)이란? 깃허브 (github)란? (깃과 깃허브 차이점, 쉬운 설명, 정의) 2024.03.15
깃허브 (Github)로 이력서 작성하기 (html, 템플릿, 양식, Git hub) 2024.03.06 2

깃 (git)이란? 깃허브 (github)란? (깃과 깃허브 차이점, 쉬운 설명, 정의)

JD-pro 2024. 3. 15. 10:24

2024. 3. 15. 10:24

현대의 소프트웨어 개발은 복잡하고 다양한 기술의 결합이며,

이러한 환경에서 효과적인 협업과 체계적인 버전 관리는 필수적입니다.

Git과 GitHub는 이러한 요구를 충족시키는 핵심 도구로, 개발자들이 코드의 변화를 추적하고 여러 사람이 공동으로 작업할 수 있게 해주는 강력한 시스템입니다. 이 서론은 독자들에게 Git과 GitHub의 중요성을 이해하는 출발점을 제공합니다.

깃 (git)

깃이란 컴퓨터 파일의 변경 사항을 추적하고

파일들의 작업을 조율하는 분산 버전 관리 시스템입니다.

즉, 소프트웨어 개발에서 코드를 관리하고 기록하고

버전 관리를 해주므로 체계적인 개발이 가능하도록

도와주는 무료 공개 소프트웨어입니다.

즉 Git은 변경 관리, 브랜치, 머지 등 다양한 기능을 제공합니다.

예를 들어, 개발자가 '커밋'을 통해 코드 변경 사항을 저장하면,

이는 시간을 거슬러 과거의 상태로 돌아갈 수 있는 체크포인트 역할을 합니다.

'브랜치' 기능을 사용하면,

원본 코드를 변경하지 않고 실험적인 기능을 개발할 수 있는 별도의 작업 공간을 만들 수 있습니다.

이후 '머지'를 통해 성공적인 변화를 메인 프로젝트에 통합할 수 있습니다.

여기서 형상관리 도구라는 말을 많이 들으실 텐데요

이걸 쉽게 풀어 이야기한다면, 개발의 코드를 짜다가

실수를 하거나 오류가 나면 쉽게 취소할 수 있고

과거의 원하는 어느 시점으로 돌아갈 수 있고

과거의 코드와 현재의 코드를 비교해 볼 수 있어서

이러한 형상을 관리해 주는 도구라고 해서

형상관리 도구라고 이야기합니다.

Git은 항상 여러분이 만든 모든 파일을 지켜보고 있고

추가 수정 삭제된 사항들을 기록하고 있습니다.

같은 프로젝트여도 다른 버전으로 생성하여

같은 밑그림에서 작업도 가능하게 해 주죠

또한 3개의 프로젝트가 완성되는 도착점이 다르더라도

중간에 코드 변경을 일괄적으로 적용할 수 있도록

작업을 도와주는 엄청난 녀석입니다.

위에 말한 장점 중 버전 관리는 특히 굉장히 유용한데요

회사에 취직하여 일을 하게 된다면 개발을 떠나서 어떠한 문서작업을 하더라도

버전 관리는 정말 중요합니다.

기획서 v0.1, 기획서 v0.2, 기획서 v0.3과 같이

작업한 내용물을 상사에게 보고하고 피드백을 받아 수정을 하거나

다른 사람이 이어받아 담당 부분을 업데이트하여 협업할 때

버전 관리를 해 나아가면서 파일을 저장하는 것이 중요한데요

깃에서 자동으로 버전을 관리해 주니 정말 최고의 기능이라고 할 수 있습니다.

업데이트와 파일 패치 배포도 아주 쉽게 관리할 수 있죠

그래서 대형 프로젝트를 진행하거나

백엔드 (Backend)와 프론트앤드 (frontend)를 따로 개발할 때도 깃을 자주 사용합니다.

또한 브랜치 (Branch)를 통해 개발한 뒤,

깃에 병합하는 머지 (Merge)로도 진행할 수 있습니다

브랜치 (Branch)란 독립적인 공간을 만든다는 뜻이며

새로 만든 브랜치는 원래 있던 본 작업물과 동일한 상태를 가지며

브랜치에서 수정을 한 후 커밋을 해도 본 작업물에는 어떠한 영향도 미치지 않습니다.

똑같은 밑그림을 가지고 복제하여 그곳에 먼저 작업해 볼 수 있다는 말이죠

또한 분기점을 생성하여 구역을 나눠 동시에 진행이 가능하다는 말입니다.

Merge는 병합한다는 의미로써 작업이 성공적으로 진행된 것이 확인됐다면

본 게시물에 병합하는 작업을 Merge라고 합니다.

만약 코드의 오류가 뜨거나 잘못 작업이 되었다면 작업한 브랜치를 지우고

새로 브랜치를 만들어서 다시 작업해 볼 수 있겠죠!

위에 커밋이라는 단어는 변경된 사항들을 확정하여 저장소에 저장한다는 것을 의미합니다.

하지만 로컬 저장소를 사용하기 때문에 다른 개발자와 실시간으로 작업을 공유할 수 없습니다.

여기서 등장하는 것이 바로 GitHub입니다.

깃허브 (github)

GitHub는 단순한 원격 저장소를 넘어서, 개발자들이 코드를 공유하고 협력할 수 있는 플랫폼입니다.

GitHub의 기능에는 개발자 커뮤니티 구축,

오픈 소스 프로젝트의 호스팅, 이슈 트래킹, 코드 리뷰,

그리고 GitHub Actions을 이용한 CI/CD가 포함됩니다.

github는 클라우드에 있는 깃 제공자입니다.

git 저장소를 관리하는 클라우드 기반 호스팅 서비스라는 말이죠.

내 컴퓨터에서 git 히스토리를 가져와서

클라우드에 있는 github 웹사이트에 푸시하는 것이죠

그럼 공동 작업자는 이를 가져와서 작업할 수 있습니다.

git의 기본적인 기능을 확장하여 제공합니다.

일을 하다 보면 자주 듣는 말이

"깃에 초대해 드릴게요"

"깃으로 작업하세요"라는 말인데요

이 말 뜻은 깃허브에 초대를 한다는 말입니다.

Github를 사용하면 하나의 프로젝트에

여러 사람이 동시에 개발이 가능합니다.

git 저장소 호스팅 서비스는 클라우드 기반으로

소스코드 공유가 가능하며 클라우드 서버에 소스를

올리기 때문에 한 프로젝트에 여러 명의 사람이

참여하여 버전 제어 및 공동 작업이 가능합니다.

깃 (git)과 깃허브 (github)의 차이점

여기서 많은 사람들이 깃은 뭐고 깃허브는 뭐야라고

헷갈려하시는데

git은 remote 저장소를 지원한 하는 형상관리 도구이며

github가 바로 깃에서 지원하는 remote 저장소입니다.

조금 더 쉽게 말하면,

깃은 본인의 코드와 수정 내역을 기록하고 관리하는

버전 관리 프로그램으로써

브랜치를 생성하고 복구 삭제 병합 (Merge) 하며

작업이 가능합니다.

하지만 로컬 저장소를 사용하기 때문에 다른 사람과

실시간 협업 및 작업 공유가 불가능합니다.

하지만 이때 깃허브를 사용하면 공동 작업이 가능합니다.

즉, Git은 버전 관리 프로그램

Github는 버전 관리, 소스 코드 공유, 분산 버전 제어 등등이 가능한 원격 저장소로서 깃의 내용을 여러 사람과

공유하는 확장 개념이라고 생각하시면 좋습니다.

이렇듯 개발을 하시는 분들이나 협업을 해야 하시는

분들은 거의 깃을 필수적으로 사용하시는데요

깃에서 html을 이용하여 간단하게

이력서를 만들 수 있는 방법이 있습니다.

아주 쉽게 설명해 놨으니 아래 글을 참고해 주세요

https://jdcyber.tistory.com/36

깃허브 (Github)로 이력서 작성하기 (html, 템플릿, 양식, Git hub)

오늘은 개발자라면 꼭 알고 있어야 할 깃허브 (Github) 너무 어려워서 접근하기 힘든 깃허브지만 개발자가 꿈이 이 사라면 사용할 수밖에 없을 텐데요 오늘은 깃허브에서 이력서를 만들어보겠습

jdcyber.tistory.com

Git과 GitHub의 학습 및 사용은 단순히 코드를 관리하는 것을 넘어서,

협업과 프로젝트 관리에 있어 필수적인 역량입니다.

이러한 도구들은 소프트웨어 개발뿐만 아니라, 문서 작성, 학술 연구, 데이터 분석 등 다양한 분야에서도 활용될 수 있으며,

이를 통해 작업의 효율성을 높이고 프로젝트의 질을 높힐 수 있습니다.

Git과 GitHub를 통해 자신의 프로젝트를 더욱 체계적으로 관리할 수 있을 뿐만 아니라,

전 세계 다른 개발자들과 협력하고 커뮤니케이션하는 능력도 향상시킬 수 있습니다.

이는 여러분의 경력 개발에 있어 중요한 자산이 될 것입니다.

따라서, 이 기술들을 학습하고 실제 프로젝트에 적용해 보는 것으로,

여러분의 개발 경험을 한 단계 업그레이드할 수 있는 기회로 삼으시길 바랍니다.

궁금하신 사항은 댓글에 남겨주세요

댓글에 남겨주신 내용은

추후 정리해서 올려드리겠습니다

구독 신청하시면 업로드 시 알려드릴게요!

조금이라도 도움이 되셨다면

공감&댓글 부탁드리겠습니다

감사합니다!

저작자표시 비영리 변경금지

'Git' 카테고리의 다른 글

깃허브 (Github)로 이력서 작성하기 (html, 템플릿, 양식, Git hub) (2)	2024.03.06

깃허브 (Github)로 이력서 작성하기 (html, 템플릿, 양식, Git hub)

JD-pro 2024. 3. 6. 11:43

2024. 3. 6. 11:43

오늘은 개발자라면 꼭 알고 있어야 할 깃허브 (Github)
너무 어려워서 접근하기 힘든 깃허브지만
개발자가 꿈이 이 사라면 사용할 수밖에 없을 텐데요
오늘은 깃허브에서 이력서를 만들어보겠습니다.

깃(git)과 깃허브 (Github)에 대한 설명과 차이점은
아래 글을 참고해 주세요

저장소

먼저 깃 허브 가입을 하신 후에
저장소 (Repository)를 만들어

이력서 관련 파일들을 저장하겠습니다.

먼저 깃허브에 로그인한 후 Repository

(이제 쉽게 레포라고 부르겠습니다)

에서 New를 클릭하여 새 저장소를 만들어줍니다.

"Repository name"에 원하는

레포 이름을 입력해 줍니다.

저는 resume라고 입력하도록 하겠습니다.

코딩할 때와 마찬가지로 띄어쓰기

즉 스페이스바를 하지 마시고

두 개 단어 이상으로 설정하시려면

gildong-resume처럼

하이픈으로 연결해 주시길 바랍니다.

다 작성하셨다면 Add a README flie 체크 박스를

클릭하신 후

Create repository 버튼을 클릭하여

이력에서 쓸 레포를 만들어줍니다.

소스 작성 환경 만들기
VSCODE 편집기

자동으로 만들어진 레포가 열리면 그 상태에서
키보드 마침표. 를 눌러 주세요.
github.dev라는 편집기가 나타납니다.
온라인에서 사용할 수 있는 Vscode 편집기입니다.
만약 작업에 능숙하시고 따로 사용하시는 편집기가
있으시다면 그걸로 사용하셔도 무방합니다.
이제 이곳에 원하는 html 소스를 작성하여 작업하면
자동으로 깃허브 레포로 파일이 업로드되고,
내용 수정 역시 즉시 반영됩니다.

소스 작성 환경 만들기2
Codeswing

Codeswing은 우리가 직접 작성한 소스가
어떻게 반영되는지 바로 확인이 가능하도록
출력해 주는 기능을 가지고 있습니다.
작업하면서 잘 노출되고 있는지 확인하기 위해
설치해 주도록 하겠습니다.

왼쪽 사이드바에서 확장 아이콘을 클릭한 후 codeswing을 검색하여 설치해 주세요.
그리고 바로 마크업 (Markup)에 들어가도록 하겠습니다.
마크업이란 웹 브라우저가 이해할 수 있도록
기호를 사용하여 구성하는 것을 말합니다.

Index.html / Codeswing

VS Code에서 명령 팔레트를 통해

Codeswing을 검색하고

CodeSwing: Initialize Workspace as Swing을

선택합니다.

그리고 HTML 파일을 만들기 위해

Basic: HTML-only를 선택합니다.

정상적으로 선택했다면 편집기 화면이 두 개로 나뉘면서

왼쪽에는 index.html이 나타나고,

오른쪽에는 CodeSwing 화면이 나타납니다.

index.html은 우리가 앞으로 소스를 작성할 화면이고,

오른쪽의 CodeSwing은 소스를 작성하면서

결과를 확인하기 위한 화면입니다.

<html lang = "en"> -> <html lang = "ko">

index.html 화면에서 느낌표! 를 입력한 후

Enter 키를 눌러주세요.

웹 문서의 가장 기본적인 소스 코드가

자동으로 만들어집니다.

그곳에서 "en" 부분을 "ko"로 수정해 주세요.

깃은 영문 페이지로 만들어졌지만

우리는 한글로 작성할 것입니다.

<title>Document</title> <- <title>원하는 제목</title>

보이는 소스에서 <title> 태그는 웹 브라우저 탭에

표시되는 이력서 제목입니다.

Document 부분을 원하는 제목으로 바꿔주세요

html 마크업

본격적으로 html 마크업을 시작하도록 하겠습니다.

아래 소스를 복사해서 index.html 문서의

<body> 태그와 </body> 태그 사이에 삽입해 주세요

<header id="header">
  <!-- 이력서 헤더 : 이름과 타이틀 작성 -->
  <h1>이름</h1>
  <hr>
  타이틀 (예: 학생 등)
  <hr>
</header>

<main>
  <article id="mainLeft">
    <section>
      <h2>CONTACT</h2>
      <!-- 연락처 정보 -->
    </section>
    <section>
      <h2>SKILLS</h2>
      <!-- 자신이 잘할 수 있는 기술 -->
     </section>
     <section>
      <h2>EDUCATION</h2>
      <!-- 학력 -->
    </section>            
  </article>
  <article id="mainRight">
    <section>
     <h2>ABOUT</h2>
     <!-- 자기 소개 -->
    </section>
    <section>
      <h2>WORK EXPERIENCE</h2>
      <!-- 경력 -->
    </section>
  </article>
</main>

위와 같이 Codeswing에 출력된다면

아주 잘 따라오고 계신 겁니다.

<header id="header">
<!-- 이름과 타이틀 작성 -->
  <h1>이름</h1>
  <hr>
    타이틀 (예: 학생 등)
  <hr>
</header>


<header id="header">
<!-- 이력서 헤더 : 이름과 타이틀 작성 -->
  <h1>홍길동</h1>
  <hr>
    도적
  <hr>
</header>

이제 필요한 내용들을 각 소스 코드 사이에 써넣어 주시면 됩니다.

위의 예시를 보고 본인의 이력서 내용을 채워 넣어주세요.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>!!!</title>
</head>
<link rel="stylesheet" href="style.css">
<body>
    <header id="header">
        <h1>!!!</h1>
        <hr>
       !!!
        <hr>
      </header>
      <main>
        <article id="mainLeft">
          <section>
            <h2>CONTACT</h2>
        <p>
            <i class="fa fa-envelope" aria-hidden="true"></i>
            <a href=!!!</a>
        </p>
        <p>
            <i class="fa fa-github" aria-hidden="true"></i>
            <a href=!!!</a>
          </p>      
        <p>
            <i class=!!!</i>
            <a href=!!!</a>
          </p>      
          </section>
          <section>
            <h2>SKILLS</h2>
            !!!
           </section>
           <section>
            <h2>EDUCATION</h2>
            !!!
          </section>            
        </article>
        <article id="mainRight">
          <section>
            <h2>!!!</h2>
            !!!
            <ul>
            !!!
            </ul>  
            !!!
           </section>
            <section>
                <h2>ABOUT</h2>
               </section>
        </article>
      </main>
</body>
</html>

스타일 적용하기

너무 정직한 이력서를 조금만 스타일 수정해 보겠습니다.

왼쪽 탐색기 화면에서 새 파일을 추가해 줍니다.

style.css를 검색하시면 오른쪽에

창 하나가 추가됩니다.

이제 이곳에 소스를 적어 스타일을 만든 것을 index.html에 적용시키려면

HTML 문서에 연결해 주어야 합니다.

link 태그를 사용하여 연결시켜주도록 합시다.

<link rel="stylesheet" href="style.css">

위 코드를 index.html 문서 </head> 태그

바로 앞에 삽입해 주세요.

Google에서 제공하는 Noto Sans KR 체로

폰트를 바꿔보도록 하겠습니다.

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');

body {
    max-width: 960px;    /* 최대 너비 */
    margin: auto;         /* 마진 auto - 내용을 화면 가운데 맞추기 위해  */
    font-family: "Noto Sans KR", "Nanum Gothic";        /* 글꼴 - 웹 폰트 */
    font-size:14px;     /* 글자 크기 */
}

(이제부터 style 창에서 작업합니다)

위 코드를 삽입해 주세요

적용됐는지 보시려면 오른쪽 위 재생 버튼을 클릭하고

Codeswing 창을 보시면 적용되어 있는 모습을

확인할 수 있습니다.

우리가 만든 문서 제목을 지정하는

<h1> 태그와 <h2> 태그에 대한 스타일도 만들겠습니다

h1 {
    font-size: 3rem;    /* 글자 크기 */
    letter-spacing: 0.6rem;  /* 자간 */
    padding-top: 1rem;   /* 위쪽 패딩 */
    padding-bottom: 1rem;   /*  아래쪽 패딩 */
}

h2 {
    font-size: 1.5rem;
    padding-bottom: 1em;
}

너무 일자로 출력되어 보기가 힘들어

2줄로 배치를 바꾸고 싶은데

이럴 경우 CSS 그리드를 사용하시면 됩니다.

작성한 각 파트의 너비를 조절하여

양쪽으로 출력될 수 있게 해보겠습니다.

main {
    display: grid;    /* css grid 사용 */
    grid-template-columns: 40% 60%; /* 왼쪽 40%, 오른쪽 60% */
    margin-top: 3rem;
}

CSS 그리드를 이용하여 너비를 조절하고

2줄로 출력되게 만들었습니다.

조금 답답해서 여백을 추가하면서

가운뎃 줄을 하나 긋도록 하겠습니다.

header {
    text-align: center;
    margin: auto 2rem;
}

section {
    margin: auto 1rem 4rem 2rem;
}

p {
    margin: 0.2rem auto;
}

hr {
    border: none;
    background-color: lightgray;
    height: 1px;
}

h1, h2 {
    font-weight: 100; 
    margin-bottom: 0;
}

i {
    margin-right: 0.5rem;    /* SNS 아이콘 오른쪽 여백 */
}
#mainLeft {
    border-right: 1px solid lightgray;
}