쪼렙 as! 풀스택

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

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

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

안보이는 임시의 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..

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

Next.js 의 Router 을 이용해서 라우팅을 변경할 경우,스크롤이 맨 처음으로 이동하지 않고 유지하고 있다. 그래서 보통은 componentDidMount() 에서 window.scrollTo(0,0) 을 하는 방법들이 많이 보이는데,이럴 경우, 백버튼을 눌렀을 때도 무조건 맨 위로 올라가게 되어있다. 백버튼을 눌러서 다시 이동했을 때는, 스크롤유지가 되기를 원한다면,Router.push().then() 안에서, scrollTo() 를 해준다. const asHref = "/page/"+pageUri+"/report/"+reportId Router.push({pathname: '/ReportDetail', query: {uri:pageUri, reportId:reportId}}, asHref) ...

const objectURL = URL.createObjectURL(file) console.log(objectURL)this.imgRef.current.src = objectURL //리액트 Ref.

1. Promise 를 넘겨주는 function 만들기. const promiseFunc = () => new Promise((resolve, reject)=>{ ... if(성공했을시){ resolve(data) }else{ reject(new Error('errorMessage')) }}) 2. 비동기식으로 Promise 다루기. promiseFunc() .then((resolveData) => { console.log(resolveData) }) .catch((error) => { console.error(error) }) 3. async, await 사용하기.- await 는 async 안에서만 사용 가능하다. func2 = async () => { const resolveData = await ..

1. mkdir , cd 2. yarn init -y 3. yarn add next react react-dom mobx@4.3.1 mobx-react axios express @zeit/next-sass node-sass(참고로 mobx5 는 es6기반으로, 익스플로러에서 아예 안돌아간다;;;) 4. yarn add --dev babel-plugin-transform-class-properties babel-plugin-transform-decorators-legacy 5. package.json 변경.- "main": "index.js", 제거.- scripts 추가."scripts": { "dev": "node server.js", "build": "next build", "start": "NODE..