일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- TypeScript
- ios
- node
- Route53
- 알려줌
- swift
- 도메인
- AWS
- https
- nextjs
- JavaScript
- php
- node.js
- 네이티브
- 안드로이드
- S3
- beanstalk
- 카카오톡
- 페이스북
- 웹뷰
- NeXT
- Elastic Beanstalk
- hybrid
- angular
- 감사일기
- cors
- fanzeel
- react
- angular4
- Android
- Today
- Total
목록개발 일지 (78)
쪼렙 as! 풀스택
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.
나는 아이폰을 사용하기 때문에, 안드로이드에 더 신경을 쓰지 못하는게 사실이다.그런데 내가 만든 '매일감사 매일기도' 앱에 누군가 '앱이 튕겨서' 라는 내용을 언급한것을 보았다. 내가 직접 만들고 테스트 할 때는 전~~혀 그런적이 없었기 때문에, 그리고 실제로 튕기는걸 직접 본적이 없어서, 그냥'아, 잘난 내가 또 완벽한 앱을 만들었군' 하고 생각했을 뿐이였다. ㅋㅋㅋ 그래서 이 기회에 Firebase 에서 제공하는 오류보고 리포트, Crashlytics 를 붙여보았다. 아이폰 / 안드로이드 1.7.4 버전에 Crashlytics 를 붙였는데, 아뿔사. 안드로이드에서 비정상 종료가 보고되었다는 메일이 날라오기 시작했다 ㅋㅋㅋㅋㅋ APK에, Pro-guard 난독화를 해놓은 상태라서, 디버그 할때만큼, 정..
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 ..
FANZEEL.COM 을 운영하는데, 이미지 첨부를 할일이 굉장히 많다. 관리자단에 이미지를 올릴 수 있게 해달라는 명령이 떨어졌다. 목표1 : AWS - S3 에 이미지 파일을 업로드, CloudFront 를 붙인 주소를 사용할 수 있도록 한다.목표2 : 어드민 페이지에서 이미지 주소를 쉽게 사용할 수 있도록, '클릭' 한번하면, 그냥 클립보드에 복사되도록 만든다. 1. Angular 에서 파일업로드가 성공후, 이미지 리스트를 다시 불러온다 하더라도, 페이지가 이동된게 아니기 때문에, 파일 업로드 의 상태는 파일이 선택되어있는 상태 그대로 유지되고 있다. 그래서, 파일 업로드가 성공하면, 리스트가 리프레시될 뿐 아니라, 선택되어있는 파일들을 제거해줘야 한다. - 우선 input 에 #으로 id 를 부여..