채팅앱 만들기 | 웹소켓이란 뭘까?| 풀스택으로 만들어보자
Vložit
- čas přidán 17. 07. 2024
- 안녕하세요! 이번시간에는 채팅앱을 풀스택으로 만들어봅시다!
프론트엔드 코드 가져오기: github.com/legobitna/chatapp-...
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.thinkific.com/
뇌를 살찌우러 올래?
누나 인스타 뭐야? 1008_shine
#채팅앱 #채팅앱만들기 #웹소켓
안녕하세요! 이번시간에는 채팅앱을 풀스택으로 만들어봅시다!
프론트엔드 코드 가져오기: 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탄 보러가기❤ :czcams.com/video/oFiw5VvgRFg/video.html
👨💻3탄보러가기:czcams.com/video/pRGOEtGjI-k/video.html
코딩알려주는 누나 강의 듣는곳
codingnoona.thinkific.com/
뇌를 살찌우러 올래?
저 혹시 이영상에서 사용하는 프로그래밍 언어가 뭔지 알수있나요?
빠르고 쉽게 소켓 적용하기 슥샥샥 따라하기 좋게 만드신것같아요! node.js와 프레임워크, 소켓, db 시스템에 대한 기본 지식은 갖춘 분들이 봐야겠네요 ㅎㅎ 2탄 눈빠지게 기두리는중 ~~
오 누나 보고싶었쪄영!!
내일 소중히 보께여~!!
오 감사합니다 그렇지 않아도 제가 필요했던 부분이었습니당😊
궁금했던 건데 다음에 꼭 챙겨볼께요
스터디에서 웹소켓 필요했는데! 누나 좋은강의 감삼다!
지나가다가 구독했어요❤
미쳤다 프로토콜을 저렇게 이해하기쉽게 대단쓰
이 누님 설명 참 이해되기 쉽게 잘 해주네~~ ㅋ
유익한 지식을 공유해주어서 고마워요
강사님. 너무 감사합니다!! 지금 제가하고있는 프로잭트에 딱 필요한 강의에요 ! 소오름!!쫙났어요.. 다음강의때 model 에 online 사용하는것도 알려주실거죠? ㅋ 기다려지네요~
누나 어느덧 구독자 8만... 항상 고마워요
으아아아 너무 오랜만이야 스펀지밥! 너무 고마워🥰🥰
개발자 접은지 20년인데 이 영상이 뜨는것도 재밌고 코알누나같은분이 계셨다면 계속했었을 수도 있었겠다 싶네요😀😃😄😁😆
지금이라도 !! 😀
우와 누나 멋있어요 .. ㄷㄷㄷ
오 오늘 강의 너무 좋습니다
다음에 해주실 때
만약 인터넷이 끊어졌을 때는 어떻게 처리를 해야 하는지도 좀 알려주시면 좋겠습니다
nodejs 로는 안해봐서요 예전에 php로 해보니까 창을 닫거나 스스로 종료를 하면은 disconnect 가 되는데
인터넷이 아예 연결이 종료되었을때는 그게 안되서 어떻게 하는지 궁금합니다 ㅎ
(클라이언트의 인터넷이 강제종료된 상황)
그냥 Java 겉핥기만 하는 웹코더 입니다. 서버에서 소켓이 열리면 배열로 담아놨다가 일정시간마다 배열 읽어서 소켓 살아있는지 체크해서 리스폰스 안오면 강제종료 시키기도 합니다. 채팅앱은 만든지 너무 오래되서 요새도 이렇게 하는지는 모르겠어요 ㅋ
너무귀여워 ❤
뭐지 오늘 채팅 만들어야됬는데.. 감사합니다..
코딩은 둘째치고 주인장 너무 너무 이쁘당
그냥 목소리 듣기 좋네요
나중에 개발자asmr 영상 하나 만들어주세요
끼아아아 내목소리가 좋더니!😍😍
웹서버랑 프론트서버 프로젝트 두개인거죠?? 노드초보라 뭔가 이상해서 ... 찾다가 아이클라우드에 올려서 그런줄 알고 이짓저짓 해보다가 영상 보다가 흠칫 했네요.. 영상 감사합니다. ㅠㅠ
네 프로젝트가 두개입니다!
아하 프론트엔드 프로젝트를 에디터로 따로 열고, 백엔드 프로젝트도 에디터로 따로 열어 실행이군요 ㅠㅠ
server listening -- 이랑 connected to database 까지는 잘 뜨는데 index.js 실행하고 localhost:3000 들어가면 safari가 페이지를 열 수 없다고 합니다 ㅠㅠ 해결 방법이 있을까요?
재미있네
누나. 짱!!! 질문이 있어요. 내 컴퓨터 말고, 옆에 컴퓨터가 한대 더 있는데, 그것에서 연결하려면, 어떻게 세팅을 바꾸고,
옆 컴퓨터에서는 브라우저로 어떤 주소로 접속할 수 있는 거죠?
접속하려는 컴퓨터의 내부아이피:PORT로 접속하시면되요
이쁘다 ❤
혹시 MongoDB를 설치해서 실행해야 정상적으로 동작할까요..? socket 응답 cb 함수에 데이터를 실어 보내도 콘솔에는 catch 문만 나타나네요 ㅠㅠ (백엔드 지식이 전무해서 궁금하여 질문드립니다)
네 몽고디비있으셔야합니다
정렬 해주는거랑 세미클론 단축키 쓰시는거같던데 어떤거에요???
저장시 자동 정렬해줍니다! 아거 vscode에서 설정해주실 수 있어요 !
감사합니다!!!!
누나 멋있으세요
nodemon을 설치했는 데 commaned not found error가 떠서 node app.js로 실행했더니 connect ECONNREFUSED라는 에러가 뜨는 데... 혹시 어떻게 해야 할까요? mongoDB Compass에서부터 연결이 안돼요
그 에러 구글에찾으면 많이 나옵니다! 몽고세팅문제일 가능성이 있습니다!
첫댓!
아잇 다 따라하고 있었는데 뭘 잘못한건지 콘솔로그가 하나도 안 되네요ㅠ 이래선 확인을 못하게썽유 ㅠㅠㅠㅠ
백엔드 서버를 돌리면 콘솔 메세지가 뜨고 프론트도 돌리면 백엔드 쪽에서 클라이언트 연결 되었다는 콘솔 메세지가 떠야하는데 nodemon 에 문제가 있는건지 [nodemon] app crashed 블라블라 라는 메세지도 뜨고,,,
왜 이러는걸까요
이거보면 홈페이지에서도 구현가능한가여?
01:09 갑자기 북조선 억양이 나와서 웃음 ㅋㅋㅋ
오
mongodb 연결 처음에는 잘 됐다가 시간이 지나고 Database connection error: MongooseServerSelectionError: connect ECONNREFUSED ::1:27017 이런 에러가 뜹니다.
검색해서 brew services restart mongodb-community이렇게 하는 등 여러가지 시도했지만 여전히 똑같은 에러가 납니다.
mongodb 연결 안 되는거 같은데 어떻게 해결해야 하는지 모르겠습니다
혹시 컴퓨터 남은 용량이 작은가요? 처음에 연결됐다가 안돼는거라면 용량 부족일 수있습니다. 용량 확보해주시거나 컴퓨터 재부팅뒤 다른거 키지 마시고 compass만 키셔서 연결 확인해보세요!
mongoDB를 설치하셔야할거예요~ 로컬에 ㅎㅎ
네 감사합니다 해볼게요!
누나랑 같이 일할려면 어떻게 해야해요? ㅎㅎ
일단 개발자가 되어보자!
댓글 도메인
▪︎유익한 영상 감사합니다 : 50%
▪︎코알누 넘 예뻐용 😍🤩 : 50%
기냥 채널이름 코알(예쁜)누로 바꾸셔용 ( >ᴗ•́ )
잉 🥰
공대 누나... ㅠㅠ
누나
나 아싸인거 어떻게 알았어?
혹시 O형이세요?
mongodb 연결이 안된다고 여기서 막히네요
몽고디비 설치되어 있지 않으면 도커로 설치 추천합니다.
Mongodb compass로 여셔서 거기서부터 연결되는지 확인해주세요!
눈 진짜 크네요
배포는 어떻게 하나요? 무료로 배포 가능 한가요?
Netlify 프론트 aws beanstalk 백엔드 배포 가능합니다 물론 사용량에따라 가격이 매겨질 수 있지만 그냥 포트폴리오용은 괜찮아요
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...
이러네요ㅠ 프론트는 돼요
미춋다 미춋다
눈나 어우 섹시해❤❤❤❤❤❤ ㅋㅋ