728x90

momentjs 언어 포맷을 변경할 수 있다.

 

관련해 많은 포스팅들이 있다.

 

그런데, 번거로운 작업없이 요일만 한글화 한다던지, 년 월 등만 한글화 하고 싶을때가 있다.

 

그럴때는 moment의 내장함수를 이용하면 가능하다.

 

updateLocale이다.

 

예를들어, 요일을 업데이트한다면,

import moment 아래에

moment.updateLocale('kr', {
    weekdaysShort: ['일', '월', '화', '수', '목', '금', '토'],
});

과 같이 설정해주고

moment().locale('kr).format('ddd') 해보면 한글화 된걸 확인 할 수 있다.

 

 

 


 

웹사이트 개발 / 홈페이지 제작 / android앱 개발 / ios 앱 개발 / server / client / aws / fullstack / buisness partner / 외주 / 용역

https://open.kakao.com/o/sNETgUJb

http://self-made.cloud

 

 

 

728x90
반응형
728x90

API를 계속해서 만들어왔고, 서버를 관리해왔다.

 

전문적으로 서버를 공부한 사람은 아니지만, 실무위주의 학습과 개발을 해왔다.

 

전문적으로 다루시는 분들에 비해 그 내부적인 동작과 퍼포먼스 향상 관련해서는 부족하지만,

 

적어도 원하는 기능을 구현하고자 한다.

 

나아가 전문가가 된다면 더 좋겠지만, 나의 주 포커스는 Front-end이다.

 

[ 지금부터 언급하는 RestAPI는 외부 RestAPI를 말합니다.

Restful API Server를 말하는것과는 다릅니다. ]

 

그런 내가 개발과정에서 RestAPI, API에 대해 얻은 개인적인 통찰을 기록한다.

 

최근, YoutubeAPI, KakaoAPI, FacebookAPI 등의 RestAPI를 통해 개발을 하면서 느낀바는 '비슷하다' 이다.

 

무슨말이냐면, 'Kakao의 RestAPI를 가져다 쓸줄 안다면 나머지도 다 쓸수 있다' 라고 봐도 무방하다.

 

그 사용패턴과 방식이 같기 때문이다.

 

 

그렇다면 본론으로 들어가  RestAPI가 어떻게 돌아가는지 확인하자.

 

RestAPI는 Client에서 직접 호출하는걸 지양한다. 즉 server - to - server API 이다.

 

따라서, RestAPI를 통해 어플리케이션을 구축하고자 한다면 Third API Server가 필요하다.

 

여기서 Third API Server는 흔히 말하는 서버이다.

 

즉, Only Front-end앱이 아니라면 보통 하나씩 가지고있는 그 서버말이다.

 

일반적인 경우에는 아래와 같이 서버를 사용한다.

 

Client의  API요청 <---> Third API Server의 API응답

 

그러나, 외부 RestAPI를 이용할때는 아래와 같다.

 

Client의 API요청 <---> Third API Server의 API 요청/응답 <---> RestAPI Server(외부)의 응답

 

server - to -server 로 외부 RestAPI를 호출하고 응답받아 나의 Client로 전달해주는것이다.

 

다소 번거롭지만 그 장점은 확실하다. 

 

하나의 서버구축만으로 웹/앱/데스크탑 어떤 플랫폼에도 대응할 수 있다는것이다.

 

클라이언트에서 필요한 api를 요청하기마나 하면 된다.

 

 

RestAPI를 처음 접하시는 분들에게 혼선을 주지않기위해 마지막 코멘트를 남기자면,

 

흔히 말하는 Rest API Server란, Restful하게 설계한 내 서버를 의미합니다.

 

Restful하다는 의미는 검색해보시면 잘 정리된 자료가 많이 있습니다 ^^

 

 

 


웹사이트 개발 / 홈페이지 제작 / android앱 개발 / ios 앱 개발 / server / client / aws / fullstack / buisness partner / 외주 / 용역

https://open.kakao.com/o/sNETgUJb

http://self-made.cloud

 

 

728x90
반응형
728x90

보통 react에서 rest api를 통해 작업을 하게된다.

 

만약 나 또는 내 그룹에서 작업하고있는 rest api 서버라면 문제없지만

 

firebase, kakao, naver 등의 rest api를 이용함에있어 cors문제를 한번쯤 겪게된다.

 

 

chrome에서 보안 정책상 기본적으로 cors를 방지하고있기 때문이다.

 

이럴때는 chrome확장도구 중 "CORS:Allow CORS: Access-Control-Allow-Origin"라는 확장도구가있다

 

요놈을 설치해 ON해주면 문제없이 테스트를 진행할 수 있다

 

(이놈 때문에 무려 6시간을 삽질했다)

 

그런데,

 

중요한것은 사실 저것이 아니다.

 

클라이언트(웹 브라우저)에서 Reat API를 서버로 요청할때는 axios, fetch등이 아닌 a태그의 href를 이용해야한다.

 

query parameters들을 href="...url?accessToken=something ...." 과 같이 해서 요청하면 된다.

 

 

 


웹사이트 개발 / 홈페이지 제작 / android앱 개발 / ios 앱 개발 / server / client / aws / fullstack / buisness partner / 외주 / 용역

https://open.kakao.com/o/sNETgUJb

http://self-made.cloud

 

 

 

 

 

728x90
반응형

'개발, 코딩 > React' 카테고리의 다른 글

CRA(create-react-app), IE대응  (0) 2020.01.31
불변성, array  (0) 2019.11.04
Input focusout - redux/react  (0) 2019.10.29
html - hash / react- ?  (0) 2019.10.29
react, 올바르게 사용해본다. "prevState"  (0) 2019.07.31
728x90

File upload는 대부분의 앱/웹에서 사용되는 아주 기본적인 기능

 

클라이언트 사이드에서의 처리는 생각보다 간단하다.

 

1. input type='file'로 태그를 생성하고,

 

2. onChange 이벤트리스너를 통해 ev.target.files[0]으로 선택된 파일을 읽어와 변수에 담는다.

 

3. 서버로 보내준다. 보내줄때는 formdata에 넣어보내줘야한다.

const formdata = new Formdata();

formdata.append('photo', file);

여기서 photo는 서버에서 해당 요청을 받을때 사용하게된다.

(예를들어, multer를 이용한 미들웨어에서 사용한다면 photo.upload(photo);

이때는 헤더설정도 해줘야한다. 

const config = { headers: { 'Content-Type': 'multipart/form-data' } }; << 이렇게

axios.post(url, formdata, config) 와 같이 서버에 요청을 날리면된다.

 

 

 


웹사이트 개발 / 홈페이지 제작 / android앱 개발 / ios 앱 개발 / server / client / aws / fullstack / buisness partner / 외주 / 용역

https://open.kakao.com/o/sNETgUJb

http://self-made.cloud

 

 

 

728x90
반응형
728x90

react / redux 환경에서 처음 개발하다보면 당황스러운 경험을 하게된다.

 

state에 값을 담기위해 onChange에서 setState 할때마다, 

 

re-rendering되면 input에서 focusout되는 것이다.

 

도저히 값을 입력할수가없다.

 

상황은 매우 난감하지만 해결방법은 매우 간단하다.

 

해당 input이 속한 컴포넌트 wrapper에(제일 바깥 껍데기) key를 주는것이다.

 

 

 


웹사이트 개발 / 홈페이지 제작 / android앱 개발 / ios 앱 개발 / server / client / aws / fullstack / buisness partner / 외주 / 용역

https://open.kakao.com/o/sNETgUJb

http://self-made.cloud

 

 

 

728x90
반응형

'개발, 코딩 > React' 카테고리의 다른 글

불변성, array  (0) 2019.11.04
react, cors 그리고 chrome  (0) 2019.10.31
html - hash / react- ?  (0) 2019.10.29
react, 올바르게 사용해본다. "prevState"  (0) 2019.07.31
create-react-app 에러  (0) 2019.07.30
728x90

react-router-hash-link를 사용하면 아주 쉽고 빠르게 구현해볼수 있다.

 

import { hashlink } from 'react-router-hash-link'

<HashLink to='/#something' scroll={el => el.scrollIntoView({ behavior: 'smooth'block: 'end' }) }>

 

...

</HashLink>

 

 

 


웹사이트 개발 / 홈페이지 제작 / android앱 개발 / ios 앱 개발 / server / client / aws / fullstack / buisness partner / 외주 / 용역

https://open.kakao.com/o/sNETgUJb

http://self-made.cloud

 

 

728x90
반응형

'개발, 코딩 > React' 카테고리의 다른 글

react, cors 그리고 chrome  (0) 2019.10.31
Input focusout - redux/react  (0) 2019.10.29
react, 올바르게 사용해본다. "prevState"  (0) 2019.07.31
create-react-app 에러  (0) 2019.07.30
redux입문 - (1)  (0) 2019.06.22
728x90

* RN프로젝트에 Admob붙이기

firebase의 많은 기능중, admob많을 목표로 하는분들을 위한 글입니다.

react-native-admob으로 react-native앱에 광고를 간편히 붙일 수 있습니다.

 

FB 환경을 세팅해 직접 해주려고도 해봤지만,

광고를 붙이는것만이 목적이라면 해당 모듈을 사용하는것이 아주 속편한 방법입니다.

시간적으로 절약되는것은 물론입니다.

 

일단, 설치해볼까요.

npm install react-native-admob

react-native link react-native-admob

(현재 환경은 RN 0.59.8, react-native-admob버전은 1.3.2입니다)

 

* 에러?

먼저, 해당 라이브러리를 설치하니 style undeinfed와 같은 에러가 발생하였습니다.

해당 에러파일을 찾아가보니 react버전문제로 발생한 에러였습니다.

라이브러리에서는 react.PropTypes....와 같은 코드를 사용했지만,

현재 환경에서는 지원하지 않는 기능이었고, PropTypes를 import 하여 코드를  PropTypes....으로 수정해주었다.

 

 

* 본격 세팅

firebase console에서 admob key를 간단히 발급받을 수 있습니다.

key를 발급받는 것 외의 환경세팅은 사실 필요없습니다. 해당 라이브러리를 사용한다면요.

세팅이 완료되었다면 코드를 넣어야 하는데요.

admob은 테스트용 키가 별도로 있습니다.

테스트할때는 test key로 확인해야하고, 배포할때는 발급받은 배포용 키를 적용해야 합니다.

 

* 테스트 단계에서 Key

https://developers.google.com/admob/android/test-ads#sample_ad_units

 

테스트 광고  |  Android  |  Google Developers

This guide explains how to enable test ads in your ads integration. It's important to enable test ads during development so that you can click on them without charging Google advertisers. If you click on too many ads without being in test mode, you risk yo

developers.google.com

 

 

* 그외 체크해볼만한 환경 세팅

https://developers.google.com/admob/ios/quick-start#import_the_mobile_ads_sdk

 

시작하기  |  iOS  |  Google Developers

iOS 앱을 제작 중인 AdMob 게시자를 위한 모바일 광고 SDK입니다.

developers.google.com

 

* 코드블럭

 

 

* 사실은..

세팅과정에서 많은 난항을 겪었습니다. 해당 라이브러리의 버전문제가 심각했던것도 있고,

AndroidX의 문제도 겹쳐버려서요.

 

AndroidX문제는 다음과 같이 해결하였습니다. 제법 오랜시간이 걸렸네요!

1. jetify를 통해 androidX문제를 해결!

2. 아래의 지침에 따라 해당 라이브러리의 문제를 해결!

 

 

 

 


웹사이트 개발 / 홈페이지 제작 / android앱 개발 / ios 앱 개발 / server / client / aws / fullstack / buisness partner / 외주 / 용역

https://open.kakao.com/o/sNETgUJb

http://self-made.cloud

728x90
반응형

'개발, 코딩 > App - React Native' 카테고리의 다른 글

React-Native 가이드 - (1) 프로젝트 생성하기  (0) 2021.10.05
React Native 가이드 - 시작  (0) 2021.10.05
expo publish에 대하여  (0) 2019.10.23
xcode download link  (0) 2019.10.21
expo - version up  (0) 2019.10.21
728x90

Youtube API와 관련된 Nodejs 레퍼런스가 많이 부족한것 같습니다.

Youtube가 현재 대세인 것을 고려하면 너무나 안티까워 간단하게 Youtube api사용법을 공유하려 합니다.

 

* API로 유튜브 영상을 지우기

Youtube.videos.delete를 사용하게되며 영상의 id값만을 parameter로 보내줍니다.

Youtube.videos.delete({ id }, (err, data) => { ...something });

 

이전의 게시물에서 충분히 사전내용을 기록해두었기에 간단히 기록해보았습니다. (이전 게시물에 Youtube API서용법이 상세히 나와있으니 참고하시길 바랍니다..^^)

 

* 다만, 기억할것이 있습니다.

다른 api들과 같이 YoutubeAPI 역시 일일할당 트래픽량이 존재랍니다.

1인당 하루 10000트래픽이 허용되며, 초과시 사용이 더 이상 불가능합니다.

 

영상 업로드 api를 사용하다보면 금방 초과되버립니다 (7~8개쯤 영상업로드 테스트중 초과해버렸네요

..)

list를 가져오는 경우에는 거의 소요되지않지만 업로드 api를 사용해야 한다면,

정말 꼭 필요한 경우에만 쓰도록 하는게 좋을듯 합니다...

 

 

 


웹사이트 개발 / 홈페이지 제작 / android앱 개발 / ios 앱 개발 / server / client / aws / fullstack / buisness partner / 외주 / 용역

https://open.kakao.com/o/sNETgUJb

http://self-made.cloud

 

 

728x90
반응형
728x90

publish 혹은 code push라고 불리는 기능이,

expo framework에서는 기본적으로 적용되어 있습니다.

 

publish를 이용하면

expo의 limitaion에 명시된 몇몇 부분들을 제외한 나머지의 것들이 앱 재배포 없이도 업데이트 가능합니다.

 

limitation관련해서 한가지 코멘트를 남기고자 합니다.

limitation에 보면 "sdk는 publish로 배포 불가능하다"고 되어있습니다.

 

따라서, 다음과 같은 문제가 발생할수있습니다.

"app store 혹은 playstore에 배포되어있는 앱의 sdk버전이 publish하는 sdk버전과 다르다. 특히, 더 낮다."

라는 상황에서 publish 한 내용은 적용되지 않습니다.

 

이러한 경우에는 sdk버전을 맞추어 주는것으로 해결할 수 있습니다.

 

 

 


웹사이트 개발 / 홈페이지 제작 / android앱 개발 / ios 앱 개발 / server / client / aws / fullstack / buisness partner / 외주 / 용역

https://open.kakao.com/o/sNETgUJb

http://self-made.cloud

 

 

 

 

 

 

728x90
반응형

'개발, 코딩 > App - React Native' 카테고리의 다른 글

React Native 가이드 - 시작  (0) 2021.10.05
react-native-admob  (0) 2019.10.27
xcode download link  (0) 2019.10.21
expo - version up  (0) 2019.10.21
textinput 정렬  (0) 2019.10.08
728x90

https://stackoverflow.com/questions/10335747/how-to-download-xcode-dmg-or-xip-file

 

 

How to download Xcode DMG or XIP file?

Where does the Mac App Store download the files to under Lion? I need the DMG file in order to repair something in my system, but how can I access that file?

stackoverflow.com

https://developer.apple.com/download/more/

 

로그인 - Apple

 

idmsa.apple.com

거지같은 xcode가 에러를 띄우며 설치가 되지않네요...

 

위의 링크를 타고들어가 직접다운로드 하는 방법도 있습니다.

 

참고하세요~~

 

 

 


웹사이트 개발 / 홈페이지 제작 / android앱 개발 / ios 앱 개발 / server / client / aws / fullstack / buisness partner / 외주 / 용역

https://open.kakao.com/o/sNETgUJb

http://self-made.cloud

 

 

728x90
반응형

'개발, 코딩 > App - React Native' 카테고리의 다른 글

react-native-admob  (0) 2019.10.27
expo publish에 대하여  (0) 2019.10.23
expo - version up  (0) 2019.10.21
textinput 정렬  (0) 2019.10.08
Image render bug  (0) 2019.09.19