React&React-Native (37) 썸네일형 리스트형 [#. React] Webpack이란? CRA로 시작한 React 프로젝트에 숨겨져 있던 Webpack 설정 파일 확인하기 그동안 React 프로젝트를 진행했을 때 CRA(create-react-app)로 시작했기 때문에 Webpack 설정에 대해 들여다볼 일이 없었다 Webpack 모던 Javascript 애플리케이션을 위해 사용되는 정적 모듈 번들러 웹팩에서는 Javascript, 스타일시트, 이미지 등을 모듈로 보는데 번들러는 여러 패키지와 관련된 파일들을 하나로 묶어주는 도구 Webpack 속성 Entry Output Loader Plugins Mode 1. Entry 웹 자원을 변환하기 위해 필요한 시작점, Javascript 파일 경로 entry를 통해 모듈을 로딩하고 하나의 파일로 묶는다 2. Output entry를 통해 로딩한 모듈을 하나의 파일로 묶은 결과물을 반환할 위치 3. Loader 번들링할 파일에 .. [#. react-router-dom] react-router-dom 5.2 버전으로 업데이트하고 useHistory, useParams, useLocation, useRouteMatch hooks 사용하기 React >= 16.8 react-router-dom >= 5.1 react 16.8 이상, react-router-dom 5.1 이상에서 사용 가능한 Hooks들에 대해 알아보려고 한다 reactrouter.com/web/api/Hooks React Router: Declarative Routing for React Learn once, Route Anywhere reactrouter.com 업데이트 전에는 페이지 이동할 때 withRouter를 이용했다 import React from 'react'; import { withRouter } from 'react-router-dom'; function PurchasePage(props) { const moveToPurchase = () => { pro.. [#. React] TypeError: Cannot read property '' of undefined 에러 뜰 때 Json in Array, Object in Array 데이터 가져오기 [ { name: "상품1", price: 129000, _id: "602b6786323789511beea1d1" }, { name: "상품2", price: 99000, _id: "602b6786323789511beea1d2" } ] React에서 이런 형식으로 들어가 있는 데이터를 꺼내와서 보여주려고 한다 useEffect(() => { console.log(props.detail.option); },[props.detail.option]) useEffect()로 페이지를 렌더링할 때 로그를 찍어보면 데이터가 그대로 잘 나온다 useEffect(() => { const ProductOption = props.detail.option ProductOption.map((item, index) => (( .. [#. React] react-paypal-express-checkout를 이용해서 React 웹에 Paypal 결제 연동하기 React로 쇼핑몰 웹을 만들고 있는데 여기에 Paypal을 통한 결제를 심어보자 주의할 점은 ₩, 원은 지원을 하지 않는다 $, 달러 를 기준으로 한다 ① react-paypal-express-checkout 설치 npm install react-paypal-express-checkout --save www.npmjs.com/package/react-paypal-express-checkout react-paypal-express-checkout React component that renders Paypal's express check out button www.npmjs.com ② view에 Paypal 버튼 생성하기 import React from 'react'; import PaypalExpres.. [#. React] npx create-react-app CRA 실패, 에러 해결 npx creact-react-app react-project React 프로젝트 생성 시 문제가 발생했다 에러 문구는 아래와 같다 We no longer support global installation of Create React App 혹은 A template was not provided. This is likely because you're using an outdated version of create-react-app. Please note that global installs of create-react-app are no longer supported. CRA로 react project를 생성하려고 하는데 global로 설치한 CRA를 더 이상 지원하지 않는다고 한다 sudo npm un.. [#. React] React + Redux + hook을 사용해서 Counter 만들기 기본적으로 Redux 사용을 익히기 위해 서버 없이 react로만 counter를 만들어보자 일단 react를 시작하기 전에 node가 설치되어 있어야 한다 nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 설치했으면 react project를 생성해보자 npx creact-react-app react-project npm install react-router-dom --save npm install react-redux --save npm install redux --save npm install antd --save npm install styled-compon.. [#. React] Functional Component 함수형에서 사용할 수 있게 된 React Hooks 정리하기 React Hooks v16.8에 도입 기존 React에서 Class Component에서만 사용 가능하던 state, lifecycle 기능을 Functional Component에서도 useState, useEffect로 사용할 수 있도록 추가된 기능 이 state, lifecycle 기능 때문에 React-Native로 cuckoo 앱을 만들 때는 Class Component를 사용했었다 클래스형, 함수형을 코드로 확인해보자 Class Component vs Functional Component ① Class Component import React, { Component } from 'react'; import Axios from 'axios'; export default class Shab ex.. [#. React] import 중괄호 {}를 쓰는 이유 import a, { b } from '/config' react에서 변수를 사용하려고 할 때 중괄호 {} 안에 표기하는 변수, 그리고 그냥 표기하는 변수가 있다 이렇게 import할 때 중괄호 {} 사용 여부는 변수를 보내주는 방식에 따라 달라진다 /config.js const a = 0; const b = 1 export { a }; export const c = 2; export default b; config.js에서 변수를 불러오려고 한다 import f, {a, c as two} from '/config'; console.log(f, a, two)// 1, 0, 2 export default로 선언된 변수는 중괄호 {} 없이 받아올 수 있으며 변수명이 달라도 된다 export default b.. 이전 1 2 3 4 5 다음
