웹 개발을 위한 Git: 프로젝트의 일반적인 워크플로 알아보기

웹 개발은 본질적으로 협업과 관련이 있습니다. 대부분의 시간 동안 다른 개발자와 함께 일하게 되며, 그렇지 않더라도 Git은 다른 많은 방법으로 도움을 줄 수 있습니다.

Git은 우리가 만드는 애플리케이션의 버전을 제어하는 ​​소프트웨어입니다. 솔로 개발자, 대기업, 심지어 세계 최대 오픈 소스 프로젝트인 Linux에서도 사용됩니다.

웹 개발자로서 Git을 웹 개발에 올바르게 사용하는 방법을 아는 것은 매우 중요합니다. 우리는 "git add", "git commit", "git push"에 대해서만 이야기하는 것이 아닙니다. Git을 사용하여 웹 프로젝트를 만드는 전체 워크플로를 알고 있어야 합니다.

아직 확신하지 못하셨나요? 시작하자!

Git을 사용하는 이유

다음은 Git 사용을 시작하는 이유 중 일부일 뿐입니다.

• 조직: v1, v2, v3 등과 같은 폴더에서 프로젝트를 관리하는 대신 파일의 모든 버전을 저장하는 특수 데이터베이스가 있는 하나의 프로젝트가 있습니다.
• 협업: Git을 사용하면 다른 사람들이 충돌을 일으키지 않고 같은 프로젝트에서 동시에 작업할 수 있습니다.
• 오픈 소스: Git은 오픈 소스이지만 우리가 협업하고 훌륭한 오픈 소스 소프트웨어를 만드는 데 사용하는 도구이기도 합니다. 누구나 GitHub 또는 Bitbucket과 같은 플랫폼에서 오픈 소스 프로젝트에 pull 요청을 할 수 있습니다.
• 플랫폼 유연성: 요즘에는 Gitlab, GitHub, Bitbucket 및 SourceForge와 같이 선택할 수 있는 다양한 Git 호스팅 서비스가 있습니다. 모든 프로젝트에 자체 호스팅 솔루션을 사용할 수도 있습니다.
• 간편한 백업: 실수를 쉽게 취소하고 프로젝트 코드베이스를 잃지 마십시오.

이제 'git add', 'git commit' 및 'git push' 그 이상을 배울 시간입니다. 이 가이드 에서 일반적인 Git 워크플로에 대해 알아야 할 모든 내용을 살펴보세요.

이제 GitHub라는 용어를 한두 번 언급했는데 Git과 GitHub의 차이점은 무엇입니까?

Git을 처음 접하는 경우 혼란스러울 수 있습니다. 간단히 말해서 Git과 GitHub는 관련이 있지만 다른 도구입니다.

Git은 파일 변경 사항을 제어하는 ​​데 사용하는 VCS(버전 제어 시스템)이고, GitHub는 프로젝트 파일과 Git 기록을 온라인으로 저장하는 데 사용하는 서비스입니다(프로젝트의 .git/ 폴더에 있음). .

Git은 컴퓨터에 로컬로 설치되며 GitHub 또는 GitLab과 같은 호스팅 서비스가 없으면 다른 개발자와 협업하기가 매우 어렵습니다.

GitHub는 복제, 분기 및 병합과 같은 협업을 개선하는 다른 기능을 추가하여 Git을 강화합니다. 이 두 도구를 함께 사용하면 프로젝트를 개발, 관리 및 다른 사람들에게 보여줄 수 있는 비교적 친숙한 생태계를 만들 수 있습니다.

웹 개발 워크플로를 위한 기본 Git

다음 섹션에서는 실습을 통해 웹 개발을 위한 Git 워크플로에 대해 자세히 알아봅니다.

설치 요구 사항

아직 Git을 설치하지 않았다면 지금이 적기입니다. 설치가 쉽고 대부분의 운영 체제에서 사용할 수 있습니다.

공식 다운로드 페이지에서 다운로드하거나 Linux 또는 macOS를 사용하는 경우 패키지 관리자를 사용하여 설치합니다.

모든 것이 설치가 잘 되었는지 테스트하려면 응용 프로그램 메뉴에서 "터미널"을 검색하거나 Windows에서 Git bash(기본적으로 Git와 함께 설치됨)를 열어 Linux 또는 macOS에서 터미널을 실행합니다.

그런 다음 다음을 입력합니다.

 git --version

응답으로 Git 버전을 받으면 잘 진행됩니다.

또한 GitHub 계정이 필요하므로 GitHub에 가입하거나 로그인해야 합니다.

Git을 설치하고 GitHub 계정에 로그인하면 다음 섹션으로 이동할 수 있습니다.

협업 프로젝트를 위한 기본 Git 워크플로

앞서 언급했듯이 대부분의 경우 솔로 프로젝트를 개발하지 않을 것입니다. 협업은 핵심 기술이며 Git과 GitHub는 간단하면서도 효과적인 프로세스를 만드는 데 도움이 됩니다.

Git 프로젝트의 일반적인 워크플로는 다음과 같습니다.

1. 리포지토리 또는 리포지토리를 복제하여 프로젝트의 로컬 복사본을 가져옵니다. 공동 작업 중이라면 먼저 저장소를 분기해야 합니다.
2. 작업할 기능의 대표 이름으로 분기를 만듭니다.
3. 프로젝트를 편집합니다.
4. 변경 사항을 로컬 시스템에 커밋합니다.
5. 변경 사항을 원격 저장소로 푸시합니다.
6. 원래 리포지토리에 대한 pull 요청을 만듭니다.
7. 원래 리포지토리의 기본 분기에서 충돌을 병합하고 해결합니다.

지도 시간

이제 우리의 손을 더럽힐 시간입니다!

이 가이드에서는 간단한 HTML 웹사이트를 만들 것입니다. 실용적인 목적을 위해 HTML 사이트 리포지토리에서 GitHub 계정으로 기본 프로젝트를 분기합니다. 이 작업은 사용 가능한 모든 공개 리포지토리에 대해 수행할 수 있습니다.

HTML 사이트를 분기하려면 이 GitHub 리포지토리로 이동하여 페이지 오른쪽 상단에 있는 분기 버튼을 클릭하십시오.

이제 GitHub 계정에서만 사용할 수 있는 원래 리포지토리의 포크가 있습니다. 변경 사항을 커밋하기 시작할 때까지 정확히 동일한 리포지토리입니다.

보시다시피 공개 리포지토리를 분기하는 데 몇 초밖에 걸리지 않습니다. 이는 오픈 소스 프로젝트에 적합하지만 조직에 비공개 리포지토리가 있는 경우 포크를 시도하기 전에 기고자로 포함되어야 한다는 점을 명심하십시오.

포크를 로컬 머신으로 가져올 시간입니다. 이렇게 하려면 원격 서버에서 Git 리포지토리를 검색하는 git clone 명령을 사용하여 복제해야 합니다.

 git clone remote_url

remote_url 을 포크의 URL로 바꿔야 합니다. GitHub repo의 정확한 URL을 얻으려면 해당 페이지로 이동하여 Code 를 클릭하십시오. 그런 다음 SSH 를 선택하고 제공되는 링크를 복사합니다.

분기된 리포지토리를 복제하기 위해 실행할 명령은 다음과 같습니다.

 git clone [email protected]:yourusername/HTML-site.git

리포지토리를 복제하면 해당 이름의 폴더가 생성됩니다. 이 폴더 안에는 프로젝트의 소스 코드(이 경우 HTML 사이트)와 Git repo가 ​​있으며 .git 폴더 안에 있습니다.

그래픽 파일 관리자에서 새 폴더를 열거나 ls 또는 dir 명령을 사용하여 터미널에서 직접 나열하여 새 디렉토리 내의 파일 목록을 볼 수 있습니다.

 # Linux/macOS ls HTML-site/ # Windows dir HTML-site\ .git images .gitignore index.html LICENSE README.md styles.css

이 HTML 사이트는 매우 간단합니다. 실용적인 목적으로 부트스트랩을 사용하고 사이트에 대한 무료 이미지를 다운로드할 수 있는 Unsplash의 몇 가지 사진을 사용합니다.

브라우저에서 index.html 파일을 열면 몇 가지 이미지가 있는 간단한 페이지가 표시됩니다.

이 프로젝트를 가지고 놀 시간입니다. 매우 비어 있으며 사이트 이름이 있는 헤더가 사용자 경험을 향상시킬 수 있습니다.

그렇게 하려면 HTML-site 디렉토리를 입력하고 header 라는 브랜치를 만듭니다. 이 새 분기에서 모든 파일을 편집하고 기본(원본) 분기에 영향을 미치지 않기 때문에 원하는 만큼 코드를 구현할 수 있습니다.

다음 명령을 실행합니다.

 git checkout -b header

이렇게 하면 "header"라는 브랜치가 생성되고 바로 이 지점으로 전환됩니다. 다음과 동일합니다.

 git branch header git checkout header

모든 것이 잘 되었는지 확인하려면 다음을 실행하십시오.

 git status # On branch header # nothing to commit, working tree clean

"메인" 브랜치에서 "헤더" 브랜치로 이동했지만 파일을 편집하지 않았기 때문에 작업 트리는 여전히 깨끗하다는 것을 알 수 있습니다.

즐겨 사용하는 코드 편집기에서 분기된 프로젝트의 index.html 파일을 엽니다. 이 파일에는 Bootstrap 5에 대한 일부 링크가 포함되어 있으므로 프레임워크의 바로 사용할 수 있는 구성 요소를 활용할 수 있습니다.

<body> 태그 내부와 이미지 컨테이너 위의 index.html 파일에 다음 코드를 추가합니다.

 <header> <nav class="navbar navbar-light bg-light"> <div class="container-fluid"> <span class="navbar-brand mb-0 h1">HTML site</span> </div> </nav> </header>

훨씬 잘생겼어! 원하는 다른 분기 및 변경을 자유롭게 수행하십시오.

프로젝트 편집을 마치면 모든 변경 사항을 로컬 리포지토리에 커밋할 차례입니다. 프로젝트 디렉터리 내에서 터미널에 다음을 입력합니다.

 git add --all git commit -m "Added simple header in index.html file"

프로젝트를 처음 시작할 때 설명적인 커밋 메시지가 있는 것이 일반적이지만 시간이 흐르고 초점이 바뀌면 메시지의 품질이 떨어지는 경향이 있습니다. 좋은 명명 관행을 따라야 합니다.

이제 로컬 리포지토리(이는 여전히 컴퓨터에서만 사용 가능)에 커밋했습니다. 이제 이를 원격 리포지토리로 푸시할 차례입니다.

커밋을 정상적으로 푸시하려고 하면 현재 header 브랜치에서 작업 중이기 때문에 작동하지 않습니다. header 에 대한 업스트림 분기를 설정해야 합니다.

 git push --set-upstream origin header

2021년 8월 13일부터 GitHub에서 SSH 인증을 사용해야 하므로 키를 올바르게 설정했는지 확인하세요.

그런 다음 분기된 저장소(예: https://github.com/yourusername/HTML-site/branches )에서 header 라는 새 분기를 볼 수 있습니다.

원래 리포지토리에 대한 풀 요청을 생성하려면 활성 브랜치 섹션에서 비교 를 클릭하십시오.

그러면 병합하려는 분기(원본 또는 포크)를 선택해야 하는 풀 요청으로 안내됩니다. 기본적으로 기본 리포지토리와 병합하는 옵션이 표시됩니다.

풀 요청 옵션을 클릭하면 이전 커밋과 마찬가지로 변경 사항에 대한 간단한 설명을 작성해야 합니다. 다시 한 번 간결하면서도 설명적인 내용을 입력하세요.

풀 리퀘스트 생성 버튼을 클릭하고 기본 리포지토리 소유자가 변경 사항을 수락하거나 피드백을 제공할 때까지 기다립니다.

축하합니다. 웹 개발을 위한 일반적인 Git 워크플로의 모든 단계를 완료했습니다!

이것은 정말 기본적인 예였지만 논리는 모든 규모의 프로젝트에 걸쳐 확장됩니다. 더 큰 공동 작업 프로젝트에서도 이 워크플로를 밀접하게 구현해야 합니다.

Kinsta에서 Git을 사용하는 방법

Kinsta 사용자인 경우 MyKinsta 포털 내에서 Git 및 GitHub를 사용하는 두 가지 방법이 이미 있습니다.

첫 번째 옵션부터 시작하겠습니다. GitHub, Gitlab 또는 Bitbucket과 같은 Git 호스팅 서비스에서 쉽게 SSH로 연결하고 리포지토리를 가져올 수 있습니다.

이렇게 하려면 사이트 탭으로 이동하여 사이트를 선택하고 SSH 세부 정보 섹션으로 이동하여 SSH 터미널 명령을 복사합니다.

터미널에 위의 명령을 붙여넣고 사이트의 공용 폴더( /www/yoursitename/ 아래에 있음)를 입력하여 SSH를 통해 사이트에 로그인합니다. 여기에 모든 WordPress 파일이 있으므로 작업한 사용자 지정 테마 또는 플러그인이 있는 Git 저장소를 풀다운할 수 있습니다.

간단한 명령으로 Git 저장소를 풀다운하는 방법은 다음과 같습니다.

 ssh [email protected] -p PORT "cd /www/my_site/public && git pull https://github.com/user/repo.git"

이제 Kinsta에서 새로운 GitHub 배포 기능을 도입하여 GitHub 리포지토리에서 전체 WordPress 사이트를 배포할 수 있습니다.

GitHub 리포지토리에는 WordPress 코어 파일의 복사본과 물론 wp-content 폴더 내부의 사이트 콘텐츠가 포함되어야 합니다.

이 옵션을 간단히 살펴보겠습니다.

회사 사이트 중 하나로 이동하여 준비 환경을 만드십시오. 몇 분 이상 걸리지 않습니다.

준비 사이트에 있으면 배포 탭으로 이동하여 설정 시작 버튼을 클릭합니다. Kinsta가 GitHub 계정에 연결할 수 있도록 하는 GitHub 모달이 표시됩니다.

이제 사이트를 가져올 저장소를 선택하십시오.

마지막으로 사이트를 배포하고 스테이징 사이트 URL을 통해 방문합니다.

이 기능은 아직 베타 버전 이지만 곧 모든 Kinsta 사용자가 이 기능에 액세스할 수 있습니다.

Git과 Kinsta를 사용하는 것은 잘 사용할 줄 안다면 강력한 조합이 될 수 있습니다. 여기의 자습서는 간단한 예를 제시하지만 Git 지식 기반 문서에서 훨씬 더 많은 것을 배울 수 있습니다.

이 가이드를 통해 Git 지식을 일반적인 프로젝트 워크플로로 끌어올리세요 .

요약

요즘 Git은 웹 개발을 위한 필수 도구입니다. 대부분의 경우 다른 사람들과 협력하여 최고의 프로젝트를 만들 수 있기 때문입니다.

이 기사에서는 프로젝트에서 Git을 사용해야 하는 몇 가지 중요한 이유에 대해 논의했으며 Git 리포지토리에서 협업하는 기본 워크플로를 보여주었습니다.

Git은 사용을 WordPress 호스팅까지 확장할 수 있는 강력한 도구이므로 웹 개발 기술 무기고의 일부로 배우고 구현하는 것만으로도 이점을 얻을 수 있습니다.

웹 개발을 위한 이 기본 Git 워크플로를 개선하기 위한 다른 제안 사항이 있습니까? 의견 섹션에서 알려주십시오!