개발

useMemo

https://youtu.be/e-CnI8Q5RY4 (상기 영상과 코드스테이츠 유어클래스 내용을 참고하여 공부 내용을 정리합니다.) 1. useMemo 개념 설명 리액트 컴포넌트의 성능 최적화를 위해 사용되는 대표적인 hook들인 useMemo와 useCallback에 대해 알아보자. (useCallback은 별도 문서에 정리) Memoization useMemo의 memo는 memoization을 뜻한다. 메모이제이션이란 어떠한 커다란 문제를 풀 경우에 문제를 중복되는 하위 문제가 있고, 이 하위 문제의 결과를 저장해서 상위의 문제를 해결할 수 있는 경우에 하위 문제의 결괏값을 저장해두어 상위문제를 풀 때 연산횟수를 줄일 수 있는 방법을 말한다. 자세한 내용은 이전에 작성한 동적 프로그래밍 정리 내용을..

[React] Redux 상태관리

1. 상태 관리 라이브러리가 왜 필요할까? Props Drilling 공통된 부모 컴포넌트는 조상인 최상위 컴포넌트 뿐인 공통된 부모 컴포넌트가 없는 2개의 컴포넌트에서 각각 사용되는 상태가 있다고 가정할 때, 기존 리액트 데이터 흐름에 따르면 최상위 컴포넌트에 상태를 위치시키는게 적합하다. 하지만 이런 경우, 해당 상태를 직접 사용하지 않는 최상위 컴포넌트, 부모 컴포넌트들도 상태 데이터를 가지며 해당 컴포넌트가 사용하지도 않는 상태인데도 상태를 써야 하는 자식 컴포넌트까지 props를 내려주거나 상태를 끌어올리는 이벤트 드릴링이 일어나야 하므로 데이터 흐름이 복잡해지고 컴포넌트 구조의 변경이 생기는 경우 데이터 흐름을 완전히 바꿔야 할 수도 있는 등 유연하게 대처할 수 없어 매우 비효율적이다. 따라서..

DP(동적 프로그래밍) 자바스크립트 구현/ 작성중

동적 프로그래밍 Colt Steele 저자의 유데미 Javascript 자료구조 & 알고리즘 강의를 바탕으로 공부 내용을 정리합니다. 1. 정의 동적 프로그래밍은 복잡한 문제를 더 간단한 하위 문제들의 모음으로 분해하여 각각의 하위 문제들을 풀고 그 답을 저장하는 방식으로 문제를 푸는 방법이다. 모든 문제들에 적용 가능한 방식은 아니지만 동적 프로그래밍을 적용할 수 있는 문제의 경우엔 코드의 성능에서 큰 이점을 가진다. DP 요구조건 1 - 중첩되는 하위 문제가 있어야 한다. 대표 유형: 피보나치 수열 문제 문제 내에서 어떤 방식으로든 반복되는 하위 문제들이 있어야 한다. 즉, 하나의 커다란 문제를 더 작은 문제들로 나눌수 있으며 그 나뉜 작은 문제들을 재사용 가능해야 한다. 피보나치 수열은 모든 숫자가..

REST API

REST API 학습 목표 REST API에 대해 이해할 수 있다. REST 성숙도 모델에 대해 이해할 수 있다. REST API 문서를 읽을 수 있다. REST API에 맞춰 디자인할 수 있다. Open API와 API Key에 대해 이해할 수 있다. Chapter1-1. REST API 디자인 REST API란? 웹에서 사용되는 데이터나 자원을 HTTP URI로 표현하고 HTTP 프로토콜을 통해 “요청”과 “응답”을 정의하는 방식을 말한다. 클라이언트가 서버에게 원활하게 HTTP 프로토콜을 통해 “요청”하고 “응답”을 받기 위해 사용자가 알아보기 쉽도록 REST API를 디자인해야 한다. 쉽게 설명해서 이용자가 편리하게 주문할 수 있도록 메뉴판을 알아보기 쉽게 짜야 한다. Richardson 성숙도 ..

자바스크립트로 설명하는 재귀함수

1. 재귀함수 재귀: 자기 자신을 호출하는 절차. 재귀 호출: 함수가 자기 자신을 호출하는 것.(recursive call) 재귀 함수: 재귀 호출을 수행하는 함수. 즉 자기 자신을 호출하는 함수를 말한다. 재귀 함수는 반복되는 처리 를 위해 사용한다. 주로 아래 경우에서 많이 사용한다. JSON.parse() 를 호출하는 JSON.parse() 팩토리얼 DOM 순회 객체 순회 자료구조 구현 모든 경우에서 반복문을 대체함이 아닌, 재귀함수를 사용하는 것이 더 코드를 이해하기 쉬운 경우에 사용한다. 탈출 조건이 없으면 무한반복 하여 스택 오버플로우 되므로 반드시 탈출 조건이 주어져야 한다! (탈출 조건: base case) 반복되면서 입력받을 값 또한 계속 바뀌어야 한다. 그렇지 않으면 계속 같은 값만 확..

[자바스크립트] 호이스팅, 스코프, 클로저, spread, rest, 구조분해할당

참고자료 함수 표현식 vs 함수 선언식 클로저 5분만에 이해하기 나머지 매개변수, 전개 구문(Rest parameters, Spread syntax) 구조 분해 할당 모던 자바스크립트 딥 다이브 26장, 35장, 36장 *상기 자료들을 참조하여 작성하였습니다. 1. 호이스팅 1.1 함수 선언문과 함수 표현식의 차이 // func1: 함수 선언문 // func2: 함수 표현식 func1(); // declaration func2(); // Uncaught ReferenceError: func2 is not defined function func1 () { return console.log('declaration'); } const func2 = function () { return console.log('..

모던 자바스크립트 딥 다이브 7장 연산자 내용 정리

7장 연산자 학습 목표 7.1.2 - 증감연산자의 전위/ 후위 위치별 수행순서 7.1.3 문자열 연결 연산자의 암묵적 형변환, 7.3 - 동등비교연산자의 암묵적 형변환 7.4 - 복잡한 삼항 연산자 문제들 7.5 - 단축 평가로 if문 대체하기 예시 소개 7.11 , 7.12 - 연산자의 부수효과와 우선순위 코드로 이해하기 7.13 - 연산자의 결합 순서 코드로 이해하기 피연산자 연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만든다. 이때 연산의 대상을 피연산자(operand)라 한다. (p 74) ‘하나 이상’이므로, 피연산자가 한 개여도 됨. 피연산자: 연산의 대상이 되는 값(표현식)이다. 따라서 반드시 값으로 평가될 수 있어야 한다. ..

[자바스크립트] 원시 타입과 참조 타입

참고자료 모던 자바스크립트 딥 다이브 서적 11장 - 원시 값과 객체의 비교 메모리 영역에서의 heap과 stack 신입 개발자 전공 지식 & 기술 면접 백과사전 원시 값과 참조 값의 비교 자바스크립트에서 제공하는 7가지 데이터 타입(숫자, 문자열, 불리언, null, undefined, symbol, 객체) 중에서 객체를 제외한 나머지 6개 모두 원시 타입이다. 원시 타입과 객체 타입의 가장 큰 차이점 3가지 원시 값은 변경 불가능한 값(immutable value)이다. 참조 값은 변경 가능한 값(mutable value)이다. 원시 값을 변수에 할당하면 변수에는 실제 값이 저장된다. 객체를 변수에 할당하면 참조 값이 저장된다. 주의: 변수에 값이 저장되는 것이 아니라 해당 변수(식별자)와 name ..

[자바스크립트] 모던 자바스크립트 딥 다이브 5장 표현식과 문 내용정리

딥다이브 5장 - 표현식과 문 5. 표현식과 문 학습목표 표현식으로 인정되는 다양한 경우에 대해 이해하기 문(statement)과 표현식(expression)의 명확한 정의와 서로의 차이에 대해 이해하기 표현식인 문과 표현식이 아닌 문 이해하기 들어가기에 앞서 Node.js REPL(27쪽) REPL이란: Read-Eval-Print-loop 입력 - 사용자 입력을 판독하는 자바 스크립트는 입력 데이터의 구조를 분석하고 메모리에 저장된다. 평가 - 파싱(분석)된 자바스크립트 자료구조는 결괏값을 내기 위해 평가된다. 출력 - 결괏값이 평가 후 출력된다. 반복 - 입력 과정부터 반복한다. Read : It reads the inputs from users and parses it into JavaScript..

[자바스크립트] 모던 자바스크립트 딥 다이브 4장 변수 내용 정리

4.1 변수란? 사용하는 이유? 변수의 뜻 값을 저장하기 위해 확보한 ’메모리 공간 자체' 또는 1번의 메모리 공간을 식별하기 위해 붙인 이름 사용하는 이유 값을 저장하여 재사용 하기 위해 값의 저장은 메모리에 저장하고, 연산은 cpu에서 한다. 4.2 식별자 식별자는 원하는 값을 구별, 식별 할 수 있는 고유의 이름을 뜻하며, 식별자는 메모리 주소를 저장하고 있다. 식별자의 종류: 변수명, 함수명, 클래스명 등 식별자 네이밍 규칙을 준수해야 하는 이유: 연산자 기호가 포함되어 있는 경우 자바스크립트 엔진이 식으로 판단하는 경우가 있음. 4.3 변수 선언 변수를 선언 한다는 것: 해당 식별자를 저장할 메모리의 주소값을 확보하는 것 변수의 생성과정 값을 저장하기 위한 메모리 공간 확보 변수 이름과 확보된 ..