최고의 코드 협업 Bliss

개발 환경에서의 GitHub와 WordPress 통합

개발 과정에서 GitHub와 WordPress는 자주 언급되는 중요한 용어들입니다. 이 두 플랫폼을 효과적으로 통합하면 개발자의 작업 흐름을 간소화하고 전반적인 생산성을 크게 향상시킬 수 있습니다.

GitHub는 소스 코드의 추적, 관리 및 저장을 위한 클라우드 기반 플랫폼입니다. 반면에 WordPress는 웹사이트를 구축하기 위한 콘텐츠 관리 시스템(CMS)입니다.

두 플랫폼 통합의 필요성

버전 관리: GitHub를 통해 WordPress 소스 코드의 모든 변경 사항을 시간별로 추적할 수 있습니다. 이는 사용자 정의 코드, 테마 및 플러그인을 효율적으로 관리하는 데 도움이 됩니다.
브랜치 활용: GitHub와 WordPress를 통합한 후에는 웹사이트를 '유지보수 중' 상태로 둘 필요가 없습니다. 새로운 브랜치를 생성하여 개별 기능을 작업하고 테스트한 후, 만족스러울 경우 배포할 수 있습니다.
협업 강화: 대규모 웹사이트 개발 시 여러 개발자의 협업이 필수적입니다. GitHub는 팀 구성원을 쉽게 온보딩하고 역할 할당을 가능하게 합니다.
코드 검토: 개발 단계에서 문제가 발생하여 애플리케이션이 중단될 수 있습니다. GitHub를 사용하면 변경 사항을 배포 전에 검토하여 위험을 줄일 수 있습니다.
백업 및 복구: 로컬 컴퓨터에 저장된 WordPress 소스 코드는 컴퓨터 손상 시 위험에 노출될 수 있습니다. GitHub는 클라우드에 코드를 저장하여 필요시 복구를 용이하게 합니다.
투명성 및 책임: GitHub는 WordPress 소스 코드의 변경 이력을 명확하게 추적하고 각 변경 사항의 작성자를 식별할 수 있도록 합니다.

워드프레스란 무엇인가?

워드프레스는 코딩 경험이 없는 사용자도 쉽게 웹사이트를 구축할 수 있도록 설계된 오픈 소스 CMS입니다. 원래 블로그 플랫폼으로 시작했지만, 현재는 전자상거래 플랫폼, 포럼, 소셜 미디어 플랫폼 및 비즈니스 웹사이트를 포함한 다양한 웹사이트를 제작할 수 있도록 진화했습니다.

WordPress의 오픈 소스 특성은 개발자와 디자이너에게 가장 큰 매력 요소 중 하나입니다. 이를 통해 소스 코드를 다운로드, 편집 및 재배포할 수 있습니다. 웹사이트를 온라인에 게시하려면 도메인 이름과 호스팅 서비스가 필요합니다.

워드프레스를 사용하는 이유

사용 편의성: WordPress는 코딩 초보자부터 전문가까지 모든 사용자가 쉽게 사용할 수 있도록 설계되었습니다. 드래그 앤 드롭 편집기를 통해 코딩 없이도 전문적인 웹사이트를 만들 수 있습니다.
다양한 테마: 수천 개의 테마가 제공되어 사용자의 요구에 맞게 웹사이트를 꾸밀 수 있습니다. 또한 사용자 정의 테마를 만들어 업로드할 수도 있습니다.
풍부한 플러그인: 플러그인을 통해 처음부터 모든 기능을 만들 필요 없이 웹사이트 기능을 확장할 수 있습니다. 예를 들어 결제 게이트웨이 통합이 가능합니다.
커뮤니티 지원: WordPress 커뮤니티는 문제 발생 시 도움을 받을 수 있는 방대한 리소스를 제공합니다.

GitHub란 무엇인가?

GitHub는 클라우드 기반의 소프트웨어 개발 플랫폼입니다. 다양한 개발 프로젝트를 저장, 추적 및 공동 작업할 수 있는 환경을 제공합니다. 무료 계정으로 저장소를 만들고 공동 작업자를 초대할 수 있습니다. Git과 원활하게 연동되어 프로젝트의 변경 사항을 로컬에서 추적할 수 있습니다.

GitHub는 GitHub Pages를 통해 정적 웹사이트 무료 호스팅을 제공하므로, 포트폴리오 페이지를 만들기에 좋은 선택입니다. 또한 오픈 소스 프로젝트를 탐색하고 참여할 수 있는 소셜 네트워킹 플랫폼 역할도 합니다.

GitHub를 사용하는 이유

간편한 사용: 기술적 지식이 부족하더라도 GitHub 계정을 쉽게 설정할 수 있습니다.
클라우드 기반: 소스 코드가 클라우드에 저장되므로 원격으로 접근하거나 컴퓨터가 고장날 경우 파일을 복구할 수 있습니다.
버전 관리: 소스 코드의 모든 변경 사항을 추적하고 다양한 브랜치를 생성하여 효율적으로 관리할 수 있습니다.
협업 기능: 팀 구성원을 프로젝트에 초대하여 협업할 수 있으며, 역할과 권한을 부여할 수 있는 조직 기능을 제공합니다.

WordPress에서 GitHub 활용하기

WordPress 사이트 개발 및 GitHub 통합을 시작하기 전에 로컬 개발 서버를 설정해야 합니다.

다양한 방법으로 로컬 개발 서버를 만들 수 있지만, 이 문서에서는 Local WP를 사용합니다.

WordPress GitHub 통합 요구 사항

Git: 최신 Linux 또는 macOS에는 기본적으로 설치되어 있습니다. git --version 명령어를 통해 설치 여부를 확인할 수 있습니다.
GitHub 계정: 계정이 없다면 이 가이드를 참조하세요.
WordPress 작동 방식에 대한 기본 지식

Local WP 설치

릴리스 페이지에서 운영 체제에 맞는 배포판을 다운로드합니다(저는 Ubuntu 사용).
다운로드 후 운영 체제에 맞는 설치 가이드를 따릅니다.

Local WP에서 무료 계정을 생성하라는 메시지가 나타나면 'X' 버튼을 클릭하여 건너뛸 수 있습니다.

새 WordPress 사이트를 만드는 첫 번째 옵션을 선택합니다.

환경 설정을 선택합니다. 여기서는 'Preferred'를 사용합니다.

사용자 이름과 비밀번호를 설정합니다.

코드 편집기 사용을 돕는 추가 기능을 설치합니다. Local WP 왼쪽의 확장 버튼을 클릭합니다. VS Code를 사용한다면 다음을 설치할 수 있습니다.

이제 로컬에서 개발할 수 있는 WordPress 사이트가 준비되었습니다. 다음 단계는 이 사이트를 GitHub에 통합하는 것입니다.

WordPress와 GitHub 연결하기

Local WP 인터페이스에서 "사이트 폴더로 이동"을 클릭하여 WordPress 사이트의 소스 코드를 엽니다.

VS Code를 사용한다면 다음과 같은 폴더 구조를 볼 수 있습니다.

다양한 폴더와 파일에 대해서는 크게 걱정할 필요 없습니다.

GitHub 저장소 생성

Git과 GitHub가 설정되어 있다고 가정하고 다음 단계에 따라 저장소를 생성합니다.

GitHub에 로그인하고 "새로 만들기"를 클릭합니다.

저장소에 기억하기 쉬운 이름을 지정하고 관련 상자를 선택한 다음 "저장소 만들기"를 클릭합니다.

WordPress 프로젝트 폴더에서 소스 코드를 초기화합니다. GitHub는 터미널에 복사하여 붙여넣을 수 있는 명령어를 제공합니다. 다음 명령어와 유사합니다.


echo "# GitHub-WordPress" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin [email protected]:username/repository-name.git
git push -u origin main

'username'과 'repository-name'을 사용자 이름과 생성한 저장소 이름으로 변경해야 합니다.

WordPress 소스를 GitHub에 푸시합니다. 다음 명령어를 사용합니다.

git add . (모든 프로젝트 파일 스테이징)

git commit -m "프로젝트 폴더 커밋"

git push (변경사항 GitHub에 푸시)

이 단계를 완료하면 로컬 WordPress 사이트가 GitHub와 통합됩니다.

다음 스크린샷을 확인하세요.

코드 편집기에서 소스 코드를 열었을 때와 비슷한 폴더 구조를 확인할 수 있습니다.

이제 팀 구성원들은 저장소를 복제하여 로컬 환경을 만들고, 브랜치를 생성하여 다양한 기능을 개발하고, 변경 사항을 GitHub에 푸시할 수 있습니다.

WordPress 사이트 편집

대부분의 코드 편집은 테마 폴더에서 이루어집니다. app/public/wp-content/themes 경로를 통해 접근할 수 있습니다.

저는 세 개의 테마를 가지고 있으며 가장 최신 테마를 선택했습니다. 편집 전 사이트의 모습은 다음과 같습니다.

app/public/wp-content/themes/templates/home.html 경로를 따라가면 홈페이지 내용을 편집할 수 있습니다.

홈페이지의 <h1> 내용을 "워드프레스-GitHub 통합 샘플입니다"로 변경합니다.

로컬 개발 서버에서 콘텐츠를 새로 고치면 다음과 같이 표시됩니다.

GitHub에 변경사항 푸시하기

지금까지 변경한 사항은 로컬 환경에만 반영된 것입니다. 이를 GitHub에 저장하려면 스테이징, 커밋, 푸시 과정을 거쳐야 합니다.

git status 명령어를 실행합니다.

app/public/wp-content/themes/twentytwentythree/templates/home.html 파일이 추적되지 않은 상태임을 알 수 있습니다.

변경 내용을 스테이징합니다. git add . 명령어를 사용합니다.
커밋합니다. git commit -m "이 커밋은 홈페이지를 편집합니다" 명령어를 사용합니다.
변경 사항을 푸시합니다. git push 명령어를 사용합니다.

GitHub 저장소로 돌아가면 다음과 같이 새로운 커밋이 추가되었음을 확인할 수 있습니다.

이제 팀원들은 변경 사항을 가져오고, 파일을 편집하고, 저장소에 푸시할 수 있습니다.

원활한 GitHub 통합을 위한 모범 사례

버전 제어 활용: GitHub 통합의 가장 큰 이점은 버전 제어 기능입니다. Git을 사용하여 작성하거나 수정하는 모든 코드를 추적하십시오.
스테이징 환경 구축: 로컬 개발 서버를 스테이징 환경으로 활용하여 변경 사항을 테스트하고 라이브 사이트에 푸시하기 전에 검토합니다.
.gitignore 사용: WordPress 개발 시 모든 폴더와 파일을 추적할 필요는 없습니다. .gitignore 파일을 사용하여 테마와 관련된 변경 사항만 추적합니다.
브랜치 활용: 여러 개발자가 동시에 다른 기능을 작업할 때 브랜치를 활용하여 변경 사항을 격리하고 개발을 간소화합니다.
워크플로우 개발: 개발 프로세스를 위한 명확한 워크플로우를 개발합니다. 사이트 테스트 및 배포 시기와 기준을 명확히 합니다.
자동화된 테스트: Jenkins와 같은 CI/CD 파이프라인을 사용하여 개발 과정에서 자동으로 코드를 테스트합니다.
문서화: WordPress 코드의 모든 기능에 대한 설명을 문서화합니다.

결론

이 단계를 따르면 WordPress와 GitHub를 쉽게 통합할 수 있습니다. 팀원들에게 GitHub 저장소 링크를 제공하고 작업할 기능을 할당합니다. 팀 리더는 모든 커밋을 검토하여 품질을 관리할 수 있습니다. GitHub를 통해 소스 코드를 클라우드에 안전하게 저장하고 언제든지 접근할 수 있습니다.

로컬 컴퓨터에 WordPress가 설치되어 있는 경우, GitHub Pages에서 정적 웹사이트를 호스팅할 수 있습니다. 또한 로컬 개발 환경에서 다양한 플러그인을 설치할 수도 있습니다.

GitHub 및 GitLab 관련 기사를 참조하십시오.