HTML의 속성이나 DOM 프로퍼티를 활용해 이벤트를 등록하는 방법 외에 Element.addEventListener('type', 'handler')를 통해서 이벤트 핸들러를 등록할 수 있다. 이 방법이 이벤트 핸들러를 등록할 때 가장 권장되는 방법이다. 이렇게 하면 하나의 요소에 여러개의 독립적인 이벤트 핸들러를 등록할 수가 있다.
// 이벤트 등록하기
let btn = document.querySelector('#myBtn');
// btn.onclick = function () {
// console.log('Hi Code World!');
// };
// 이렇게 dom요소에 접근에 onclick 프로퍼티를 활용하는 방법 같은 이벤트 핸들러는 한가지 문제를 가지고 있다.
// innerHTML이나 className같은 프로퍼티를 활용할 때도 프로퍼티에 어떤 값을 할당하는 방식은
// 기존에 있던 값을 덮어쓰는 형태로 동작하기 때문에 기존에 값을 유지하면서 일부만 수정하기는 어려운 단점이 있었다.
// onclick 프로퍼티도 새로 쓰면 기존의 값을 덮어쓴다.
function event1() {
console.log('Hi Codeit!');
}
function event2() {
console.log('Hi again!');
}
//위에 코드를 실행시킨다면 Hi Codeit!은 나오지 않고 Hi again!만 출력된다.
//지금은 간단한 코드이지만 각 이벤트 별로 중요한 리턴 값이 있을 경우에 그 리턴 값도 다뤄야 하는 문제가 생긴다.
// elem.addEventListener(event, handler)
btn.addEventListener('click', event1);
btn.addEventListener('click', event2);
Element.addEventListener('event', 'handler')는 이벤트 타입을 문자열로 첫번째 파라미터에 입력하고, 두번째 파라미터에는 이벤트 핸들러를 전달하면 된다. 메소드를 여러번 호출하게 되도 하나의 요소에 여러개의 독립적인 이벤트 핸들러를 등록할 수 있다.
실행해보면 이벤트1과 이벤트2가 동시에 실행되는것을 확인 할 수 있다.
2. 이벤트 핸들러 삭제하기
addEventListener 메소드를 활용해서 이벤트 핸들러를 등록했다면, Element.removeEventListner('type', 'handler')를 통해서 이벤트 핸들러를 삭제할 수 있다. 등록할 때와 똑같이 파라미터를 전달하면 해당되는 이벤트 핸들러가 삭제되는 방식이다.
단, 이벤트를 삭제할 땐 반드시 이벤트를 등록할 때 외부에 함수를 만들어서 해당 함수의 이름으로 핸들러를 전달해줘야 한다.
// elem.removeEventListener(event, handler)
btn.removeEventListener('click', event2);
btn.addEventListener('click', function() {
console.log('event3!');
});
btn.removeEventListener('click', function() {
console.log('event3!');
});
//이렇게는 생성도, 삭제도 되지 않는다.
function event3() {
console.log('Hi event3!');
};
//이렇게 변수에 담아서
btn.addEventListener('click', event3);
//사용을 해주어야 한다
btn.removeEventListener('click', event3);
3. 이벤트 객체 (Event Object)
웹페이지에서 이벤트가 발생하면 관련된 정보를 담은 이벤트 객체가 만들어지고 이벤트 핸들러의 첫번째 파라미터로 전달된다. 이벤트 객체는 이벤트 종류마다 가지고 있는 프로퍼티가 다르고, 이벤트에 대한 유용한 정보들을 프로퍼티로 가지고 있다.
// 이벤트 객체 (Event Object)
const myInput = document.querySelector('#myInput');
const myBtn = document.querySelector('#myBtn');
function printEvent(event) { //(event) 이벤트 핸들러의 첫번째 파라미터
console.log(event);
event.target.style.color = 'red';
}
myInput.addEventListener('keydown', printEvent);
myBtn.addEventListener('click', printEvent);
키보드를 누를땐 키보드 이벤트가, 클릭할 땐 클릭이벤트가 출력된다.type은 이벤트 타입이, target은 이벤트가 발생한 요소를 담고 있다.
특히나 target은 DOM 요소가 담겨 있기 때문에 event.target.style.color = 'red'; 이런식으로 이벤트가 발생했을 때 해당 요소를 수정한다거나 혹은 그 요소가 가지고 있는 속성 값들을 참조해야 되는 상황에서 유용하게 활용된다.
프로퍼티
설명
type
이벤트 이름 (click, mouseup, keydown 등)
target
이벤트가 발생한 요소
currentTarget
이벤트 핸들러가 등록된 요소
timeStamp
이벤트 발생 시각(페이지가 로드된 이후부터 경과한 밀리초)
bubbles
버블링 단계인지를 판단하는 값
4. 이벤트 버블링 (Event Bubbling)
이벤트는 전파가 된다. 어떤 요소에서 이벤트가 발생하면 해당 요소에 등록된 이벤트 핸들러가 동작하는 것뿐만 아니라 (같은 타입의 이벤트에 한해서) 부모 요소로 이벤트가 계속해서 전파되면서 각 요소에도 등록된 이벤트 핸들러가 있다면 차례로 이벤트 핸들러가 동작한다.(최상단의 윈도우 객체를 만날때까지 반복) 자식 요소에서 부모 요소로 이벤트가 전파되는 것을 이벤트 버블링(Event Bubbling)이라고 한다.
이벤트 버블링이 일어나도 이벤트 객체의 target 프로퍼티는 변하지 않고 처음 이벤트가 발생한 시작점을 담고 있다.
참고로 이벤트 버블링은 이벤트 객체의 stopPropagation 메소드로 전파를 막을 수 있다.
for (let item of items) {
item.addEventListener('click', function(e) {
console.log('item Event');
console.log(e.currentTarget);
e.stopPropagation();
});
};
//이 코드를 쭉 살펴보자면 items에 있는 item을 파라미터로 담고, 반복문을 실행한다.
//item에 클릭했을 때 이벤트 리스너 프로퍼티를 부여한다. 어떤 함수가 실행될거냐면
//console.log에 item Event라고 나오고, console.log에 이벤트 핸들러가 등록된 요소를 출력해주고
//버블링을 멈춰줘
위 코드를 위에서부터 해석해보자면,
for of 문으로 반복문을 실행할건데 items 함수에 담긴 item, 각 li 요소를 말한다. item이 클릭되는 이벤트가 발생하면 함수를 실행해주세요, 어떤 함수? console에 'item Event'라는 문자열 출력해주시고, console에 e.currentTarget 이벤트 리스너가 연결된 (핸들러가 등록된) 요소(즉, 클릭된 li 요소)를 출력해주세요. 그리고 나서 이벤트가 부모요소로 전파되는 버블링을 멈춰주세요.
메소드 하나로 간단하게 버블링을 막을 수는 있지만 정말 필요한 경우가 아니라면 가급적 버블링을 막는 일은 피하는것이 좋다. 지금처럼 아이템 영역에서 이벤트 버블링을 막아버리면 바로 위에 있는 리스트 뿐만 아니라 모드 부모요소 입장에서 아이템 영역만큼의 이벤트를 발생시킬 범위가 사라져버리게 된다.
예를들자면 페이지 전체에 어떤 이벤트를 만들고 싶을 경우 document나 body 같은 문서 전체를 다룰 수 있는 상위 요소의이벤트 핸들러를 만들어 줄텐데 버블링이 막혀있는 구간이 존재하게 되면 당연히 클릭 했을 때 버블링이 막혀버리기 때문에 그 부분만 원하는 이벤트 결과를 얻지 못한다. 버블링을 잘 이해하고 이벤트를 설계한다면 버블링을 막을 일이 많지 않다.
+여담
버블링 외에도 캡쳐링(capturing)이라는 흐름이 존재한다. 실제 코드에서 자주 쓰이진 않는다. 캡처링 단계에서 이벤트를 발생시켜야 하는 일은 매우 드물다.
캡처링 단계 : 이벤트가 하위 요소로 전파되는 단계
타깃 단계 : 이벤트가 실제 타킷 요소에 전달되는 단계 = 이벤트 객체의 target 프로퍼티가 되는 요소에 등록되어있던 이벤트 핸들러가 동작하는 단계 (가장 처음 이벤트 핸들러가 동작하는 순간)
버블링 단계 : 이벤트가 상위 요소로 전파되는 단계
캡처링은 이벤트가 발생하면 가장 먼저, 그리고 버블링의 반대방향으로 진행되는 이벤트 전파 방식이다.
이벤트가 발생하면 가장먼저 window 객체에서부터 target까지 이벤트 전파가 일어나고, (캡쳐링) 타겟에 도달하면 등록된 이벤트 핸들러가 동작하고, (타깃) 이후에 다시 window 객체로 이벤트가 전파된다. (버블링)
자주 사용되진 않지만 그럼에도 불구하고 캡처링 단계에서 이벤트 핸들러를 동작해야 된다면? addEventListener에 세번째 프로퍼티에 true 또는 { capture:true }를 전달하면 된다.
for (let elem of document.querySelectorAll('*')) {
elem.addEventListener("click", e => alert(`캡쳐링 단계: ${elem.tagName}`), true);
elem.addEventListener("click", e => alert(`버블링 단계: ${elem.tagName}`));
}
5. 이벤트 위임 (Event Delegation)
버블링 개념을 활용하면 자식 요소 각각에 이벤트 핸들러를 하나씩 등록할 필요 없이 부모 요소에서 한 번에 자식 요소들에 발생한 이벤트를 관리할 수도 있다.
이렇게 이벤트를 다루는 방식을 자식 요소의 이벤트를 부모 요소에 위임한다고 해서 이벤트 위임(Event Delegation)이라고 한다.
예시 상황
만약 이미 있는 요소들에 이벤트 핸들러를 다 설정했는데 새로운 아이템을 추가 하는 상황이 발생하게 되면 추가된 아이템에는 이벤트 핸들러가 동작하지 않는다. 그래서 매번 추가할 때마다 이벤트 핸들러를 새로 등록해야 되는 문제가 있다. 이럴땐 이벤트 버블링을 활용하자.
자식요소에서 발생하는 이벤트를 부모요소에서 다루는 방식 = 이벤트 위임
리스트에 이벤트 핸들러를 하나밖에 등록하지 않았지만 아이템 각각의 이벤트 핸들러를 등록한것처럼 동작하고, 나중에 추가한 아이템도 이벤트 핸들러가 잘 동작한다. 하지만 그래도 문제가 한가지 있다. 자식요소를 제외한 온전한 부모요소를 클릭해도 이벤트 핸들러가 동작된다. item(li)영역을 벗어난 list(ul)영역을 선택해도 done class가 toggle되어 이벤트가 발생한다. 그래서 이벤트 위임을 할때는 명확하게 원하는 요소에서 의도한 동작이 일어나게끔 따로 처리를 해줘야한다.
// 이벤트 위임 (Event Delegation)
const list = document.querySelector('#list');
list.addEventListener('click', function(e) {
// target프로퍼티의 tagName이 LI인지 확인하거나
// if (e.target.tagName === 'LI')
if (e.target.classList.contains('item')) {
//classList의 contains 메소드를 이용해 item이라는 class를 가지고 있는지 확인하면 해결할 수 있다.
e.target.classList.toggle('done');
}
});
const li = document.createElement('li');
li.classList.add('item');
li.textContent = '일기 쓰기';
list.append(li);
tagName 프로퍼티는 해당 요소의 태그 이름 값을 대문자로 담고 있는 프로퍼티이고, classList의 contains 메소드는 파라미터로 전달하는 값이 해당 요소의 클래스 속성에 있는지 확인해 불린형태로 결과를 리턴해주는 메소드이다.
6. 브라우저의 기본 동작
브라우저에는 각 태그별 혹은 상황별로 기본적으로 약속된 동작들이 있다.
예를 들어 마우스 오른쪽 버튼을 클릭하면 상황에 맞는 메뉴 창이 뜬다거나, input 태그에 커서를 두고 키보드 키를 누르면 해당 값이 입력된다거나 하는. 만약 이런 동작들을 막고 싶다면 이벤트 객체의 preventDefault 메소드를 통해 막을 수가 있다.
<body>
<a id="link" href="https://www.codeit.kr/">Link</a>
<input type="checkbox" id="checkbox">
<input type="text" id="input" placeholder="input">
<p id="text">
I Love Codeit!
</p>
<script src="index.js"></script>
</body>
// 브라우저의 기본 동작
const link = document.querySelector('#link');
const checkbox = document.querySelector('#checkbox');
const input = document.querySelector('#input');
const text = document.querySelector('#text');
//event.preventDefault 브라우저의 기본적인 동작을 막는 메소드
link.addEventListener('click', function(e) {
e.preventDefault(); //링크가 클릭되면 기본동작(href속성 값으로 넘어가는것)이 되지 않고
alert('지금은 이동할 수 없습니다.'); //경고창을 띄워주세요.
});
//키도브 이벤트로 활용해보기
input.addEventListener('keydown', function(e) {
if (!checkbox.checked) { //체크박스가 체크되지 않으면
e.preventDefault(); //input태그에서 키가 입력되지 않게 막아주시고
alert('체크박스를 먼저 체크해 주세요.'); //경고창을 띄워주세요.
}
});
//마우스 우클릭 방지해보기, 마우스 우클릭 = contextmenu 라는 타입으로 이벤트가 발생된다.
text.addEventListener('contextmenu', function(e) {
e.preventDefault(); //다른곳에서는 우클릭이 되지만 텍스트 위에서 우클릭을 할 경우
alert('마우스 오른쪽 클릭은 사용할 수 없습니다.'); //경고창이 띄워진다.
});
//문서 전체에 우클릭 방지를 하고 싶다면 text를 document로 바꿔주면 된다.
하지만 각 HTML 태그들이 가지고 있는 고유한 역할과 의미를 훼손하게 될 수도 있기 때문에 꼭 필요한 경우에만 주의해서 사용해야 한다.
여러 개발자가 하나의 저장소에 작업을 할 때, 협업을 좀 더 효과적으로 하기 위해 git branch 에 대한 규칙을 정하고 저장소를 잘 활용하기 위한 workflow 를 정의하는 것을 바로 git branch 전략이라고 한다.
그 중에서도 대표 브랜치 전략인 flow에 대해서 알아보자.
Git Flow는 소프트웨어 개발에서 Git을 사용하여 브랜치를 관리하는 대표전략 중 하나로, 팀의 협업을 효율적으로 지원한다. 이 전략은 명확한 브랜치 구조를 제공하여 개발, 배포, 유지보수를 체계적으로 관리할 수 있게 해준다.
브랜치 종류
Main (혹은 Master)
Develop
Feature
Release
Hotfix
제품 출시 버전을 관리하는 메인 브랜치
다음 출시 버전을 위해 개발하는 브랜치
새로운 기능을 개발하는 브랜치
다음 출시 버전을 준비하는 브랜치
출시된 제품의 버그를 고치기 위한 브랜치
특징 및 장점
1. 명확한 브랜치 구조: 각 브랜치의 용도와 역할이 명확하게 정의되어 있어 협업이 용이 2. 효율적인 작업 관리: 기능 개발, 버그 수정, 배포 준비 등의 작업이 체계적으로 관리된다. 3. 릴리즈 준비 과정의 독립성: 릴리즈 준비와 기능 개발이 독립적으로 진행될 수 있어, 안정성을 높인다. 4. 버전 관리 용이: 각 릴리즈 버전이 명확하게 관리되어, 이전 버전으로의 롤백이 쉬워진다.
*릴리즈(Release) : 특정 버전의 소프트웨어를 공식적으로 배포하거나 공개하는 과정 *롤백(Rollback) : 특정 변경 사항이나 상태를 이전 버전으로 되돌리는 과정
단점
1. 복잡성: 브랜치가 많아질수록 관리가 복잡해 작은 팀이나 간단한 프로젝트에는 과도할 수 있다. 2. Git Flow의 개념을 이해하고 적용하는 데 시간이 필요다.
+여담, 또 다른 대표 브랜치 전략
GitHub Flow는 Git Flow보다 훨씬 단순하며, 빠른 배포와 지속적인 통합(CI/CD)에 초점을 맞춘 브랜치 전략이다. 이 전략은 'master' 브랜치 하나와 기능별 'feature' 브랜치를 사용하는 것이 전부다. 왜냐하면 GitHub Flow는 코드 변경 사항을 빠르게 배포하고, 팀원 간의 협업을 간소화하기 위해 설계되었기 때문
특빠른 반복 개발과 배포가 필요한 스타트업이나 소규모 팀에 적합하고, 간단한 구조 덕분에 새로운 팀원도 빠르게 적응할 수 있으며, 배포 과정의 단순화로 인해 개발에 더 집중할 수 있다.
window 객체는 브라우저 창을 대변하면서 자바스크립트에서 최상단에 존재하는 객체이다. 자바스크립트 코드 어느 곳에서나 항상 접근할 수 있는 객체이기 때문에 전역 객체, Global Object라고 부르고, 어떤 프로퍼티나 메소드를 사용하든 결국 전역 객체 내부의 것이기 때문에 앞에 window.을 생략할 수도 있다.
간단하게 표현하면 웹 페이지(웹 문서)에 나타나는 HTML 문서 전체를 객체로 표현한 것으로 생각하면 되는데, 이때 각 객체를 노드(Node)라는 용어로 표현하고, 태그는 요소 노드, 문자는 텍스트 노드로 구분된다.
console.log(document);
출력되는 화면, DOM을 직접적으로 접근하게 되면 객체가 아니라 DOM에 해당하는 HTML이 출력된다.
자바스크립트에서 사용해봤던 document 객체가 이 웹 문서의 최상단 객체로 진입점의 역할을 한다. 그래서 document 객체를 활용하면 웹 페이지 내부에 무엇이든 수정할 수 있고, 새로운 콘텐츠를 만들 수도 있다.
3. DOM 트리
DOM 트리
HTML의 계층 구조는 DOM에서도 반영되는데 이러한 계층구조를 나무에 비유해서 DOM 트리라고 부른다. 각 노드 간의 관계는 부모, 자식, 형제라는 용어로 표현한다. DOM 트리의 구조를 잘 파악하고 필요한 노드에 좀 더 자유롭게 접근하기 위해서는 관계(부모, 자식, 형제)를 잘 이해하는것이 중요하다.
태그를 표현하는 노드를 요소 노드(Element Node)라고 부르고, 문자를 표현하는 노드를 텍스트 노트(Text Node)라고 부른다. 일반적으로 텍스트 노드들은 요소 노드의 자식 노드가 되고, 따로 자식 노드를 가질 수 없기 때문에 나무의 잎사귀에 비유해서 잎 노드(Leaf Node)라고 한다.
//요소 노드 주요 프로퍼티
const myTag = document.querySelector('#list-1');
//innerHTML
console.log(myTag.innerHTML);
myTag.innerHTML = '<li>Exotic</li>';
myTag.innerHTML += '<li>Exotic</li>'; //덧셈 할당 연산자를 통해 기존 HTML 마지막 부분에 추가할 수도 있다.
//outerHTML
console.log(myTag.outerHTML);
myTag.outerHTML = '<ul id="new-list"><li>Exotic</li></ul>';
//수정이 아닌 교체. 처음 선택한 요소는 사라지고 새로 HTML을 만드는 것이다.
//textContext
console.log(myTag.textContext);
myTag.textContext = 'new text!';
//새로운 값을 할당하면 innerHTML과 마찬가지로 내부의 값을 완전히 새로운 값으로 교체
innerHTML 수정 전(좌)과 수정 후(우)
6. 요소 노드 다루기
1. 요소 노드 만들기: document.createElement('태그이름') 2. 요소 노드 꾸미기: element.textContent, element.innerHTML, ... 3. 요소 노드 추가 혹은 이동하기: element.prepend, element.append, element.after, element.before 4. 요소 노드 삭제하기: element.remove()
className 프로퍼티에 새로운 값을 할당해서 코드를 실행해보면, done 클래스에 미리 작성해둔 스타일이 입혀지는 방식인 것이다. 다만 한가지 문제는 className 프로퍼티로 값을 변경하게 되면 클래스 속성 값 전체가 바뀌게 된다. 기존에 있던 class는 사라지고 새로 부여한 class만 남는다는 뜻!
하지만 상황에 따라서 기존에 class는 그대로 둔 채로 새로 추가 하고 싶을 수도 있을 것이다. 그럴 때는 classList를 사용하면 된다.
// elem.classList
console.log(today.classList);
console.log(today.children[1].classList);
// elem.classList: add, remove, toggle
const item = tomorrow.children[1];
item.classList.add('done'); //추가
item.classList.remove('done'); //삭제
item.classList.toggle('done'); //있으면 제거, 없으면 추가
//add와 remove는 여러개의 파라미터 값을 줄 수 있다.
item.classList.add('done', 'other');
//toggle은 여러개의 파라미터는 줄 수 없고, 두번 째 파라미터가 boolean형태의 값을 전달 받아서
//true일 땐 add의 기능만, fales일 땐 remove의 기능만하도록 toggle의 기능을 강제하는 역할을 한다.
item.classList.toggle('done', false);
classList는 클래스의 속성 값을 유사배열로 다루는 프로퍼티이다. 클래스 속성을 하나씩 다룰 수 있는 것 뿐만 아니라 add, remove, toggle이라는 메소드도 활용할 수 있다.
"color-btn" 클래스가 있는 모든 태그들이 대괄호로 감싸져 배열의 형태로 선택됐다. length 프로퍼티도 있어서 배열 같지만, 완벽한 배열은 아니다. 배열을 다룰 때 사용하는 splice나 push 같은 메소드는 사용할 수가 없기 때문에 배열이라고 부르기는 어렵다.
console.log(myTags[1]);
console.log(myTags.length);
for (let tag of myTags) {
console.log(tag);
}
배열 메소드는 사용할 수 없지만 대괄호 표기법으로 1번 인덱스에 접근한다거나, length 프로퍼티를 활용할 수 있고, for...of 문을 사용하는데에는 아무런 문제가 없다.
+ 여러개의 값을 담고 있는 배열과 형태는 유사하지만 배열의 메소드는 사용할 수 없는 것들을 가리켜서 유사배열(Array-Like Object)이라고 한다.
그리고 클래스가 하나 밖에 없는 값에 접근하려고 하면, 태그가 하나 밖에 없으니 딱 그 태그가 선택될거라고 생각할 수 있다. 확인을 해보면 요소가 한개가 들어있는 HTMLCollection이 출력되기 때문에 그 태그를 선택하려면 [0] 번째 인덱스에 접근 해야 된다.
존재하지 않는 태그를 선택하게 되면 null값이 리턴되던 id 태그 선택과는 다르게 비어있는 HTMLCollection이 출력된다.
console.log(myTags === null); //false, 비어있는 HTMLCollection은 null값과는 다르다.
console.log(myTags.length); //0
+ 여담
유사배열의 특징
숫자 형태의 indexing이 가능하다. : 유사배열도 배열과 마찬가지로 각 요소에 0부터 시작하는 숫자 형태의 index가 있어야 한다.
length 프로퍼티가 있다. : 숫자 형태의 index가 있더라도 length 프로퍼티가 없다면 유사배열이라기 보다 그냥 숫자 형태의 key로 구성된 일반적인 객체라고 볼 수 있다.
배열의 기본메소드를 사용할 수 없다. : 인덱싱을 통해 유사배열의 요소에 접근은 쉽지만 수정이나 삭제는 까다롭다. 그래서 내부 요소들은 배열처럼 다룰 수 있으면서 배열의 메소드 사용을 막고싶거나 일반 배열에는 없는 특별한 메소드를 제공하고 싶을 때 유사 배열을 활용한다.
Array.isArray(유사배열)은 false다. : 유사 배열은 배열과 비슷하지만 배열이 아니기 때문에 결과값이 false이다.
태그 이름으로 선택하기
//태그 이름으로 태그 선택하기
document.getElementsByTagName('태그이름');
class와 마찬가지로 Element"s"로 작성해야 하니 주의! 실행결과 역시 class와 똑같이 HTMLCollection을 리턴한다.
HTML Collection과 같은유사배열이 출력될 것 같았지만, color-btn 클래스가 붙어있는 태그들 중에 가장 첫번째 요소(0번째 인덱스)가 선택되었다. 만약 같은 class를 가진 태그 여러개를 가져오고 싶다면 querySelectorAll 메소드를 활용할 수 있다.
여기까지 됐다면 Pull Request를 할 수 있다. pull request = 검토받기 위한 작업, 만약에 내가 신입개발자로 뽑혀서 들어가 중요 프로젝트에 투입됐는데 내가 만든 브랜치를 바로 머지 할 수 있는가? 아마 사수나 상사가 무조건 확인 후에 올릴것이다. 그래서 PR을 하는것이라고 생각하면 된다.
미션 1부터 -base repository: 코드잇 레파지토리/기수-Sprint-Mission / base: Basic-본인이름 (🚨반드시 main 브랜치가 아닌, Basic-본인이름 브랜치로 설정) -head repository: 내 레파지토리/기수-Sprint-Mission / compare: Basic-본인이름-sprintN
미션 5부터 -base repository: 코드잇 레파지토리/기수-Sprint-Mission / base: React-본인이름 (🚨반드시 main 브랜치가 아닌, React-본인이름 브랜치로 설정) -head repository: 내 레파지토리/기수-Sprint-Mission / compare: React-본인이름-sprintN
미션 9부터 -base repository: 코드잇 레파지토리/기수-Sprint-Mission / base: Next-본인이름(🚨 반드시 main 브랜치가 아닌, Next-본인이름 브랜치로 설정) -head repository: 내 레파지토리/기수-Sprint-Mission / compare: Next-본인이름-sprintN
제목을 생성하면 PR 템플릿을 작성하도록 나온다.
## 요구사항
### 기본
- [x]
- []
- []
### 심화
- [x]
- []
## 주요 변경사항
-
-
## 스크린샷
## 주강사님에게
-
-
- 셀프 코드 리뷰를 통해 질문 이어가겠습니다.
💡 PR 템플릿을 활용하실 때 주의할 것 -PR 템플릿은 마크다운 문법을 준수해서 작성하기 -체크리스트를 만들고 싶다면 [ ], 체크를 하고싶다면 [x]와 같이 작성해 주기 -스프린트 미션이 안내된 레슨의 셀프 채점 부분에 있는 체크리스트를 PR에도 반영하기 -PR에서 큰 변경사항이 있을 때에는 '주요 변경사항'에 기록하기(e.g. 랜딩 페이지 추가, 로그인/회원가입 페이지 반응형 디자인 적용 등) -주강사님이 작업한 내용을 빠르게 이해할 수 있도록 png, jpg, gif 등의 이미지를 '스크린샷'에 첨부하기. 참고로, 이미지 첨부를 위한 마크다운 문법은  -코드의 특정 영역에 대해 질문이 있을 때는 PR에 코멘트를 작성하는 방식으로 진행하기
나는 이때 [기본]에다가 netlify로 배포한 사이트 주소를 넣었다. (나중에 강사님이 맞게 잘 하셨다면서 확인해주심.)
본문을 다 작성했다면 평일 강사님을 Reviewers에 추가해주고 (k로 시작하심) Label로 원하는 피드백 스타일을 표시한다.
label
이렇게 까지 했다면 아직 끝난게 아니라 미션 설문을 제출 + 디스코드에서 강사님께 미션완료 코드리뷰 요청을 드려야한다.
+이후 강사님께서 제출된 PR의 내용을 확인 후 리뷰를 남기고 머지(Merge)해 주신다.
+PR은 강사님 리뷰 후에 머지 되기 때문에 리뷰에 대한 개선작업은 그 다음 스프린트 미션에 반영해주면 된다.
그 다음 프로젝트 진행하기
본인 프로젝트 열고, Basic-본인이름-sprint 브랜치에서 Basic-본인이름 브랜치로 이동을 해준다.
$ git checkout Basic-본인이름
그 다음 github 레포지토리의 Basic-본인이름 브랜치에서 변경된 코드를 가져온다.
//github 레포지토리를 upstream 이라는 이름으로 연결한다.
//git remote add로 연결한 후에는 추후에 다시 연결하지 않아도 된다.
$ git remote add upstream 저장소-url
//github 레포지토리의 Basic-본인이름 브랜치에서 변경된 사항을 내 Basic-본인이름 브랜치로 가져온다.
$ git pull upstream Basic-본인이름
여기서 $ git remote add upstream 저장소-url 은
이 때 봤던 Basic-내 이름 말고 main 에서의 주소이다. 왜냐! 위에서 clone해 올 때는 basic-내이름 에서 주소를 가져왔다. $ git push origin Basic-본인이름-sprint1 에서 origin은 내 레포지토리의 주소이다. 그럼 가져올 저장소의 위치도 알려줘야 한다. 그래서 내가 가져오려는 github 레포지토리를 upstream이라는 이름으로 연결해주는 것이다. (매번 주소 다 치기 번거로우니까!)
