분류 전체보기 썸네일형 리스트형 CRA에서 api server proxy 1) install http-proxy-middleware $ npm install http-proxy-middleware --save $ # or $ yarn add http-proxy-middleware 2) src/setupProxy.js 생성 후 아래와 같이 작성 const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { app.use( '/api', createProxyMiddleware({ target: 'http://localhost:5000', changeOrigin: true, }) ); }; 3) dev server 껏켯 useSelector에서 RootState 사용 안 하는 법 보통 useSelector를 사용할 때 아래와 같이 store의 타입을 선언해줘야 했다. const { data } = useSelector((state: RootState) => state.home); 아래와 같이 index.d.ts에 모듈 선언을 해주면 RootState 타입 선언 없이 사용 할 수 있다. import 'react-redux'; import { RootState } from '@src/store/store'; declare module 'react-redux' { interface DefaultRootState extends RootState { }; } const { data } = useSelector(state => state.home); https://stackoverflow... CRA와 비교한 Next.js의 장점 1. Pre-rendering CRA에서 Server Side Rendering을 구현하기 위해서는 라이브러리 설치, 설정 변경 등 추가작업이 필요하지만 Next.js는 어떤 추가 설정 없이 페이지 요청 시 html을 생성하는 ServerSideRendering은 물론이고, build시에 html을 생성하는 Static Side Generation까지 두가지 형태의 Pre-rendering을 제공한다. 2. next.config.js CRA에서는 webpack, babel 등으로 react-script로 추상화 된 설정들을 수정하기 위해 프로젝트의 복잡성이라는 리스크를 지닌 eject 명령어를 수행후 설정 파일을 수정해야 되지만 next.js에서는 webpack, babel, css-loader, bab.. next-redux-wrapper가 필요한 이유 https://simsimjae.medium.com/next-redux-wrapper%EA%B0%80-%ED%95%84%EC%9A%94%ED%95%9C-%EC%9D%B4%EC%9C%A0-5d0176209d14 safari new Date Invalid Date 이슈 아래와 같이 정규식으로 - 를 /로 치환해주면 된다. const date = new Date(txt_date.replace(/-/g, '/')); 모바일 100vh 이슈 1. ios만 대응 https://injeblog.tistory.com INJE BLOG injeblog.tistory.com 2. ios, android 대응 css height: 100vh; height: calc(var(--vh, 1vh) * 100); js function appHeight() { const doc = document.documentElement doc.style.setProperty('--vh', (window.innerHeight*.01) + 'px'); } window.addEventListener('resize', appHeight); appHeight(); 한글 음절 단위 검색 https://taegon.kim/archives/9919 [JS] 한글도 지원하는 퍼지 문자열 검색 UI 작업을 하다보면 목록을 검색해야 할 때가 많다. 그런데 사람의 기억이라는 게 정확하지 않아서 혹은 전부 입력하기 귀찮아서 개떡같이 일부만 입력해도 찰떡같이 원하는 결과를 보여주는 UI taegon.kim Data Fetching 번역 페이지 문서에서는 Next.js가 두 가지 형태의 사전 렌더 방식, 동적 생성과 서버 사이드 렌더링이 있다는 것에 대해 설명하였다. 이 문서에서는 데이터 fetching의 각 방식에 대해 심도 있게 살펴볼 것이다. 아직 페이지 문서에 대해 읽어보지 않았다면 먼저 페이지 문서에 대해서 읽어보는 것을 추천한다. 사전 렌더링을 위해 데이터를 가져오는 데 사용할 수 있는 Next.js의 세 가지 독특한 방식에 대해 이야기할 것이다. getStaticProps(정적 생성): 빌드 시간에 데이터를 가져오기 getStaticPaths(정적 생성): 데이터에 기초해서 특정 동적 경로를 사전 렌더하기 getServerSideProps(서버 사이드 렌더링): 매 요청마다 데이터를 가져오기 이에 더해서 우리는 클라이언트 측.. 이전 1 2 3 4 5 6 ··· 15 다음