[TIL #12] 231025_DOM 제어, Git branch 생성

오늘 한 일

• [Project.02/Team] 영화 검색 사이트 디벨롭
  • Github 팀 리포지토리 생성
  • 역할 분담
  • 상세페이지 기능 개발
• [내배캠] Javascript 문법 5주차
  • DOM 접근 및 제어, Class의 개념
• [보충수업] Javascript 문법 보충반 실시간 수업
  
  

배운 것

1. DOM

DOM이란?
Document(HTML 파일)를 Javascript가 알아 들을 수 있는 Object 형태로 Modeling 한 것으로, 브라우저에 기본적으로 내정되어 있는 API

DOM에 접근 및 제어하기

• DOM이 브라우저에 내장되어 있기 때문에
  우리는 HTML의 내용을 javascript로 접근하고 제어할 수 있다.

• DOM은 node를 갖는다.
  DOM 요소 하나 하나를 노드라고 하며 속성과 메서드를 갖고 있다.

속성 : 값을 가짐, 해당 객체의 특성을 나타내는 값을 가져오거나 설정
메서드 : 동작을 수행, 해당 객체가 수행하는 작업을 나타내는 함수

document.getElementById("demo").innerHTML = "Hello World!";

getElementById("demo") : 메서드
innerHTML : 속성

(1) DOM에 접근

DOM은 모두 노드로 이루어져 있으며 부모노드-자식노드 관계로 이루어져 있다.
getElemenById, querySelector 등으로 childNodes, parentNode에 접근

• 메서드

document.getElementById("id명");  // 해당 id명을 가진 요소 하나 반환
document.querySelector("선택자");  // 해당 선택자 가진 요소 하나 반환
document.getElementsByTagName("태그명");  // 해당 태그명을 가진 요소들을 배열로 반환
document.querySelectorAll("선택자명");  // 해당 선택자를 가진 요소들을 배열로 반환

(2) DOM을 제어

• Javascript로 div 요소 생성

const newDiv = document.createElement('div');
document.body.append(newDiv);

• 요소의 속성 변경

element.innerHTML = new html content
element.innerText = new text

// style 변경
element.style.property = new style
element.style.backgroundColor = "red";

element.setAttribute(속성명, 속성값)
element.setAttribute("style", "background-color:red;");

ex) ul 태그의 자식인 li 태그 중 두번째 요소의 텍스트 변경

document.querySelector('ul').children[1].innerText = "변경한 두 번째 메뉴"

2. Class

클래스 : 객체를 만들기 위한 설계도. 변수 또는 속성, 메서드
인스턴스 : 설계도를 기반으로 만들어진 실체

(1) Class의 기본 개념

Class를 만들기 위한 필수 요소를 생성자 함수 constructor로 넣어줘야 함

1. 클래스 생성

class Person {
  constructor(name, age) {
    // new라는 키워드를 이용해서 인스턴스를 만들 때, 기본적으로 넣어야 하는 값들
    // 여기서 말하는 this는 만들어질 인스턴스를 의미
    this.name = name;
    this.age = age;
  }
}

2. 인스턴스 생성

const person1 = new Person("홍길동", "30");
const person2 = new Person("홍길순", "25");

• 클래스에는 name, age와 같은 명사 뿐만 아니라 동사 형태도 메서드로 생성 가능

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

// 메서드로 정의
  sayHello() {
    console.log(`${this.name}님 안녕하세요!`);
  }
}

const person1 = new Person("홍길동", "30");
const person2 = new Person("홍길순", "25");

person1.sayHello(); // 홍길동님 안녕하세요!

3. Git branch 생성하여 협업하기

팀원 Github 프로세스

1. 프로젝트 가져오기

git clone 깃허브 주소 깃허브의 프로젝트를 내 로컬로 가져오기
해당 주소는 Github의 repository로 가서 code 버튼을 누르면 주소가 나온다.

원하는 폴더 위치에서 마우스 우클릭하여 'Open git Bash here'을 클릭하면 해당 위치에 Github의 팀 리포지토리 폴더가 만들어진다. 이 폴더를 VSCode로 열어서 코드를 추가, 수정하여 Github에 다시 push하면 다른 팀원들과 코드를 공유할 수 있다.


2. VSCode에서 브랜치 만들기

💡 브랜치 생성 및 Github 업데이트 명령어
git branch 현재 브랜치 확인
git branch <브랜치명> 브랜치 만들기
git checkout <브랜치명> 해당 브랜치로 이동
git checkout -b <브랜치명> 브랜치 생성과 이동을 한번에!

브랜치를 생성하여 해당 브랜치로 이동 후, 해당 브랜치에서 팀에서 내가 맡은 부분의 코드를 작성한다. 브랜치는 가장 상위인 main이 있고, 하위에 develop, 그 하위에 개인별로 브랜치를 생성하여 코드를 작성한다. 개별 브랜치에서 코드 작성 후 완성된 코드는 develop 브랜치로 merge시킨다.(compare & pull request) 팀원들이 작성한 코드가 develop 브랜치로 모이게 되는 것이다.

💡 동시 수정 충돌 오류를 방지하기 위해서!
git stash 내가 작성한 코드 임시저장
git pull origin develop develop 브랜치의 최신 버전으로 업데이트하기
git stash pop 임시저장 불러오기

💡 코드가 모두 작성된 뒤 프로세스
git add ., git commit, git push origin 내브런치명 후
깃허브로 가서 Pull Reuests 하기! -> 팀원이 승인하면 develop 브랜치로 merge할 수 있다.

오늘의 회고

1. 팀 프로젝트를 본격적으로 시작했다. 어제 Github 테스트를 통해 연습하고, Git 특강을 들었더니 어느 정도는 Github 사용법에 대해 익숙해졌다. 열정적인 팀원 덕분에 Github에 있는 다양한 기능들을 모두 활용하여 팀프로젝트를 진행하기로 했다. Issues와 Projects, 그리고 Wiki에도 팀원들이 도움될 만한 정보들을 모두 정리해서 올려주었다. 좋은 팀원들을 만나 감사하다. 모두 열정적임...

2. 오늘 Javascript 문법 보충 줌 강의를 들었다. 튜터님께서 정말 초심자의 눈높이에 맞춰 너무 쉽게 설명해주셔서 오늘 배운 내용들은 머리에 각인이 뙇 되었다. 모든 문법을 이런 식으로 설명들을 수 있다면 너무 좋겠지만... 보충강의 두 번째 수업도 있으니 열심히 들어야겠다. 아주 유익한 시간이었다.

3. 팀 프로젝트에서 내가 맡은 부분은 상세페이지 기능 개발이었다. 영화 카드를 클릭하면 상세페이지로 이동하고, 상세페이지에 클릭한 영화의 이미지와 타이틀, 평점, overview가 나타나게 하는 것까지 진행하기로 했다. 아직 뭐부터 시작해야할지 감이 안온다. 오늘은 좀 늦게까지 어떤 코드를 사용할지 생각 좀 해보고 틀을 만들어 놓고 자야겠다.
   
   

내일 할 일

• [Project.02/Team] 영화 검색 사이트 디벨롭
  • 상세페이지 기능 개발