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
728x90

expo는 아주 잘 관리되고 있는것같다.

 

"비록, RN에 비해서 Prod에서 쓰기에는 무리가 있다." 라고는 하지만,

앱의 규모를 생각해서 판단하도록 하자.

 

많은 고급 라이브러리의 사용을 요구하지 않는 앱개발이 예정되어있다면 expo도 추천할만 하다.

 

버전업 방법은 간단하다.

 

app.json의 sdk version을 올려주고, node_modules를 삭제한 뒤, npm install 하여 module들을 새로 설치하면 끝.

 

이라고 생각하면 잘못된 판단.

 

expo library들이 설치되어있다면 package.json도 수정해주자

 

expo버전을 app.json과 맞추고 npm install 한 다음, 실행해보면 어느 라이브러리들이 버전이 맞지않는지 나타난다.

 

해당 라이브러리들의 버전을 올린뒤, node_modules파일을 제거하고 다시 npm install

 

그러면 정말 완료!

 

명심할것은, expo sdk version은 standalone file을 배포해야지만 유저앱에 반영된다. 

 

code push (publishing)으로는 되지않는다.

 

 

 


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

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

http://self-made.cloud

 

 

728x90
반응형

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

expo publish에 대하여  (0) 2019.10.23
xcode download link  (0) 2019.10.21
textinput 정렬  (0) 2019.10.08
Image render bug  (0) 2019.09.19
react-navigation, initialrouteName dynamic 하게 설정하기  (0) 2019.09.17
728x90

Youtube가 정말 핫합니다.

그래서 유튜브를 좀 더 적극적으로 활용하기 위해 Youtube API를 nodejs와 함께 쓰는법에 대해 포스팅을 해보겠습니다.

 

먼저, 목적에 따라 쓰는법이 달라질 수 있으니,

제가 쓰고자 하는 목적에 따라 아래의 가이드를 선택적으로 살펴보세요.

 

Type A: 단순히, 영상 id를 통해 목록 혹은 영상의 정보를 호출하고자 하는경우

Type B: 계정에 영향을 주는 작업, 예를들어 영상업로드나 수정과 같은.

 

* Type A

이 경우에 작업은 매우 간단하다.

GCP 계정을 생선한 다음 credentials에서 web용 api-key를 발급받습니다.

 

영상정보를 호출하고자 하는 경우,

https://www.googleapis.com/youtube/v3/videos

위의 url로 params: { key, id, part } 정보와 함께 get 요청을 하면됩니다.

part의 값으로는 'snippet,contentDetails'와 같은 값이 올 수 있습니다.

https://www.googleapis.com/youtube/v3/videos?key=abcabccom&id=wowow10&part=snippet

 

 

* Type B

이 경우에는 작업이 다소 복잡합니다...

우선, OAuth의 인증 작업을 걸쳐야 합니다.

따라서, 클라이언트와의 연계작업이 불가피하게 들어가게 됩니다. (여기서 말하는 연계작업이란, 클라이언트 사이드에서의 로그인 인증 과정을 말합니다.)

 

아래와 같이 작업해볼까요?.

Nodejs서버에 npm의 youtube-api, dotenv 세개의 라이브러리를 설치합니다. (없어도 구현가능 하지만, 예제에서는 사용하도럭 하겠습니다.)

 

다음, GCP credentials에서 OAuth client를 하나 생성하겠습니다.

이 때, callback url은 자유롭게 설정해도 되나, 예제와 같이하려면 /oauth2callback을 콜백url로 지정하는게 속편하겠죠?.

예를들면, "http://localhost:9000/oauth2callback"

생성한 계정정보를 가지고 앞으로의 작업을 진행할 것입니다.

const OAuth = Youtube.authenticate({
    type: 'oauth',
    client_id: process.env.OAUTH_ID,
    client_secret: process.env.OAUTH_PW,
    redirect_url: 'http://localhost:9000/oauth2callback',
});

 

OAuth를 통해 인증작업을 진행해보도록 하겠습니다..

*** dotenv모듈을 설치하면 .env파일에 저장한 정보들이 환경변수로 지정되며 위와같이 process.env.변수명 으로 불러올 수 있다.

*** 사용을 희망하는 파일에서 require('dotenv').require()와 같이 파일 맨 상단에 불러와주면 된다.

 

const data = { ...뭐시기뭐시기 };

const url = OAuth.generateAuthUrl({
  access_type: 'offline',
  scope: ['https://www.googleapis.com/auth/youtube.upload'],
  state: JSON.stringify(data),
});

return res.redirect(url); or return res.send(url);

 

위 코드에서  data는 클라이언트에서 받아온 정보이거나, 하여튼 무언가 정보가 있을수 있습니다.

(예를들면 영상과 영상정보)

callback에서 해당 정보를 전달받기 위해서는 위와 같이 state에 값을 string형태로 저장해 보내주면 됩니다.

아마 작업을 하시다보면 꼭 필요한 부분일것입니다. 잘 응용하시길 바랍니다.

 

이제, callback을 받아볼까요?

app.get('/oauth2callback', async (req, res) => {
    let { code, state } = req.query;
    state = JSON.parse(state);

    OAuth.getToken(code, (err, tokens) => {
        OAuth.setCredentials(tokens); //신뢰할 수 있는 사이트 지정

        const config = {
            part: 'snippet,status',
            resource: {
                snippet: {
                    title: state.title} 아이디어 발표영상,
                    description: state.description,
                    tags: ['유튜브api', '테스트'],
                },
                status: {
                    privacyStatus: 'public', // public, unlisted, private
                },
            },
            media: {
                body: state.media, // media
            },
        };
 

        Youtube.videos.insert(config, (err, data) => {
            if (err) return res.status(500).send('failed');
            else return res.status(200).send('success');
        });
    });
});

 

여기서 media파일이 중요합니다.

위의 경우에는 s3에 저장된 영상을 getObejct하여 바로 createReadStream() 처리해 받아온 경우이기 때문에 바로 사용할 수 있었습니다.

 

만약, 서버에 저장된 영상파일을 올려야한다면,

fs.createReadStream(media)와 같이 처리해야합니다.

 

 

 


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

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

http://self-made.cloud

 

 

728x90
반응형
728x90

nodemailer는 nodejs 에서 매우 쉽게 이용할수 있는 이메일 시스템이다

 

다만, 적용 과정에서 작은 에러들을 겪을수 있다.

 

아래의 지시문을 따르면, 100% 해결할 수 있을것이다.

https://support.google.com/mail/answer/7126229?visit_id=637068026543380659-3617662132&rd=2#cantsignin

 

다른 이메일 플랫폼을 통해 Gmail 확인하기 - Gmail 고객센터

도움이 되었나요? 어떻게 하면 개선할 수 있을까요? 예아니요

support.google.com

 

nodemailer 사용법을 모른다면,

https://www.w3schools.com/nodejs/nodejs_email.asp

 

Node.js Email

Node.js Send an Email The Nodemailer Module The Nodemailer module makes it easy to send emails from your computer. The Nodemailer module can be downloaded and installed using npm: C:\Users\Your Name>npm install nodemailer After you have downloaded the Node

www.w3schools.com

 

 

 


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

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

http://self-made.cloud

 

 

728x90
반응형
728x90

Javacsript에서 Object를 다루는것은 매우 중요하다.

 

그 중, Object에서 특정 조건의 값들만 추출하는 코드를 소개해본다.

 

더 좋은 방법도 얼마든지 있을 수 있다.

const person = {
  strong: true,
  weak: false,
  drink: false,
  smoke: false,
  glass: true
};

이와 같은 object가 있을때 true 값들을 추출해보자

Object.keys(person).filter((p) => person[p] === true).join(', ');

 

strong, glass

라는 결과값을 얻을 수 있다.

 

*참고_ join은 Array를 특정 규칙을 기준으로 String으로 변환하는 Array 메서드이다.

 

 

 


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

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

http://self-made.cloud

 

 

728x90
반응형