협업으로 팀 소개 페이지 만들기

git clone <repository-url>

cmd창에 조장의 깃허브 repository 주소를 입력하여 내 intellij로 클론 받기

git checkout -b feature/hoon

feature폴더 안에 hoon이라는 이름으로 브랜치 생성하고 전환

cp members/member4.json members/hoon4.json

memmbers 폴더 안의 member4.json파일을 hoon4.json으로 이름바꿔서 복제

hoon.json 내용수정

추가한 파일명 members.json에 추가

git add members/members.json
git add members/hoon3948.json

수정한 파일 add

git commit -m "Add:팀원 정보 추가"

add한 파일 커밋

git push -u origin feature/hoon

push해서 깃허브로 보내기

pr올리기

approved, 리뷰 주고받기

merge

도전과제 시나리오2

시나리오 2: JavaScript 함수 수정 충돌

• 개발자 A: loadTeamMembers() 함수에 에러 핸들링 개선
• 개발자 B: 같은 함수에 로딩 애니메이션 추가
• 충돌 발생 전

async function loadTeamMembers() {
    const container = document.getElementById('team-container');
    container.innerHTML = '<div class="loading">팀원 정보를 불러오는 중...</div>';
    try {
        const membersListResponse = await fetch('members/members.json');
        // ... 나머지 코드
    } catch (error) {
        console.error('Error loading team members:', error);
    }
}

• 개발자 A의 변경사항

async function loadTeamMembers() {
    const container = document.getElementById('team-container');
    container.innerHTML = '<div class="loading">팀원 정보를 불러오는 중...</div>';
    try {
        const membersListResponse = await fetch('members/members.json');
        // ... 나머지 코드
    } catch (error) {
        console.error('Error loading team members:', error);
        container.innerHTML = '<div class="error">팀원 정보를 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해주세요.</div>';
        // 에러 재시도 로직 추가
        setTimeout(() => loadTeamMembers(), 3000);
    }
}

• 개발자 B의 변경사항

async function loadTeamMembers() {
    const container = document.getElementById('team-container');
    // 로딩 애니메이션 추가
    container.innerHTML = '<div class="loading"><div class="spinner"></div>팀원 정보를 불러오는 중...</div>';
    try {
        const membersListResponse = await fetch('members/members.json');
        // ... 나머지 코드
    } catch (error) {
        console.error('Error loading team members:', error);
    }
}

• 충돌 발생 시

async function loadTeamMembers() {
    const container = document.getElementById('team-container');
<<<<<<< HEAD
    container.innerHTML = '<div class="loading">팀원 정보를 불러오는 중...</div>';=======    // 로딩 애니메이션 추가
    container.innerHTML = '<div class="loading"><div class="spinner"></div>팀원 정보를 불러오는 중...</div>';
>>>>>> feature/loading-animation
    try {
        const membersListResponse = await fetch('members/members.json');
        // ... 나머지 코드
    } catch (error) {
        console.error('Error loading team members:', error);
<<<<<<< HEAD
        container.innerHTML = '<div class="error">팀원 정보를 불러오는 중 오류가 발생했습니다. 잠시 후 다시 시도해주세요.</div>';
        setTimeout(() => loadTeamMembers(), 3000);
=======
>>>>>> feature/loading-animation
    }
}