인생은 반복문

npm 사이트에 'dydrlaks-utils' 라이브러리 배포. *추후 자주 쓰이는 컴포넌트들을 모아놓은 라이브러리를 npm에 배포해서 쉽게 재활용하기 위해 연습 대략적으로 해야하는 것들 정리 1. npm에 가입 2. 워크스페이스(개발 환경)에서 npm login 진행하기 3. npm init으로 패키지 설정 4. typescript, node/types를 devDependencies에 설치 5. tsconfig 파일 생성 및 outDir에 dist 입력, declaration에 true 입력, include에 src 포함 6. tsc 스크립트 실행 및 dist 폴더 생성(package.json 'scripts'에 publish 전 tsc를 진행하도록 자동화 걸어두면 편리함) 7. package.json..

1. 재귀와 스택 * 재귀란? 함수 내에서 자기 자신을 호출하는 함수. * 특정 자료구조를 처리하기 위해서도 활용된다(ex: HTML 태그 같은 트리 구조의 데이터를 처리할 때라던가) * 반복문과 비교했을 때, 더 많은 실행 컨텍스트 생성으로 인해 내부적으로 더 많은 메모리를 요구하기에 성능적으로는 좋지 않지만 코드가 명확해지고 유지보수가 쉬워진다는 점은 장점이라고 볼 수 있다.(성능도 그렇게 체감되게 안좋아지지 않는다) * 실행 컨텍스트는 함수가 호출될 때 1회 생성된다. (실행 컨텍스트: 함수 수행과 관련된 상세 정보가 저장되는 자료구조, 저장되는 정보로는 제어 위치, 변수, this 등이 있음) 함수가 호출되고 내부에서 한 번 더 함수가 호출되면 현재 호출중인 함수에 대한 실행 컨텍스트의 제어흐름 ..

1. 원시값의 메서드 원시 값에 대해 프로퍼티 혹은 메서드에 접근하려하면 원시 래퍼 객체가 만들어지며 이를 통해 원시 값 관련 메서드나 프로퍼티를 사용할 수 있다. 이후 원시 값은 남지만 원시 래퍼 객체는 사라진다. 이를 통해 원시 값은 가볍게 유지하되, 원시 값 관련 메서드 혹은 프로퍼티엔 접근할 수 있게 되어 코드가 간결해질 수 있다. *원시 래퍼 객체 생성자로 값을 생성하진 말자. *형변환을 할땐 원시 래퍼 객체를 사용하자. 2. 숫자형 숫자 관련 유용한 메서드: Math.floor, Math.round, Math.ceil, Math.toFixed, Math.max, Math.min, Math.random, Math.pow, isNaN 알게된 사실: 1. toFixed는 문자열을 반환한다.(단항 +..

1. 객체 객체는 프로퍼티들의 집합 프로퍼티는 키와 값으로 구성됨 키는 문자형, 값은 모든 자료형 허용 객체는 생성자 문법, 리터럴 문법 두 가지 방법으로 선언 가능 user 객체의 프로퍼티 접근: user.name; user 객체에 프로퍼티 추가: user.name = 'John'; user 객체에서 프로퍼티 삭제: delete user.name; 동적으로 user 객체의 프로퍼티에 접근하는 법: user[dynamicKey] 객체 안에 특정 프로퍼티가 존재하는지 검사하는 법: 'name' in user; 객체 안에 프로퍼티를 순회하는 법: for (key in user) { ... } 객체 프로퍼티의 이름(key)으로는 예약어 사용 가능 객체의 프로퍼티의 이름으로 숫자형을 사용하더라도 자동으로 문자형..

React는 세 단계로 화면을 그린다. 1. trigger: render를 수행시킨다. 초기 렌더링, 컴포넌트의 상태 변경이 trigger에 해당한다. 2. render: React는 상태 갱신이 발생한 컴포넌트들을 호출(랜더링)한다. 호출된 컴포넌트의 하위 컴포넌트들도 React가 호출한다. 끝자락 컴포넌트에 도달할 때까지 React는 컴포넌트들을 계속 호출한다. 이를 통해 React가 화면에 다시 그려야할 컴포넌트들을 파악한다. 3. commit: React는 대상 컴포넌트들을 랜더링 한 후, DOM에 변경된 컴포넌트들만 반영한다.(이전 렌더링 결과와의 차이에 대해서만 DOM에 반영) *React가 DOM을 갱신하면 브라우저가 화면을 다시 그린다. 출처: https://react.dev/learn/..

Choosing the State Structure 1. Group related state: 항상 같이 갱신되어야하는 상태가 2개 이상 존재한다면 object, array 등으로 묶어 한꺼번에 관리하는 것을 고려하자. 2. Avoid contracdictions in state: 모순되는 상태 관계를 구축하지 마라. 예를들어 로딩 단계에 대해 isLoading, isDone 로 상태를 2개 두어 관리한다고 해보자. 코드 작성 과정에서 한 개의 상태라도 갱신을 빠트리는 경우, state 간의 모순이 생길 수 있다. 이런 경우는 loadingState(init | loading | done) 처럼 하나의 상태만을 두어 관리하는 것이 안전하다. 3. Avoid redundant state: 불필요한 상태를 ..

redux-saga에서 yield call을 통해 정의해놓은 클래스 인스턴스의 멤버 함수를 호출하려고 보니, 멤버 함수 속 this가 null을 참조하고 있었다. 처음에는 클래스 생성자로 인스턴스를 생성할 때 인수 전달이 제대로 안되었나보다 하고 console.log를 찍어가며 디버깅 해보았지만 값은 잘 들어가고 있었다. 혹시 몰라 yield call 대신 함수 직접 호출을 해보니 동작이 잘 되었다. 이유가 궁금하여 찾았더니 아래 스택 오버 플로우 글을 찾았다. 링크: https://stackoverflow.com/questions/58397875/reference-to-this-is-null-in-function-called-by-redux-saga-call Reference to "this" is n..

정의: 리액트 컴포넌트 여러 개가 같은 값을 바라보며 동일하게 갱신되어야하는 경우, 제일 가까운 공통 부모 컴포넌트로 state를 끌어올린다. 이것을 "state lifting up"라고 한다. 깨달음: 컴포넌트를 설계할 때 필요한 데이터를 prop으로 받을 지 state로 정의할 지 고민을 하게 되는 경우가 잦았는데, 결정의 근거로 state lifting up 가능성을 고려해야겠다. state vs prop 고민에서 선택의 근거가 좀 더 명확해질거 같다. "편하게 넘겨주는거 쓰는게 좋으니까 prop으로 결정하자! => 주변 컴포넌트와의 관계를 봤을 때 state lifting up을 가능성이 매우 높으니 prop으로 전달받자!"