Persistence

history 객체에서 가장 중요한 정보는 location이고, 이 location은 URL로부터 뽑아낼 수 있는 정보들(pathname, search, hash)와 그 외 추가적인 것들(key, state)로 구성돼있다. (URL 기초에 대한 포스팅은 여기) key는 각 location에 따른 유니크한 값이다. state는 URL에는 존재하지 않는 데이터를 해당 location에 붙이고 싶을 때 사용된다. 회사에서 location state를 사용했던 유스케이스는, SPA에서 새로고침하면 redux state가 클리어되고 이에 따라 api를 재요청하는 부분을 개선하고자 location state를 부분적으로 사용했던 것이었다. location state를 사용하면 새로고침하더라도 state가 클리어되지..

현상 크롬 dev 환경으로 빌드했는데, 해당 에러 페이지가 뜨면서 정상적인 페이지가 노출되지 않음 사파리에서는 정상 작동 크롬 시크릿 모드에서도 정상 작동 콘솔 찍어보니 IndexedDB를 불러오기는 하는데 오브젝트 스토어가 비어있음. 해결 비슷한 사례 존재. cache clear랑 뭔가 관련이 있는 것 같다는 생각. 구글 디벨로퍼 페이지에서 이런 말을 발견 Because of this, it's critically important that you always implement proper error handling in your IndexedDB code. This also means it's generally a good idea to keep application state in memory (i..

C의 자료형과 크기 bool: 불리언, 1바이트 char: 문자, 1바이트 int: 정수, 4바이트 float: 실수, 4바이트 long: (더 큰) 정수, 8바이트 double: (더 큰) 실수, 8바이트 string: 문자열, ? 바이트 (빌트인 타입 아님) char과 string C에서는 char은 싱글 quote, string은 더블 quote로 나타낸다. #include int main(void) { char c1 = 'H'; char c2 = 'I'; printf("%i %i\n", c1, c2); // 형식지정자를 c가 아닌 i로 하고, c1이나 c2를 int로 캐스팅하지 않아도 상응하는 아스키코드 숫자가 출력된다 } int는 4바이트, char은 1바이트 이렇게 정해져있는 반면, strin..

피보나치 수열 문제: 피보나치 수열에서 n번째 오는 값을 구하시오. e.g. n이 6일 때, 1, 1, 2, 3, 5, 8 ... 이므로 답은 8 재귀로 아래처럼 간단하게 풀 수 있으나, 이 방법은 O(2^n) 시간 복잡도를 가진다. def fib(n): if n == 1 or n == 2: return 1 return fib(n-2) + fib(n-1) 시간 복잡도를 생각하는 방법은, 아래와 같은 예시를 생각해보면 된다. 위의 피보나치 수열을 구하는 재귀와 밑의 코드의 시간복잡도는 비슷하리라 짐작할 수 있다. 하나의 n에서 두 개의 가지를 뻗어서 자기 자신을 재호출하고 있는 구조이기 때문이다. -1씩 깎이는 거나 -2씩 깎이는거는 나중에 가면 상수값이 되어서 빅오표기법에서는 의미가 없다. (이 영상 의..

컴퓨터에는 메모리라는 것이 있다. 우리가 연산하고 저장하는 것들은 메모리라는 유한한 공간 내에서 이뤄진다. 즉, 하드웨어는 유한하므로 한계를 가진다. 예시로는 아래와 같은 것들이 있다. 부동소수점의 부정확성 부동소수점이란, 실수를 컴퓨터 상에서 근사치로 표현할 때 소수점의 위치를 고정하지 않고 위치를 나타내는 수를 따로 적는 것을 의미한다. #include #include int main(void) { float x = get_float("x: "); float y = get_float("y: "); printf("x/y = %.50f\n", x/y); } 위 처럼 실수 x, y를 받아서 나누어주는 간단한 코드가 있다고 할 때 x에 1을 넣고 y에 10을 넣어준다면 0.1000000 ... 이 나올 것으..

switchMap 파라미터: 소스 옵저버블의 각 아이템에 적용될 함수. (e.g. of(1,2,3) 이면 1과 2와 3에 각각 적용될 함수) 이 함수는 옵저버블을 리턴한다. 즉 2차원으로 중첩된 옵저버블이 원래라면 생기게 된다. 이걸 간단히 배열로 생각하자면 [1,2,3].map($0 => [$0 * 2]) 이런 식으로 생각할 수 있다. 즉 map의 소스가 되는 아이도 배열이고, map 메서드의 파라미터로 주어지는 함수도 배열을 리턴하면, 결과는 2차원 배열이 되는 것처럼 생각하면 된다. (배열을 옵저버블로 치환해서 생각하면 됨) rx에서 모든 연산자는 옵저버블 인스턴스를 리턴하도록 되어있기 때문에, 옵저버블에 연산자를 매핑하면 원래라면 중첩된 옵저버블이 생기게 되는 것이다. 하지만 중첩된 옵저버블은 r..

자바스크립트 엔진이 데이터를 저장할 수 있는 두 곳이 있다. 메모리 힙과 스택이다. Heap: dynamic memory allocation object, function을 저장하는 장소. 스택과 달리 정해진 양만큼 할당하는 것이 아니고 필요에 따라 늘어날 수 있다. 데이터 사이즈는 런타임에 알 수 있다. 이 프로세스는 dynamic memory allocation이라고 한다. Stack: static memory allocation 스태틱 데이터를 저장하기 위해 사용하는 자료 구조. 스태틱 데이터는 엔진이 컴파일 타임에 사이즈를 아는 데이터. (Prmitive values and references) 사이즈를 이미 알고 있기 때문에 정해진 양의 메모리만 할당한다. 실행 직전에 메모리를 할당하는 프로세스..

컴퓨터는 binary로 말한다. 즉 2진법, 0과 1밖에는 사용할 줄 모른다. 예를 들어 10진법으로 5인 숫자를 표현하기 위해서, 컴퓨터는 2진법 101로 표현한다. 이 2진법은 스위치를 끄고 키는 방식으로 표현될 수 있다. 즉 스위치를 켜면 1, 스위치를 끄면 0 이렇게 생각할 수 있다. 스위치를 키고 끄기 위해서는 전기가 필요하다. 전기가 들어오면 스위치가 켜지고 1을 나타내고, 전기가 다시 빠져나가면 스위치가 꺼지고 0을 나타낸다고 생각할 수 있다. 이것이 컴퓨터 안의 트랜지스터가 하는 일이다. 컴퓨터에서 0과 1로 2진법 한자리수를 나타내는 단위를 비트(bit)라고 한다. 즉 10진법 숫자 5는 2진법 101로 표현될 수 있고, 이는 3비트가 필요한 것이다. 그런데 커다란 데이터를 표현하기 위해..

URL이란? URL(Uniform resource locator)이란, 리소스 식별자이다. resource locator라는 말에서 알 수 있듯이, 리소스가 어딨는지 알려주는 아이라는 것이다. 우리는 웹에서 무수한 리소스들을 주고 받는다. 이미지, 텍스트, 동영상 등 모든 콘텐츠 소스를 리소스라고 보면 된다. 그런데 우리가 웹에서 보는 이 '리소스'들은 어디에서 오는 것인가? 그 리소스들의 주소를 알려주는 것이 URL이다. HTTP 간단하게 HTTP를 짚고 넘어가자. HTTP란 HyperText Transfer Protocol의 약어로, 인터넷 상에서 데이터를 주고 받기 위한 프로토콜의 일종이다. 프로토콜이란 규약이라는 뜻인데, 인터넷 통신을 하기 위해서는 정해진 형식이 있어야 하고, 널리..

이제 면접을 보러 다니면서 받은 질문들을 정리하고 내가 몰랐던 부분, 대답이 미흡했던 부분 등을 더 공부해서 보완할 생각이다. 다음 면접은 더 잘볼 수 있길 바라는 마음으로 작성한다.. :) React, Redux 테스트를 고려해서 코드를 짠 경험이 있는지 MobX랑 리덕스 차이 리액트 훅에 대해 설명해보시오 리액트에서 arrow function을 사용하면 일반 함수를 쓰는 것과 어떤 차이가 있는지 Java 제네릭(Generic)에 대해 설명해보시오 HTML, CSS Semantic HTML에 대해 설명해보시오 CSS를 사용해 수평정렬을 할 때 주로 사용하는 방법 JavaScript 불변 객체를 만드는 방법으로 무엇을 사용하는가 자바스크립트에서 비동기를 설명해보시오 프로미스와 어싱크 어웨이트의 차이점을 ..

Rotation point 찾기 문제 문제 a부터 z 순으로 적혀진 사전을 읽다가 모르는 단어가 나오면 단어장에 기입하는 작업을 하려고 한다. 단, 사전의 어느 중간부터 펴서 이 작업을 시작한다. 그래서 뒤로 가면서 이 작업을 수행하다가 사전의 끝에 도달하면 사전의 처음부터 시작해서 처음에 폈던 페이지 전까지 이 작업을 한다. 이 모르는 단어는 배열에 순서대로 저장하여, 예시를 들면 다음과 같은 형태가 된다. ['ptolemaic','retrograde', 'supplant', 'xenoepist', 'asymtote', 'babka'] 알파벳 오름차순으로 진행되다가 사전의 끝까지 찾고 나면 다시 앞에서부터 시작하기 때..

퀵 정렬(Quick sort) 컴퓨터 언어에는 대부분 배열을 정렬하는 내장 정렬 함수가 있는데, 대다수가 내부적으로는 퀵 정렬 방법을 택하고 있다. 그 만큼 퀵정렬이 빠르기 때문이다. 퀵 정렬은 최악의 경우에는 삽입정렬이나 선택정렬 만큼 느리지만 대부분의 경우인 평균 시나리오에서는 훨씬 빠르다. 퀵 정렬은 분할(partition) 에 기반하고 있으며 이 분할이 재귀적으로 일어나는 과정을 통해 정렬된다. 분할 배열을 분할한다는 것은 피벗(기준 원소)를 기준으로, 피벗의 왼쪽에는 피벗보다 작은 수를 두고, 피벗의 오른쪽에는 피벗보다 큰 수를 두는 것을 말한다. [0,5,2,1,6,3] 이라는 배열을 가정하자. 피벗을 정렬되지 않은 배열의 가장 오른쪽 원소라고 정하자. 그러면 맨 오른쪽 위치의 3 이 피벗이 ..

파이썬에서 함수에 인자를 전달하는 방식 - Call by object reference 함수에 인자를 전달할 때 사용하는 방식은 크게 2가지다. Call by value Call by reference 그런데 파이썬은, call by object reference란다. (…?) Call by Value def print_val(val): val += 10 print(val) i = 2 print_val(i) # 12 print(i) # 2 파이썬이기 때문에 Call by value라고 하면 안 되겠지만, 어쨌든 결과는 유사하므로 call by value라고 가정하자. Call by value는 i가 print_val의 인자로 넘겨졌을 때 i가 담고 있는 값인 2가 복사되어 val에 할당된 것이다. 그러므..

선택 정렬(Selection sort) 단순 정렬(Simple sort) 중 하나로, 속도는 느린 편(평균적으로 O(n^{2}), quadratic time)이지만 최악의 경우를 가정했을 때 버블소트보다 2배 가량 빠르다. 가정 배열(Array) 정렬을 가정한다. 정렬되지 않은 배열을 오름차순으로 정렬한다. 배열의 길이는 n이다. 순서 index 0 원소를 temp라는 변수에 저장한다. 그 다음 index 1부터 index n-1 까지 순회하면서 temp보다 작은 값이 있는지 비교 한다. 만약 비교 결과 temp보다 작은 값이 있으면 그 값을 temp에 재할당한다. 이렇게 한 번 패스 스루(정해진 범위의 배열을 한 번 훑는 것)를 끝내고 나면, temp에는 전체 배열 원소값 중 최소값이 저장되어 있을 것..

버블 정렬(Bubble sort) 단순 정렬(Simple sort) 중 하나로, 속도는 느린 편(평균적으로 O(n^2), quadratic time)이지만 간단하게 구현할 수 있는 장점이 있다. 마치 버블이 이동하듯이 가장 큰 수가 왼쪽에서 오른쪽(배열의 앞에서 뒷쪽)으로 이동한다고 해서 버블 정렬이다. 가정 버블소트는 배열(Array) 정렬을 가정한다. 정렬되지 않은 배열을 오름차순으로 정렬한다. 배열의 길이는 n이다. 순서 배열의 가장 처음부터(index 0부터) 원소 2개씩 비교 한다. 즉 arr[0], arr[1]을 비교해서 arr[0] > arr[1] 이면 순서를 바꾼다. 아니면 그냥 Pass한다. arr[1]과 arr[2]에도 똑같이 한다. arr[n-2]과 arr[n-1]까지 똑같이 한다. ..