Im Bay

02 React Hooks useContext useContext란 상태를 공유하는 context (상태 변경 시 모두 다시 랜더링) context는 App 안에서 전역적으로 데이터를 여러 컴포넌트끼리 쉽게 공유할 수 있는 방법 제공 상위 컴포넌트의 data가 필요한 하위 컴포넌트들은 useContext 훅을 사용하여 데이터를 받아온다. Provider로 부터 Consumer까지 value(state) 공유 Provider의 자식들은 해당 context의 상태를 바로 접근 가능 createContext → Context.Provider → Context.Consumer (useContext) import import { createContext } from ‘react’; import { useConte..

02 React Hooks forwardRef forwardRef란 useRef로 부모 컴포넌트에서 외부(자식) 컴포넌트의 DOM 접근할 때 사용 부모에서 선언→ 자신에게 전달→ 자식에서 참조걸기→ 부모에서 컨트롤 import import { forwardRef, useRef } from ‘react’; 사용 예시 App.js에서 const 변수명1 = useRef(); 생성 하위 컴포넌트인 Header 컴포넌트로 전달 Header 컴포넌트에서 const 변수명2 = forwardRef((props, 변수명1) ⇒ { … } ); 생성 그 외 사용 예시 const Header = ({...props}, headerRef) { return ( ); }; export deafult forwardRef(Hea..

02 React Hooks React의 상태 및 life-cycle 관리 상태 관리 Hooks useState useContext (createContext) useReducer 시점 Hooks useLayoutEffect (render 후) useEffect (pain 후) 메모화 Hooks useMemo useCallback memo 그 외 Hooks useRef, useImperativeHandle useDebugValue, useId Hooks의 3 원칙 컴포넌트 영역 안에서만 작동 함수 컴포넌트, 커스텀 훅 내부에서만 호출해야 한다. 기능을 여러 훅으로 나누면 좋다. 나누어 있어도 컴포넌트에서 한번에 순차 호출 함수형 컴포넌트→ 함수→ 기능 단위 분리→ 가독성→ 테스트 및 유지보수에 유리 최상위..

React 시작하기 React Concept virtual-dom from Fibers Tree & Scheduler Alogirithm renderer 랜더링 담당 reconciler DOM의 변경 관리 (비동기) ReactDOM render the REactElements createElement(tag, attr, …children); render(reactElement, reactRoot); React.Component render / ReactDOM / life-cycle 컴포넌트 생성 const Sample = React.createClass({…}); class Sample extends React.Component {…} const Sample = props ⇒ (…); React Conc..

TypeScript - 선언 파일과 구성 및 옵션 global 전역 변수 import, export가 없거나 declare global이면 전역 전역 어디서나 import 없이 사용 가능 window 등 전역 객체에 타입 정의 가능 declare 오직 선언만 한다. 값(초기값)은 허용되지 않는다. (literal type은 가능) 타입 검사(Type Checker) lib 브라우저에서 실행되지 않는 경우 DOM, condole 등을 제거 skipLibCheck 사용되지 않은 소스에서의 선언은 선언 파일 타입 체크도 생략 strict noImplicitAny, strictNullChecks, strictFunctionTypes 모두 활성화 기타 checkJs with alloHs “extends”: “....

TypeScript - 클래스 클래스 메서드 독립 함수와 동일한 방식의 메서드 매개변수 타입이나 기본 값을 지정하지 않으면 any 타입을 기본 값으로 가진다. 메서드를 호출하려면 허용 가능한 수의 인수가 필요하다. 재귀 함수가 아니라면 대부분 반환 타입 유추 가능 메서드 호출 시 올바른 타입의 인수가 올바른 수로 제공되는지 확인하기 위해 타입 검사 실시 클래스 속성(attribute) 클래스의 속성을 읽거나 쓰려면 명시적으로 선언해야 한다. 클래스 속성 - method 모든 prop은 초기화 또는 정의해야 한다. (! 또는 ?는 제외) 클래스 속성 - 초기화 검사 StrictNullCheck On에서 TS는 undefined 타입으로 선언된 각 속성이 생성자에서 할당되었는지 확인 초기화하지 않았다는 것은..

TypeScript - 함수 타입 never 반환 타입 never 반환 함수는 의도적으로 항상 오류를 발생시키거나 무한 루프를 실행하는 함수 ex) function fail(message : string) : **never** { throw new Error(`Invariant Failure : ${message}`); } 함수 오버로드 (function overloading) 동일한 이름의 매개 변수만 다른 여러 버전의 함수를 만드는 것 this this의 타입을 정할 때 함수의 첫번째 매개변수 자리에 this를 쓰고 타입을 입력한다. ex) function 함수명(this: 타입) { …} 하지만 실제로 인자값을 받는 매개변수는 this: 타입을 제외한 나머지이므로 헷갈리면 안된다. TypeScrip..

TypeScript 시작하기 TypeScript JS에 타입을 부여하고, 부여된 타입을 체크하고, 만족하는 JS 코드 생성 2012 년에 microsoft visual studo for JavaScript TypeScript의 구성 프로그래밍 언어 타입 검사기(TypeChecker) 코드의 모든 구성요소(함수, 변수 등)를 이해하고 오류 감별 컴파일러(pre-compiler) TS Syntax-tree를 JS Code로생성 언어지원 서비스(IDE) VSCode, SublimeText, Vim 등 편집기에서 TS 지원 TypeScript Compiler Read TSConfig (tsconfig.json) Pre-process Files Tokenize(Scan) and Parse Binder Type c..

JavaScript - DOM (Document Object Model) DOM (Document Object Model, 문서 객체 모델) 웹 페이지의 컨텐츠, 구조, 스타일을 구조화시켜 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API 제공하는 것 JS 같은 스크립트 언어가 쉽게 웹페이지에 접근하여 조작할 수 있게 연결해주는 역할 DOM 문서의 트리 구조 document node → element node → text node, attribute node document node (문서 노드) 최상위 루트 노드이며 document 객체를 가리킨다. HTML 문서 전체를 나타내는 노드이기도 하다. (그래서 HTML 문서에 document node는 1개만 존재) window.docu..

JavaScript - 모듈(Module) ESM을 써야하는 이유(nodejs) require시에 destructuring(구조 해제)가 된다. → module의 변수 값을 변경할 수 있다. (보안 취약) tree-shaking & bundling Tree shaking (ESM) 죽은 코드 제거의 한 형태 (사용하지 않는 코드 제거) 정적(구문) 분석을 통해 대상 선별 가능 대상: 최상위 코드, 함수 내부와 동적 import에서 사용되지 않는 코드 Bundling : Babel + Webpack/Rollup Bundling 여러 개로 흩어져 있는 파일들을 하나의 파일로 모아주는 역할 Babel JS의 컴파일러이며, 최신 버전의 JS가 실행되지 않는 구 버전의 브라우저에서 정상적으로 실행되도록 변환해준다..