얕은 복사(Shallow copy) 객체를 복사할 때 원래 값과 복사된 값이 같은 참조를 가리키고 있는 것을 말한다. const user = { // key: value name: 'jeong', age: 85, email: ['gyflsakfn@naver.com'] } const copyUser = user console.log(copyUser === user) user.age = 22 console.log('user', user) console.log('copyUer', copyUser) console.log('------') console.log('------') copyUser와 user는 true가 나왔기 때문에 같은 메모리 주소를 바라보고 있다. user의 객체 데이터만 수정 했을 뿐인데 co..
변수에 값을 할당한다는 것은 값의 메모리 주소를 가리키는 것(참조) 임을 유의해야 한다. Immutable type VS Mutable Type 불변성(Immutability)란 말 그대로 변하지 않는 것을 의미한다. 불변 데이터는 한번 생성되고 나면 그 뒤에는 변할 수 없다. 자바스크립트에는 원시 타입(primitive type)이 불변성을 띤다. 원시 타입(primitive type)의 종류 Boolean String Number Null undefined Symbol 원시 타입은 메모리영역 안에서 변경이 불가능하며 변수에 할당할 때 완전히 새로운 값이 만들어져 재할당된다. 원시 타입 이외의 모든 값은 객체(Object) 타입이며 객체 타입은 변경 가능한 값(mutable value)이다. 즉, 객체..
💡학습 전 보기 - 재귀 함수 등 정리 목표 재귀의 정의와 재귀 사용 방법 정의 재귀 함수의 두 가지 필수 구성 요소 이해 호출 스택을 시각화하여 재귀 함수를 더 잘 디버그하고 이해하기 헬퍼 메소드 재귀(helper method recursion)와 순수 재귀(pure recursion) 재귀를 한번에 이해하는 것은 쉽지 않다. 지속적인 반복으로 자신의 것으로 만들자. 재귀(recursion)란? 자기 자신을 호출하는 프로세스 즉, 자기 자신을 호출하는 함수를 의미한다. 재귀를 알아야하는 이유는 무엇일까? 재귀는 어디서든 사용된다. JSON.parse / JSON.stringify document.getElementById and DOM traversal algorithms Object traversal..
스코프(scope): 유효범위 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. 이를 스코프라 한다. 즉, 스코프는 식별자가 유효한 범위를 말한다. 식별자는 어떤 값을 구별할 수 있어야하므로 유일(unique)해야 한다. 따라서 식별자인 변수 이름은 중복될 수 없다. 즉, 하나의 값은 유일한 식별자에 연결(name binding)되어야 한다. function add(x, y) { // 매개변수는 함수 몸체 내부에서만 참조할 수 있다. // 즉, 매개변수의 스코프는 함수 몸체 내부이다. console.log(x, y) // 2 5 return x + y; } add(2, 5); // 매개변수는 함수 몸체 내..
Sliding Wind 한 위치에서 다른 위치로 배열 또는 숫자가 될 수 있는 창을 만드는 것을 의미한다. 특정 조건에 따라 창이 증가하거나 닫힌다. (새 창이 생성됨) 배열이나 문자열과 같은 일련의 데이터를 입력하거나 특정 방식으로 연속적인 해당 데이터의 하위 집합을 찾는 경우에 유용하다. 예시를 들어보자. maxSubarraySum 함수는 정수 배열과 n이라는 숫자를 받아들인다. 함수는 배열에서 연속되는 n개의 요소의 최대 합계를 계산해야 한다. 순수한 해결책 function maxSubarraySum(arr, num) { if(num > arr.length) { return null; } let max = -Infinity; for(let i = 0; i < arr.length - num + 1; ..
Multiple Pointers: 다중 포인터 (공식 이름은 아님) 인텍스나 위치에 해당하는 포인터 또는 값을 만든 다음에 특정 조건에 따라 중간 지점에서부터 시작 지점, 끝 지점 또는 양쪽 지점을 향해 이동시키는 것이다. 공간 복잡성을 최소화하면서 문제를 해결하는데에 매우 효율적이다. 포인터는 배열이나 문자열의 특정 위치를 가리키는 것이다. 예시 1: sumZero함수 입력 값: 오름차순으로 정렬된 정수 배열 출력 값: 합계가 0인 첫 번째 쌍. 쌍이 없을 경우 0으로 합한 값 또는 undefined sumZero([-3,-2,-1,0,1,2,3]) // [-3,3] sumZero([-2,0,1,3]) // undefined sumZero([1,2,3]) // undefined 순진한 해결책 funct..
Lifecycle=생애주기 React의 LifeCycle React는 컴포넌트 기반의 View를 중심으로 한 라이브러리이다. 그러다보니 각각의 컴포넌트에는 라이프 사이클 즉, 컴포넌트의 수명 주기가 존재한다. 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비과정에서 시작하여 페이지에서 사라질 때 끝이난다. 라이프 사이클은 크게 세가지로 Mount(탄생), Update(변화), UnMount(죽음)로 나뉜다. Update(리렌더)는 4가지 상황에서 발생한다. props(외부 상태)가 바뀔 때 state(내부 상태)가 바뀔 때 부모 컴포넌트가 리렌더링될 때 this.forceUpdate로 강제로 렌더링 트리거할 때 컴포넌트의 라이프 사이클을 제어한다는 것은 까다롭지 않다. 단순히 컴포넌트가 탄생하고 변..
React란? - 사용자 인터페이스(UI)를 만들기 위한 JavsScript 라이브러리 왜 React를 사용하는가? ✔️ Component 기반 - 컴포넌트는 UI를 구성하는 개별적인 뷰 단위로서, 생산성과 유지보수를 용이하게 한다. 컴포넌트를 사용하여 요소들의 변화에 쉽게 대응할 수 있고, 중복코드를 줄일 수 있으며 확장성이 좋다. ✔️ 선언형 프로그래밍 절차를 하나하나 나열하는 명령형 프로그래밍(예: jQuery)와 달리, 데이터가 변경됨에 따라 컴포넌트만 효율적으로 갱신하고 렌터링 한다. 선언형 뷰는 코드를 예측 가능하고 디버그하기 쉽게 만들어 준다. ✔️ Virtual DOM 기존의 DOM은 페이지가 바뀔 때마다 새 HTML을 로드하면서 DOM 전체를 변경하는데 Virtual Dom은 실제 DOM..
