pwrwave's cabinet

Next.js에서 자연스러운 Page Transition 방법 react-spring  과 "next-page-transitions"을 이용한 두가지 방법을 아래와 같이 예제로 구현했다다. 아래는, react-spring을 사용한 예제이다. 조금 시간을 두고 기다리면 결과를 볼 수 있다. 여기에서, "About", "Hello Day" 등을 클릭하면, 화면(page)이 겹치며(overlapped) 바뀌는 것을 알 수 있다. 아래는, Next.js의  Page Transition 은 " react-transition-group " 사용한 예제이다. 차이가 구분이 되는가? 둘다, 비슷해보이지만, next-page-transitions은 실제로 화면이 겹쳐지지 않고, 앞 페이지가 사라짐과 동시에 뒷 페이지를 나타내게 되어서 실제 DOM이 교체되어 버리기 때문에, 겹치며 사라지는 기능이 아니다. 반면, react-spring을 사용한 예제는, 앞 페이지가 뒷 페이지가 나타나서도 일시적으로 존재하는 구조로 되어, 겹치며 사라지는 화면을 구현할 수 있다. 실제 겹치며 사라지는 형태가 아니라, 페이지의 fade-in/out 정도와 같은 animation으로 충분하다면, 무엇을 사용하든 큰 문제가 되지 않는다. * 출처 - react-spring:  https://codesandbox.io/s/react-spring-nextjs-routes-q80c6 - next-page-transitions:  https://github.com/zeit/next.js/tree/canary/examples/with-next-page-transitions

Next.js Client/Server Rendering 간단 구분법 const Temp = () => { ... return ( <p>Temp</p> ); }; Temp.getInitialProps = async () => { if (process.browser) { ... } } ... export default Temp; 그러나 "process.browser"가 deprecated 되었다. 그 이유는, "process.browser"는 표준이 아니고,  Webpack에 의한 추가된 스펙이기 때문이다. 이제는 이렇게 해야 한다. const Temp = () => { ... return ( <p>Temp</p> ); }; Temp.getInitialProps = async () => { if (typeof window === 'object') { ... } } ... export default Temp;

JavaScript 기본 상식 #3 (scope에 따른 this) JavaScript에서 "this"는 생각보다 복잡한 상황을 초래한다. 어떻게 보면 왜 그랬을까 싶기도 한데, 상황에 따른 복잡한 문제가 있는데, 모두 다룰 순 없고, 여기에서는, 익숙해지는 정도까지 진행해보고자 한다. 일반적으로 "this"는 scope는 "{}"에 기반한다고 이해하는 것이 보통은 편하다. console.log('What is this?, this); 결과는? (Chrome DevTools console) What is this? Window 여기 "Window"는 우리가 알고 있는 그 window이다. 그럼, 함수 내에서는 어떻게 표현되는지 확인해 보자! this.foo = 'window'; console.log('[Window Scope] What is foo?', this, this.foo); (function test1() { console.log('[Function Scope:Previous] What is foo?', this, this.foo); this.foo = 'global'; console.log('[Function Scope] What is foo?', this, this.foo); return { foo: 'local', bar: function () { console.log('[Function Scope:Inner] What is foo?', this, this.foo); } }; })().bar(); 결과는? (Chrome DevTools console) [Window Scope] What is foo? Window window [Function