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

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 해서, 자동으로 앱 업데이트 알림 기능을 구현하는 방법들이 흔히 많이 들 쓰이는데, 나는..

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

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

빈스토크 - 로드밸런서를 쓰고 있는경우, http 인지 https 인지 구분하는 방법이 약간 특별해진다. 그 특별한 내용은 여기 참조...Elastic Beanstalk 에서 HTTPS 로 Redirect 시키려 한 삽질들... 이번엔 Node - Express 서버에서 리다이렉트를 시켜본다. const server = express() server.use(function(req, res, next) { const xForwrded = req.get('X-Forwarded-Proto') //로드밸런서경우, X-Forwarded-Proto 로, 어떤 요청으로 왔는지 알 수 있다. if(!!xForwrded && xForwrded !== 'https') { res.redirect('https://' + re..

import { DomSanitizer } from '@angular/platform-browser'; constructor(private sanitizer: DomSanitizer, ..., ) { } public mThumbUrl: any = '' // img 태그의 소스 변수. ... const url = URL.createObjectURL(someFile)const safe = this.sanitizer.bypassSecurityTrustUrl(url)this.mThumbUrl = safe ...

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

안보이는 임시의 textarea를 만든 후, focus() -> select() -> execCommand('copy') 한 후, document 에서 제거해준다. const selBox = document.createElement('textarea'); selBox.style.position = 'fixed'; selBox.style.left = '0'; selBox.style.top = '0'; selBox.style.opacity = '0'; selBox.value = '복사할 문자열'; document.body.appendChild(selBox); selBox.focus(); selBox.select(); document.execCommand('copy'); document.body.removeC..