I'm a Fig, Not a Pig

오늘은 요소의 속성 값을 가져오는 방법인 getAttribute()에 이어 요소의 속성을 설정하는 방법인 setAttribute()에 대해 다룰 것이다. 1. setAttribute() 문법 element.setAttribute(, ); 이 메소드는 두 개의 필수 매개변수가 있다. 하나씩 살펴보자. setAttribute() 매개변수 attributeName: “href”, “type”, “style” 와 같이 속성명을 지정하면 된다. attributeValue: 지정한 속성명에 대한 속성값을 지정하면 된다. 만약 attributeName이 “href” 이면 값은 “https://shinyks.com”, 속성이 “type” 이면 값으로 “text” 등을 넣으면 된다. 2. 예제 Example Div Ad..

1. 유사배열의 특징을 3가지 이상 말해라. 답: 1. 인덱싱을 통해 요소에 접근할 수 있다. 2. 'length' 프로퍼티가 있다. +) 숫자 형태의 index가 있더라도 length 프로퍼티가 업다면 유사 배열이라기보단 그냥 숫자 형태의 key로 구성된 일반적 객체라고 볼 수 잇다. 3. 배열의 기본 메소드를 사용할 수 없다. +) 배열 메서드를 사용하려면 'Array.from()'이나 전개 연산자('...') 등을 사용하여 유사 배열을 진짜 배열로 변환해야 한다. 4. Array.isArray(유사배열)은 false이다. 2. 이벤트 버블링과 이벤트 캡처링에 대해 설명해라 답: - 이벤트 버블링은 특정 요소에서 이벤트가 발생했을 때, 해당 이벤트가 상위의 화면 요소들로 전달되는 특성이다. - 이벤트..

목차 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..