DOM & git

< DOM >

DOM은 Document Object Model의 약자로, HTML 요소를 Object처럼 조작할 수 있는 Model입니다. JavaScript를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있습니다.

//DOM 구조를 조회할 때에는 console.dir 이 유용하다.
//console.dir 은 console.log 와 달리 DOM을 객체의 모습으로 출력

(CREATE)

document.createElement('div') : 새로운 div 생성
const tweetDiv = document.createElement('div')

(APPEND)

document.body.append(tweetDiv). : body태그에 연결

(READ)

const oneTweet = document.querySelector('.tweet') :
querySelector에 '.tweet' 을 첫 번째 인자로 넣으면, 클래스 이름이 tweet 인 HTML 엘리먼트 중 첫 번째 엘리먼트를 조회
const tweets = document.querySelectorAll('.tweet’) :
querySelectorAll로 클래스 이름이 tweet 인 모든 HTML 요소를 유사 배열로 받아온다

const getOneTweet = document.getElementById('container')
const queryOneTweet = document.querySelector('#container')
console.log(getOneTweet === queryOneTweet) // true // get은 옛날방식

(UPDATE)

const oneDiv = document.createElement('div');
console.log(oneDiv) //

. //div요소만들기

oneDiv.textContent = 'dev';
console.log(oneDiv) //

. //textContent를 이용해 문자열입력

oneDiv.classList.add('tweet')
console.log(oneDiv) //

//classList.add를 이용해 tweet클래스를 추가

const container = document.querySelector('#container')
container.append(oneDiv). // append를 이용해 container의 자식요소에 추가

(DELETE)

const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() // 이렇게 append 했던 요소를 삭제할 수 있다.

document.querySelector('#container').innerHTML = '';
// id가 container인 요소 아래의 모든 요소를 지웁니다.

const container = document.querySelector('#container');
while (container.firstChild) {
container.removeChild(container.firstChild);
}. //container의 첫 번째 자식 요소가 존재하면, 첫 번째 자식 요소를 제거합니다.

const container = document.querySelector('#container');
while (container.children.length > 1) {
container.removeChild(container.lastChild);
}. // container의 자식 요소가 1개만 남을 때까지, 마지막 자식 요소를 제거합니다.

const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
tweet.remove();
})
// or
for (let tweet of tweets){
tweet.remove()
}. // 클래스 이름이 tweet인 요소만 찾아서 제거합니다.
————————————————————-----------------------------------------

< input type="text" id="username"> 의 값을 가져오려면, 다음과 같이 접근합니다.
console.log(document.querySelector('#username').value);
값을 설정할 수도 있습니다.
document.querySelector('#username').value = '새로운 값';

*document.querySelector 는 , 생성하기 위한 메서드가 아니라 조회하는 메서드
//document.cloneNode 는, 생성하는 메서드가 아니라 복제하는 메서드
//document.importNode 는, template 을 활용하여 내용을 붙여 넣을 때 사용하는 메서드

Node.appendChild() 메소드는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙입니다
insertBefore() : 요소 삽입할 곳 앞에 추가
insertAfter () : 요소 삽입할 곳 뒤에 추가
prependTo() : 요소를 삽입할 곳의 자식요소 앞부분추가

console.dir(document.body)
document.body.children
document.body.children[1]
document.body.parentElement

---

< git >

• Git init : 해당 디렉토리에 git repository생성
• Git add : 코드를 작성하고 저장하는 공간, 작업 공간의 파일 및 디렉토리를 git의 관리 하에 있는 상태로 올려준다 // git add. : staging area에 파일들 한꺼번에 올린다
  (staging area: 온전히 저장하고 싶은 코드를 모아놓은 묶음)
• Git commit : local git repository에 내 코드를 기록
  staging area 코드의 용도를 적어두는 행위 (git commit -m "commit message"
• git reset --hard 지우고싶은파일다음파일 : 지우고 싶은 커밋 지우기
• Git status : 현재 git 레포지토리 상태확인

---

• Git log : 내 커밋로그를 확인하는 법 (푸쉬후)

• Git remote -v : 연결된 리모트레포의 목록과 주소확인

• Git branch : 현 브렌치확인

• Git pull <원격리모트저장소이름> < branch > : 상대방의 리모트에서 내 로컬로 옮기기

• git push < remoterepository > <branch(local)> 는 로컬 리포지토리에 기록한 내역을 원격 리포지토리로 옮기는 작업
  ( Git push < origin > < branch > )

• git remote add < name > < URL >
  (git remote add 는 로컬 리포지토리에 원격 리포지토리 주소를 등록하는 명령어
  < name >: 앞으로 로컬 리포지토리에서 원격 리포지토리 주소를 대신할 이름
  상대방의 remote에서 내 local로 옮길때도 가능 (origin))
  < URL >: 원격 리포지토리 주소
  (git remote -v 명령어로 원격 리포지토리가 잘 연결되었는지 확인)
  

• git clone name URL : 원격리포가져오기

• git branch : 생성된 브런치 확인

• git branch < ? > : 새로운 브런치 생성

• git checkout < ? > : 새로운 브런치로 바꾸기