라쿤의 끄적끄적

JavaScript Deep Dive 05 용어 및 중요사항 정리 Strict mode 암묵적 전역 : 변수 키워드 선언 없이 변수에 값을 할당하는 경우, 스코프 체인에 변수가 없음에도, 암묵적으로 전역객체에 해당 변수 식별자를 프로퍼티로 동적으로 생성함 암묵적 전역에 의해 전역 객체에 추가된 프로퍼티는 변수가 아니며, 호이스팅이 발생하지 않고, delete연산자로 삭제가 가능하다 (전역변수는 delete 연산자로 삭제 불가함) Strict mode : 자바스크립트 언어의 문법을 좀더 엄격하게 적용하여 오류를 발생시킬 가능성이 높거나, js엔진의 최적화 작업에 문제를 일으킬수 있는 코드에 대해 명시적인 에러를 발생시킴 'use strict;'를 전역 선두 또는 함수 몸체의 선두에 추가하여 ..

JavaScript Deep Dive 04 용어 및 중요사항 정리 프로토타입 멀티 패러다임 프로그래밍 언어 : 자바스크립트는 명령형, 함수형, 프로토 타입기반 객체지향 프로그래밍을 지원하는 언어임 객체지향 프로그래밍 : 독립적인 객체의 집합으로 객체의 상태 데이터(프로퍼티), 상태를 조작하는 동작(메서드)을 하나의 논리적 단위로 묶어 프로그램을 표현하려는 프로그래밍 패러다임 추상화 : 필요한 속성만 간추려 내어 표현하는 것 객체 : 속성을 통해 여러개의 값을 하나의 단위로 구성한 복합적인 자료구조 상속 : 어떤 객체의 프로퍼터, 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것 자바스크립트는 프로토 타입을 기반으로 상속을 구현 생성자 함수의 prototype이 인스턴스들의 부모 객체 역할을 하게 ..

JavaScript Deep Dive 03 용어 및 중요사항 정리 스코프 스코프 : 식별자가 유효한 범위, 식별자를 검색(식별자 결정)할 때 사용하는 규칙 모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정됨 변수의 이름이 동일한 식별자여도, 스코프가 다르면 별개의 변수임 식별자인 변수 이름의 충돌 방지하여 같은 이름의 변수를 사용할 수 있게 함 같은 스코프에서 식별자는 유일해야 하지만 다른 스코프에는 식별자를 동일하게 사용가능함으로 스코프는 네임스페이스임 var 키워드의 경우 같은 스코프내 중복 식별자 선언이 허용됨(덮어 씌워짐), let은 중복 식별자 선언 허용하지 않음 전역 : 코드의 가장 바깥 영역, 전역 스코프 : 전역에서 만들어진 스코프 전역 ..

JavaScript Deep Dive 02 용어 및 중요사항 정리 타입 변환 타입 변환 : 기존 원시 값을 사용해 다른 타입의 새로운 원시값을 생성하는 것 명시적 타입변환, 암묵적 타입 변환 둘다, 원시값은 변경 불가능한 값(imutable value)이라서 기존 원시값을 직접 변경하는 것은 아님 (부수 효과X, 재할당X) 암묵적 타입 변환(implicit coercion), 타입 강제 변환(type coercion) : 표현식을 평가하는 도중 자바스크립트 엔진에 의해 암묵적으로 변환되는 것 문자열 타입으로 암묵적 변환 문자열 연결 연산자로 (+)가 작용 하는 경우, 문자열 이외의 것들 문자열 타입으로 변환 Type + '' -> 'Type' Symbol 타입의 경우에만 타입..

JavaScript Deep Dive 01 용어 및 중요사항 정리 변수 변수 : 확보한 메모리 공간 자체 or 메모리 공간 식별자 식별자 : 어떤 값을 구별해서 식별할 수 있는 고유한 이름(식별자는 값이 아니라, 메모리 주소를 기억함으로서 메모리 주소에 붙인 이름 역할을 함) 변수선언: 변수를 사용하기 위한 메모리 공간 확보와 변수 이름과 확보된 메모리 공간의 주소 연결 (값 저장 준비, var, let, const) 값 할당 없이 변수선언만 되어도, undefined가 기본으로 할당 되어 초기화 됨 변수 호이스팅 : 변수 선언문이 코드 작성 맨위로 올라 간듯이 동작하는 특징 변수 선언이 런타임 전에 실행되기 때문 (var, let, const, function, function*, class 키워드로 ..

Redux 08 redux-tookit 사용법 createAction, createReducer 방식 store middleware등의 환경을 건들지 안고 바로 적용할 수 있는 방식 하지만, 크게 코드가 줄어 들진 않음 createAction() redux-actions에서 제공하고 있던 createAction()과 같은 방식으로 작동한다. 기존의 Action creator를 세부적으로 만들 필요 없이 actionCreator를 통해서 type, payload 형태의 Actoin을 만들어줌 import { createAction } from "@reduxjs/toolkit"; const getUsersStart = createAction("GET_USERS_START"); const getUsersSuc..

Redux 07 redux-actions 활용과 느낌 기존 환경 redux-actions를 사용하는 경우, 기본적으로 다른 여러가지 패키지들과 사용하게 된다. redux-actions : 리덕스 액션스는 덕스 패턴을 만들때 편하게 작성시켜 코드를 좀더 깔끔하게 해준다. react-redux : redux와 react를 연결할 때 쓰는 Provider, 그리고 react에서 state의 값을 가져오거나, 변경하고자 할때 요청을 useSeletor, useDispatch를 통해서 쉽게 사용할 수 있게함 redux-thunk : 비동기 작업을 Action으로 수행하고, 해당 작업을 통해 가져온 데이터 같은 것을 redux에 반영하게 할 수 있음 redux-devtools-extension : 리덕스 작업시 브..

Algorithm 05 Greedy algorithm(탐욕 알고리즘) 의 이해 Greedy algorithm 또는 탐욕 알고리즘 이라고 불림 최적의 해에 가까운 값을 구하기 위해 사용됨 여러 경우 중 하나를 결정해야 할 때마다, 매순간 최적이라고 생각되는 경우를 선택하는 방식으로 진행해서, 최종적인 값을 구하는 방식 총체적인 고려보단, 현재 활용하는 것에서 최적을 선택 탐욕 알고리즘 예 예시1: 동전 문제 지불해야 하는 값이 4720원 일 때 1원, 50원, 100원, 500원 짜리 동전으로 가장 적은 동전의 수로 값을 지불하는 경우 가장 금액이 큰 동전부터 최대한 지불해서 값을 채우는 방식으로 구현 가능 500원 짜리로 4500원까지 채우기 -> 9개 100원 짜리로 4700원까지 채우기 -> 2개 1..

Algorithm 04 Binary Search (이진 탐색) 탐색할 자료를 둘로 나누어 해당 데이터가 있을만한 곳을 탐색하는 방법 정열이 되어 있다는 가정하에 순차적으로 탐색하지 않고, 중간을 탐색해서 어디에 있는지 판단하는 방식 분할 정복 알고리즘과 이진 탐색 분할 정복 알고리즘 : Divide(문제를 하나 또는 둘 이상으로 분할), Conquer(나눠진 문제가 충분히 작고, 해결가능하면 해결하고 그렇지 않으면 다시 분할함) 이진 탐색: Divide : 리스트를 두 개의 서브 리스트로 나눔 Conquer : 검색할 숫자 > 중간값 -> 뒷부분의 서브 리스트에서 검색할 숫자를 찾음 검색할 숫자 앞부분의 서브 리스트에서 검색할 숫자를 찾음 이진 탐색도 분할 정복 알고리즘에 해당하므로, 전..

Algorithm 03 동적 계획법 (Dynamic Programming)과 분할 정복(Divide and Conquer) 동적 계획법 (DP) 입력 크기가 작은 부분 문제들을 해결한 후, 해당 부분 문제의 해를 활용해서, 보다큰 크기의 부분 문제를 해결, 최종적으로 전체 문제를 해결하는 알고리즘 상향식 접근법으로, 가장 최하위 해답을 구해서 이를 저장하고 해당 결과값을 이용해서 상위 문제를 풀어가는 방식 Memoization 기법을 사용 Memoization(메모이제이션) : 프로그램 실행시 이전에 계산한 값을 저장하여, 다시 계산하지 않도록 하여 전체 실행 속도를 빠르게 하는 기술 작은 문제에서의 결과값을 메모이제이션을 통해서 기억하고, 큰 문제에서는 따로 작은 문제를 다시 실행시키지 않고 기억하고 ..

Algorithm 02 공간 복잡도 시간 복잡도 : 얼마나 빠르게 실행 되는지 공간 복잡도 : 얼마나 많은 저장 공간이 필요한지 실행시간이 짧고, 공간도 적게쓰는 알고리즘이 좋은 알고리즘 둘다 만족시키기는 어려움 완전하진 않지만, 시간과 공간은 반비례적 경향이 있음 최근에는 대용량 시스템이 보편화 되면서, 시간복잡도를 우선시킴 공간 복잡도 대략적인 계산 필요함 기존 알고리즘 문제는 공간 복잡도 고려해서 만들어진 경우가 많아 시간 + 공간 복잡도에 대한 제약 사항이 있음 공간 복잡도 프로그램을 실행 및 완료하는데 필요한 저장공간의 양을 뜻함 총 필요 저장 공간 고정 공간 (알고리즘과 무관한 공간): 코드 저장 공간, 단순 변수 및 상수 가변 공간 (알고리즘 실행과 관련 있는 공간) : 실행 중 동적으로 필..

Algorithm 01 알고리즘 실제로 개발자들이 해당 알고리즘을 하나하나 작성하여 쓰지는 않음, 모두 좋은 패키지로 함수화 되어 나와 있음 그럼에도 익히는 이유는 지금까지 존재하는 알고리즘 중에 잘 만들어진 알고리즘을 익힘으로서 잘 알고리즘을 만들수 방법을 잘 이해하고, 이를 기반으로 새로운 문제들을 풀수 있는 능력을 기르기 위함 알고리즘 연습 방법 효과적인 알고리즘을 작성하기 위해서는 바로 코드를 작성하지 말고, 전통적인 알고리즘 연습 방법으로 진행하자 문제를 쓰고, 연습장에 고안해서 최종적으로 에디터에 코드를 작성해서 테스트를 함 효율적인 알고리즘을 고안을 하고 테스트를 해야함 연습장과 펜 준비 알고리즘 문제를 읽고 분석 간단하게 테스트용으로 매우 간단한 경우부터 복잡한 경우 순서대로 생각해보면서,..

DataStructure 07 Heap (힙) 힙: 데이터에서 최대값과 최소값을 빠르게 찾기 위해 고안된 완전 이진 트리(Complete Binary Tree) 완전 이진 트리: 노드를 삽입할 때 최하단 왼쪽 노드부터 차례대로 삽입하는 트리 힙을 사용하는 이유 배열에 데이터를 넣고, 최대값과 최소값을 찾으려면 O(n)이 걸림 힙에 데이터를 넣고, 최대값, 최소값을 찾으면 O(log n)이 걸림 우선순위 큐와 같이 최대값, 최소값을 빠르게 찾아야 하는 자료구조 및 알고리즘 구현 등에 활용됨 힙(Heap) 구조 힙의 구조는 2 가지로, 최대 값을 구하기 위한 구조(Max Heap) 와 최소값을 구하기 위한 구조(Min Heap) 중에서 1개를 가지게 된다. Max Heap : 최대 값이 root Node를 ..

Redux 06 redux-saga 미들웨어 제너레이터 객체를 만들어 내는 제너레이터 생성 함수를 이용 리덕스 사가 미들웨어를 설정 -> 자신이 만든 사가 함수 등록 -> 사가 미들웨어 실행 -> 등록된 사가함수를 실행할 액션을 디스패치 함 npm i redux-saga redux-saga by 밸로퍼트 아래 부터는 밸로퍼트님의 redux-saga를 참고하여 작성 하였습니다. redux-thunk가 하지 못하는 일을 redux-saga가 할수 있게 해줌 비동기 작업을 할 때 기존 요청 취소 처리 특정 액션 발생시 다른 액션이 디스패치 되게처리 또는 JS 코드 실행 처리 API 요청이 실패 했을 때 재요청 작업 가능 등의 까다로운 비동기 작업들에서 사용 Generator 함수 Generator 함수의 경우..

DataStructure 06 Tree (트리) 자료구조이기도 하지만, 알고리즘 같은 로직도 많이 들어가서 알고리즘의 느낌도 있음 실제로 구현시 난이도가 높음 Tree(트리) : Node와 Branch를 이용해서, 사이클을 이루지 않도록 구성한(사이클 관계X) 데이터 구조 이진 트리 (Binary Tree) 형태의 구조로, 검색 알고리즘 구현을 위해 많이 사용됨 용어 Node : 트리에서 데이터를 저장하는 기본 요소 (데이터와 다른 연결된 도드에 대한 Branch 정보 포함) Root Node : 트리 최상위 노드 Level : 최상위 노드를 Level 0으로 하였을 때, 하위 Branch로 연결된 해당 노드의 깊이 Parent Node : 어떤 노드의 상위 레벨을 이루는 노드 (부모 노드) Child ..

Redux 05 Ducks Pattern 어떤 라이브러리가 아닌, 많은 사람들이 redux를 가지고 코드를 짜는 좋은 패턴을 말함 ducks-modular-redux by JisuPark 기존 redux에서 ActionCreator, reducer, type이 계속 한 벌씩 생성되므로, 이를 한 묶음으로 모듈화 하여 관리하는 패턴을 제안함 ActionCreator, reducer, type을 한벌로 만들어 모듈화 시키고 해당 모듈을 combine하여 하나의 reducer로 만들어 해당 reducer로 store을 만들게 됨 Ducks : 1모듈 규칙 항상 reducer()란 이름의 함수를 export default 해야합니다. Combine시에 해당 파트 이름으로 불러와 사용하면 되기 때문에 항상 모듈의..