Persistence

렌더링이란 제너럴한 의미에서 렌더링이란 이미지를 나타내는 과정을 의미하고, 리액트에서의 렌더링이란 클래스 컴포넌트의 경우 render 함수의 실행을 말하고 함수형 컴포넌트의 경우는 함수 전체의 실행을 의미한다. (이하 render 함수를 실행한다고 표현하겠다) 참고로 함수형 컴포넌트는 진짜 함수라서 이렇게 쓰지 않고 {Component()} 라고 호출하는 것도 가능하다. 하지만 이렇게 하지 않기를 권장하고 있다. (Don't call function components. Render them.) 다시 말하자면 리액트의 렌더링 = render 함수 실행(혹은 함수형 컴포넌트 실행)이고, render 함수 실행의 결과로 react element tree가 산출된다. React element tree는..

자바스크립트는 싱글 스레드 언어다. 즉 콜 스택이 한 개고, 한 번에 한 가지 일밖에 처리하지 못한다는 뜻이다. one thread == one call stack == one thing at a time 콜스택 function square(n) { return n * n; } function printSquare(n) { var squared = square(n); console.log(squared); } printSquare(4); 콜 스택은 프로그램의 어디가 실행되고 있는지 기록하는 자료 구조다. 만약 함수를 실행하게 되면 그 함수의 실행 컨텍스트를 기록하고(콜 스택에 푸시하고), 그 함수가 반환되면 콜 스택에서 팝한다. 이건 어디까지 했더라? 랑 비슷한 느낌이다. 위 예시처럼 함수 안에 함수가 ..

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

목표: 코딩 테스트 합격하기 습관: 일주일에 프로그래머스 level2 문제 3개 풀기 -> 4개 풀기로 상향(5.17) -> 리트코드로 변경 (6.2) 먼저 리트코드 그리디 문제 50개 풀기로 스타터 단계: 어떤 문제 풀기 정하기 행동 축소: 문제를 하나 다 풀지 않고 작은 문제로 쪼개서 그 부분만 해결하기 / 문제를 풀 수있는 아이디어 생각하기 완전 달성(cleared): 문제 하나 다 풀기 날짜 스타터 단계 / 행동 축소 달성 / 완전 달성 여부 목표 습관 달성 여부 문제 링크 행동 상세 21-03-28 (SUN) 캐시 (O / O) 문자열 압축 (O / O) O 캐시 문자열 압축 LRU 알고리즘(개념 참고 - j2wooooo.tistory.com/121) 21-03-29 (MON) 문자열 압축 의도..

자바스크립트는 다른 언어와 다르게 정수 값과 실수 값을 구분하지 않는다. 모든 숫자를 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 = ..