Persistence

this를 이미 한 차례 정리하긴 했지만(https://developer-alle.tistory.com/327) 이번에는 this 바인딩 예시 위주의 포스팅을 해보려고 한다. this의 개념 객체지향 프로그래밍에서 객체는 상태(state)를 나타내는 프로퍼티와 동작(behavior)을 나타내는 메서드를 하나의 단위로 묶은 자료 구조다. 동작을 나타내는 메서드는 자기 자신이 속한 객체의 상태를 참조하고 변경할 수도 있어야 한다. 이 때, 자기 자신이 속한 객체를 참조하기 위한 식별자가 this다. 즉 this 는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 식별자다. this의 결정 방식 다른 언어들과는 다르게 자바스크립트에서 this는 함수가 호출되는 방식에 따라 동적으로 결정된다..

const obj = { log: ['a', 'b', 'c'], // 메서드 latest() { if (this.log.length === 0) { return undefined; } return this.log[this.log.length - 1]; } }; console.log(obj.latest()); // c const obj = { log: ['a', 'b', 'c'], // getter get latest() { if (this.log.length === 0) { return undefined; } return this.log[this.log.length - 1]; } }; console.log(obj.latest()); // Uncaught TypeError: obj.latest is not..

자바스크립트는 다른 언어와 다르게 정수 값과 실수 값을 구분하지 않는다. 모든 숫자를 64비트 실수로 표현한다. (double이라고 생각하면 될 듯하다) 하지만 배열 인덱싱이나 비트 연산과 같은 특정한 연산은 32비트 정수로 수행한다. 자바스크립트는 10진수 리터럴 외에도 16진수 값을 인식한다. (e.g. 0xff) 자바스크립트의 산술 연산 자바스크립트의 산술 연산은 오버플로(Overflow), 언더플로(Underflow), 0으로 나누는 에러를 발생시키지 않는다. 산술 연산의 결과가 표현할 수 있는 값보다 더 큰 경우 양수에서는 Infinity라는 무한대 값을 출력하고, 음수에서는 -Infinity를 출력한다. 언더플로는 표현할 수 있는 가장 작은 값보다 0에 더 가까운 값인 경우 발생하는데, 이 때..

자바스크립트 프로그램은 Unicode 문자 집합을 사용해 작성된다. 식별자(identifier)는 간단히 말해 이름이다. 변수나 함수에 이름을 붙이거나 루프에서 쓸 레이블을 붙이는 데 사용된다. 자바스크립트 식별자는 알파벳, 언더바(_), 달러($) 사인으로 시작하여야 한다. 자바스크립트에서의 세미콜론(;)은 문장과 문장을 구분하는 용도이다. 만약 프로그래머가 세미콜론을 작성하지 않고 줄바꿈을 한 경우에는, 자바스크립트 인터프리터는 이어서 해석할 수 있는 데까지 최대한 길게 끊어서 줄바꿈을 세미콜론으로 인식한다. var a var b = 3 a // undefined b // 3 예를 들어 첫 번째 예제에서는 var a = 3; a; 로 해석하여, a를 부르면 3을 돌려준다.단 이것에 예외가 2가지 있다..

ArrayBuffer 자바스크립트의 어레이 버퍼는 다른 언어에서의 '바이트 어레이'와 같은 개념이다. 바이너리 데이터를 저장하는, 바이트들로 구성된 배열이다. 어레이 버퍼는 직접적으로 조작할 수는 없지만 typed array object나 DataView 객체를 만들어서 버퍼 컨텐츠를 저장할 수 있다. 생성자 안에 길이를 인자로 주면 그 길이 만큼의 어레이 버퍼가 생성된다. 아니면 이미 존재하는 데이터로부터 어레이 버퍼를 생성할 수도 있다. 예를 들어 Base64 스트링으로부터 생성할 수 있다. (Base64란 이진 데이터를 텍스트(아스키 스트링)로 인코딩하는 방법을 말한다.) 아까 어레이 버퍼는 직접 조작할 수 없다고 했으므로 typed array를 생성해서 이를 다뤄볼 수 있는데, typed arra..

HTTP 트랜잭션은 상태가 없다(stateless). 각 요청 및 응답은 독립적으로 일어난다. 하지만 웹사이트는 사용자의 상태를 남기고 싶어한다. 예를 들어서 로그인하지 않고도 장바구니에 담은 기록이 유지되도록 하고 싶을 수 있다. 상태를 유지하려면 웹사이트는 각 사용자에게서 오는 HTTP 트랜잭션을 식별할 방법이 필요하다. HTTP가 사용자를 식별하는 방법에는 아래와 같은 것들이 있는데, 쿠키에 대해서만 보려고 한다. 식별 정보가 있는 HTTP 헤더 클라이언트 IP 주소 추적 사용자 로그인 인증 URL에 식별자를 포함하는 fat url 쿠키 쿠키 쿠키는 일종의 클라이언트 상태 정보로, 사용자를 식별하기 위해 서버가 생성하여 브라우저에게 전달하는 것이다. 브라우저는 받은 쿠키를 갖고 있다가 유효한 서버에..

타입과 인터페이스는 대부분 기능이 비슷하지만, 가장 구분되는 점은 타입은 만들어지고 나면 새로운 프로퍼티를 추가할 수 없지만, 인터페이스는 항상 가능하다는 것이다. 인터페이스 확장 with extends interface Animal { name: string } interface Bear extends Animal { honey: boolean } const bear = getBear() bear.name bear.honey 타입 확장 with intersection type Animal = { name: string } type Bear = Animal & { honey: Boolean } const bear = getBear() bear.name bear.honey 이렇듯 확장해서 새로운 타입 또는..

자바스크립트 클래스 필드 원래 자바스크립트의 클래스에서 인스턴스 프로퍼티는 constructor 내부에, 프로토타입 메서드 또는 정적 메서드는 클래스 몸체에 선언해야 한다. class Person { constructor(name) { // name은 인스턴스 프로퍼티 this.name = name; } // printName은 프로토타입 메서드 printName() { console.log(this.name); } } 참고로 이건 이 포스팅 내용과는 상관 없지만 위 코드는 아래 코드랑 거의 비슷하다. 생성자 함수 방식에서는 프로토타입 메서드를 만들려면 프로토타입 프로퍼티에 접근해서 메서드를 추가해야 하지만 클래스에서는 그냥 정의하면 프로토타입 메서드가 된다. const Person = (function..

React hook 중에 useImperativeHandle 이라는 훅이 있다. 이 훅은 forwardRef 를 사용해서 ref를 사용하는 부모 측에서 커스터마이징된 메서드를 사용할 수 있게 해준다. 예를 들어 아래처럼 정의하면, function ParentComponent() { // inputRef라는 동아줄을 만들어서 자식에게 보낸다 const inputRef = useRef(); return ( inputRef.current.realllyFocus()}>포커스 ) } function FancyInput(props, ref) { // 부모가 내려준 동아줄 ref에다가 이것 저것 작업을 한다 // 부모는 이 로직에 대해 모르고, 위로 끌어올리지 않고도 그냥 ref.current로 접근하여 사용만 하면..

리액트에서는 컴포넌트가 언마운트된 상태에서 setState() 가 호출되면 워닝을 표시한다. 언마운트된 컴포넌트에 setState()를 호출하는 것은 클린 업이 제대로 안돼서 컴포넌트가 언마운트된 다음에도 앱이 그 컴포넌트에 대한 참조를 가지고 있다는 뜻이고, 이는 메모리 누수를 일으킬 가능성이 있기 때문이다. 그래서 예전에는 지금은 deprecated된 isMounted() 로 마운트됐는지 조건을 체크한 다음 setState()를 호출하게 했는데, 이게 바람직하지 않은 이유는 워닝을 받아야 할 때에도 워닝을 받지 못할 경우가 생기기 때문이다. 그래서 _isMounted라는 프로퍼티를 만들어서 componentDidMount 에서 _isMounted를 true로 설정하고 componentWillUnmou..

프로토타입이란 자신의 상위 객체(또는 부모 객체) 역할을 하는 객체로서, 하위(자식) 객체에 프로퍼티와 메서드를 상속한다. 즉 객체는 프로토타입으로부터 메서드를 포함한 프로퍼티들을 상속받는다. 이 상속을 통해 불필요한 중복을 제거할 수 있는데, 예시를 들어보자. // 컨스트럭터(생성자 함수) function Circle(radius) { this.radius = radius this.getArea = function() { return Math.PI * this.radius ** 2; } } // 생성자 함수로 인스턴스 생성 var circle1 = new Circle(1); var circle2 = new Circle(2); circle1.getArea === circle2.getArea; // fal..

스코프 스코프(유효 범위)란 해당 변수가 정의되어 있는 영역, 즉 정의된 변수를 사용할 수 있는 소스코드의 집합. 자바스크립트는 블록 스코프(block scope)가 아닌 함수 스코프를 사용하므로, 함수 내에 정의된 변수는 해당 함수 내에서만 사용할 수 있고 유효하다. 함수 스코프라는 것은 함수 내에서 정의된 변수는 그 함수의 전체에 걸쳐서 유효하다는 뜻이다. (스코프는 유효 범위라는 뜻이니까 함수 스코프 -> 선언된 함수 내라면 어디에서도 유효하다) 이는 변수가 미처 선언되기도 전에 유효하다는 뜻이고, 이런 현상을 호이스팅(hoisting)이라고 일컫는다. var scope = "global"; function f() { console.log(scope); // undefined var scope = ..

현상 패키지 매니저는 yarn 사용 중, apollo 버전 ^2.30.1, graphql 버전 ^15.3.0 apollo client로 codegen 하는 스크립트를 실행하였더니, graphql 인스턴스가 중복됐다는 에러가 나온다. Error: Cannot use GraphQLSchema "[object GraphQLSchema]" from another module or realm. Ensure that there is only one instance of "graphql" in the node_modules directory. If different versions of "graphql" are the dependencies of other relied on modules, use "resolutio..

프로젝트를 할 때 라이브러리를 포함한 외부 패키지를 갖다 쓰는 것은 흔한 일이다. 이미 만들어져있는 코드를 가져다가 사용만 하는 것이기 때문에, 프로젝트가 이 외부 패키지들에게 '의존하고 있다'고 표현해도 될 것이다. 프로젝트가 의존하고 있는 패키지들의 목록이 열거된 파일이 package.json이며, 이 파일의 dependencies 라는 객체에 패키지명과 미니멈 버전들이 나열돼 있다. Semantic Versioning 예시를 들어보자. "dependencies": { "graphql": "^15.3.0" } package.json 파일에 위처럼 써있다면 이 프로젝트는 graphql 패키지에 의존하고 있음을 나타내는 것이다. 그리고 graphql 패키지의 버전은 ^15.3.0 이라고 쓰여있는데, 이 ..

먼저 노드를 구현한다. C에서 구조체(struct)로 node를 정의할 수 있다. 배열처럼 인접한 셀들의 메모리 chunk가 아니라, 떨어진 메모리를 연결하는 것이기 때문에 자신의 값과 다음 노드의 주소를 가리키는 값(포인터)을 가지고 있어야 한다. 이 구조체를 node라고 한다면 다음 노드의 주소를 가리키는 next라는 포인터 변수는 node 타입을 값으로 갖고 있으므로 node *로 선언한다. 그러면 아래처럼 node라는 struct를 구성할 수 있을 것 같다. 하지만 여기서 하나 문제는, 맨 마지막 줄을 읽을 때까지 C는 여기에 node라는 struct가 있음을 알지 못하는데, 이미 그 전에 node *next 를 선언한다는 것이다. typedef struct { int number; node *n..