쪼렙 as! 풀스택

웹 개발할때, 모달 상태를 만들일이 꽤 있다. 그래서 당연히 라이브러리도 많이 존재한다.왠만해서는 라이브러리를 가져다 쓰기는 하는데, 어쩌다가 직접 모달상태를 만들어야 할일이 생겼다. 모달상태가 되면, 'position:fixed' 인 창을 맨 위로 올리고, 아래있는 body 부분의 'overflow:hidden' 으로해서 스크롤을 못하게 막아버리면 된다. 이때, 브라우저에 따라 '스크롤바'가 차지하고 있는 영역이 있을 수 있다. 사이즈도 브라우저마다 다를 수 있으므로, 그때그때 스크롤바의 넓이를 구해서, body의 'padding-right'를 설정해준다. const body = document.getElementsByTagName('body')[0] const scrollbarWidth = windo..

AWS - Elastic Beanstalk 에서 Node.js 환경을 선택하면,기본적으로 Nginx가 프록시서버로 사용하게 설정되어있다. 홈페이지에 필요한 간단한 아이콘, favicon 등등은 그냥 public/assets/ 폴더를 만들어서 사용하고 있었는데, 그 static file 들만이라도 Nginx 를 통해서 처리하게 해주면, Node 환경이 한결 쾌적해 질 수 있겠다. 1. Node에서 static 파일을 사용할 수 있게 설정되어있는 server.js 파일을, 개발모드에서만 사용가능하도록 수정했다. /server.jsconst express = require('express')const dev = process.env.NODE_ENV !== 'production'const server = exp..

엘라스틱 빈스토크 - Node 서버로 설정하면, 기본적으로 Nginx 를 proxy 서버로 두게 되있다. 이번에 프록시서버를 사용해 보지 않고 Node 자체로 서버를 돌릴라고 했더니, 기존에 설정해 두었던 8081 포트가 먹히지 않아서 배포가 실패했다. 프록시 서버를 거치지 않으니, 바로 80포트로 받아봤는데, 실패. 그래서 구글링하다보니, 빈스토크 빌드할때, process.env.PORT 에 포트를 설정해 준다고 한다.그래서 server.js 에 포트 설정하는 부분을 아래와 같이 수정해서 해결했따. const PORT = process.env.PORT || 8081console.log('-->> PORT : ' + PORT) app.prepare().then(() => { const server = e..

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

if(/Android|webOS|iPhone|iPad|iPod|Opera Mini/i.test(navigator.userAgent) ) { // 스마트폰이다. }

Netflix 비슷한 슬라이더를 만들어야 했다. smooth 스크롤을 구현해야 했는데, 검색해보니 여러가지 방법이 있었는데,편하게 쓸 수 있는 것 같은 방법들은 대부분 Edge 까지 지원하질 못했다. 그래서 표준 Javascript 로만 직접 만들기로 했다. 아래 코드는, 지금 진행하고 있는 프로젝트에만 적용되는 코드이긴 한데,시간이 나면 smoothScroll 하는 라이브러리로 오픈소스로 만들어야겠다. import {Component} from 'react'import '../styles/Home.scss' //스크롤 애니메이션 0.5초.const ANIM_DURATION = 300const FRAME_TIME = 10 export default class VideoSlider extends Compo..

사용자들이 내가 만든 앱의 최신버전으로 유지하게 만드는것은 참 중요한 일이다.난 앱 업데이트를 굉장히 게으르게 하는 편인데, 나같은 사람에게 최신버전의 앱을 사용하게 하는것은 참 어려운 일이다. Firebase Analytics 를 보면, 사용자들이 어떤 버전을 사용하는지 통계로 볼 수 있어서 참 좋다. 이건 내가만든 iOS 앱의 사용하는 버전 통계 인데, 아직도 거의 세달전에 출시한 버전을 아직도 사용하는 사람들이 있구나 ㅠㅠ - 실제로 앱을 만들고 서비스를 하다보니, 앱 업데이트를 크게 두 부류로 나눌 수 있겠더라.1. 굵직한 필수 업데이트.2. 자잘한 마이너 업데이트. 스토어에 출시된 앱의 버전을 Parsing 해서, 자동으로 앱 업데이트 알림 기능을 구현하는 방법들이 흔히 많이 들 쓰이는데, 나는..

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..