[NODE,NEST] SERVICE_KEY_IS_NOT_REGISTERED_ERROR 해결

 

요즘 node랑 nest 공부 하면서 간단히 이것저것 만들어 보고 있다가.

공공데이터 포탈에서 어떤 API를 가져오려고 작업을 했었다.

그런데 간헐적으로 SERVICE_KEY_IS_NOT_REGISTERED_ERROR  에러가 자꾸 발생을 하는 

현상을 발견했다.

<cmmMsgHeader>
    <errMsg>SERVICE ERROR</errMsg>
    <returnAuthMsg>SERVICE_KEY_IS_NOT_REGISTERED_ERROR</returnAuthMsg>
    <returnReasonCode>30</returnReasonCode>
</cmmMsgHeader>

 

이런 오류가 자꾸 떨어지는데 

분명 포스트맨에서 테스트 할때는 쭉 정상으로 작동을 했는데 

node서버에서 돌릴땐 어떨땐 정상으로 받아오고 어떨땐 저 에러가 발생을 하는 현상이 있어

이것저것 해봤는데 결국은 인코딩 문제였다. 

왜 간헐적으로 정상응답과 오류응답이 나타나는건지 몰라 한참을 해매다가

그냥 차라리 인코딩을 하지 말고 보내 보자 하고 해보니 저 에러가 나타나지 않고 정상작동 하는것을 확인 했다.

 

// firstValueFrom 함수를 사용하여 Observable을 Promise로 변환
      const response = await firstValueFrom(
        this.httpService.get(
          {
            params: queryParams,
            responseType: 'text', // XML 응답을 처리하기 위해 responseType을 'text'로 설정
          },
        ),
      );

이런식으로 요청을 보내고 있었는데 

확인해보니 

 

HttpService (Axios 기반)를 사용할 때, URL 파라미터는 자동으로 인코딩이 된다고 한다.

Axios는 내부적으로 encodeURIComponent 함수를 사용하여 URL 파라미터의 항목들을 인코딩하기 때문에,

별도로 인코딩 처리를 하지 않아도 된다고 한다.

기존에는 당연히 인코딩해서 보내줘야지 하고 parmas에 보내는 값중 키값을

const encodedApiKey = encodeURIComponent(serviceKey); // API 키 인코딩

이렇게 사용하고 있었는데 

자동으로 인코딩이 한번 더 되버리니 키값에 문제가 생긴것인다.

저 인코딩 해주는 부분을 빼고 디코드 키를 바로 사용하면 해결이 된다.

그럼 그냥 전부 다 오류응답으로 나와야 하는데 왜 되다 안되다 하는것인지는 모르겠다;;;

 

 

[heroku] Cannot find module 'webpack' 에러 해결 방법

 

오랜만에 다시 heroku에 프로젝트 배포를 하려는데

자꾸 저 에러가 뜬다

 

분명 내 컴퓨터에선 잘 돌아가는데 자꾸 웹팩을 찾을수 없단다

로그테일을 보니

2021-02-14T08_12_14_075Z-debug.log

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
2021-02-14T08:12:14.072560+00:00 app[web.1]: npm ERR! Failed at the pirates@1.0.0 start script.
2021-02-14T08:12:14.072710+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2021-02-14T08:12:14.084426+00:00 app[web.1]: 
2021-02-14T08:12:14.084751+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2021-02-14T08:12:14.084956+00:00 app[web.1]: npm ERR!     /app/.npm/_logs/2021-02-14T08_12_14_075Z-debug.log
2021-02-14T08:12:14.170327+00:00 heroku[web.1]: Process exited with status 1
2021-02-14T08:12:14.254487+00:00 heroku[web.1]: State changed from starting to crashed
2021-02-14T08:12:20.716795+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=cheesu001.herokuapp.com request_id=a9a004e0-d046-4f25-a2f8-545fab788982 fwd="124.58.249.175" dyno= connect= service= status=503 bytes= protocol=https
2021-02-14T08:12:21.009151+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=cheesu001.herokuapp.com request_id=a06f1f6d-04ae-4700-8e24-212cb5cab358 fwd="124.58.249.175" dyno= connect= service= status=503 bytes= protocol=https
2021-02-14T08:12:22.548024+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/sw.js" host=cheesu001.herokuapp.com request_id=e1dbf1a0-e255-41b2-826f-2abcb89bb87f fwd="124.58.249.175" dyno= connect= service= status=503 bytes= protocol=https
 
cs

 

뭐 이런것도 쭉 올라오고

디펜던시설정에서 뭔가 잘못된건가 해서 버전도 올려보고 캐쉬도 멈추고 

npm 인스톨도 다시 해보고 하는데도 해결될 기미가 보이지 않았다.

 

한참동안 구글링하면서 아둥바둥 하다가도 대체 뭐가 문제 일까하며 조금씩

 

수정하고 배포하고 수정하고 배포하고 하는데

배포할때마다 거슬리는 뭔가가 나온다

 

 

 

난 그냥 헤로쿠 배포하면서 꾸미기 용도로 저런 모양 만들어 놓은건줄 알았더니

내용을 보니 이제 Heroku-16 스택은 지원을 안한단다

검색해서 내용을 좀더 찾아보니 앵간하면 20으로 마이그레이션을 하라고 한다.

아 설마 저거때문일까 설마 ㅋㅋㅋ 아직까진 지원하는거잖아 ㅋㅋㅋ

 

저걸 보고도 1시간을 더 삽질하다가

진짜 예전스택이라 버전업된거 인식을 못하고 오류뜨는건가 싶어서

 

바로 heroku 20 stack로 마이그레이션 한 후에

 

배포했더니 바로 해결...

 

이제 잘돌아간다..

 

 

하... 

 

4년전에 만들어놧던 프로젝트에 인공호흡기 달아준다고 반나절을 삽질했다.

 

그래도 다시 서비스되는걸 보니 기분이 뿌듯 하다.

 

 

 

 

얼마전 예전에 공부용으로 만들어 뒀던 프로젝트에서 사용하는

MLab mongoDB 서비스가 atlas로 통합된다고

atlas로 마이그레이션 하지 않으면 데이터가 다 날아갈 것이라는 내용의 메일이 날아 왔었다.

 

당장 데이터가 날아간다는데 부랴부랴 마이그레이션 문서 찾아서 하라는대로 해서 

 

데이터를 옮겨놓고 클러스터 만들어서 굴려놓긴 했는데 

서비스하는곳이 바뀌면서 접속 URL이 달라져버렸다

 

기존엔

 

mongodb://[사용자]:[비밀번호]@ds145389.mlab.com:45389/[DB]

이런식이었는데

Atlas로 바뀌면서

mongodb+srv://[사용자]:[비밀번호]@cheesustudy.ujge0.mongodb.net/[DB]?retryWrites=true&w=majority

이렇게 형식이 많이 바뀌었다

url만 바꾸면 되는줄 알고

nodejs db 커넥트 하는 부분에서 URL을 바꿨는데

에러가 뜬다

 

대충 에러 내용은 접속 url형식이 +srv << 이렇게 된건 못쓴다는 내용이었다.

 

구글링을 해보니 mongoose 예전 버전에서는 저 url방식으로 접속이 불가능 하다는 것.

 

다른 방법은 없고 일단 몽구스 버전부터 올려야 했다.

 

3년전인가 4년전에 만들어 놓고 놔뒀던 소스라 잘 될까 했는데

 

역시 안된다.

몽구스 버전 업데이트를 하는데 의존성에 엮여있는것들이 나오고

 

그것들도 버전이 낮아서 제대로 안된다는 내용..;;

 

어차피 예전에 쓰던 노트북에 있던 프로젝트였고

 

현재 집에서 쓰는 데스크탑에선 셋팅한적이 없으므로 아얘 

 

데스크탑에서 새로 셋팅을 하기로 했다.

 

node설치하고 npm으로 새로 싹다 받아서 

 

예전에 깃에 올려뒀던 소스 받고 몽구스 버전만 바꾸어 주었다.

 

혹시 나처럼 mlab 쓰다가 atlas로 강제 이전하게 되었는데

 

디비 접속 오류 나는 사람은 그냥 싹 밀고 버전업 하면 될 것이다.

 

 

[kendo ui] treeView 선택된 노드 정보 가져오기




kendo ui에서 자주 쓰는 기능중 하나인 TreeView



맵형식의 데이터를 트리형식으로 시각화 해주는데 내가 회사에서 자주 사용하는 기능이다.


이떄 선택된 노드의 정보를 가져오는 방법에 대해서 알아보도록 하자




1. treeView에서 노드가 선택될때 이벤트를 주어서 현재 선택된 데이터를 가져오는 방법


1
2
3
4
5
6
7
8
9
10
11
$("#tree").kendoTreeView({
        dataSource : inlineDefault,
        dataTextField : "name",
        select : nodeSelect
    });
 
 
function nodeSelect(e) {
    var data = $("#tree").data('kendoTreeView').dataItem(e.node);
    console.log(data);
}
cs





위 코드와 같이 셀렉트 이벤트를 지정해 주면 된다.




2. 나중에 현재 선택되어져 있는 노드정보를 가져오는 방법



1
2
3
    var mytree = $("#tree").data("kendoTreeView");
    var selected = mytree.select();
    var selItem = mytree.dataItem(selected);
cs



아주 간단하다


끝이다!



[게임] 온라인 텍스트 머드 게임 해적 - 타락하는 인간


구글 스토어 다운로드



Node.js와 React.js로 게임을 만들어 보았다


예전 안드로이드 공부 할떄 만들었던 텍스트 게임을


온라인 버전으로 만든 것인데



예전 PC통신 시절 단군의땅이나 퇴마록 같은 텍스트 머드게임이다.



간단히 게임 소개를 하자면


직업 암살자 마법사 검사  이렇게 3가지가 있다.


레벨 15가 되면 개인 전용 무기를 만들어 준다 


무기 이름과 설명을 사용자가 지정 할 수 있는 것이다.


레벨 40이 되면 전직을 하고 새로운 스킬을 배우게 된다.



레벨별로 사용 가능한 스킬이 있고


상점기능 있다


온라인이니 전채채팅 귓속말 기능도 있고


파티사냥 기능도 있다.



보스몬스터를 잡으면 유니크 아이템도 드랍되고..


무기를 강화하거나 옵션을 변경 할 수도 있다.




처음 시작은 Node.js와 React.js 를 공부하려고 간단하게


만들었다가


하다보니 좋아하는 친구들도 있고 벌써 고레벨까지 키운 친구들도 있고


유저들의 요구사항을 들어주다보니 볼륨이 조금씩 커져갔다;;



그래서 어차피 만든김에 스토어에 올려보자 하고


구글 스토어 개발자 등록한다음 안드로이드 웹뷰 씌워서


스토어에 올렸다 ㅋㅋㅋ


사실 리액트지만 모바일에 최적화된건 아니다 메모리도 많이 잡아먹고;;


최적화를 해야 하는데 좀 막막하긴 하다 ㅋㅋㅋ


원활히 즐기려면 PC환경에서


https://cheesu001.herokuapp.com/


이 주소로 들어가서 하면 된다 



게임을 즐기는 유저들끼리 카카오톡 오픈채팅 열었습니다.


텍스트 머드 << 검색하거나

the pirates << 검색하면 나와요


오픈채팅 접속 링크












configuration resolve has an unknown property 'root' path 해결 방법


만약


webpack.config.js 파일에서


경로 작성시 불편함을 해소 하기 위해


resolve: {
root: path.resolve('./src')
},


위와 같은 코드를 사용후


configuration resolve has an unknown property 'root' path 


라는 메세지가 나오며 build할대 에러가 난다면


https://webpack.js.org/guides/migrating/


이곳을 참고 하자



resolve: {
alias: {
Components: path.resolve(__dirname, 'src/components/'),
Containers: path.resolve(__dirname, 'src/containers/')
}
},



이런식으로 alias를 추가해주고 추가한 별칭으로 경로를 사용하면 해결이 된다.



resolve문제인지 모르고 오전내내 삽질하다가


프로젝트를 처음부터 싹 밀어버리고 다시 하나씩 추가해가면서 빌드를 하던중


resolve 문제인걸 알고 한참동안 찾았다.


문서는 항상 진즉에 읽어보도록 하자


webpack1 에서 webpack2로 마이그레이션 되면서


바뀐 부분이 정말 너무 많다;;; 


지금 보고 있는 강좌가 webpack1 일때 작성되었던 강좌라 


설정방법들이 조금씩 다르다.


따로 가르쳐주는 사람이 없으니 정말 맨땅에 헤딩하면서 공부 하는데 


재밌긴 한데 어렵기도 하다.










Can't not resolve 'react-hot' 

에러 해결 방법





또 아래의 포스팅에 이어서 에러 해결 방법이다


예전 강좌(다른 고수님들이 만들었던) 를 보면 모듈 로더 부분이 


1
2
3
4
5
6
7
8
9
10
11
12
    module: {
        loaders: [
            {
                test: /\.js$/,
                loaders: ['react-hot''babel?' + JSON.stringify({
                    cacheDirectory: true,
                    presets: ['es2015''react']
                })],
                exclude: /node_modules/,
            }
        ]
    }
cs



이런식으로 되어 있는데


뒤에 -loader 을 적어야 해당 오류가 나타나지 않는다.


이것도 아마 버전이 달라져서 그런듯 하다


간단히 불러오려는 로더의 뒷부분에 -loader을 붙여주자


react-hot 옆에 있는 babel에도 마찬가지로 뒤에 로더를 붙여주면 된다.


이전에도 포스팅 했던


2017/02/22 - [Yame Programmer/react.js] - [react.js] module not found error cannot resolve 'babel' in 해결 방법


이것과 같은 에러인 듯 하다.



1
2
3
4
5
6
7
8
9
10
11
12
module: {
        loaders: [
            {
                test: /\.js$/,
                loaders: ['react-hot-loader''babel-loader?' + JSON.stringify({
                    cacheDirectory: true,
                    presets: ['es2015''react']
                })],
                exclude: /node_modules/,
            }
        ]
    }
cs


이렇게 수정해주면


서버 구동이 정상적으로 작동이 된다.




해당 예제는

https://github.com/cheesu/react-express-study


에서 확인 할 수 있습니다.

 Using NoErrorsPlugin is deprecated 

해결 방법






아래와 같은 설정에서 이어지는 포스팅이다.


역시나 웹팩 플러그인에서 문제가 생긴다.


저 에러가 생겨도 일단 서버 구동은 되는듯 한데


대충 이제 저 플러그인 안쓰니까 다른걸로 대체해서 사용해라 라는 메세지이다


답은 메세지에 나와있다

NoErrorsPlugin

대신에


NoEmitOnErrorsPlugin

이걸 사용하면 된다.


1
2
3
4
5
plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ],
cs


여기서


1
2
3
4
5
  plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    ],
cs



이렇게 바꿔주면 해결된다.


물론 그냥 저 NoErrorsPlugin 을 빼버려도 구동은 된다.



잘 정리되어있는 강좌라도 몇달전 강좌라면 지금 버전과 맞지 않는 부분이 생길 수 있으니


node.js나 react.js 같은 나온지 얼마 안된 라이브러리를 공부 할떈


해당 레퍼런스를 꼭 읽어봐야 하는 것 같다.


아니면 git나 stackOverFlow에서 검색을 하거나


역시 이바닥은 계속해서 공부해야 하나보다.


사실 강좌보고 예제 따라하면서 그냥 코드 복사해다가 붙여놓고 


우왕 신기하다 @_@ 


하고 넘어가고 지금까진 예제 코드들도 디코딩이 전혀 안된다


단지 이렇게 실행하다 만나는 에러들 해결방법 찾는 능력만 올라가는 것 만으로


공부가 된다고 위안을 삼는다.



일단 강좌들 한바퀴 쭉 돌고 혼자서 게시판이라도


만들어 볼 생각인데 정말 만만치가 않다


webpack.optimize.OccurenceOrderPlugin 

is not a constructor 

에러 해결 방법



react.js와 express 를 함께 사용 하는 강좌를 보며 예제를 만드는 와중에



npm run build 까진 잘 되다가 


npm run developer 명령어로 서버 실행을 하자





이런 에러가 발생한다.


대충 보니 OccurenceOrderPlugin  라는 녀석의 생성자가 없다 뭐 그런 내용인듯 하다


일단 해당 플러그인을 실행하는 부분에서 에러가 났나본데


한참동안 구글링을 하다가 


문득!


강좌는 몇달전에 만들어진거고 나는 이번에 생성하고 웹팩이나 바벨등을 설치 했으니


버전이 다르지 않을까? 라는 생각을 가지고


다시 검색을 해보니


와.. 세상에... 


이름이 바뀌었다 ㅋㅋㅋ


OccurenceOrderPlugin
OccurrenceOrderPlugin


구분이 갑니까?



webpack 1버전에서 2버전으로 올라오면서


스펠링 'r' 이 하나 더 늘었다



1
2
3
4
5
    plugins: [
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ],
cs



이렇게 되어있던 코드를


1
2
3
4
5
plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ],
cs


이렇게 바꿔주도록 하자...


그럼 해당 에러는 사라지게 된다.


저 밑에 NoErrorsPlugin 이것도 문제가 있는데 다음 포스팅에 올리기로 한다.



해당 예제는

https://github.com/cheesu/react-express-study


에서 확인 할 수 있습니다.

react.js 에서 Jquery 사용 하는 방법(unused import $ from jquery )



nodejs사용 babel, webpack 사용하는 사람들에게 적용 가능 한 방법입니다.


다른건 모르겠네요 어차피 여긴 야매 가이드니까 신경 ㄴㄴ



이제 튜토리얼 하고 있는데 세상에 바닐라JS는 나에겐 너무 높은 벽이었고


3년전 처음 배울때나 바닐라 JS 사용했지 실무투입하고 난 이후부턴


제이쿼리만 주구장창 썻는데 getelementById 라니 이건 나에게 너무나 가혹한것 같아


제이쿼리를 어떻게 쓸수 있을까 하고 또 구글링을 시작 했습니다.


역시 인터넷엔 없는게 없었고


1
import $ from "jquery";
cs


이렇게 js에 추가해 주면 사용 할수 있다고 스택오버플로우 형들이 알려주길래


그대로 적용 시켰더니



왜 죽은 동태눈알 색깔을 하고 있는걸까..


unused import $ from jquery 라는 메세지와


메세지창을 확장시키면


checks that javascript or typescript import binding ... 어쩌구 저쩌구


라고 나오면 실행되지 않는다.


아!


npm에서 제이쿼리를 다운받지 않아서 그런건가? 


그렇지 제이쿼리가 없으면 못쓰는거겟지 라는 생각으로


npm install jquery --save


명령어를 입력후 제이쿼리를 설치 했으나


역시 죽은동태눈깔은 돌아오지 않았다.



조금더 구글링을 해보니


1
2
import jQuery from "jquery";
window.$ = window.jQuery = jQuery;
cs


이렇게 하면 된다고 한다


오오 신기하다 된다된다


이제 리액트에서 제이쿼리를 사용할수 있겟구나 하고


테스트해보니 


제이쿼리 정상작동 하는 것을 확인 할 수 있었다.




+ Recent posts