Eundms

- React의 Virtual-DOM ? Virtual DOM은 Real DOM과 다르게 전체 중 바뀐 부분만 Reload합니다. 예를 들어, n개의 요소가 있고 그 중에 1개의 요소만 바뀌었다면, Real DOM은 1개의 요소를 바꾸기 위해 전체 n개를 Reload하지만, Virtual Dom은 이전 Snapshot과 비교해서 바뀐 부분만 Real DOM에서 바꿉니다. - DOM Elements Of the Same Type React에서는 className만 바꾸면 된다는 것을 안다. color만 바꾸면 된다는 것을 안다. 컴포넌트 인스턴스는 동일한 유지되어 렌더링간 state가 유지된다. React는 새로운 엘리먼트의 내용을 반영하기 위해 현재 컴포넌트 인스턴스의 props를 갱신한다. UNSAFE..

😎 지식/자바스크립트_타입스크립트_리액트🌐 2021. 6. 21. 17:49

Model One-to-Many Relationships with Document References publisher 정보가 반복되고 있다. 더보기 { title: "MongoDB: The Definitive Guide", author: [ "Kristina Chodorow", "Mike Dirolf" ], published_date: ISODate("2010-09-24"), pages: 216, language: "English", publisher: { name: "O'Reilly Media", founded: 1980, location: "CA" } } { title: "50 Tips and Tricks for MongoDB Developer", author: "Kristina Chodorow",..

😎 지식/자바스크립트_타입스크립트_리액트🌐 2021. 6. 10. 14:29

Model One-to-Many Relationships with Embedded Documents Embedded Document Pattern 더보기 // patron document { _id: "joe", name: "Joe Bookreader" } // address documents { patron_id: "joe", // reference to patron document street: "123 Fake Street", city: "Faketon", state: "MA", zip: "12345" } { patron_id: "joe", street: "1 Some Other Street", city: "Boston", state: "MA", zip: "12345" } 만약, address da..

😎 지식/자바스크립트_타입스크립트_리액트🌐 2021. 6. 10. 13:38

// student document{ _id : 'ohnamju_01', name : 'ohnamju'}// account document{ account_id : 'ohnamju_01', balance : 0,}/* 자주 account 정보에서 name이 필요하다면, */{ _id : 'ohnamju_01', name : 'ohnamju' balance: 0}- 문제점 : 필요하지 않은 데이터도 load 시켜 read를 수행할 때 느려질 수 있음.the most frequently-accessed portion of the data should go in the collection that the application loads first.제일 중요한 점은 우리 어플리케이션이 어떻게 데이터를 사용하는지..

😎 지식/자바스크립트_타입스크립트_리액트🌐 2021. 6. 10. 12:48

4단계. Fetch Data with async/await in react 앞에서는 javascript의 promises 의 then과 catch 블록을 사용했음. 하지만, then() 대신에 async/await statement를 react에서 data를 fetch할 때 사용할 수 있다. import React, { Component } from 'react'; import axios from 'axios'; const API = 'https://hn.algolia.com/api/v1/search?query='; const DEFAULT_QUERY = 'redux'; class App extends Component { ... async componentDidMount() { this.setState..

😎 지식/자바스크립트_타입스크립트_리액트🌐 2021. 5. 27. 15:15

이번 이슈 해결을 위해서, 영어 블로그를 참고하였고, 이를 한국어로 정리한 글입니다. 1단계. Fetch data in React (use native fetch API) https://www.robinwieruch.de/react-fetching-data 리액트 컴포넌트 Tree 중 한 곳에서 Third Party API를 사용한다고 가정하자. Q1. 리액트 어느 컴포넌트에서 Fetch를 진행해야 할까? 고려해야 할 사항 1. 어떤 컴포넌트에서 이 Data가 필요한가 2. 어디에서 로딩 중이라는 표시를 보여주고 싶은가 3. 에러 메시지를 어디에서 보여주고 싶은가? Q2. React LifeCycle Method에서 찾아보자 - componentDidMount() render 함수를 최초로 실행한 후, ..

😎 지식/자바스크립트_타입스크립트_리액트🌐 2021. 5. 27. 10:56