포스트

깃허브에 STS3 연동 및 프로젝트 파일 업로드하는 방법

게시 업데이트
By Chang-Seong Kim 15 분읽는 시간

STS3 및 깃허브 연동 방법

  • Tool :
    STS3 git


🔔 1. Introduction

📌 Spring Legacy Project 업로드

  • STS3 환경에서 MVC 패턴의 KimLibrary 웹 사이트를 제작하였습니다.
  • 제작한 웹 사이트에 대한 개발 현황은 깃허브 블로그에 작성하였습니다.
  • 이번 글에서는 STS3 및 깃허브 연동 방법에 대해 작성하였습니다.

📌 연동(Integration)이란

  • 깃허브 활용을 위해서는 로컬/원격 저장소의 차이를 이해해야 됩니다.
  • ‘로컬 저장소’는 C드라이브로 연결되는 폴더를 의미합니다.
  • 즉, 로컬 저장소는 STS3 환경에서 작업한 파일이 보관되는 곳(directory)입니다.
  • ‘원격 저장소’는 GitHub Repository를 의미합니다.
  • GitHub Repository의 역할은 개발 내용을 저장하고 공유하는 것입니다.
  • ‘연동’이란 두 저장소의 데이터를 주고 받을 수 있도록 clone하는 것입니다.

📌 New Repository

  • 깃허브 레포지토리를 경험해보지 못한 분들이 계실 수 있습니다.
  • 아래 링크로 연결되는 글에는 깃허브 레포지토리 생성 방법이 작성되어 있습니다.
  • 그리고 Git의 핵심인 Commit 및 Push에 대한 설명이 작성되어 있습니다.
  • 쉽게 이해하실 수 있도록 작성하였습니다.
  • 깃허브 레포지토리 생성 방법과 Commit 및 Push 의미


🔔 2. Methodology

🎯 2-1. 로컬 저장소 및 원격 저장소 연동

📌 Open Perspective & Git

  • 로컬 저장소(STS3) 및 원격 저장소(GitHub Repository)를 연동하겠습니다.
  • 연동을 위해서는 STS3에서 GitHub Repository를 Clone해야 됩니다.
  • 먼저 STS3의 우측 상단에 있는 Open Perspective 버튼을 클릭하겠습니다.
  • Open Perspective 메뉴창에서 Git을 Open하겠습니다.
figure
Open Perspective 선택
figure
Git 선택

📌 Git Open 의미

  • Git Open을 하면 STS3 패널 구성(= Perspective)이 Git에 맞게 변경됩니다.
  • 이는 STS3의 패널 구성이 Spring에만 초점 맞춰져 있는 상태에서 변경된 것입니다.
  • STS3의 우측 상단을 다시 보시면 Spring 바로 옆에 Git 구성이 추가된 것을 볼 수 있습니다.
  • Git 및 Spring 패널 구성을 사용자 마음대로 전환할 수 있는 기능이 추가된 것입니다.

📌 Clone a Git Repository & Git

  • 이제 Git Perspective의 Clone a Git Repository를 선택하겠습니다.
  • 만일 Clone 항목이 보이지 않는다면 마우스 우측 버튼을 클릭하여 선택하겠습니다.
  • Clone a Git Repository를 선택하면 Git 정보 입력창이 아래 이미지와 같이 도시됩니다.
figure
Clone a Git Repository 선택
figure
Git 정보 입력창

📌 Git 정보 입력

  • GitHub에 로그인 되어있는 상태에서 URL을 복사/붙여넣기하면 모든 내용이 자동으로 채워집니다.
  • URI는 연동을 원하는 GitHub Repository의 URL 끝에 .git을 입력한 것입니다.
  • Host는 github.com, Repository path는 /Kim-src/KimLibrary_STS3_raw.git을 입력하였습니다.
  • User는 GitHub의 이메일 주소를 작성해주시면 됩니다.
  • Password는 GitHub의 토큰 번호입니다. (2021년쯤의 GitHub 업데이트 사항)
  • 토큰 번호를 받는 GitHub의 위치는 이 링크를 클릭하시면 됩니다.
  • 이곳에서 classic token을 생성하실 때 모든 체크 박스를 클릭하신 후 Generate하시면 됩니다.
  • Git 정보 입력 완료 후 Next를 클릭하시면 됩니다.
figure
연동을 희망하는 GitHub Repository
figure
Git 정보 입력 완료

📌 README.md 파일 추가

  • 이제 STS3와의 연동을 희망하는 branch를 선택할 차례입니다.
  • 그런데 이미지와 같이 선택할 수 있는 branch가 아무것도 없을 수 있습니다.
  • 이유는 Repository가 사용된 적이 전혀 없기 때문입니다.
  • Main Branch 생성을 위해서는 README.md 파일이라도 추가해주셔야 됩니다.
  • Repository의 중앙 부분에 있는 README.md 파일을 클릭하시고 Commit 하시면 파일이 추가됩니다.
figure
비어있는 branch 선택창
figure
README.md 파일 생성 버튼

📌 Branch 선택

  • README.md를 정상적으로 생성하셨다면 main branch가 생성된 것을 확인할 수 있습니다.
  • STS3로 돌아가서 Git 정보 입력창을 종료하고 Git 정보를 다시 입력하겠습니다.
  • 이제 main branch를 선택하실 수 있을 것입니다. Next 클릭하겠습니다.
figure
GitHub Repository의 main branch
figure
변경된 branch 선택창

📌 로컬 저장소 선택 & Git 연동 성공

  • 원격 저장소 및 로컬 저장소 연동을 위한 마지막 단계입니다.
  • Git Repository의 내용을 저장할 컴퓨터의 폴더를 선택(browse)하는 것입니다.
  • 필자의 경우 프로젝트를 일괄적으로 관리하는 폴더(directory)를 선택하였습니다.
  • 폴더 선택 후 Finish를 클릭하면 로컬/원격 저장소끼리의 연동이 완료된 것입니다.
  • 선택한 컴퓨터 폴더를 확인해보면 README.md 등을 확인하실 수 있습니다.
  • 참고로 Finish 클릭 후 비밀번호 힌트 관련 안내 문구는 No를 클릭하셔도 괜찮습니다.
figure
Local Repository 선택
figure
GitHub Repository 연동 성공


🔔 2. Methodology

🎯 2-2. 원격 저장소에 로컬 저장소 데이터 보내기(push)

📌 Spring & Share Project

  • STS3의 우측 상단에 있는 Spring 버튼을 클릭합니다.
  • STS3의 패널 구성이 Spring 개발 형식으로 변경됩니다.
  • GitHub로의 업로드를 희망하는 Spring Project를 선택합니다.
  • 선택한 Project를 우클릭하고 Team의 Share Project를 클릭합니다.
figure
패널 구성 변경
figure
Share Project 선택

📌 Local Repository 연결

  • 빈칸의 화살표를 클릭해서 Git과 연동된 Local Repository를 선택하고 Finish를 클릭합니다.
  • 아래 이미지를 참고하시면 STS3의 패널 구성 등이 변경된 것을 확인하실 수 있습니다.
figure
Local Repository 선택
figure
변경된 STS3의 패널 구성

📌 Indexing

  • 이제 GitHub Repository에 Spring Project를 업로드할 준비가 거의 완료되었습니다.
  • 업로드 할 Project를 다시 우클릭하고 Add to Index를 클릭합니다.
  • Add to Index 기능은 git add의 역할을 합니다.
  • 변경된 내용을 Git의 스테이징 영역(인덱스)에 임시로 저장하는 것입니다.
  • 스테이징 영역에 대한 자세한 설명은 아래 Commit 문단의 다음 문단에 작성하였습니다.
figure
Git의 스테이징 영역에 변경사항 추가

📌 Commit

  • 업로드 할 Project를 다시 우클릭하고 이번에는 Commit을 클릭합니다.
  • Commit과 Indexing의 차이는 변경사항에 대한 로컬 저장소의 기록 여부입니다.
  • Commit을 실행하면 Indexing으로 스테이징 영역에 있던 변경 현황이 히스토리에 기록됩니다.
  • 따라서 Commit 후에는 당시 파일의 변경 내용, 커밋 메시지, 날짜 및 시간 등이 보존됩니다.
  • Commit의 강력한 장점은 Commit 시점으로 모든 파일 내용을 변경시킬 수 있다는 것입니다.
  • 이는 전 세계 개발자들이 Git으로 버전 관리를 하는 이유이며 아래 링크는 이와 관련된 글입니다.
  • Git을 이용한 웹, 앱, 애플리케이션 버전 관리 방법
figure
스테이징 영역의 변경사항을 로컬 저장소에 반영(기록)

📌 Staging Area

  • 스테이징 영역은 Commit 전 변경사항이 임시로 저장되는 공간입니다.
  • Commit 전 준비 단계이지만 아직 로컬 저장소에 변경이 반영(기록)된 것은 아닙니다.
  • Git 명령어로 스테이징 영역과 관련된 내용을 설명드리겠습니다.
    1. git add . : 파일의 모든( . ) 변경사항을 Git 스테이징 영역에 임시저장
    2. git status : 스테이징 영역에 임시저장 된 변경사항 출력
    3. git reset : 스테이징 영역에 임시저장 된 모든 변경사항 삭제
    4. git commit : 스테이징 영역에 임시저장 된 변경사항을 로컬 저장소에 반영구적 기록

📌 Commit Message

  • 한편, 현재 Project 우클릭 후 Commit을 클릭한 상태일 것입니다.
  • 이제 STS3 우측 하단의 Unstaged Changes에서 Project 파일이 있는 것을 확인하실 수 있습니다.
  • 새로고침 버튼을 클릭하면 파일의 변경사항(Changes)이 Staging 된 것을 확인하실 수 있습니다.
  • 이제 Commit Message를 입력 후에 Commit & Push를 클릭하시면 됩니다.
  • Commit Message에는 변경사항에 대한 내용을 작성하시면 되며 패널 크기는 조절할 수 있습니다.
  • 필자의 경우 “2024-03-01 17:58 Created KimLibrary_STS3_raw”를 입력하였습니다.
  • Commit 일자/시간 및 변경사항(파일 업데이트)에 대해 작성한 것입니다.
figure
Unstaged Changes
figure
Staged Changes

📌 Commit & Push

  • Push는 로컬 저장소에 기록된 파일 변경사항을 원격 저장소에 기록하는 것입니다.
  • Commit Message를 작성하였다면 하단의 Commit and Push를 클릭하시면 됩니다.
  • 이후의 상황은 개별 사용자의 개발 환경마다 일부 다를 수 있습니다.
  • 필자의 경우 Commit and Push → 로그인 → Configure → Save and Push 순으로 진행됐습니다.
  • Save and Push 클릭 후 GitHub Repository 페이지를 새로고침 하시면 됩니다.
  • Repository에 Project에 대한 raw 폴더가 추가되었으면 성공적으로 업로드 된 것입니다.
  • 참고로 필자는 Save and Push 클릭 후에 별도의 안내문이 호출되지 않았어서 당황했었습니다.
figure
Commit and Push
figure
Configure
figure
Save and Push
figure
Repository에 추가된 Project의 raw 폴더


🔔 3. Postscript

📌 STS3에 본인 및 타인의 깃허브 프로젝트 파일 가져오기

  • 다음 글에서는 본인 및 타인 깃허브 계정에 있는 프로젝트 파일을 가져와보겠습니다.
  • 깃허브 활용 능력을 더 높일 수 있는 좋은 기회일 것 같습니다.
  • 가져오는 것은 git pull 기능이 대표적입니다.
  • 그런데 방법은 IDE마다 상이하며 STS3는 업로드 방식과 비슷하게 버튼을 클릭하여 import 합니다.
  • 아래 링크는 다음 글 링크입니다.
  • STS3에 본인 및 타인의 깃허브 계정 프로젝트 파일 가져오기




1. Fundamental, Spring
GitHub IDE Integration Upload Git STS STS3 STS4 Eclipse Spring
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.
<>