오늘의 공부

1. Git / GitHub 를 이용한 협업 강의

Git 이란 협업 간 버전을 관리하기 위한 “도구” 이다.
GitHub 는 Git을 이용해 코드들을 저장해주는 “장소” 이다.

GitHub를 사용할 때 중요한 개념이 3가지 정도 있다.

  1. Clone / Fetch

    저장 공간인 ‘Repository’를 생성하면 이 공간은 GitHub라는 서버에 저장되어 있기에,
    이를 내 컴퓨터 속에 옮기는 작업이 바로 Clone(복제) 이다. 복제된 Clone을 수정하다
    원본(Github에 있는)을 다시 받아오는 역할이 Fetch(가져오다) 이다.

  2. Branch

    팀원 모두의 코드를 한번에 충돌없이 넣는건 불가능하지 않을까..? 라는 생각에서 나온 기능인 것 같다.Branch(분기)는 작업하는 공간을 간섭이 없게 분리해주는 기능으로, 이를 이용하면
    Main 분기를 실시간 실행하면서도 개발을 진행할 수 있고, 충돌오류들을 확인해가며 수정할 수 있다.
    (또한 프로젝트를 기능적으로 분리하여 개발을 동시에 진행할 수 있다!)

  3. Merge

    Branch(분기) 가 있다면 당연히 Merge(병합)이 있어야 하지 않겠는가!
    Pull request 라는 기능을 통해 분기점들을 비교해가며 충돌을 확인해 서로 간 동의를 받고 Branch를 Merge 할 수 있다.

이러한 기능들을 통해 분업하여 프로젝트 진행을 돕는게 Git과 GitHub 이다!

2. 프로젝트 여러 HTML 파일 통합하기

GitHub 를 이용하여 팀업을 하기 위해 새로운 Repository를 만들었다!
처음이라 멤버를 어떻게 초대하는지 버벅였지만 다행히 금방 해결되었다.
(아래 사진은 간략한 방법) 멤버추가

이후 만든 Repository(저장공간)에 대표적 파일 index.html을 만들어 두고,
분업화를 위해 _include폴더를 만들어 각자의 나눈 역할에 맞게 파일을 만들었다.

아래는 파일 통합을 위해 찾아본 식 / 개념을 조금 적어두었다.

//async는 함수 앞에 붙여 함수가 비동기(완료 전에 다른 작업 해도되요~) 함수임을 알려준다.
async function(x){};
/*await은 비동기 작업인 ??이 완료된 다음 실행을 해준다는 의미로 뒤에 .then 을 사용해 좀 더 복잡한 작업을 할 수도 있다.*/
await ?? .then((result) =>{ });

//HTML을 API에서 fetch해서 HTML로 재가공 해주는 식을 찾아봤을 때 알게된 식
//DOMParser()는 DOM 객체를 생성하며 parseFromString은 text를 html로 바꿔주는 역할이다.
let html_dom = new DOMParser().parseFromString(html.text(),'text/html');

학습 과정 중 특이사항 / 삽질

1. 프로젝트 HTML 통합 시도

분업화된 HTML 파일들을 합치기 위한 노력들이 아래에 담겨있다

첫 시도로 index.html에 html들을 통합을 하기 위해 JQuery를 이용한 Load()함수를 쓰려고 해보았다.

<<!DOCTYPE html>
<html lang="ko">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>

  <script type="module">
    $(document).ready(function() {
        $(#header).load("./_include/header.html");
        $(#guestbook).load("./_include/guestbook.html");
        $(#membercard).load("./_include/membercard.html");
        $(#cardmodal).load("./_include/cardmodal.html");
        $(#addcard).load("./_include/addcard.html");
    })
  </script>
</head>

<body>
  <header id="header"></header>
  <div id="addcard"></div>
  <div id="membercard"></div>
  <div id="cardmodal"></div>
  <div id="guestbook"></div>
</body>
</html>

로컬로 실행을 해보았으나.. 어라라..?
CORS 에러(받아오려는 곳과의 출처가 다르다!)를 만나게 되었다..
찾아보니 로컬실행의 경우 Origin(출처가) : Null(없음) 이 되버려 비교 실패가 뜬다고 한다.
다행히 로컬에서의 우회 방법을 찾아본 결과 Chrome 바로가기의 속성 대상 뒤에

”– disable-web-security”

를 적어주고 관리자 권한으로 실행하면 된다고 한다!
(다음엔 경로오류로 “./”가 상대경로 라는 사실을 알게되었다..)

그렇게 파일들이 통합된 로컬 실행 결과를 봤기에.. 문제 없겠지?

라고 생각했던 때가 있엇죠..
GitHub의 GitHub Page를 이용해 index.html을 실행해보니 문제가 발견됬다..

load() 함수의 “./_include/” 가 디렉토리를 타고 들어가는 방법인데, GitHub Page가 되면서 디렉토리를 반환하지 않게되었다!

(원했던 값 : “https://github.com/bbie-6772/MemberIntroduce/…/_include/.html” )
(결괏 값 : “https://bbie-6772.github.io/MemberIntroduce/_include/.html” <= 사이트 주소.. 물론 404 error)

그렇게 문제를 해결하기 위해 GitHub REST API를 fetch()함수로 사용해 디렉토리 값을 이용해보려 했으나..
아무리 값을 .text() => DOMParser().parseFromString(x, ‘text/html’) 등등으로 변환을 시도해도 답이 없었다.

화면에 나오는 값은 오로지 [Object HTMLDocument]

그렇게 포기하려던 찰나.. 이 블로그와 똑같이 Jekyll 로 빌드가 되면 include를 쓸 수 있지 않을까?!
해서 바로 index.html에 사용 해봤지만 어림도 없었다..

왜 어림도 없엇는가..? => 3시간뒤에 알게되었습니다.

index.html 파일을 Jekyll 빌드에 인식시키기 위해 맨 위에 작대기”—” 를 2줄 써줘야 됬단 사실..

그렇게 무사히 수정을 마친 후 팀원분들께 설명하여 프로젝트 Develop Branch 에 적용을 마쳤다