채팅앱 만들기 | 웹소켓이란 뭘까?| 풀스택으로 만들어보자

안녕하세요! 이번시간에는 채팅앱을 풀스택으로 만들어봅시다!
프론트엔드 코드 가져오기: github.com/leg...
00:00 인트로
00:50 웹소켓 프로토콜 (http VS 웹소켓)
04:44 안내의 말씀 (리액트, nodeJS , 몽고디비)
05:17 오늘 만들 앱 데모
06:31 오늘 우리가 할일
08:50 백엔드 세팅 시작
11:25 데이터베이스 세팅
20:30 웹소켓 세팅
26:06 socket.io의 메인 함수 : on , emit
27:58 프론트엔드 세팅
31:50 웹소켓 연결 테스트
33:17 연결 끊는 테스트
34:27 다음시간 예고
❤2탄 보러가기❤ : • 웹소켓을 이용해 채팅앱을 만들어보자! |...
👨‍💻3탄보러가기: • 어떻게 메세지를 주고받을까? | 웹소켓을...
코딩알려주는 누나 강의 듣는곳
codingnoona.th...
뇌를 살찌우러 올래?
누나 인스타 뭐야? 1008_shine
#채팅앱 #채팅앱만들기 #웹소켓

[@user-yu8so2ck1z]

안녕하세요! 이번시간에는 채팅앱을 풀스택으로 만들어봅시다! 프론트엔드 코드 가져오기: github.com/legobitna/chatapp-client 00:00 인트로 00:50 웹소켓 프로토콜 (http VS 웹소켓) 04:44 안내의 말씀 (리액트, nodeJS , 몽고디비) 05:17 오늘 만들 앱 데모 06:31 오늘 우리가 할일 08:50 백엔드 세팅 시작 11:25 데이터베이스 세팅 20:30 웹소켓 세팅 26:06 socket.io의 메인 함수 : on , emit 27:58 프론트엔드 세팅 31:50 웹소켓 연결 테스트 33:17 연결 끊는 테스트 34:27 다음시간 예고 ❤2탄 보러가기❤ :kzbin.info/www/bejne/pXfMqGiMq8yFfMk 👨‍💻3탄보러가기:kzbin.info/www/bejne/poOqgHiqfM98Y80 코딩알려주는 누나 강의 듣는곳 codingnoona.thinkific.com/ 뇌를 살찌우러 올래?

[@Air-0218]

저 혹시 이영상에서 사용하는 프로그래밍 언어가 뭔지 알수있나요?

[@Mybebedawn]

빠르고 쉽게 소켓 적용하기 슥샥샥 따라하기 좋게 만드신것같아요! node.js와 프레임워크, 소켓, db 시스템에 대한 기본 지식은 갖춘 분들이 봐야겠네요 ㅎㅎ 2탄 눈빠지게 기두리는중 ~~

[@chainjohnson512]

오 누나 보고싶었쪄영!! 내일 소중히 보께여~!!

[@nomal4778]

궁금했던 건데 다음에 꼭 챙겨볼께요

[@Gom1178]

미쳤다 프로토콜을 저렇게 이해하기쉽게 대단쓰

[@대왕세종이도]

이 누님 설명 참 이해되기 쉽게 잘 해주네~~ ㅋ

[@user-blackdurume]

코딩은 둘째치고 주인장 너무 너무 이쁘당

[@Aemond-Vhagar]

오 감사합니다 그렇지 않아도 제가 필요했던 부분이었습니당😊

[@user-sv3tr5bf4b]

유익한 지식을 공유해주어서 고마워요

[@jamdoly]

개발자 접은지 20년인데 이 영상이 뜨는것도 재밌고 코알누나같은분이 계셨다면 계속했었을 수도 있었겠다 싶네요😀😃😄😁😆

[@user-yu8so2ck1z]

지금이라도 !! 😀

[@user-vt9kj7ds2q]

스터디에서 웹소켓 필요했는데! 누나 좋은강의 감삼다!

[@mrrmr9376]

오 오늘 강의 너무 좋습니다 다음에 해주실 때 만약 인터넷이 끊어졌을 때는 어떻게 처리를 해야 하는지도 좀 알려주시면 좋겠습니다 nodejs 로는 안해봐서요 예전에 php로 해보니까 창을 닫거나 스스로 종료를 하면은 disconnect 가 되는데 인터넷이 아예 연결이 종료되었을때는 그게 안되서 어떻게 하는지 궁금합니다 ㅎ (클라이언트의 인터넷이 강제종료된 상황)

[@daejin98]

그냥 Java 겉핥기만 하는 웹코더 입니다. 서버에서 소켓이 열리면 배열로 담아놨다가 일정시간마다 배열 읽어서 소켓 살아있는지 체크해서 리스폰스 안오면 강제종료 시키기도 합니다. 채팅앱은 만든지 너무 오래되서 요새도 이렇게 하는지는 모르겠어요 ㅋ

[@jenny47111]

강사님. 너무 감사합니다!! 지금 제가하고있는 프로잭트에 딱 필요한 강의에요 ! 소오름!!쫙났어요.. 다음강의때 model 에 online 사용하는것도 알려주실거죠? ㅋ 기다려지네요~

[@1Q81725]

웹서버랑 프론트서버 프로젝트 두개인거죠?? 노드초보라 뭔가 이상해서 ... 찾다가 아이클라우드에 올려서 그런줄 알고 이짓저짓 해보다가 영상 보다가 흠칫 했네요.. 영상 감사합니다. ㅠㅠ

[@user-yu8so2ck1z]

네 프로젝트가 두개입니다!

[@kkl1004]

지나가다가 구독했어요❤

[@임둘기]

그냥 목소리 듣기 좋네요 나중에 개발자asmr 영상 하나 만들어주세요

[@user-yu8so2ck1z]

끼아아아 내목소리가 좋더니!😍😍

[@limo9157]

아하 프론트엔드 프로젝트를 에디터로 따로 열고, 백엔드 프로젝트도 에디터로 따로 열어 실행이군요 ㅠㅠ

[@spongeb2798]

누나 어느덧 구독자 8만... 항상 고마워요

[@user-yu8so2ck1z]

으아아아 너무 오랜만이야 스펀지밥! 너무 고마워🥰🥰

[@user-iy7xz3vu6v]

우와 누나 멋있어요 .. ㄷㄷㄷ

[@groomingLIFE]

안녕하세요, npm start하면 5001리액트실행되고 nodemon index.js 하면 접속아이디로그뜨는데 5001리액트 재접속안되고 연결끊겨요. 또한 로컬호스트3000은 접속안되요... 아시는분...?

[@idim77]

누나. 짱!!! 질문이 있어요. 내 컴퓨터 말고, 옆에 컴퓨터가 한대 더 있는데, 그것에서 연결하려면, 어떻게 세팅을 바꾸고, 옆 컴퓨터에서는 브라우저로 어떤 주소로 접속할 수 있는 거죠?

[@user-pr9hx9co3s]

접속하려는 컴퓨터의 내부아이피:PORT로 접속하시면되요

[@junhoma5361]

뭐지 오늘 채팅 만들어야됬는데.. 감사합니다..

[@user-pv8jk4vt6t]

너무귀여워 ❤

[@sarah._.k]

첫댓!

[@pingfongpangfong]

server listening -- 이랑 connected to database 까지는 잘 뜨는데 index.js 실행하고 localhost:3000 들어가면 safari가 페이지를 열 수 없다고 합니다 ㅠㅠ 해결 방법이 있을까요?

[@user-jq7hy2cc3c]

이쁘다 ❤

[@user-cm3iz1or7y]

정렬 해주는거랑 세미클론 단축키 쓰시는거같던데 어떤거에요???

[@user-yu8so2ck1z]

저장시 자동 정렬해줍니다! 아거 vscode에서 설정해주실 수 있어요 !

[@user-cm3iz1or7y]

감사합니다!!!!

[@mumk]

재미있네

[@user-vc9zx6xk8s]

혹시 MongoDB를 설치해서 실행해야 정상적으로 동작할까요..? socket 응답 cb 함수에 데이터를 실어 보내도 콘솔에는 catch 문만 나타나네요 ㅠㅠ (백엔드 지식이 전무해서 궁금하여 질문드립니다)

[@user-yu8so2ck1z]

네 몽고디비있으셔야합니다

[@BGRIMJI]

01:09 갑자기 북조선 억양이 나와서 웃음 ㅋㅋㅋ

[@user-ym8jy7ye3q]

아잇 다 따라하고 있었는데 뭘 잘못한건지 콘솔로그가 하나도 안 되네요ㅠ 이래선 확인을 못하게썽유 ㅠㅠㅠㅠ 백엔드 서버를 돌리면 콘솔 메세지가 뜨고 프론트도 돌리면 백엔드 쪽에서 클라이언트 연결 되었다는 콘솔 메세지가 떠야하는데 nodemon 에 문제가 있는건지 [nodemon] app crashed 블라블라 라는 메세지도 뜨고,,, 왜 이러는걸까요

[@BomHaneul]

이거보면 홈페이지에서도 구현가능한가여?

[@saeeun113]

nodemon을 설치했는 데 commaned not found error가 떠서 node app.js로 실행했더니 connect ECONNREFUSED라는 에러가 뜨는 데... 혹시 어떻게 해야 할까요? mongoDB Compass에서부터 연결이 안돼요

[@user-yu8so2ck1z]

그 에러 구글에찾으면 많이 나옵니다! 몽고세팅문제일 가능성이 있습니다!

[@Bob-xc6nk]

누나 멋있으세요

[@bulletprooves]

댓글 도메인 ▪︎유익한 영상 감사합니다 : 50% ▪︎코알누 넘 예뻐용 😍🤩 : 50% 기냥 채널이름 코알(예쁜)누로 바꾸셔용 ( >ᴗ•́ )

[@user-yu8so2ck1z]

잉 🥰

[@jjihoon03]

오

[@backosip]

mongodb 연결이 안된다고 여기서 막히네요

[@1Q81725]

몽고디비 설치되어 있지 않으면 도커로 설치 추천합니다.

[@user-yu8so2ck1z]

Mongodb compass로 여셔서 거기서부터 연결되는지 확인해주세요!

[@user-db4rl3md8r]

mongodb 연결 처음에는 잘 됐다가 시간이 지나고 Database connection error: MongooseServerSelectionError: connect ECONNREFUSED ::1:27017 이런 에러가 뜹니다. 검색해서 brew services restart mongodb-community이렇게 하는 등 여러가지 시도했지만 여전히 똑같은 에러가 납니다. mongodb 연결 안 되는거 같은데 어떻게 해결해야 하는지 모르겠습니다

[@user-yu8so2ck1z]

혹시 컴퓨터 남은 용량이 작은가요? 처음에 연결됐다가 안돼는거라면 용량 부족일 수있습니다. 용량 확보해주시거나 컴퓨터 재부팅뒤 다른거 키지 마시고 compass만 키셔서 연결 확인해보세요!

[@대문-93]

mongoDB를 설치하셔야할거예요~ 로컬에 ㅎㅎ

[@user-db4rl3md8r]

네 감사합니다 해볼게요!

[@cheolnew6041]

누나랑 같이 일할려면 어떻게 해야해요? ㅎㅎ

[@user-yu8so2ck1z]

일단 개발자가 되어보자!

[@Jindo_haeng_gu]

배포는 어떻게 하나요? 무료로 배포 가능 한가요?

[@user-yu8so2ck1z]

Netlify 프론트 aws beanstalk 백엔드 배포 가능합니다 물론 사용량에따라 가격이 매겨질 수 있지만 그냥 포트폴리오용은 괜찮아요

[@moderationpositive5141]

누나 나 아싸인거 어떻게 알았어?

[@wfhjkk-fp2eg1yu3f]

공대 누나... ㅠㅠ

[@gwisekor]

눈 진짜 크네요

[@user-kl5zi8qx4b]

혹시 O형이세요?

[@ADASD-wc2xj]

server listening on port~client is connected 가 안 떠요ㅠ nodemon 설치 되어있어도 nodemon index.js하면 zsh: command not found: nodemon 이렇게 떠서 npx nodemon 했더니 serimmmaime@a-ui-MacBookAir chatapp-client copy % npx nodemon index.js [nodemon] 3.1.3 [nodemon] to restart at any time, enter `rs` [nodemon] watching path(s): *.* [nodemon] watching extensions: js,mjs,cjs,json [nodemon] starting `node index.js index.js` node:internal/modules/cjs/loader:1148 throw err; ^ Error: Cannot find module '/Users/a/b/chatapp-client copy/index.js' at Module._resolveFilename (node:internal/modules/cjs/loader:1145:15) at Module._load (node:internal/modules/cjs/loader:986:27) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:174:12) at node:internal/main/run_main_module:28:49 { code: 'MODULE_NOT_FOUND', requireStack: [] } Node.js v20.14.0 [nodemon] app crashed - waiting for file changes before starting... 이러네요ㅠ 프론트는 돼요

[@user-yd8sr9ot9u]

미춋다 미춋다

[@onemoredick]

눈나 어우 섹시해❤❤❤❤❤❤ ㅋㅋ