JavaScript 썸네일형 리스트형 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, '/')); 한글 음절 단위 검색 https://taegon.kim/archives/9919 [JS] 한글도 지원하는 퍼지 문자열 검색 UI 작업을 하다보면 목록을 검색해야 할 때가 많다. 그런데 사람의 기억이라는 게 정확하지 않아서 혹은 전부 입력하기 귀찮아서 개떡같이 일부만 입력해도 찰떡같이 원하는 결과를 보여주는 UI taegon.kim Data Fetching 번역 페이지 문서에서는 Next.js가 두 가지 형태의 사전 렌더 방식, 동적 생성과 서버 사이드 렌더링이 있다는 것에 대해 설명하였다. 이 문서에서는 데이터 fetching의 각 방식에 대해 심도 있게 살펴볼 것이다. 아직 페이지 문서에 대해 읽어보지 않았다면 먼저 페이지 문서에 대해서 읽어보는 것을 추천한다. 사전 렌더링을 위해 데이터를 가져오는 데 사용할 수 있는 Next.js의 세 가지 독특한 방식에 대해 이야기할 것이다. getStaticProps(정적 생성): 빌드 시간에 데이터를 가져오기 getStaticPaths(정적 생성): 데이터에 기초해서 특정 동적 경로를 사전 렌더하기 getServerSideProps(서버 사이드 렌더링): 매 요청마다 데이터를 가져오기 이에 더해서 우리는 클라이언트 측.. Pages 번역 Next.js에서 페이지는 pages 디렉토리 안에 있는 .js, .jsx, .ts, or .tsx 파일에 있는 export된 React 컴포넌트이다. 각 페이지는 파일의 이름에 따른 route로 연결된다. 예시: 아래와 같은 React 컴포넌트를 export하는 pages/about.js를 생성하면 /about 에서 접근이 가능할 것이다. function About() { return About } export default About 동적 경로 Next.js는 다이나믹(동적) 라우트를 지원한다. 예를 들어 pages/posts/[id].js란 파일을 생성하면 post/1, post/2 같은 경로로 접근이 가능하다. 사전 렌더링 기본적으로 Next.js는 모든 페이지를 먼저 렌더링한다. 먼저 렌더링 한.. 내가 정리하는 Next.js 0. 요약 Next.js는 SPA고, 첫 페이지 내용이 모두 채워져 있는 html을 받아서 SSR이라고 하고, Link를 이용해서 CSR을 하고, 검색엔진최적화를 대응하려면 Next.js를 사용해야 된다. 1. Next.js는 SPA인가? Next.js는 SPA인 리액트에서 SSR을 할 수 있게 구현이 되어있는 프레임워크이다. Next.js는 기존의 Multi Page Form이랑 다른 개념이다. 기존 Multi Page Form은 page가 변경될 때 마다 서버에서 html 파일을 새로 내려주지만, Next.js는 첫 페이지만 내려주고, 나머지는 CSR한다. 즉, 페이지가 갱신될 때 store가 살아있는 이유는 Next.js도 SPA이기 때문이다. Next.js가 SPA인지 테스트해보기 위해 next .. 이전 1 2 3 4 5 6 ··· 12 다음