"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이라는 이름으로 연결해주는 것이다. (매번 주소 다 치기 번거로우니까!)
