I'm a Fig, Not a Pig

목차 1. getAttribute() 문법 2. 예제 3. 정리 오늘은 요소의 속성 값을 가져오는 방법인 .getAttribute()에 대해 다룰 것이다. 1. getAttribute() 문법 element.getAttribute(attributename); 여기서 attributename은 얻고자 하는 속성 값에 해당하는 속성 이름이다. 2. 예제 Example Div 개발자 도구(f12)를 확인해보면 "Example Title"이 출력된 것을 확인할 수 있다. getAttribute() 메소드를 사용하면 버튼 요소의 onclick같은 속성 값도 가져올 수 있다. 다음의 예제는 요소의 onclick 속성 값을 가져와 콘솔창에 출력하는 코드이다. Click Me 3. 정리 getAttribute() 메소..

목차 1. 이벤트 버블링 2. 이벤트 캡처링 3. 이벤트 위임 오늘은 이벤트 버블링, 이벤트 캡처링, 이벤트 위임에 대해 다룰 것이다. 모두 JavaScript에서 이벤트 처리와 관련된 중요한 개념이기 때문에 잘 알아두어야 한다. 1. 이벤트 버블링 (Event Bubbling) 이벤트 버블링은 자식 요소에서 부모 요소로 이벤트가 전파되는 것을 말한다. 간단한 예시를 통해 알아보자. Click me! document.getElementById('inner').addEventListener('click', function() { console.log('Inner clicked'); }); document.getElementById('outer').addEventListener('click', functio..

1. 1) id 속성을 통해 태그를 선택할 때, 존재하지 않는 id 값으로 태그를 선택하면 무엇이 출력 되는가? 2) class 속성을 통해 태그를 선택할 때, 존재하지 않는 class 값으로 태그를 선택하면 무엇이 출력 되는가? 답: 1) null 2) null 2. css 선택자로 태그를 선택할 때 a)와 b)의 출력 결과는 같다(O,X) a) const myTag = document.querySelector(‘#myNumber’); console.log(myTag); b) const myTag2 = document.getElementById(‘myNumber’); console.log(myTag2); 답: O 3. querySelector 메소드를 활용할 때 클래스나 태그 이름처럼 여러 개의 요소가..

1. PR(Pull Request)를 close할 시, 브랜치가 존재한다면 다시 open 상태로 되돌릴 수 있다. (O, X) 답: o 2. PR을 작게 만드는 원칙을 2가지 이상 말해주세요. 답: 한 번에 많은 변경 사항을 포함하는 대신, 각각의 PR이 한 가지 작은 기능이나 에러를 나타내는 PR 올리기 코드 리뷰의 효율성을 높이기 위해서 PR 생성시 코드 길이를 제한하기 (ex, 1개의 PR은 1000 Line을 넘을 수 없다) 3. 좋은 커밋이란 무엇인지 2가지 이상 말해주세요. 답: 한 커밋에 한 가지 변경 사항만이 포함 된 커밋 (작고 의미있는 단위의 커밋) 명확하고 간결한 커밋 메세지가 작성된 커밋 4. 일반적인 Git의 작업 흐름에 대해서 말해주세요. 답: 새로운 기능 또는 버그 수정을 위해..

오늘은 querySelectorAll나 getElementsByClassName과 같이 여러 개의 요소 노드 객체를 반환할 때 사용되는 객체인 HTMLCollection과 NodeList의 차이에 대해 다룰 것이다. 우선 둘의 공통점부터 살펴보자. HTMLCollection과 NodeList는 모두 유사 배열 객체이면서 이터러블이다. 따라서 둘 다 length 프로퍼티를 가지기 때문에 객체를 배열처럼 접근할 수 있고 반복문을 돌릴 수 있다. 하지만 유사 배열 객체이기 때문에 자바스크립트에서 제공하는 배열 객체의 메소드를 사용할 수 없다는 특징이 있다. (ex. map, forEach, reduce 등등) (유사 배열 객체에 대한 자세한 내용은 아래 링크에서 볼 수 있다.) https://codingtod..

로그인 .logo와 .logo_img 사이에 작은 공백이 생겼다. 단순하게 아래와 같이 a 태그를 공백없이 모두 붙여주면 해결 되지만 가독성이 좋지 않아서 잘 사용하지 않는다. 따라서 공백을 제거하려면 .logo에 font-size: 0;을 적용하면 된다. .logo { font-size: 0; }

1. GitHub에서 두개의 브랜치를 머지하는 총 3가지 방법 중 하나로, 현재 브랜치를 target 브랜치에 재위치 시킨 후 병합하는 방식은 무엇인가?(cf) 커밋 히스토리는 선형적으로 유지됨) 답: rebase and merge 2. 리뷰를 제출할 때 작업이 되는 브랜치가 Branch protection rule로 설정되어 있을 때, 코드 작성자는 Approve를 받지 못하면 브랜치에 머지하지 못한다(O,X) 답: O 3. 로컬 레포지토리의 내용을 맨 처음 리모트 레포지토리에 보낼 때, git push --set-( ) origin master 라고 쓰고 실행해야 한다. 이 때 괄호 안에 들어갈 단어는? 답: upstream 4. Git의 스택 영역에 저장했던 작업 내용들 중 가장 최근의 것을 wor..

Git이 인식하는 파일의 상태는 총 네 가지가 있다.이번 포스팅에서는 Git 파일의 네 가지 상태에 대해 정리해보려 한다. 먼저 Git에서 관리하는 파일은 크게 Untracked와 Tracked 두 가지로 나눌 수 있다. 1. Untracked는 Git에서 추적되지 않고 있는 파일이라는 의미이고, 생성 후 한 번도 git add 해주지 않은 상태의 파일을 가리킨다. 2. Tracked 파일은 Git에서 추적하고 있는 파일인데, 이것은 다시 Unmodifed, Modifed, Staged 이렇게 세 가지 상태로 나뉜다. 아래에서 각각의 상태에 대해 알아보자. Untracked- Git에서 추적하고 있지 않은 파일- 생성 후 한 번도 git add 한 적이 없는 파일TrackedUnmodifed- Commi..

1. 다음중, git branch 와 git checkout 의 동작을 하나의 명령어로 축약 가능한 것은? ㄱ. git branch -C ㄴ. git branch --switch ㄷ. git checkout -B ㄹ. git checkout --create 답: ㄷ 2. 다음중, merge 도중 발생한 conflict 을 해결할 때, 올바른 처리 방법이 아닌 것은? ㄱ git add . git commit ㄴ git merge --force ㄷ git merge --abort 답: ㄴ 해설: ㄴ. git merge --force 명령어는 merge를 강제로 수행하게 하는 옵션이다. 이는 충돌을 발생시킨 변경 사항을 무시하고 강제로 병합을 시도하기 때문에 충돌을 해결하는 올바른 방법이 아니다. +) ㄱ. ..

오늘은 git reset과 git revert를 사용하는 경우와 각각의 차이에 대해 알아보려 한다. git을 사용하다보면 롤백을 해야 할 때, 커밋을 취소하고 싶을 때 등등 다양한 상황이 발생한다. 이럴때 사용하는 git 명령어인 reset, revert의 개념에 대해 알아보자. 1. git reset: 커밋 취소 git reset [옵션] [커밋 아이디] git reset은 대표적으로 커밋을 취소하는 옵션이다. 옵션은 soft, mixed, hard 3가지가 있고 옵션에 따라 디테일한 설정이 가능하다. 옵션은 아래와 같다. (1) git --soft: HEAD가 특정 커밋을 가리키도록 이동시킨다. (2) git --mixed: staging area도 특정 커밋처럼 리셋한다. (3) git --hard..