attribute와 property의 차이점은?
attribute는 HTML 요소의 추가적인 정보를 전달하고, 이름=“값” 이렇게 쌍으로 온다. 예를 들어 <div class=“my-class”></div> 를 보면 div 태그가 class 라는 값이 ‘my-class’인 attribute를 가지고 있다. property는 attribute에 대한 HTML DOM tree 안에서의 표현이다. 따라서 다음 예시에서 attribute는 값이 ‘my-class’이며 이름이 ‘className’인 property를 가진다.
Our DIV node
|- nodename = "DIV"
|- className = "my-class"
|- style
|- . . .
|- . . .attribute는 HTML 텍스트 문서에, property는 HTML DOM tree에 있는 것이다. 그래서 attribute는 변하지 않고 초기값(default)을 전달한다는 것을 의미한다. 반면 HTML property는 변할 수 있다. 이를테면 사용자가 체크박스를 클릭했거나 input 박스에 텍스트를 넣었거나 JavaScript로 값을 변경하면 property 값은 변한다.
생활코딩, JavaScript - 속성 제어 API (1/2) : *Attribute
생활코딩, JavaScript - 속성제어 API (2/2) : attribute vs property
JavaScript의 this는 몇 가지로 추론될 수 있는가? (어려움, this 부분으로 이동)
this는 전역 범위에서 사용될 때는 전역 객체를 가리킨다. 함수에서 사용될 때도 전역 객체를 가리킨다. 그런데 객체에 속한 메서드에서 사용될 때는 그 메서드의 객체를 가리킨다. 객체에 속한 메서드의 내부 함수에서 사용될 때는 전역 객체를 가리킨다. 한편 생성자에서 사용될 때는 생성자로 생성된 새로운 객체를 가리킨다.
function User(name) {
this.name = name;
this.isAdmin = false;
}
let user = new User("보라");
alert(user.name); // 보라
alert(user.isAdmin); // falseFunction.prototype.bind()란? (this 부분으로 이동)
Function.prototype.bind() 메서드가 호출되면 새로운 함수를 생성한다. 받게되는 첫 번째 인자의 value로 this 키워드를 설정하고, 이어지는 파라미터들은 바인드된 함수의 인수에 제공된다.
const module = {
x: 42,
getX: function() {
return this.x;
}
};
const unboundGetX = module.getX;
console.log(unboundGetX()); // The function gets invoked at the global scope
// expected output: undefined
const boundGetX = unboundGetX.bind(module);
console.log(boundGetX());
// expected output: 42function example(parameter) {
console.log(parameter); // Output = foo
}
const argument = "foo";
example(argument);콜백 함수란?
콜백 함수는 함수의 인수에 들어가는 함수이다. 주로 뭔가를 순차적으로 실행하고 싶을 때 사용한다. 콜백 함수를 과도하게 사용하면 콜백 지옥에 빠질 수 있고, 들여쓰기 수준이 높아지면서 코드의 가독성이 떨어진다. 이를 보완하기 위해 Promise나 async/await를 활용한다.
function greeting(name) {
alert(`Hello, ${name}`);
}
function processUserInput(callback) {
const name = prompt("Please enter your name.");
callback(name);
}
processUserInput(greeting);코딩애플, 콜백함수가 뭔지 한국어로 쉽게 설명하는 영상
event.target과 event.currentTarget의 차이점은? (어려움)
반환 대상에 차이가 있다. event.target은 부모로부터 이벤트가 위임되어 발생하는 자식의 위치, 즉 내가 클릭한 자식 요소를 반환한다. 하지만 event.currentTarget은 해당 이벤트가 부착된 부모의 위치를 반환한다.
// 목록 생성
const ul = document.createElement('ul');
document.body.appendChild(ul);
const li1 = document.createElement('li');
const li2 = document.createElement('li');
ul.appendChild(li1);
ul.appendChild(li2);
function hide(evt) {
// e.target은 사용자가 클릭한 <li> 요소를 가리킴
// 여기서 e.currentTarget은 부모인 <ul>을 가리키게 됨
evt.target.style.visibility = 'hidden';
}
// 목록에 수신기 부착
// 각각의 <li>를 클릭할 때 호출됨
ul.addEventListener('click', hide, false);function hide(e) {
e.currentTarget.style.visibility = 'hidden';
console.log(e.currentTarget);
// When this function is used as an event handler: this === e.currentTarget
}
const ps = document.getElementsByTagName('p');
for (const p of ps) {
// Hide the clicked <p> element
p.addEventListener('click', hide, false);
}
document.body.addEventListener('click', hide, false);
// Click around and make paragraphs disappearMap()과 Set()이란 무엇이고 차이점은?
Map()은 key-value가 쌍으로 있는 데이터를 저장한다. 객체의 key는 무조건 문자형인데, Map()의 key는 자료형에 제한이 없다. 주의 사항은 객체처럼 Map[key] 형태를 사용하면 일반 객체로 취급하므로 사용하지 않는 편이 좋다. Set()은 중복을 허용하지 않는 값들을 모아두는 객체다. 요소의 유무를 판단할 때 Array.find()보다 Set.has()가 더 효율적이다.
// Creating a new Map
const myMap = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);// JavaScript Demo: Object.keys()
const object1 = {
a: 'somestring',
b: 42,
c: false
};
console.log(Object.keys(object1));
// expected output: Array ["a", "b", "c"]// JavaScript Demo: Set.prototype Constructor
const set1 = new Set([1, 2, 3, 4, 5]);
console.log(set1.has(1));
// expected output: true
console.log(set1.has(5));
// expected output: true
console.log(set1.has(6));
// expected output: falseTDD란?
TDD(Test Driven Development)란 테스트 주도 개발이라는 뜻으로, 테스트 코드를 작성한 뒤 화면을 구현하는 방식이다. 짧은 개발 사이클을 반복하는 게 특징이다. 총 세 가지 절차가 있는데 '실패 → 성공 → 리팩토링'이 서로 꼬리에 꼬리를 물고 이어진다. TDD를 진행하면 테스트 케이스를 작성할 때 주로 작은 단위로 만들게 되어 코드가 방대해지지 않고 코드 모듈화가 자연스럽게 이루어진다. React의 대표적인 TDD 도구로는 Jest(프레임워크)와 Enzyme(라이브러리)이 있다.
FEConf Korea, 프론트엔드에서 TDD가 가능하다는 것을 보여드립니다
useEffect란?
useEffect는 컴포넌트가 렌더링되거나 업데이트될 때 그 안에 있는 기능을 실행할 수 있는 React Hooks이다. 컴포넌트의 특정 값이 업데이트될 때 해당 기능으로 작동시키고 싶으면 두 번째 파라미터 배열에 그 값을 넣어주면 된다. 컴포넌트가 언마운트되거나 업데이트되기 직전에 원하는 작업을 하고 싶다면 정리 함수(clean-up)를 리턴하면 된다.
별코딩, React Hooks에 취한다 - useEffect 깔끔하게 마스터하기 | 리액트 훅스 시리즈
코딩앙마, React JS #12 useEffect, fetch()로 API 호출 - 초보자를 위한 리액트 강좌
import와 require의 차이점은? (어려움)
import와 require 모두 외부 라이브러리나 다른 파일을 불러오는 동일 목적을 가지고 있다. 그런데 import는 ES6에서 도입돼 Babel 같은 JavaScript 컴파일러를 써야 사용 가능하다. import의 경우 바로 키워드를 사용(import moment from "moment";)해 모듈을 직관적으로 불러오지만, require은 변수를 할당(const moment = require("moment";)하듯이 불러온다.
flexiple, JavaScript require vs import
스코프와 스코프 체인이란?
스코프(scope)는 어떤 변수들에 접근 가능한 유효 범위로 코드 어디서든 참조할 수 있는 전역 스코프(global scope), 함수 자신과 하위 함수에서만 참조할 수 있는 지역 스코프(local scope)가 있다. 함수 안에서 선언된 변수는 해당 함수 안에서만 사용할 수 있으므로 전역 변수(global variable)에 영향을 줄 수 없다. 내부 함수는 호출된 변수를 찾기 위해 먼저 자신의 스코프에서 찾고, 없으면 한 단계씩 외부로 나가면서 찾는다. 이렇게 계속 범위를 넓혀나가며 찾는 관계를 스코프 체인(scope chain)이라고 한다.
HTTP 요청 메서드인 POST와 GET의 차이점은?
HTTP 요청 메서드(HTTP request methods) 중 GET은 GET 메서드는 특정 리소스의 표시를 요청한다. GET을 사용하는 요청은 오직 데이터를 받기만 한다. POST는 특정 리소스에 엔티티(entity)를 제출할 때 쓰인다. 이는 종종 서버 상태의 변화나 부작용을 일으킨다. 검색 페이지는 GET 요청, 비밀번호 수정 폼은 POST 요청을 한다. GET은 데이터 변형 위험이 없어서 POST보다 안전하다. POST 요청은 클라이언트에서 서버로 데이터를 전송할 때 추가적인 데이터를 body에 포함하지만, GET 요청은 URL에 포함해 요청한다.
