[12/27] TIL - 팀 프로젝트 최종 마무리와 Git merge, HTML 연동 방법 학습

😊오늘 배운 내용

팀 프로젝트 - 최종마무리

 

[어떤 문제가 있었는지]

1. index.html 파일 이름을 생각하다가 왜 꼭 index.html파일이어야 하는지 궁금해졌다. 그리고 배포시에 팀 소개 메인페이지 이름이 index.html인데 내 개인 페이지 이름도 index.html이면 빌드에 문제가 없을까? 라는 궁금증도 생겼다.

 

2. 개인 페이지에서 다른 팀원들 페이지와 메인 페이지로 연동해야하는 업무가 있었다. 따라서 개인 페이지에서 메인 페이지의 index.html로 어떻게 연동해야 하는지 모르겠어서 찾아보았다.

 

3. 깃허브 관리를 위해서 develop 브랜치와 main 브랜치를 나누었었다. develop에서 작업을 다 한 후 이제 main 브랜치에 작업을 올려야하는데 어떻게 해야할지 잘 몰랐다. main 브랜치로 바꾼 다음에 main에서 develop에 올려진 작업물을 pull 해와야 하는건지, 아니면 main 브랜치에서 develop 브랜치를 merge해야하는 건지 헷갈렸다.

 

 

[해결 과정]

1. index.html 관련해서 자료를 찾아보았다. 

https://ko.eyewated.com/%EC%9B%B9-%EC%82%AC%EC%9D%B4%ED%8A%B8%EC%9D%98-index-html-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%9D%B4%ED%95%B4/

 

즉 index.html은 웹사이트 로딩 시에 가장 기본으로 즉 인덱스로 띄우는 화면이라 생각하면 될 것 같다.

쉽게 말하면 별도의 url 요청이 없더라도 사용자에게 보여지는 화면이다. 그래서 디렉토리 별로 기본 페이지를 제공해야하는데 그게 바로 index.html이다. 위 블로그를 참고하자면 " 웹 사이트에 디렉토리가있을 때마다 해당하는 index.html 페이지를 갖는 것이 가장 좋습니다. 이렇게하면 URL에 파일 이름을 입력하지 않아도 독자가 해당 디렉토리로 이동할 때 페이지 를 볼 수 있으므로 404페이지 찾을 수 없음 오류가 표시되지 않습니다"라고 한다. 나중에 웹 구성할때 참고하면 좋을 듯하다.

 

2. 다른 디렉토리의 index.html로 연동하기 위해서는 다음과 같이 한다.

<!-- main 디렉토리의 index.html -->
<a href="/other-directory/index.html">Go to Other Directory</a>

a태그를 이용하고 href속성으로 경로를 명시해준다. 이때 상대경로로 작성하고 해당 경로는 해당 위치부터 시작하기 때문에 정확히 명시해주기 위해서는 프로젝트의 루트나 해당 위치의 부모 디렉토리부터 시작하는게 좋다.

자바스크립트로 처리하는 방법도 있다.

<!-- main 디렉토리의 index.html -->
<button onclick="navigate()">Go to Other Directory</button>

<script>
  function navigate() {
    window.location.href = '/other-directory/index.html';
  }
</script>

onclick속성으로 자바스크립트 함수를 매칭해주고 해당 함수에서는 window.location.href를 이용해 해당 경로를 명시해준다.

또는 라우팅을 이용하는 방법도 있다.

app.get('/other-directory', (req, res) => {
  res.sendFile(__dirname + '/other-directory/index.html');
});

해당 경로로 요청이 들어올 시 제공할 해당 파일의 상대경로를 명시해준다.

 

3. develop 브랜치의 결과물을 main 브랜치에 적용하려면, 다음과 같이 해야한다.

main 브랜치로 전환

git checkout main

 

develop 브랜치에서 작업물을 가져오기

git pull origin develop

 

merge 중 충돌이 발생할 경우

# 충돌 파일 확인
git status

# 충돌 파일을 수정 후 스테이징
git add <파일명>

# 병합 완료 커밋
git commit -m "Resolve merge conflict"

 

확인 및 푸시

# 병합 결과 확인
git log --oneline

# main 브랜치로 푸시
git push origin main

 

앞서 내가 궁금했던 main 브랜치에서 develop 브랜치 내용을 pull 받아와서 푸시하는 경우는 추천하지 않는다. 왜냐하면, 

 

• 원격 저장소와의 혼동 가능성
  원격 저장소의 브랜치 관리 관점에서 main은 보통 배포 가능한 안정된 코드를 의미하고, develop은 개발 중인 코드입니다.
  main에서 develop을 pull하면 로컬에서 병합되지만, 원격의 main에는 반영되지 않아 혼동이 생길 수 있습니다.
• 병합 이력의 모호함
  일반적으로 브랜치를 병합할 때는 git merge 명령으로 명시적으로 병합 이력을 남기는 것이 좋습니다. 그러나 git pull을 사용하면 기본적으로 병합 커밋이 생성되는데, 어떤 브랜치를 병합했는지 명확하지 않을 수 있습니다.
• 충돌 관리가 복잡해질 수 있음
  main에서 직접 pull할 경우, 병합 충돌이 발생했을 때 merge와 비교해 작업 내역이 깔끔하지 않을 수 있습니다.

즉 이렇게 하면 병합기록이 명시적으로 남지 않아서 문제가 되는 것 같다. 따라서 main에 올릴때는 브랜치 병합기록이 남도록 merge해서 하는 것을 앞으로 사용해야한다.

 

 

[무엇을 새롭게 알았는지]

1. 오늘 sql 강의를 조금 듣는 중에 where 강의에서 <>를 새롭게 알게되었다. <>의 의미는 같지 않다로 

select * 
from customers
where gender <> 'male'

이 sql 구문은 customers 테이블에서 gender가 male이 아닌 데이터들을 불러오겠다는 뜻이다. 

 

2. between, in, like의 차이

between A and B

between은 A와 B 사이를 의미하고 A이상 B이하이다.

where A in ('','')

in은 땡땡과 같은 항목들만 가져오는 것이다. 만약 괄호 안에 (2,4) 인 경우라면 손님의 수가 2, 4인 데이터만 가져온다.

 

where A like 'B%'

like는 ~와 시작하는, ~를 포함하는, ~로 끝나는 데이터를 불러오는 기능이다. 

 

3. 페이지 연동 시 새탭에서 생성이 아닌 해당 탭에서 그대로 새로고침하도록 하는 방법

팀 프로젝트를 하다가 한 팀원 분이 메인페이지와 팀원개인페이지들을 연동하는 업무를 맡으셨다. 그 분 작업물은 메인페이지에서 개인페이지로 가는 버튼을 클릭하면 새탭이 생성되어서 개인페이지를 보는 방식이었다. 하지만 회의하면서 새탭 보다는 해당 탭에서 새로운 페이지로 넘어가는게 낫다고 판단되어서 다른 팀원 분이 업무를 도와주셨다. 그런데 나도 그렇게 하는 방법을 잘 모르겠어서 도와준 팀원분께 그거 어떻게 하는 것이냐 질문을 드렸다.

설명 들은 바로는,

<a href="https://www.google.com" target="_blank">구글로 이동</a>

 위와 같이 a태그에서 target 속성에 _blank와 같이 되어있으면 링크를 클릭했을 때 새로운 브라우저 탭에서 해당 링크를 열 수 있도록 하는 속성이다. 따라서 새로운 창에서 열리게 하고 싶지 않으면 target 속성을 지정해주지 않으면 된다!

 

요구사항에 따라 새로운 탭에서 열리게 할 수도 있지만, 링크를 새로운 탭에서 열리게 할 시 보안 문제점이 발생하기도 한다.

보안 관련 주의점

target="_blank" 속성을 사용할 때는 보안 문제가 발생할 수 있으므로 주의해야 합니다.

보안 위험: "탭 납치(Tabnapping)"

• 새로운 탭에서 열린 페이지는 JavaScript를 통해 **원래 탭(부모 창)**의 위치(URL)를 변경할 수 있습니다.
• 악의적인 사이트라면 피싱 페이지로 리디렉션할 가능성이 있습니다.

해결 방법

rel="noopener noreferrer" 속성을 함께 사용하면 이러한 위험을 방지할 수 있습니다.

<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">구글로 이동</a>

• noopener: 새로 열린 페이지에서 부모 페이지를 제어하지 못하도록 차단.
• noreferrer: 브라우저가 참조 정보를 새로 열린 페이지에 전달하지 않음.

 

[오늘 회고]

오늘은 강의보다는 팀프로젝트를 하며 배운 점들이 많았다. 협업 관련해서 깃허브 브랜치 병합도 새롭게 알게 되었고 내가 몰랐던 html 지식들도 알 수 있었던 계기였다. 오늘 마무리로 최종 시연영상을 편집하고 SQL 강의도 마무리하고 다음주부터는 드디어 자바를 배우기 시작한다. 학교에서 배운 적은 있지만 객체지향 개념과 쓰레드를 시작하면서 부터는 손에서 놓았던것 같다.. ㅎㅎ 부끄럽지만 이번 기회에 정말 제대로 배워서 기본기를 튼튼하게 다져야겠다. 질문할 때 창피해하지말고 꼭 모르겠는 부분들은 튜터님께 물어봐야겠다. 다음주에는 1일 1질문 이상은 꼭 하기!!