쪼렙 as! 풀스택

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.

나는 아이폰을 사용하기 때문에, 안드로이드에 더 신경을 쓰지 못하는게 사실이다.그런데 내가 만든 '매일감사 매일기도' 앱에 누군가 '앱이 튕겨서' 라는 내용을 언급한것을 보았다. 내가 직접 만들고 테스트 할 때는 전~~혀 그런적이 없었기 때문에, 그리고 실제로 튕기는걸 직접 본적이 없어서, 그냥'아, 잘난 내가 또 완벽한 앱을 만들었군' 하고 생각했을 뿐이였다. ㅋㅋㅋ 그래서 이 기회에 Firebase 에서 제공하는 오류보고 리포트, Crashlytics 를 붙여보았다. 아이폰 / 안드로이드 1.7.4 버전에 Crashlytics 를 붙였는데, 아뿔사. 안드로이드에서 비정상 종료가 보고되었다는 메일이 날라오기 시작했다 ㅋㅋㅋㅋㅋ APK에, Pro-guard 난독화를 해놓은 상태라서, 디버그 할때만큼, 정..

안녕하세요, 매일감사 매일기도 개발자 입니다. 누적 감사일기 1,000개 돌파를 공지한지 약 한달남짓된거 같은데,벌써 2,000개를 돌파했습니다~ 가입자는 350명정도 되는거 같네요~ 진심으로 감사합니다. 아무런 홍보없이 이렇게 애용해주시는 분들이 많이 계셔서 정말 힘이 납니다~ 매일 감사함으로 풍성한 삶 누리세요~^^

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

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

가끔 오브젝트에 직접 접근해야할 때가 있다. https://reactjs.org/docs/refs-and-the-dom.html constructor 에서, React.createRef() 를 해주고.JSX 에서 ref={this.myFoo} 해주면 된다. class MyComponent extends React.Component { constructor(props) { super(props); this.myRef = React.createRef(); } render() { return ; } } 사용할 때는, current 로 node 에 접근한다.const node = this.myRef.current;

2018. 12. 5. 수정. 현재 최신버전의 create-react-app 으로 만든 프로젝트에 대해 mobx 적용하는 방법이 훨씬 간단해졌다. 1. 일단 리액트 프로젝트를 eject 시킨다.$ yarn run eject 2. mobx 에서 제공하는 babel-preset-mobx 를 추가한다.$ yarn add babel-preset-mobx 3. package.json 에서 babel-presets 을 수정해준다...."babel": { "presets": [ "react-app", "mobx" ] }... 4. mobx , mobx-react 를 추가해준다.$ yarn add mobx mobx-react 그러면 이제 그냥 써도 된다;;; 근데, vscode 에서 데코레이터에 관련된 Warning ..

안녕하세요, 매일감사 매일기도 개발자 입니다. 이번엔 '기도 응답 노트' 탭에 매일 체크 기능을 추가했어요. 혹시, 기도제목을 적어놓고 그냥 잊어두시는건 아닌지요. 사실, 제가 그랬어요. 기도제목이라고 적어놓고, 기도를하기는 커녕 잘 열어보지도 않았어요. ^^;; 그래서, 어떻게 하면 기도응답노트에 적어놓은 기도제목을 가지고 꾸준히 기도를 할 수 있게 할까... 하는 고민을 하게 되다가, 하루에 한번씩 기도제목을 열어보기라도 하자는 마음으로 이 기능을 추가했습니다. - 예쁜 스티커가 기도제목을 가리고 있을거예요,하나씩 누르면 스티커가 없어지면서 기도제목이 보이게 됩니다. 바쁠때는 이렇게 하나씩 열어가면서,기도하는 마음으로 읽기만이라도 하자구요~ 이렇게 스티커로 가려지는건 하루에 한번만 되요~