React 입문 학생입니다.
NaverLogin을 구현하고 싶은데 cdn을 통해받은()
componentDidMount() {
var naver_id_login = new naver_id_login(“appId”, “Callback URI”);
}
저부분에서 new naver_id_login에서 에러가 나는군요.
error)) naver_id_login is not a constructor.
index.html에 cdn을 추가하고 network에서 받은거 확인했고, console에서 저 구문을 쓰면 잘돌아갑니다. 컴포넌트에서 쓸
때 왜 로드가 안되는 건지 궁금하네요. jquery는 npm으로 받아서 import 시켜서 사용중입니다.
질) 외부 js파일 쓰려면 어떻게 해야하죠?
환경) create-react-app(react, webpack)
선배님들 도움좀 부탁드립니다 ㅠㅜ
디드마운트 되는 시점에 네이버 관련 레퍼런스가 로드가 안되어 있을수 있습니다. 디드마운트에서 콘솔 찍어보시고
윈도우 로드 등으로 로드 이후에 실행되게 해보시면 되지 않을까 싶네요
이런식으로 똑같이 못찾는데 콘솔에는 찍히는거 같은데 어떻게 해야할까요?ㅠㅜ componentDidMount 내에서 콘솔로 찍은 모습입니다.
window 객체를 사용해서 해결했는데 이 해결방법이 맞는지 모르겠네요.
검색해도 3rd js 를 어떻게 들고와서 쓰는지 문서화된걸 찾을수가 읔… 통상 어떤식으로 쓰죠??
componentDidMount에서 requirejs로 땡겨서 스크립트 로드 완료 시점에 처리하시는게 어떠실지…
보통 써드파티도 하나의 번들로 합쳐버리거나 써드파티용 번들(써드파티가 많은경우)을 만듭니다.
CDN에 대한 가이드는 저도 본적이 없네요.
npm에는 네이버 SDK가 등록이 안되어있나보네요.
여기 보시면 sdk 형태로 배포하는 것을 보실 수 있습니다.
다운받아서 특정 폴더(/lib) 같은 곳에 넣어두시고
require('경로/이름') 하시면 될 것 같네요.
다운 받은 후에 src/lib/naver-login-sdk.js 로 저장해서
require(…/lib/naver-login-sdk.js);로 불러왔는데 인식이 안되는데 왜 그런걸까요??ㅠㅜ 도움좀 부탁드립니다.
scriptjs사용해서 해보았는데 alert도 잘나오고 network에서 script로드도 되었는데 저 구문에서 에러가 발생하는데 해결방법 있을까요?ㅠㅜㅠㅜ
저도 해당 sdk 파일을 받아서 확인해봤는데
모듈로 export되어있지 않아서 require하여 사용할 수 없을 듯 합니다.
여기서 API 예제를 확인해보니
html 단에서 인라인 스크립트로 처리하거나
Node.js의 예제처럼(Node는 아니지만) api_url을 통해 처리할 수 있을 듯 싶네요.
개인적으로 2번 방법이 더 나은 것 같습니다.
request모듈 없이 fetch API 사용하면 될 것 같아요.
테스트 해보지 않았지만 네이버 예제 소스를 긁어서 간단히 만들어보자면
자바스크립트 개발자 포럼var client_id = 'YOUR_CLIENT_ID';
var client_secret = 'YOUR_CLIENT_SECRET';
var client_state = "RAMDOM_STATE";
var redirectURI = encodeURI("YOUR_CALLBACK_URL");
var api_url = 'https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=' + client_id + '&redirect_uri=' + redirectURI + '&state=' + client_state;
componentDidMount() {
fetch(api_url)
.then(response => {
// ...
})
.catch(error => {
// ...
});
}
1, 2번다 안되는거 같은데 해결법 없을까요?ㅠㅜ
밤새도록 해도 안되네요… 토나오는군요.
1.번은
라는 코드로 index.html에서 사용시 출력이 되나, component내에서 window.load를 사용할 수 없는 것으로 아는데 어떻게 해결할 수 있을까요??
2번은 cors 문제가 있어서 해결을하고 fetch, axios(get)을 사용하여 요청을 보내봤으나 401 error가 뜨고 네이버 측에서 제공하는 해결방법은 없더군요 ㅠㅜ
네이버 로그인이 꼭필요한데 방법없을까요?? 왜 window.naver_id_login을 해야지만 인식하는지도 모르겠네요.
2번 방법으로 하니까 cors때문에 난감해서
1번 방법으로 했습니다.
저도 웹은 잘 모르지만 아마 window으로 접근하는 이유는 dom 영역에서 선언되어서 그런게 아닐까 싶습니다.
(이유를 아시는 분은 가르침을 주세요!)
파일을 열어보면 var naver_id_login으로 선언되어서 전역에서 참조가 가능하거든요.
401 error는 인증 에러인데 파라미터를 실수하신게 아닐까요?
상당히… 찝찝한데 그래도 돌아가니까 한 번 시도해보세요
도움이 되었으면 좋겠네요. 참고하세요~
// App.js
import React from 'react'
import { BrowserRouter, Route } from 'react-router-dom'
import './App.css'
const App = () => {
return (
<BrowserRouter>
<div>
<Route exact path="/" component={NaverLogin} />
<Route path="/callback" component={Success} />
</div>
</BrowserRouter>
)
}
var client_id = 'YOUR_CLIENT_ID'
var redirectURI = encodeURI("http://localhost:3000/callback")
class NaverLogin extends React.Component {
componentDidMount() {
var naver_id_login = new window.naver_id_login(client_id, redirectURI)
var state = naver_id_login.getUniqState()
naver_id_login.setButton("white", 2,40)
naver_id_login.setDomain("http://localhost:3000")
naver_id_login.setState(state)
naver_id_login.init_naver_id_login()
}
render() {
return <div id="naver_id_login"></div>
}
}
class Success extends React.Component {
state = {
nickname: ''
}
constructor(props) {
super(props)
window.naverSignInCallback = this.naverSignInCallback.bind(this)
}
naverSignInCallback() {
var naver_id_login = new window.naver_id_login(client_id, redirectURI)
this.setState({
nickname: naver_id_login.getProfileData('nickname')
})
}
componentDidMount() {
var naver_id_login = new window.naver_id_login(client_id, redirectURI)
console.log(naver_id_login.oauthParams.access_token)
naver_id_login.get_naver_userprofile("naverSignInCallback()")
}
render() {
return (
<div>환영합니다 {this.state.nickname}님</div>
)
}
}
export default App
4일전 질문인데 이제 봤네요.
외부 js 라이브러리를 이용할때는 이렇게 하면 됩니다. 네이버도 유사하게 가능할겁니다.
componentDidMount() {
if (!document.getElementById('KakaoJSSDK')) {
const scriptKakaoJS = document.createElement('script');
scriptKakaoJS.id = 'KakaoJSSDK';
scriptKakaoJS.src = '//developers.kakao.com/sdk/js/kakao.min.js';
document.body.appendChild(scriptKakaoJS);
}
...
}감사합니다… ㅠㅜ 몇일을 헤메던걸 이제야 해결하네요! window.naverSignCallback 에다가 제껄 넣어주면 되는 거였네요 … ㄷㄷ … 모든 경우 다해봤다고 생각했는데 덕분에 배워갑니다!
감사합니다! 복받으실꺼에요 ㅠㅜㅠㅜ …
이 방법으로는 네이버CDN은 안되네요 ㅠㅜ ryums0227님 방법으로 해결하였습니다. 답변 감사합니다!