React, Next, Redux 검색 결과

해당 글 93건

history stack과 push/replace/go

0. history에 대해서 https://reactrouter.com/web/api/history react-router-dom을 사용하면서 별 생각 없이 history를 사용해왔는데 이번 프로젝트에서 조금 복잡한 라우팅 처리를하게 되면서 history에 대해서 알아할 필요를 느꼈다. react-router-dom의 글을 대강 번역해보았다. 링크는 위에 뒀다. 히스토리, 히스토리 객체라는 용어는 react-router-dom의 의존 패키지인 the history package에 의거한 것입니다. 히스토리는 자바스크립트 환경에서의 히스토리 세션을 관리하는 도구입니다. 다음 용어도 사용되었습니다. “browser history” - A DOM-specific implementation, useful in ..
React, Next, Redux/⚛ React.JS 2020. 7. 4. 16:27

dorpzone을 만들어 이미지, 비디오 첨부하기

React에서 올리고, 백단에서 multe-s3로 처리하는 과정에 있어서 좀 더 사용자의 편의에 있어 파일 업로드를 폴더에서 선택하는 것이 아닌 드래그 앤 드랍으로 구현해보고 싶었다. https://github.com/react-dropzone/react-dropzone 공식 문서에 있는 예제다. 하나씩 뜯어보자. import React, {useCallback} from 'react' import {useDropzone} from 'react-dropzone' function MyDropzone() { const onDrop = useCallback(acceptedFiles => { // Do something with the files }, []) const {getRootProps, getInput..
React, Next, Redux/⚛ React.JS 2020. 6. 28. 03:34

Next에 Redux 설치하기 + next-redux-wrapper

일반적인 React 처럼 사용하면 되지만 약간 다른 부분이 있어 정리해보았습니다. 우선 일반적인 React + Redux 사용법은 https://darrengwon.tistory.com/184?category=889133 https://darrengwon.tistory.com/556?category=889133 여기를 참고합시다. 차이점 1 ) 우선 Provier로 감쌀 최상위 컴포넌트는 page/_app.js 입니다. React 때 처럼 index.js가 없거든요. 차이점 2 ) Next에서는 store를 최상위 컴포넌트의 props에 가져와야 합니다. 그런데 _app.js에 있는 컴포넌트에 props가 존재할 수가 없죠. HOC을 이용해서 한번 감싸줘야 합니다. 다음 패키지(next-redux-wra..
React, Next, Redux/▲ Next.js 2020. 6. 27. 07:05

express로 Next 커스텀 프론트 서버 구축하기

Advanced Features: Custom Server | Next.js Start a Next.js app programmatically using a custom server. nextjs.org npm run build && start 외에 좀 더 커스터마이징을 하고 싶다면 커스텀 서버를 만들어야 한다. Node이기만 하면 되므로 node를 이용하는 프레임워크를 사용하기만 하면 된다. 공식 문서에서도 바닐라 노드, express, hapi, koa 등을 사용하는 예제들을 보여준다. Basic custom server Express integration Hapi integration Koa integration SSR Caching 응? 그러니까, 보통 리액트에서는 build한 다음 build된 ..
React, Next, Redux/▲ Next.js 2020. 6. 25. 00:16

useCallback

정의 (https://reactjs.org/docs/hooks-reference.html#usecallback) const memoizedCallback = useCallback( () => { doSomething(a, b); }, [a, b], ); useCallback(fn, [])는 []에 담긴 state가 변화할 때마다 fn을 실행합니다. useEffect와 유사한 면이 있습니다. deps에 반드시 useCallback 내부에서 사용한 state를 넣어주는 것을 잊지 맙시다. 활용 이 useCallback을 언제 활용하느냐. 함수로 인한 렌더링 성능을 최적화하는 용도로 사용됨. useMemo가 함수 내부에서 진행되는 연산을 최적화한다면 useCallback은 컴포넌트 내부에 정의된 이벤트 핸들러..
React, Next, Redux/🚀 React with Hooks 2020. 6. 24. 13:08

next/link, head, router, dynamic, error, image

Link https://nextjs.org/docs/api-reference/next/link Link는 내부는 어떠한 태그도 가능합니다만 관습적으로 a 태그를 사용합니다. import Link from "next/link"; 이동 특징 1) Link가 좋은 점은 프로덕션 모드에서 뷰포트에 Link 컴포넌트가 보일 때마다 prefetch를 한다는 것입니다. 그 결과 Link를 눌렀을 때 로딩없이 즉시 이동할 수 있도록 합니다. 사용자 입장에서는 엄청 빠른 것으로 보이죠! Furthermore, in a production build of Next.js, whenever Link components appear in the browser’s viewport, Next.js automatically pref..
React, Next, Redux/▲ Next.js 2020. 6. 24. 06:38

pages/_app.js 을 통한 global CSS와 기본 Layout 설정

antd를 사용하기 위해 글로벌하게 css를 설정하려고 했는데 다음과 같은 오류가 나왔다. Global CSS cannot be imported from files other than your Custom . Please move all global CSS imports to pages/_app.js. Read more: https://err.sh/next.js/css-global Why This Error Occurred An attempt to import Global CSS from a file other than pages/_app.js was made. Global CSS cannot be used in files other than your Custom due to its side-effect..
React, Next, Redux/▲ Next.js 2020. 6. 24. 06:37

커스텀 Hoc 만들기

주로 HOC 의 이름을 만들땐 with_____ 형식으로 짓습니다. react-route-dom의 withRouter도 Hoc의 일종이기 때문에 이렇게 이름을 붙인 것입니다. 우리는 웹요청을 하는 HOC 를 만들테니 withRequest 라고 지어주도록 하겠습니다. HOC은 그냥 원소로 컴포넌트를 받는 컴포넌트입니다. 어떤 로직을 거친 후에 원소로 받은 컴포넌트를 리턴해주면 됩니다. import React, { Component } from 'react'; const withRequest = (url) => (WrappedComponen) => { return class extends Component { state = { data: null } async initialize() { try { const..
React, Next, Redux/⚛ React.JS 2020. 6. 17. 23:30

react-intl 적용하여 번역을 지원하는 Internationalization 하기

https://www.npmjs.com/package/react-intl react-intl Internationalize React apps. This library provides React components and an API to format dates, numbers, and strings, including pluralization and handling translations. www.npmjs.com https://formatjs.io/docs/react-intl Overview | Format.JS [![npm Version](https://img.shields.io/npm/v/react-intl.svg?style=flat-square)](https://www.npmjs.org/pack..
React, Next, Redux/⚛ React.JS 2020. 6. 10. 22:25

React에서 radio button 사용법

http://react.tips/radio-buttons-in-react-16/ input에 value, checked, onChange를 적절하게 구성하는게 포인트다. 주의점이라면 Change를 핸들링하는 함수에 e.preventDefault()를 하지 않아야 한다는 것이다. 만약 prevent를 하게 되면 더블 클릭해야만 라디오에 체크가 되고 이는 유저 경험을 저해하는 요인으로 작용한다. const changeRadioQ1 = (e) => { setQ1(e.target.value); }; const changeRadioQ2 = (e) => { setQ2(e.target.value); }; orm style={{ display: "flex", flexDirection: "column" }}> Q1: W..
React, Next, Redux/⚛ React.JS 2020. 6. 5. 14:44