쪼렙 as! 풀스택

웹 소켓을 이용하여 채팅 메시지를 보여줘야 할 필요가 있었는데, React - Hooks 를 주로 사용하는 프로젝트에 붙여야 했다. 그냥 웹소켓에 연결하고 응답받는거야 그리 큰 어려움은 아니겠지만, 뭔 상태하나가 바뀌건, props 가 바뀌건, 시도때도없이 render 를 호출하는 리액트 hooks 에, 웹소켓 연결을 붙이는것은 고민이 좀 많이 되었었다. 그래서 이래저래 많은 시도를 해보았는데, 커스텀 훅을 만드들어서 해결한 방법이 가장 깔끔했고, 리액트 훅에 잘 어울린것 같다. use-my-socket.ts export enum MySocketState { onNewChatReceived = 'onNewMessageReceived', onConnectionFailed = 'onConnectionFaie..

크롬의 새로운 쿠키 정책에 의해서, 개발 환경인 localhost에서 쿠키를 이용한 로그인 유지기능에 문제가 생겼다. ** cookie 에 SameSite 옵션을 'None'으로 해야만 CORS 가 가능하다. ** SameSite 옵션이 'None' 인 경우, Secure 옵션은 true 여야만한다. -> 사이트가 https 여야만 한다. 이 두가지 전제때문에, 몇군데 손을 봐야만 했다. 1. PHP >= 7.3 에서 SameSite 옵션 설정하기. $expire = time() + 3600 setcookie('cookieName', 'cookieValue', ['expires'=>$expire, 'httponly'=>true, 'samesite'=>'None', 'secure'=>true, 'path'..

https://alzi.net AWS - S3, ElasticBeanstalk, CloudFront, RDS, mailgun.com,PHP - CodeIgniter,React, Axios, Mobx, Material-UI, SASS, 참여율 100% - 역시 모두 혼자 다 만들었다. ㅋ 1. REACT + PHP 사용. Fanzeel.com 은 Node.js 서버에 React + Next.js 로 서버사이드 렌더링을 구현해 놓았고, 참 좋다고 여겨졌었는데, 실제로 운영해보니, 나의 부족함을 여실히 느끼게 되었다. 이만큼 개발짬밥먹었으니, Node가 뭐 별거랴, 하는 마음으로, Node 서버에 대한 아무런 지식이 없는 채, 무작정 시작했던 것이다. 개발 자체는 어렵지 않고 테스트 환경에서는 아주 만족스럽게..

헤더나 푸터와 같이, 프로젝트에 전체에서 공동으로 쓰이는 레이아웃들이 있을 것이다. 실제 프로젝트를 진행하다보면, 헤더, 푸터뿐 아니라, 여러가지 도구들 (전체를 감싸는 로딩 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..

API 서버 - PHP AWS - Elastic Beanstalk + Load Balancer , S3 + Cloud Front , Certification Manager프론트엔드 - React + next.js- 기존에 있던 fanzeel.com 을 리뉴얼 하라는 명령이 떨어졌다. - 디자인과 UI/UX 의 개선을 가장 크게 변경했다. 사실 기존 팬질은 빠르게 만드는데 방점을 찍느라, 디자인에 큰 고민없이 회사 이쁘지도 않는 외국 사이트와 유사하게 급하게 만들었었다. 그래서 이참에 좀더 깔끔하게 만들기로 했다. - 이 Fanzeel.com 이 생기기까지, 많은 시스템을 거쳐서 왔는데, 그중 가장 큰 영역이였던 '문장별 수정 기능' 과, subdomain 을 활용한, 컨텐츠별 미니 홈페이지 퍼블리싱 시스..

나는 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 특성상, 페이지를 페이스북이나 ..

import { Component } from 'react'; class Child extends Component { constructor(props) { super(props) if(props.onParentRef) { props.onParentRef(this); } } blahblah = () => { console.log("BlahBlah~"); } render() { return ( 여기는 Child 컴포넌트. ); }} class Parent extends Component { constructor(props) { super(props) this.childComponent; } callChildMethod = () => { this.childComponent.blahblah() } render..

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

리액트를 사용하면서, SSR 을 구현하려고 했다. 기존에 회사 서버가 PHP 로 구성되어있기 때문에, 일단 라우팅과 SSR 은, PHP 에서 담당하고, 리액트는 뷰만 만들어서 쓰기로 했다. 그러다보니, 테스트환경에 문제가 있었다. 나중에 Node 로 넘어가면서 눈여겨보고 있던 Next.js 를 사용하려고 했는데, 그러다 보니, 테스트환경이 매우 복잡해 지고 있었다. 그래서, PHP 서버는 API 서버로만 남겨놓기로 하고, 처음부터 Next.js 와 함께 Node 로 넘어가야겠다는 결심을 했다. 그래서 Next.js 의 공홈에서 제공하는 Learning 을 처음부터 살펴보았다. https://nextjs.org/learn/ 살펴본 결과. 매우 훌륭하다. 똑같이 getInitialProps 를 이용하는데, ..