Socket.IO 자기 브라우저 에서만 emit 되는 현상 해결 방법

남는시간에 react를 공부해 보고자 튜토리얼들을 보고 난 후

실시간 채팅기능을 만들어 보고자

socket.io를 사용 하게 되었다.

여러가지 React Socket.io 라든지  Socket.io React 라던지 여러가지 많았는데 이것 저것 삽질 하다가

그냥 원래 node.js에서 잠깐 만들었던 방법으로 socket.io만 사용해서 구현 하기로 했다.

그런데 분명히 코딩도 제대로 했고

브라우저에서 emit 날려주면 날린 브라우저에서는 값을 다시 제대로 받아 오는데

다른 브라우저에서 날려준 값을 받아오지 못하는게 아닌가

반나절을 삽질을 하다가

socket.io 레퍼런스 사이트를 들어가 하나씩 들춰 보기 시작했다.

.

.

.

.

세상에....

한달사이에 또 무언가 바뀌어 있었다 ㅋㅋㅋㅋㅋㅋ

view단에서가 아니라 server단에서 바뀐게 있었다

기존에 서버에 작성했던 코드는

이런식이었다. 그런데 이게 업데이트 되면서

위와 같이 작성한 소켓통신은 통신을 요청한 브라우저 에서만 다시 서버에서 요청을 날려주는 것 이었다.

응답은 받지만 다시 클라이언트로 요청을 날려주는건 요청한 브라우저에게만 날려 주는 것.

접속한 모두가 서버로 부터 요청을 받기 위한 방법

서버에서 이렇게 작성을 해 주어야 한다.

뭐가 다른지 햇갈린다면 두개를 동시에 비교 해 보도록 하자

위는 날린 사람에게만 날려주는 것

아래는 모두에게 날려주는 것

커넥션을 할때 io.sockets.on 과 io.on의 차이 였다.

물론 이렇게 한다면 개인적인 소켓통신을 하도록 하는 것이 더 편해지는 것 같다.

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' 

에러 해결 방법

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

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

이런식으로 되어 있는데

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

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

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

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

이전에도 포스팅 했던

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

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

이렇게 수정해주면

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

해당 예제는

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

에서 확인 할 수 있습니다.

 Using NoErrorsPlugin is deprecated 

해결 방법

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

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

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

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

답은 메세지에 나와있다

NoErrorsPlugin

대신에

NoEmitOnErrorsPlugin

이걸 사용하면 된다.

여기서

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

물론 그냥 저 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' 이 하나 더 늘었다

이렇게 되어있던 코드를

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

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

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

해당 예제는

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

에서 확인 할 수 있습니다.

node js cannot read property 'replace' of undefined 에러 해결 

방금전 ejs를 못찾는다는 에러를 해결후 예제대로 테스트를 해봤는데

서버 실행시키는 것 까지는 성공

그러나 브라우저에서 해당 포트번호 적고 띄워보니

cannot read property 'replace' of undefined 라는 에러가 나타나면서 접속에러가 떠버린다.

이건 뭐 내가 뭘 잘못했는지도 모르겠고

30분 삽질하다가 예제의

서버실행 부분의 readfile를 보니

ejs 파일명만 적어놓고 경로는 없다는걸 보고

혹시나 하는 생각에 위의 예제가 있는 폴더 안에 ejs 파일을 넣고 실행시켰더니 정상 동작 한다....

그렇지.. 아직 맵핑도 없고 아무것도 없는 상태였지...

하.. 멍청한짓을 하다니;;

너무도 자연스럽게 서버와 ejs는 분리되는게 맞겠지 하면서

폴더를 나눠놓고 실행시켜서 나타났던 오류였다

cannot read property 'replace' of undefined  이 오류가

이 포스팅의 이유만으로 나타나는 것은 아니고 여러가지 이유가 있겠지만

혹시나 나와 같은 실수를 하는 사람이 있거나 내가 같은 실수를 또 할 것만 같아서

이렇게 포스팅을 한다.

Cannot find module 'ejs' 에러 해결 방법

드디어 node.js 에 나도 입문을 하게 되었다.

node.js 설치 과정은 다른 블로그에도 많이 나와있고 나중에 시간이 되면 포스팅 하기로 하고

이 포스팅 내용을 검색해 들어온 사람들은 이미 설치를 끝내고 나서 진행하다가 찾아 온 사람들이니 생략

그리고 진짜 오늘 시작해본것 이기 때문에 진정한 야매가이드라는걸 잊지 말고

내 포스팅을 전부 신뢰하진 말길....

nodejs 서버에 jsp 같은 파일을 띄우려면 템플릿? 이라는걸 사용해야 한단다

jade도 있고 ejs도 있는데 html이랑 제일 유사하게 생긴게 ejs라고 하길래 어떻게 하는가 찾아 봤더니

ejs를 설치 하란다

그래서 설치 하고 예제에 있는대로 작성하고 서버를 실행시켰더니

Cannot find module 'ejs' 라는 에러가 나타난다

이런게 뜨길래 구글링해서 찾아봤더니

역시나 스택오버플로우 형님들이 해결책들을 제시해 주었다

package.json 이라는 녀석을 열어 보면 저렇게 mvc2에서 디펜던시 해주는것처럼 종속성에 대한 정보가 들어있는 녀석이 있는데

저기에 아마 ejs 라는 동그라미친 부분이 없어서 나오는 에러이다

저부분을 추가해 주면 해결이 된다고 하는데 난 해결이 안된다...

그래서 스크롤을 좀더 내려보니

npm install ejs --save

이렇게 설치를 해야 한다고 한다

npm 명령어중 --save 는

설치된 node 모듈을 pakage.json 파일 내의 디펜던시 목록에 추가 하게 하는 옵션이다.

나도 아직 nodejs 설치 한지 두시간밖에 안지나서 정확히는 모르겠다.

여하튼 에러나는 사람은 저렇게 다시 설치 해보도록 하자

그리고 만약 프로젝트 폴더에 package.json 이 파일이 없다면

프로젝트 등록? 뭐 그게 안된거다

방법은 해당 프로젝트 폴더로 들어가서

npm init 라는 명령어를 실행시켜

어플리케이션을 보관할 디렉토리를 작업 디렉토리로 설정 하도록 하자

대충 엔터치면 지나가는데

해당 어플리케이션 설명이나 리파지토리 뭐 이런거 적으라고 나오는건

알아서 적도록 하자 그냥 엔터쳐서 넘겨도 된다.

그중에

entry point:(index.js) 라고 나오는데

기본 파일의 이름을 지정 하는것 이라고 한다.

ps: 뒤에 --save 붙이는게 의무적인건 아니라고 한다... 근데 난 저거 붙여서

해결했으니까 ㅠ_ㅠ;;; 

ps2: 에러난 이유가 환경 변수의 문제일 수도 있겠다는 제보를 받았다

노드js는 C에 설치 하고 프로젝트폴더는 D에 있어서 

내가 처음에 설치 할떈 글로벌로 설치 하면 드라이브 상관 없이

다 되는 건줄 알고 npm install ejs -g 라는 -g 옵션을 썻는데

이렇게 설치 하면 C에 경로가 잡히가 되는거 아니냐는 의견을 받았음.

확인 해보진 않았지만 혹시나 다른 사람들은 확인해보시길