쪼렙 as! 풀스택

헤더나 푸터와 같이, 프로젝트에 전체에서 공동으로 쓰이는 레이아웃들이 있을 것이다. 실제 프로젝트를 진행하다보면, 헤더, 푸터뿐 아니라, 여러가지 도구들 (전체를 감싸는 로딩 block 이라던지, Alert Modal 이라던지)을 공통으로 쓸 텐데, 이것들은 앱이 최초 한번만 로드되길 바란다. create-react-app 으로 프로젝트를 만들면, 당연히 App 컴포넌트에 한번 정의해놓으면 될것이고,Next.js 프로젝트를 한다면_app.js 를 사용하면 되겠다. 뿐만아니라, 전체 페이지의 getInitialProps 를 후킹할 수 도 있다. /pages/_app.js import React from 'react'import App, { Container } from 'next/app'import {He..

나는 ReactGA 라이브러리를 쓰기로 했다. $ yarn add react-ga 모든 페이지에서 componentDidMount() 에다가, 페이지 트래킹 셋팅을 할 수 도 있겠지만, 그것은 좀 귀찮은 일이다. 그래서 next/Router 의 onRouteChangeComplete 리스너를 달아서, 라우팅주소가 변경될때마다, 자동으로 트래킹을 하게 만들었다. import ReactGA from 'react-ga';import Router from 'next/router' Router.onRouteChangeComplete = url => { console.log("라우트 체인지 컴플릿", url) const pathName = window.location.pathname; ReactGA.initiali..

회사에서 fanzeel.com 을 리뉴얼 작업을 하였는데, 개발 결과물의 표면적인 부분은 '[개발후기] FANZEEL.COM 리뉴얼' 이 글에 남겨 두었으며, 이 글은 Angular 에서 React 로 변경하면서, 기술적인 측면에서 느낀점과, 두 라이브러리(프레임웍)을 개인적인 취향으로 비교하며 기록하고자 한다. 기존 환경(변경 전).기존 fanzeel.com 환경은 프론트는 Angular5, 백엔드와 API 서버는 PHP 로 만들어져 있었다. 변경하게 된 동기.사실, 다 만들어서 잘 돌아가고 있는 서비스를 갈아 엎는다는게 쉬운 결정은 아님에도 불구하고, 프로젝트를 갈아엎기로 결정한 몇가지 이유가 있는데, 가장 중요한 이유는 'SEO 문제' 였다. - Fanzeel.com 특성상, 페이지를 페이스북이나 ..

React + next.js 로 정말 신나게 코딩하면서, 프로젝트의 마무리 단계에 와있었다. 그동안은, 당연하게 localhost:3000 로 테스트를 하고 있었고, 서버 테스트는, next 를 만든 zeit 사의 'now' 서비스를 사용했었다. zeit / now 서비스는 정말 감동적으로 좋은 서비스였다.그냥 터미널에다 'now' 라고 3글자만 치면, 자동으로 프로젝트를 서버에 올리고, 자동으로 빌드되고, 곧장 실서버 상황을 볼 수 있었기 때문이다. 그러다가, 이제 정말 product 로 배포해야할 때가 다가 왔고, 그래서 진짜 실서버 테스트를 하려고, AWS - Elastic Beanstalk 에 올려보려고 했다.나는 이제껏, BackEnd 는 다 PHP 로 개발 해 오다가, 이번에 React 로 프..

Next.js 를 이용해서 서버사이드 렌더링을 하고 있다. Next.js 에서는 최초에 한번 서버사이드에서 렌더링해서 내보내 주고,그 이후는 클라이언트에서만 라우팅을하며 렌더링 해주는 방식으로, SSR 과, SPA(CSR) 의 장점을 매우매우 훌륭하게 조합하여 구현해준다. 그런데 간혹, 특정 Component 에 한해서, 서버사이드에서는 렌더링 하지 않았으면 하는 마음이 있다.그 '특정 컴포넌트' 라 함은, 특별히 SSR 이 중요하지도 않은데, 매우 무거워서, 최초 로딩 performance 에 악영향을 미치는 경우라 할 수 있겠다. Next.js 에서 3.0부터 제공하는 'dynamic' 기능을 이용해서, 이런 문제를 해결할 수 있다. import dynamic from 'next/dynamic'con..