vite create react app 을 사용할때 나오는 문제점을 해결하려고 사용. vite의 가장 큰 장점은 빌드 속도나 새로운 코드를 적용했을때 반영 속도 같은 피드백 속도의 빠른 성능을 가지고 있습니다. 기존 브라우저에서 ES모듈을 사용할 수 있기 전에는 개발자에 모듈화된 방식으로 javascript를 작성하는 기본 메커니즘이 없었습니다. 시간이 지남에 따라 webpack,Rollup, Parcel과 같은 도구로 번들링을 해결했습니다. 그러나 더 큰 애플리케이션을 구축하기 시작하면서 처리하는 javascript의 양이 기하수적으로 증가 하여 성능 병목현상이 발생하기 시작하였습니다. 예를 들어 서버 가동에 오랜시간이 걸리거나 브라우제에 반영되는 것이 몇초가 걸리는 문제들인데 vite는 이러한 문제를..

React 는 각 기능의 컴포넌트를 각각 나눠서 사용해야 재사용성면 그리고 성능 면에서도 효율적이다. 이렇게 나누어진 컴포넌트를 랜더링 할때 변화된 부분만 새로 보여주는 역할을 할수 있도록 해주는것이 Memo 이다. 하지만 항상 사용해서 좋은 것은 아니기 때문에 성능 분석 후 필요시 사용하는 것이 좋다. React는 컴포넌트를 렌더링 한뒤 이전에 렌더링 된 결과와 비교화여 DOM 업데이트를 결정한다. 만약 렌데링 결과가 이전과 다르다면 DOM을 업데이트 한다. 이 과정에서 컴포넌트가 React.memo(컴포넌트)로 둘러쌓여 있다면, React는 컴포넌트를 렌더링하고 결과를 메모이징한다. 그다음 렌더링이 일어날때 렌더링하는 컴포넌트의 props가 같다면 React는 메모이징된 내용을 재사용한다. 매개 변수..

Router 페이지 불러오기 / 네비게이션 기능 1. 구조 셋팅 1-1. 라이브러리 설치 npm install react-router-dom react-router-dom : web 에서 사용 react-router-native : app 에서 사용 react-router : web / app 에서 사용 1-2. 폴더 경로 생성 컴포넌트 역할에 맞는 폴더 생성하여 분리하여 관리 src 폴더안에 컴포넌트 경로를 생성해준다. components : 기능 별 컴포넌트 routes : 라우터가 보여줄 화면 컴포넌트 2. 라이브러리 적용 2-1. BrowerRouter & HashRouter BrowerRouter html5 history API 를 활용해서 UI를 업데이트 동적인 페이지에 적합 새로고침 시 경로..

axios 사용과 영화 데이터 가져오기 1. 라이브러리 설치 npm install axios 데이터를 읽어올때 사용하는 라이브러리 설치 2. 영화데이터 제공 사이트 https://yts.mx/api#list_movies 3. 크롬 확장프로그램 : JSON 문서 확인 크롬 확장기능 json view 에서 API를 통해 받아올 수 있는 데이터, json 문서를 깔끔하게 확인 가능하다. 사용 가능한 데이터로 변경 https://yts-proxy.now.sh/list_movies.json 4. 프로젝트 적용 3-1. axios 적용 📑App.js import React from "react"; import axios from "axios"; class App extends React.Component { sta..

React Hooks React Hooks란 2018년 발표된 class 없이 state를 사용할 수 있는 기능입니다. 기존 리액트는 주로 클래스 컴포넌트를 사용하였는데 리액트 혹스는 함수형 컴포넌트를 사용한다. 1. Class Component Vs Functional Component Class Component Functional Component 많은 기능 제공 적은 기능 제공 긴 코드양 짧은 코드양 복잡한 코드 심플한 코드 더딘 성능 빠른성능 1-1 생명주기 Functional Component 어떤 기능을 사용하지 못하는 걸까? => React Hooks가 없었을 때 생명주기 사용 불가 현제 React Hooks로 생명주기도 사용이 가능하다. 1-2. HOC (wrapper) 컴포넌트를 줄일 ..