props와 state란? (필수)
props와 state는 일반 JavaScript 객체이다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있다. 그러나 props는 함수의 매개변수처럼 컴포넌트에 전달되는 반면, state는 함수 내에 선언된 변수처럼 컴포넌트 안에서 관리된다. 한편 setState()는 컴포넌트의 state 객체에 대한 업데이트를 실행한다. state가 변경되면, 컴포넌트는 리렌더링된다. setState()를 사용해 state 값을 업데이트하면 자동으로 리렌더링되지만, setState()의 비동기적 특징을 주의해서 사용해야 한다. setState()가 있을 경우, React는 다른 state 변경까지 한꺼번에 통합해 React 자신이 판단하기에 가장 적절한 시기에 DOM을 리렌더링한다. 이를 해결하기 위해 콜백 혹은 useEffect를 사용한다.
별코딩, React Hooks에 취한다 - useEffect 깔끔하게 마스터하기 | 리액트 훅스 시리즈
생활코딩, React - 16.5. 이벤트 setState 함수 이해하기
call, apply, bind의 차이점은? (this 부분으로 이동)
call, apply, bind는 함수 호출 방식과 상관없이 this를 지정할 수 있다. 먼저 call 메서드는 모든 함수에서 사용 가능하며 this를 특정 값으로 지정할 수 있다. call은 apply와 거의 동일하다. 그러나 call 인수의 목록을, 반면 apply는 배열 하나를 인수로 받는다는 사실이 중요한 차이점이다. bind를 사용하면 함수의 this 값을 영구히 바꿀 수 있다. this 값을 고정시키려면 bind를 쓰면 된다.
코딩앙마, 자바스크립트 중급 강좌 #13 call, apply, bind
AJAX란 무엇이고 장단점은?
AJAX(Asynchronous JavaScript And XML)란 비동기 JavaScript와 XML을 뜻한다. 간단히 설명하면 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것이다. JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고받을 수 있다. AJAX의 강력한 특징은 전체 페이지를 리프레시하지 않아도 수행되는 비동기성이다. 이러한 비동기성을 통해 사용자의 Event가 있을 때 전체 페이지가 아닌 일부분만 업데이트해 UX를 향상하는 것이 AJAX의 장점이다. 그러나 단점은 SEO에 불리(AJAX 방식 웹 애플리케이션의 HTML 파일은 뼈대만 있고 데이터는 없어서 사이트 정보를 크롤링하기 어려움)하고, 뒤로가기 같은 History 관리 기능을 구현하려면 별도의 History API를 사용(AJAX에서는 이전 상태를 기억하지 못해 사용자가 의도한 대로 동작하지 않음)해야 한다는 것이다.
코딩애플, AJAX가 무엇인지 설명하는 영상 (+CORS, fetch 어쩌구)
use strict란 무엇이고 장단점은? (나중에)
strict mode란 JavaScript의 문법을 보다 엄격하게 적용해 기존에는 무시되었지만 오류를 발생시킬 가능성이 높거나 JavaScript 엔진 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적 에러를 발생시킨다. 전역 범위에서 선언하면 모든 코드가 대상이고, 로컬로 선언하면 함수 내부가 대상이 된다. strict mode에서는 삭제 불가능한 프로퍼티를 삭제하거나 함수의 파라미터를 중복 사용하는 것 등이 금지된다. strict mode의 장점은 코드의 문제점을 비교적 빨리 알게 되어 디버깅이 쉬워지고 실수로 전역변수를 만드는 게 불가능다는 것이다. 단점으로는 strict mode를 지원하지 않는 브라우저에서는 strict mode의 코드가 다른 방식으로 동작할 수 있다.
// 전체 스크립트 엄격 모드 구문
'use strict';
var v = "Hi! I'm a strict mode script!";
function strict() {
// 함수-레벨 strict mode 문법
'use strict';
function nested() { return "And so am I!"; }
return "Hi! I'm a strict mode function! " + nested();
}
function notStrict() { return "I'm not strict."; }
CSS Box Model이란?
모든 HTML 요소는 박스 형태로 구성되는데, 이를 CSS의 box model이라고 한다. 문서의 레이아웃을 계산할 때, 브라우저의 렌더링 엔진은 표준 CSS box model에 따라 각각의 요소를 박스로 구현한다. box model은 총 4개의 영역(content, padding, margin, border)으로 구성된다. content는 텍스트나 이미지가 들어가 있는 박스의 실질적인 부분으로 색상, 너비, 높이 등을 설정할 수 있다. padding은 content과 border 사이의 간격이다. border는 content과 padding 주변을 감싸는 테두리이다. margin은 border와 이웃하는 다른 요소 사이의 간격이다.
생활코딩, WEB2 CSS - 8. 박스 모델
undeclared, null, undefined란? (필수)
undefined와 null은 모두 선언된 상태이다. 그런데 undefined는 접근 가능한 영역에 변수는 선언되었으나 현재 아무런 값도 할당되어 있지 않음을 의미한다. null은 어떤 변수를 선언한 뒤 그 변수에 null이라는 비어 있는 값을 할당한 경우이다. 한편 undeclared는 undefined나 null과 달리 접근 가능한 영역에 아예 변수 선언조차 되어 있지 않은 상태이다.
var amy;
console.log(amy) // undefined
var amy; // 선언
amy = null; // 할당
forEach와 map의 차이점은?
두 메서드는 공통적으로 배열의 모든 요소 각각에 대해 주어진 함수를 실행한다. 이때 forEach는 원본 배열을 변형하지 않고, map은 새로운 배열을 반환한다.
const array1 = ['a', 'b', 'c'];
array1.forEach(element => console.log(element));
// expected output: "a"
// expected output: "b"
// expected output: "c"
const array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32]
카버의 코딩일기, 배열 메소드 1 - Array method
생활코딩, 자바스크립트 중급 강좌 #7 - 배열 메소드1(Array methods)