Develop/React (14) 썸네일형 리스트형 [Develop/React] React Code Splitting과 cra-bundle-analyzer Code Splitting과 cra-bundle-analyzer React는 빌드되면서 Webpack을 통한 번들링 작업을 하게 된다. cra로 React를 시작할 경우 기본적으로 Webpack, Babel 설정이 되는데 번들링이 되면서 하나로 합쳐진 js는 프로젝트가 커질수록 용량도 커지고 그로 인해 페이지 최초 접속 시 CSR 특성상 리소스들과 하나로 된 js 파일을 불러오는데 오래 걸리게 된다. 따라서 React에서는 코드분할(Code Splitting)을 하라고 설명하고 있다. React 공식문서에도 아래와 같이 설명하고 있다. 코드 분할은 여러분의 앱을 “지연 로딩” 하게 도와주고 앱 사용자에게 획기적인 성능 향상을 하게 합니다. 앱의 코드 양을 줄이지 않고도 사용자가 필요하지 않은 코드를 불러.. [Develop/React] Redux-Saga란? 간단 맛보기 Redux-Saga 맛보기 redux-saga는 redux-thunk와 마찬가지로 redux 미들웨어로써 redux 사용 시 비동기 요청의 side effect를 줄이기 위해서 사용된다. 지금까지 redux-thunk를 사용하거나 컴포넌트에서 비동기 요청을 직접 처리했었다. redux-saga를 공부하고 적용해보면서 redux-thunk와는 다르게 effect를 관리하는 많은 기능들이 확실히 유연하고 좋다고 생각했다. redux-saga 문서에는 redux-saga 는 애플리케이션 부작용 (예 : 데이터 가져오기와 같은 비동기 작업 및 브라우저 캐시 액세스와 같은 불순한 작업)을 더 쉽게 관리하고, 실행하기 쉽고, 테스트하기 쉽고, 오류 처리를 더 잘하는 것을 목표로 하는 라이브러리입니다.라고 설명되어있.. [Develop/React] React, GraphQL, Apollo 맛보기 React, GraphQL, Apollo 맛보기 GraphQL을 공부하면서 서버를 간단하게 개발해보고 이후 적용할 만한 프로젝트가 있으면 사용해보고자 했지만 하면서 프론트엔드에는 어떤 식으로 Apollo가 Redux를 대체할 수 있다는 것인지와 프론트엔드에 간단하게라도 붙여보고 싶어 테스트를 해본 경험을 공유하고자 한다. Express, GraphQL, Apollo Server 작업 진행 시 서버 구현에 대한 정보가 궁금하다면 아래 포스팅을 참조 hoons-up.tistory.com/53 [Develop/Node&Express] Express / GraphQL / Appllo 맛보기 2 (Mysql) Express / GraphQL / Appllo 맛보기 2 (Mysql) 이번에는 Expess, Grap.. [Develop/React] React Create-React-App(CRA) 환경변수 간단사용 (dotenv) React Create-React-App(CRA) 환경변수 간단 사용 (dotenv) React Create React App(CRA)은 개발자가 Babel이나 webpack 같은 build 도구를 별다른 설치 과정과 설정 없이도 동작할 수있도록 도와준다. CRA로 React Project를 진행할 경우 dotenv를 포함하게 되는데 dotenv는 project의 환경 별로 프로젝트 구성을 제공할 수 있도록 해준다. 즉, development, test, production.. 등 각 환경에 맞춘 변수들을 제공하여 줄 수 있다. CRA로 시작하면 dotenv가 package에 포함되어있다. 간단 사용 방법 먼저 dotenv는 .env 파일을 따른다. Project의 src 아래에 아래의 이름으로 파일을 .. [Develop/React] object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. 이슈 React 이슈 정리 어처구니없는 실수로 인하여 시간을 소비한 경험으로 인하여 블로그 포스팅을 작성한다. Route를 이용하여 각 page를 설정하고 실행했는데 아래와 같은 에러 문구가 표출되었다. Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. 위 내용을 조금만 자세히 읽었더라면.. [Develop/React] immer 정리 immer 정리 리덕스를 사용하면서 액션 타입, 액션 생성 함수, 리듀서를 수정하면서 state에 새로운 객체 반환을 위해 ...을 이용한 전개 연산자와 slice함수를 통하여 객체를 반환하였다. 불변성을 유지하기 위해 다른 포스팅에서 Immutable이라는 라이브러리을 정리했었다. 아래는 Immutable 정리 포스팅이다. [Develop/React] Immutable 정리 Immutable 정리 리엑트 공부 중 리덕스를 사용하면서 액션 타입, 액션 생성 함수, 리듀서를 수정하면서 새로운 객체 반환을 위해 ...을 이용한 전개연산자와 slice함수로 새로운 수정된 새로운 객체를 반환 하였.. hoons-up.tistory.com 프로젝트를 진행하면서 불변성을 유지하면서 업데이트하는 immer이라는 라이.. [Develop/React] create-react-app 절대경로 설정 React 절대경로 설정 컴포넌트나 모듈 사용 시 import를 사용해서 가져다 쓰는데 이때 경로설정을 보통은 기본적으로 상대 경로로 한다. 상대 경로 사용 시 디렉토리 구조가 깊어 질수록 ../../../ 을 사용하게 되어 복잡해질 수 밖에 없다. 따라서 아래와 같이 디렉토리 구조에 맞춰 융통성 있게 상대 경로와 절대 경로를 사용 할 수 있도록 절대 경로 설정 방법을 알아보자. MacOS 일 경우 package.json 파일에 scripts 부분에 start, build 앞에 NODE_PATH를 추가하여 아래와 같이 수정 "scripts": { "start": "NODE_PATH=src react-scripts start", "build": "NODE_PATH=src react-scripts build.. [Develop/React] proxy 수동 설정(setupProxy) proxy 수동 설정(setupProxy) 브라우저에서 출처가 다른 즉 host나 port가 다른 백엔드 서버로 API 요청 시 호출할 때 발생할 수 있는 CORS 관련 오류를 방지하기 위하여 Proxy를 설정하여 준다. 간단하게 설정하는 방법과 수동으로 커스터마이징하는 방법을 정리한다. 해당 proxy 설정을 통하여 로컬 환경에서는 처리하지만 추후 정적인 소스를 서버에 배포하여 API요청을 위해서는 nginx나 apache의 proxy 설정을 해주면 된다. 혹 netlify를 사용했다면 netlify에서도 아래와 설명할 pathRewrite 설정 할 수 있으니 알맞게 설정하면 된다. 테스트는 VLOEERT BLOG에서 API 예시를 사용했다. 첫번째 방법 package.json를 통한 설정 "brows.. 이전 1 2 다음
