2024-10-29

내일배움캠프 Node.js 트랙 2일차

1. ZEP에서 이루어진 팀단위 프로젝트

(1) 프로젝트 기획 및 준비

팀 소개 프로젝트! <프로젝트 명 : Monster A.K.A.ive>의 조장을 맡아 웹사이트를 이틀간 제작하고 있다.
지난 시간에 만들어낸 결과물을 한번 되짚고 가겠다.

 

 

먼저 포켓몬 도감이라는 컨셉으로 프레임을 구상하였다.

 

 

부트스트랩을 통해 헤더와 사이드바를 구현하였고, 위와 같이 구역을 나누어서 콘텐츠들의 정렬하는 것까지 끝마쳤다. 이제는 본격적으로 메인 화면에 내용물을 채워 넣고 각종 메서드와 스크립트 요소를 적용해서 기능을 추가해보도록 하겠다.

(2) 프로젝트 진행 과정

협업을 진행하기에 앞서 조호영 튜터님의 특강을 듣게 되었다.

git/github 특강

> > 특강 요약

1. clone으로 dev branch를 내려받고 feature branch를 만들어서 분업을 한다.
2. 작성을 완료한 코드를 푸쉬하고 싶을 땐 pull request를 통해 수락 과정을 거친다.
3. 기존 코드에 merge로 합치고 완성된 걸 dev/main branch에 푸쉬한다.
4. branch끼리 작업을 합치지는 말자.

혼자서 git을 쓸 때 자주 사용하게 될 명령어

git init // 초기화(git 폴더 생성)
git add . // 모든 파일을 커밋에 포함
git git commit -m "first commit" // 커밋
git push origin main // 푸쉬(Github repository에 업로드)

함께 협업할 때 자주 사용하게 될 명령어

git clone // repository의 복사본을 local에 생성
git pull // 최신 변경사항을 현재 작업중인 브랜치에 병합, git fetch와 git merge를 순차적으로 실행
git branch {브랜치명} // 브랜치 생성
git switch {브랜치명} // 특정 브랜치로 이동
git merge {브랜치명} // 현재 브랜치와 특정 브랜치를 병합

git fetch와 git pull의 차이점

둘 다 원격 저장소의 커밋을 로컬 저장소로 가지고 오는데, git pull은 자동으로 병합(merge)을 해준다.
git fetch는 임시 브랜치를 생성해서 그곳으로 가지고 온다.

---

특강에서 배운 내용을 바탕으로 팀 프로젝트용 깃헙 레포지토리를 생성하였고 팀원들을 초대하여 서로 코드를 공유하기 시작했다.

 

 

맨 처음 뼈대만 구현해둔 main 브랜치의 코드를 바탕으로 dev 브랜치의 코드를 작성하였다.

 

 

각각의 몬스터 볼을 클릭하여 팀원의 소개 페이지가 로드or팝업될 수 있게끔 구현해 보았다.
아래 이미지는 첫 번째 몬스터볼을 클릭하였을 때 JQuery를 이용하여 별도의 html 파일을 디렉토리로부터 로드한 모습이다.

 

 

 

// 몬스터볼을 누르면 오박사님을 새로운 html 파일로 대체하기

$(".memberImage1").click(async function () {
    $(".drOh").load('memberIntro1.html');
});

 

다만 팀원들이 만든 html 파일을 로드했을 때 서로의 css 설정이 달라 해당 부분을 정리하는 데 고민을 해봐야할 것 같다.

 

(3) 팀원들과 피드백 공유하기

HTML, CSS, JS 파일을 분리하고 연결 작업을 수행했다. CSS 파일은 무난히 연결할 수 있었는데, 이상하게도 JS파일은 잘 연결되지 않았다. 그래서 튜터님께 도움을 요청했다가 방법을 찾기 위해 구글링을 하다가 "JS파일 Import"라는 키워드를 힌트로 얻을 수 있었다. 구글링을 통해 알게 된 것은 JS파일의 삽입 위치가 중요하다는 점이었다.

 

[JS] Script삽입 위치(head, body, async, defer 비교)

[JS] Script삽입 위치(head, body, async, defer 비교)

 

    <!-- J쿼리 import -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 부트스트랩의 스크립트 import -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
    <!-- 내가 만든 JS파일 import -->
    <script type="module" src="script.js"></script>
</body>
</html>

 

 

내일은 팀원들이 작성한 JS와 CSS 코드들을 어떻게 통합할지 고민해봐야겠다.