20210616 DataStructure 01 : 자료구조, 알고리즘, Jupyter notebook, Array(1차, 2차 배열), 문제
DataStructure 01 DataStructure & Algorithm (자료구조와 알고리즘) 자료구조 용어 : 자료구조, 데이터 구조, data structure 대량의 데이터를 효율적으로 관리할 수 있는 데이터의 구조를 의미 코드상에서 효율적으로 데이터를 처리하기 위해, 데이터 특성에 따라, 체계적으로 데이터를 구조화 해야함 어떤 데이터 구조를 사용하느냐에 따라, 코드 효율이 달라짐 효율적 데이터를 관리하는 예 우편번호, 학생 관리(학년, 반, 번호) -> 특정 데이터를 효율적으로 찾을 수 있음 대표적인 자료구조 배열, 스택, 큐, 링크드 리스트, 해쉬 테이블, 힙 등... 알고리즘 용어: 알고리즘, algorithm 어떤 문제를 풀기 위한 절차/ 방법 어떤 문제에 대해, 특정한 입력을 넣으면,..
20210614 React13 : createPortal(특정 요소에 하위 요소 추가하기), forwardRef(후손 ref 사용하기), SPA 배포(Deploy)특징&이해, Serve패키지 배포, AWS S3 배포, Express 배포, SSR 이해, express를 통한 SSR
React 13 React.createPortal : 요소 보내기 React : Portals 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법 의도하는 실제 DOM Element(부모)에 자식, 후손 요소들을 어디에서 든지 createPortal로 만들어진 Component를 통해 넣을 수 있음 서로 동등한 위치의 A, B Element라도 A에서 작성한 후손 Element를 B의 후손 Element로 들어 갈수 있게 A에서 작성 가능함 다른 곳에서 집어 넣었다고 하더라도 이벤트 버블링은 portal인지 아닌지 상관 없이 부모 Component로(React 기준으로, 실제 DOM 기준이 아니고) 전달 됨 // Modal.jsx : Portal 사용 import ..
20210613 React12 : Life Cycle 도표 이해하기, Reconciliation, Render 최적화 하기, react의 같은 component 인식, key Prop, shouldComponentUpdate, PureComponent, 함수를 prop으로 전달시 주의, Function Component render 제어(React...
React 12 Life Cycle 도표 React Advanced Optimzing Performance 필요할 때만 render 하여, 최적화 시키는 작업 즉, 불필요한 render를 줄이는 방법 Reconciliation (조정) 대전제 -> 훨씬 효율적으로 Rerender 컨트롤 가능 랜더 전후의 일치 여부를 판단하는 규칙 서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어 낸다. 개발자가 key prop을 통해, 여러 렌더링 사이에서 어떤 자식 엘리먼트가 변경되지 않아야 할지 표시해 줄 수 있다. 서로 다른 타입의 element를 부모로 하는 Component의 차이 (Unmount, Mount) 같은 컴포넌트()를 render 하지만, 상위 타입이 다르기 때문에 두개는 다르다고 인식 ->..
20210610 React08 : Additional Hooks(useReducer, useMemo, useCallback, useRef), React-router Hooks(useHistory, useParams), Custom Hooks & HOC (useWindowWith, useHasMounted, withHasMounted)
React 08 Custom Hooks customHooks : useWindowWidth() 브라우저 창 가로가 변경 되었을 때 변경된 숫자를 받아오는 hook state를 활용해서 재사용 할 수 있는 hook을 만들어 냄 (따로 관리 함) window.innerWidth -> 현재 브라우저의 가로 값을 가져옴 resize event -> resize 함수 실행 (state에 변경된 width값을 지정) -> state 값이 변경되어 return 값이 width를 rerender 함 // useWindowWidth.js import { useEffect, useState } from "react"; export default function useWindowWidth() { const [width, s..
20210607 React05 : Style Loders, CSS, SASS, CSS module, SASS module, classNames 라이브러리(객체 key module.css로 만들기), 객체 value 생략표현
React 05 React Component Styling Style Loders Style을 적용하기 위한 파일들이 동작하기 위함 배포용 파일로 변화시키기 위한 설정들로 4가지 방식이 있음 CSS, CSS Module, Sass, Sass Module 위의 4개의 type에 webpack에서 loader를 붙이고 설정하여 사용하게 됨 // webpack.config.js // style files regexes const cssRegex = /\.css$/; const cssModuleRegex = /\.module\.css$/; const sassRegex = /\.(scss|sass)$/; const sassModuleRegex = /\.module\.(scss|sass)$/; CSS, SASS 기..
20210607 React04 : Routing(path, id, queryString 방식) URLSearchParams, query-string 패키지, Switch-NotFound, JSX링크로 라우팅 이동(RRD : Link, NavLink), JS로 라우팅 이동(RRD: history, withRouter, Redirect)
React 04 Dynamic Routing URL을 동적으로 입력하는 방법 Path에 id값 사용 방식 Router에서 Route에 연결한 라우트 Component의 경우 path에 :이름을 붙여서 url을 표현 하게 되면 해당 Component 함수에서 받아오는 인자 (props)의 경우 객체이다. 그 객체는 해당 객체의 match에 params 안에 path로 지정한 이름으로 key를 가지는 key-value의 구조로 가지게 됨 자동으로 params 객체에 이름: '1' 의 item을 가지게 됨 :를 사용하는 경우 필수 요소라서 /profile/:id의 표현인 경우 /profile를 포함한다고 인식하고, 이처럼 따로 라우트 처리를 해줘야 함 // id라는 이름으로 path를 붙인 경우..
