스프레드 연산자 - 객체, 배열, 문자열 등 반복 가능한 객체를 개발적인 값으로 분리할 수 있는 ES6에 추가된 문법 - 기존의 객체 or 배열을 독립적으로 복사하기 위해서 concat, split, map 등의 방법을 사용했지만 스프레드 연산자(...)를 이용하여 보다 쉽게 복사가 가능(참조 X 독립 O) - 이 때, 여기서 말하는 복사는 얕은 복사임(원본 배열 내에 객체가 있는 경우 참조가 되며, 배열 내의 객체 값을 변경할 경우 원본 배열도 동일하게 변경된다.) 그대로 할당(배열 참조) const arr1 = [1, 2, 3]; const newArr = arr2; newArr.push(4); console.log(arr1); // [1, 2, 3, 4]; console.log(newArr); //..
e.stopPropagation() - 현재 이벤트가 이벤트 버블링 또는 캡처링 과정을 통해 상위 또는 하위 요소로 전파되는 것을 막아줌 - 사용 예시: 버튼을 클릭했을 때 그 버튼을 포함하는 상위 요소에서도 클릭 이벤트가 처리되는 것을 막고 싶을 때 사용 e.preventDefault() - 이벤트의 기본 동작을 취소할 때 사용 - 사용 예시: 태그의 클릭 이벤트는 URL로의 이동을 하는 기본 동작을 가지고, 폼 제출 이벤트는 데이터 전송을 기본 동작으로 가지고 있는데, 이러한 기본 동작을 막아줌 적용 - 해당 아이템이 '완료' 상태일 때 클릭 이벤트 전파 방지를 위해 event.stopPropagation(); 사용 const TodoList = ({ items, onListClick, onItemC..
JS 코드를 작성하다보면 이와같은 에러가 발생할 수 있는데, html이 로드되기 전에 값을 불러오는 과정에서 null값이기 때문에 발생하는 에러이다. 이에 대한 해결 방법으로는 요소를 불러오는 변수를 useEffect 내에 작성을 하면 된다. (useEffect 내에 작성하게 되면 html 로드된 이후에 값을 불러올 수 있다.)
html, css → 뷰의 역할만 한다 Vue 주요 속성 el Vue 인스턴스를 바인딩 할 DOM 요소 지정 data(Model) Vue에서 관리할 JS 객체 DOM 요소와 바인딩 될 데이터 template 작성하지 않은 경우 el에 지정된 DOM 요소를 template으로 사용 작성한 경우 el에 지정된 DOM을 template에 작성된 DOM요소로 대체 Vue의 라이프 사이클(중요) Create 뷰 인스턴스에 data 속성, methods 속성을 정의 beforeCreate, created created : data 속성, methods 속성에 접근이 가능함, 뷰 인스턴스가 화면에 부착되기 전(mount), 서버로부터 데이터를 요청하기 가장 적합 Mount DOM에 뷰 인스턴스를 연결 beforeMo..
ES5까지 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 것이었다. var 키워드로 선언된 변수는 아래와 같은 특징이 있다. 이는 다른 언어와는 다른 특징으로 주의를 기울이지 않으면 심각한 문제를 일으킨다. 함수레벨 스코프 함수의 코드 블록만을 스코프로 인정한다. 따라서 전역 함수 외부에서 생성한 변수는 모두 전역변수이다. 이는 전역변수를 남발할 가능성을 높인다. for 문의 변수 선언문에서 선언한 변수를 for 문의 코드 블록 외부에서 참조할 수 있다. var 키워드 생략 허용 : 암묵적 전역 변수를 양산할 가능성이 크다 변수 중복 선언 허용 : 의도하지 않은 변수값의 변경이 일어날 가능성이 크다 변수 호이스팅 : 변수를 선언하기 이전에 참조할 수 있다. 대부분의 문제는 전역 변수로 인..
Hooks가 생기기 전에는 state를 함수형 component에 사용할 수 없었음 우리가 state를 가지고 작업하고 싶을 때 class component 형태로 만들어야 했음 → class component는 this와 같은 문장 규칙, render와 같은 사용하는 방법을 고려해야 했다 → 이러한 class component 방식은 비교적 코드가 매우 길어지는 단점이 있었다. Hooks는 리액트 state machine에 연결하는 기본적인 방법이다. 더 이상 class를 사용하지 않고 모든것이 함수형 프로그래밍이 된다. useState 초기 state를 initialState를 세팅할 수 있는 옵션 제공 ex) const [item, setItem] = useState(0); useState는 배열을..
얕은복사 vs 깊은복사 스코프(블록범위, 함수범위) 재귀함수(recursion) 콜백함수(callback) 다른함수의 매개변수로 전달되어 수행되어지는 함수 call by * @값에 의한 복사@로 함수 내에서 매개 변수 값을 변경 시켜도 영향이 미치지 않음 @원시 타입@을 매개 변수로 넘겼을 때 발생 call by reference 주소에 대한 복사로 함수 내에서 매개변수 내 값을 변경시키면 원본 데이터에도 영향을 받음 @객체 타입@을 매개변수로 넘겼을 때 발생 Object.getOwnPropertyDescriptors -> 객체의 상세설명 확인가능 객체에 저장된 값이 함수인경우 -> 메서드 this -> 메서드에서 객체 내부의 속성값을 접근할 수 있는 지시자 Number 대표적인 Number 상수 값 N..
호이스팅(Hoisting) Javascript에서 호이스팅이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미 var로 선언한 변수의 경우 호이스팅시 undefined로 변수를 초기화 한다 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않는다 호이스팅은 ES6 이전의 표준 명세에서는 나타나지 않았음 var변수와 함수 선언문에서만 호이스팅이 일어남 변수 선언이 함수 선언보다 위로 끌어 올려짐 let/const 변수 선언 및 함수 표현식에서는 호이스팅 발생 X 그렇다면 함수 표현식보다 함수 선언문이 무조건 옳은 것인가? 일부 코딩 컨벤션에서는 함수 표현식을 권장하기도 한다. 결론적으로, 어떤 컨벤션을 갖던지 한 가지만 정해서 사용하는 것이 좋다. ..
