I'm a Fig, Not a Pig

1. 자바스크립트 데이터 타입의 종류 (총 8가지) 답: number string boolean undefined null object symbol bigint 2. 자바스크립트에서 함수는 어떤 형태로 활용이 가능한지 3가지 이상 설명하시오 답: 함수 선언 함수 표현식 객체의 메소드로 활용 콜백 함수로 활용 고차 함수로 활용 // 함수 선언 function sayHi() { console.log('Hi!'); } // 함수 표현식 const sayHi = function () { console.log('Hi!'); }; // 객체의 메소드로 활용 const codeit = { printTitle: function () { console.log('Codeit'); } } // 콜백 함수로 활용 myBtn...

1. arguments 객체에 대해서 설명해주세요. 답: 자바스크립트는 함수를 호출 할 때 arguments 객체가 함수 내부로 전달된다. arguments 객체는 함수를 호출할 때 넘긴 인자들이 배열 형태로 저장된 객체를 말한다. 만약 함수의 인자보다 적게 함수를 호출할 경우, 넘겨지지 않은 인자에는 undefined 값이 할당된다. arugments 객체는 유사 배열 객체이기 때문에 배열과 비슷하지만 length 속성만 쓸 수 있고 배열 메서드는 사용할 수 없다. 2. this는 호출에 따라 달라집니다. 아래를 읽고, 어느 객체를 가리키는지 말해주세요. 1) var x = this; console.log(x); 답: 전역객체인 window를 가리킨다. 2) const user = { firstName..

목차 1. innerHTML 2. innerText 3. textContent 4. 정리 매번 찾아보는 셋의 차이점.. 텍스트를 읽어오고 설정할 수 있다는 점이 비슷하지만 조금씩 다른 차이가 있어서 이 차이를 아는게 중요하다. 1. innerHTML 먼저 innerHTML은 'Element'의 속성으로, 해당 Element의 HTML, XML 마크업을 읽어오거나 설정 할 수 있다. 즉, innerHTML을 사용하면 내부 HTML 코드를 JavaScript 코드에서 새 내용으로 쉽게 변경할 수 있다. // html 코드와 함께 작성 가능 document.documentElement.innerHTML = "innerHTML" // 스타일 적용 document.documentElement.innerHTML =..

목차 1. Rest Parameter란? 2. Arguments란? 3. Rest Parameter와 Arguments 비교 1. Rest Parameter Rest Parameter 구문을 사용하면 함수가 정해지지 않은 수의 매개변수를 배열로 받을 수 있다. 이름 그대로 먼저 선언된 매개변수에 할당된 전달인자를 제외한 나머지 전달인자들이 모두 배열에 담겨 할당된다. 따라서 Rest parameter는 반드시 마지막 매개변수여야 한다. 다음은 Rest Parameter를 사용해서 전달된 모든 숫자를 더하는 예제이다. function sum(...numbers) { let total = 0; for (let number of numbers) { total += number; } return total; }..

1. 다음 HTML 코드를 보고 문제를 해결해주세요. 음식 햄버거 치킨 피자 나라 한국 일본 미국 영국 (1) 코드에서 1번과 2번의 접근 대상은? const foodList = document.querySelector("#food_list"); const countryList = document.querySelector("#country_list"); // 1번 console.log( foodList.parentElement.children[2].nextElementSibling.children[2] ); // 2번 console.log( countryList.parentElement.firstElementChild.nextElementSibling .children[1] ); 답: 1번: 미국 2번:..

2주차 위클리 페이퍼 쓴게 엊그제 같은데 벌써 3주차라니..!! 시간 넘 빠르다.. 이번주차에는 Git과 인터렉티브 자바스크립트 챕터를 들었다. 특히 Git을 배우면서 여러 커맨드를 실습해봤는데, 검은 바탕에 흰글씨가 좀 익숙해졌달까..?ㅋㅋㅋ 유용한 명령어들도 배울 수 있어서 좋았다. 이번주 위클리 페이퍼 미션은 다음과 같다. Git에서 branch merge 방법들과 각 방법의 특징을 설명해 주세요. Git Flow 브랜치 전략에 대해 설명해 주세요. 1. Git에서 branch merge 방법들과 각 방법의 특징을 설명해 주세요. Git에서 브랜치를 병합하는 방법은 크게 세 가지가 있다. merge commit을 만들며 합치기 Squash and merge 하기 Rebase and merge 하기 ..

오늘은 요소의 속성 값을 가져오는 방법인 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..