JUSTCODE - Week1(fetch, PR/피어 리뷰 )

git

터미널 사용 방법
로컬 레포지토리 생성 후 리모트 레포지토리에 연결
브랜치 생성, 이동
git add, commit, push

---

유사배열 HTMLCollector/NodeList

getElementBy-()는 유사배열인 HTMLCollector를
querySelectorAll은 유사배열인 NodeList를 반환한다

HTMLCollector는 기능이 적은 대신 속도가 빠르다
NodeList는 기능이 많아 편리한 대신 속도가 느리다

유사배열을 배열로 옮길 때
const arr = Array.from(유사 배열)을 사용하면 편리하다

---

fetch/JSON

fetch함수는 HTTP 요청 전송 기능을 제공하는 클라이언트 사이드 Web API다
fetch함수는 HTTP 응답을 나타내는 Response 객체를 래핑한 Promise 객체를 반환한다
따라서 promise 후속 처리 메서드(then, catch, finally)를 사용할 수 있다

fetch 경로의 url과 method에 따라 서버의 응답 내용이 결정된다

fetch('경로', {서버로 전송할 data를 담은 객체}).then(response => {})

then은 매개 변수로 HTTP 응답을 나타내는 Response객체를 가진다
then은 return시 promise를 반환한다

body에 담을 객체는 JSON.stringify()를 통해 JSON문자열로 직렬화 한다

fetch('경로', {
	method: "메소드 정보",
    headers: {
    	'Content-Type': 'application/json', // ⚠️ CRA에서 최상위 경로는 public폴더이다
  		},
    body: JSON.stringify({
        key1: value1,
        key2: value2,
      }),
})
.then((res) => res.json()) // res.json()을 통해 응답 받은 데이터를 가공
.then((json) => {
	console.log(json); // json의 실제 데이터가 배열 형태로 콘솔에 출력
})

// ⚠️ header가 없으면 데이터가 넘어가지 않는다
// ⚠️ fetch의 경로가 틀렸을 때 나타나는 에러:
Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

mockData

프론트 개발에 사용할 임시 백엔트 통신 데이터

//mockData.json

//일반적인 형태의 json 구조
{
  "data": [
    {
      "key1": "value1",
      "key2": "value2"
    },
    {
      "id": "idValue",
      "name": "nameValue"
    }
  ]
}

---

PR/피어 리뷰

다른 사람과 협업을 할 때, 바로 메인 브렌치로 코드를 올리지 않는다
개인 브랜치에 코드를 올린 후 PR을 통해 동료의 승인을 받은 후
메인 브랜치로 병합하는 과정을 거쳐야 한다