CRA 프로젝트를 진행하면서는 스크롤 상태 유지(scroll restoration)를 하기 용이했다. 근데 next로 넘어오면서 자체 라우팅 시스템을 사용함에 따라 react-router-dom을 사용한 기존 방식 (router에서 넘어온 history객체 내에 action을 감지해서 pop 식별 후 처리)을 사용할 수 없게 되었다. Next 내부에서 기본적으로 스크롤 복원 기능을 제공하기는 한다. 그러나 내가 작업 중인 페이지에는 목록 내부 요소 크기가 스크립트를 통해 정해지기 때문에, 목록 -> 아이템 -> 뒤로 가기(목록) 작동을 했을 경우 정확한 스크롤 위치로 돌아오지 않는 이슈가 있었다. 이러나저러나 페이지 스크롤 복원 방법은 여기저기 널려있고, 그중에 괜찮은 것들을 짬뽕해서 구현했다. 목표는 ..

CSR에서는, 페이지가 로드되고 난 다음 ajax요청을 통해 값을 가져오고 그 데이터를 뿌려준다. [클라이언트] 페이지 접근 [서버] html, js 전송 [클라이언트] 빈 html, 필요한 js파일 받음 [클라이언트] js 로드 [클라이언트] 필요한 데이터 요청(ajax) [클라이언트] 결과물 반환 [클라이언트] 렌더링 그러나 SSR에서는 SEO등의 목적으로 인해 클라이언트에 페이지를 전송하기 전에 데이터 요청을 해야 할 상황이 생긴다. [클라이언트] 페이지 접근 [서버] 페이지 렌더링에 필요한 데이터 ajax 요청* [서버] 결과물 반환 [서버] 렌더링 [서버] html로 변환 [서버] html 전송 [클라이언트] 받음 그렇다면 다음과 같은 상황은 어떨까? 예를 들어 제품 상세 페이지가 있다고 해보자..

현재 프로젝트에 Next.js를 도입하고 환경세팅을 하던 중, IE 11 에서 SCRIPT:#### : Unable to get property 에러와 syntax error를 만났다. polyfill을 꼼꼼하게 했음에도 불구하고 문제가 생긴 이유가 뭔지 찾아보니, transpile되지 않은 종속성 노드 모듈에서 문제가 생겼다는걸 알았다.(서드파티 문제라는 말) How to make IE 11 compatible with Next.js ? · Discussion #13922 · vercel/next.js github.com martpie/next-transpile-modules Next.js plugin to transpile code from node_modules - martpie/next-trans..

작년 12월 21일. React 팀에서 새로 공개한 따끈따끈한 신기술! React Server Component에 대해 알아보자. React Server Component 줄여서 RSC는 단어 뜻만 보면 서버에서 뭔가 하는 것처럼 보인다. 그럼 이게 기존 서버사이드 렌더링과 뭐가 다른 것일까? 대체 뭐길래 따끈따끈하게 공개한 걸까? 지금부터 알아보자. 리액트 생태계에서 Server Side Rendering(SSR) 은 이미 원활하게 지원되고 있다. 특히나 Next.js를 통해 잡다하고 귀찮은 설정 등이 편해지면서 React를 통한 SSR은 충분히 대중화된 상황이다. [react] What is The Difference Point Between Next.js & Create-React-App? (Rea..

반응형 웹 구현에 대한 방법은 여러 가지가 있다. 그 중에서도 무난하면서 비용이 적게 드는 방법은 바로 미디어 쿼리를 활용하는 방법이다. 미디어 쿼리 사용하기 - 웹 개발자 안내서 | MDN 미디어 쿼리 사용하기 Jump to sectionJump to section 미디어 쿼리는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 developer.mozilla.org 스타일 시트 내에서 선언되어 사용되기 때문에 별도의 js실행 없이도 구현이 가능하다는 장점이 있다. 특히나 서버사이드 렌더링으로 구현하는 페이지의 경우 이 장점이 더욱 빛난다. 노드 서버에서 window 객체를 얻을 수 없기 때문에 클라이언트의 창 크기를..

As you know, Create-React-App(CRA) made by Facebook is first recommanded Tool Chain in react environment. Create-React-App(줄여서 CRA)는 React 공식 가이드에서 첫 번째로 추천하는 툴체인이다. (first recommanded !== most recommanded) (물론 첫 번째로 추천한다는 말이 제일 추천한다는 말은 아니긴 하다) Anyway, CRA is powerful ToolChain to make single-page-application And also useful starter-kit for who learning react recently! (like me) 아무튼 공식 가이드에서 소개..