Persistence

문제 상황 material-ui의 drawer 컴포넌트를 사용하고 있음 부모 컴포넌트(검색 결과를 리스트로 보여주는 페이지)가 자식 컴포넌트인 drawer에게 state(인원 수)를 넘겨줌. drawer는 부모 컴포넌트로부터 받은 인원 수로 state를 초기화하고, drawer내에서 인원 수를 변동시킬 수 있음. drawer 내에서 인원 수를 변동시킨 다음 저장 버튼을 누르면 drawer가 닫히면서 바뀐 인원 수로 검색 api 재호출하여 그 결과를 부모 컴포넌트인 리스트 페이지에 렌더링함. 그런데 문제는 api call이 백그라운드에서 진행되고 있을 때, drawer를 열어서 인원 수를 조작하고 있는 상황에서, api 호출이 끝나고 리스트가 렌더링되면, drawer에서 조작하고 있던 인원 수가 다시 초기..

부모 컴포넌트에서 count라는 state를 갖고 있고 이를 prop를 내려줄 때, 자식 컴포넌트에서 이를 받아 state의 초기값으로 삼았다고 하자. 이후, 부모 컴포넌트에서 갖고 있는 count 값이 변동된다면 자식 컴포넌트가 표시하고 있는 state는 어떻게 될까? 변하지 않는다. 그 이유는 컴포넌트 생성자(constructer)는 컴포넌트가 마운트될 때 한 번만 실행되기 때문이다. constructer는 this.state의 초기값 적용, 인스턴스에 이벤트 처리 메서드를 바인딩 하기 위해 사용한다. class ChildComponent extends Component { constructer() { super(props); this.state = { count: this.props.value };..

잘못된 코드 #include void swap(int a, int b); int main(void) { int x = 1; int y = 2; swap(x, y); printf("x: %i, y: %i\n", x, y); // 여전히 x는 1, y는 2 } void swap(int a, int b) { int tmp = a; a = b; b = tmp; } 위 코드는 swap함수 안의 a와 b의 값을 바꾸기는 하지만, main 함수 안에 x와 y는 바꾸지 못한다. 왜냐면 swap함수로 전달되는 값은 복사된 값(pass by value)이기 때문이다. (참고로 C언어는 자바스크립트나 파이썬과 같은 언어와 달리 전부 pass by value로 넘어간다. object랑 비슷하게 생긴 struct도 마찬가지다...

문자열 복사하기 #include #include #include #include int main(void) { char *s = get_string("s: "); // leo char *t = s; t[0] = toupper(t[0]); printf("s: %s\n, s"); // Leo printf("t: %t\n, t"); // Leo } t에 s를 할당하고, t의 첫글자를 uppercase로 바꾸고 난 뒤 t와 s를 출력하면 두 개 모두 첫글자가 대문자로 출력된다. 왜냐하면 t는 s가 갖고 있는 주소를 가리키고 있기 때문이다. 즉 s가 갖는 주소에 있는 값이 변하면, t도 동일한 것을 보고 있으므로 역시 똑같이 변한 값이 출력된다. #include #include #include #include i..

any와 unknown 모두 모든 타입들의 super set이다. 즉 어떤 타입도 any와 unknown에 넣을 수 있다. 하지만 unknown은 자기 자신과 any를 제외한 다른 타입에 할당할 수 없다. (Anything is assignable to unknown but unknown isn't assignable to anything but itself and any) const vAny: any = 10; // any에 어떤 것도 집어넣을 수 있다. const vUnknown: unknown = 10; // any처럼 unknown에도 어떤 것도 집어넣을 수 있다. let s1: string = vAny; // any는 어떤 것에도 집어넣어진다. let s2: string = vUnknown; /..

string s = "LEO"; 사실 c에는 string이라는 자료형이 없다. 그 간 string이라는 자료형은 만들어진 것이며, 이를 사용하기 위해 라이브러리에서 불러온다는 것은 알고 있었다. 그렇다면 string 자료형은 내부적으로 어떻게 구현이 되어있는 것일까? 전에도 언급했듯이 string은 단지 char의 배열이다. 내부적으로 보면 메모리에 L, E, O, \0(널 종단문자) 순서대로 저장되어있을 것이다. 그러면 변수 s는 어떤 값을 저장하고 있는 것인가? 변수 s는 char 배열의 가장 첫 번째 글자인 L이 위치한 메모리 주소를 값으로 갖고 있다. 즉, s는 포인터 변수이다. s는 char 배열의 첫 번째 글자의 주소만 알고 있고, 그 주소에서부터 시작해서 널 종단 문자가 나올 때까지 loop..

현상 Gradle을 brew로 설치한 후, 설치가 잘 되었나 확인해보려고 gradle -v 을 치니 다음과 같은 에러가 출력됨. ERROR: JAVA_HOME is set to an invalid directory: /usr/local/opt/openjdk/bin/java Please set the JAVA_HOME variable in your environment to match the location of your Java installation. 해결(MacOS) 첫 번째로 자바가 설치되어있는지 확인해봄. java --version 치니 openJDK가 설치되어 있다고 나온다. 두 번째로 자바가 어디 설치돼 있는지 확인해봄. which java 로 자바 위치 확인. JAVA_HOME과 자바 설치 ..

16진수 16진수는 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F 로 숫자를 나타낸다. 0에서 9까지는 10진수와 값이 동일하고, A는 10, B는 11, C는 12, D는 13, E는 14, F는 15를 나타낸다. 즉 16진수에서는 한자리 수로 0에서부터 15까지 표현할 수 있다. 그런데 위에서 보다시피, 0에서부터 9까지는 10진수와 동일한 값이라서 10진수와 헷갈릴 우려가 있다. 그래서 16진수에서는 모든 수 앞에 0x 를 붙인다. 이건 아무런 의미가 없고 그냥 16진수라는 뜻으로 붙인다. 예를 들어 16진수의 0은 0x0 으로 표기한다. 그렇다면 이해를 돕기 위해 2진수를 16진수로 바꾸어보자. 8비트가 나타낼 수 있는 가장 큰 수는 255이다. 2진수로는 1..

히스토리 타입 브라우저 히스토리 해시 히스토리 메모리 히스토리 브라우저 히스토리와 해시 히스토리는 둘 다 브라우저 환경에서 사용된다. 브라우저 히스토리와 해시 히스토리는 현재 location이 브라우저의 주소창에 띄워져있는 것과 일치하도록 한다. const browserHistory = createBrowserHistory() const hashHistory = createHashHistory() 이 두 개의 가장 큰 차이는 url의 어떤 부분으로부터 로케이션 객체를 생성하느냐이다. 브라우저 히스토리는 전체 url을 사용하는 반면, 해시 히스토리는 url에서 첫번째 해시 심볼 이후에 나타난 부분만 사용한다. url = 'http://www.example./com/path/name?key=value#has..

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..

컴퓨터에는 메모리라는 것이 있다. 우리가 연산하고 저장하는 것들은 메모리라는 유한한 공간 내에서 이뤄진다. 즉, 하드웨어는 유한하므로 한계를 가진다. 예시로는 아래와 같은 것들이 있다. 부동소수점의 부정확성 부동소수점이란, 실수를 컴퓨터 상에서 근사치로 표현할 때 소수점의 위치를 고정하지 않고 위치를 나타내는 수를 따로 적는 것을 의미한다. #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) 사이즈를 이미 알고 있기 때문에 정해진 양의 메모리만 할당한다. 실행 직전에 메모리를 할당하는 프로세스..