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

Поділитися
Вставка
  • Опубліковано 25 лис 2024

КОМЕНТАРІ • 71

  • @코딩알려주는누나
    @코딩알려주는누나  Рік тому +6

    안녕하세요! 이번시간에는 채팅앱을 풀스택으로 만들어봅시다!
    프론트엔드 코드 가져오기: 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탄 보러가기❤ :ua-cam.com/video/oFiw5VvgRFg/v-deo.html
    👨‍💻3탄보러가기:ua-cam.com/video/pRGOEtGjI-k/v-deo.html
    코딩알려주는 누나 강의 듣는곳
    codingnoona.thinkific.com/
    뇌를 살찌우러 올래?

    • @Air-0218
      @Air-0218 6 місяців тому

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

  • @chainjohnson512
    @chainjohnson512 Рік тому +1

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

  • @user-blackdurume
    @user-blackdurume Рік тому +4

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

  • @성이름-e2d9c
    @성이름-e2d9c 8 місяців тому

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

  • @nomal4778
    @nomal4778 Рік тому +1

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

  • @후니쨩-w4d
    @후니쨩-w4d 3 місяці тому

    이제 개발 시작한 구독자입니다! 웹소켓 혼자 구현하기 어려웟는데 ㅠ 감사합니다!! ㅎㅎ

  • @Gom1178
    @Gom1178 Рік тому +1

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

  • @Aemond-Vhagar
    @Aemond-Vhagar Рік тому

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

  • @대왕세종이도
    @대왕세종이도 Рік тому +1

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

  • @limo9157
    @limo9157 Рік тому +1

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

  • @kkl1004
    @kkl1004 Рік тому

    지나가다가 구독했어요❤

  • @jamdoly
    @jamdoly 11 місяців тому

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

  • @권재현-n1j
    @권재현-n1j Рік тому

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

  • @임둘기
    @임둘기 Рік тому +1

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

  • @jenny47111
    @jenny47111 Рік тому

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

  • @spongeb2798
    @spongeb2798 Рік тому

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

  • @mrrmr9376
    @mrrmr9376 Рік тому +3

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

    • @daejin98
      @daejin98 Рік тому +1

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

  • @1Q81725
    @1Q81725 Рік тому +1

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

  • @부자부자-v3v
    @부자부자-v3v Рік тому

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

  • @pingfongpangfong
    @pingfongpangfong 8 місяців тому

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

  • @junhoma5361
    @junhoma5361 Рік тому +1

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

  • @江生浩
    @江生浩 Рік тому

    너무귀여워 ❤

  • @idim77
    @idim77 Рік тому +1

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

    • @조창제-l7i
      @조창제-l7i 5 місяців тому

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

  • @BGRIMJI
    @BGRIMJI Рік тому

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

  • @승현-o8w
    @승현-o8w 9 місяців тому

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

  • @hayo-l1x
    @hayo-l1x 2 місяці тому

    아싸입니다 ㅋ

  • @베리블루-b1r
    @베리블루-b1r Рік тому

    이쁘다 ❤

  • @BomHaneul
    @BomHaneul 9 місяців тому

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

  • @올망졸망똘망똘망-f7q
    @올망졸망똘망똘망-f7q 9 місяців тому

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

  • @mumk
    @mumk Рік тому

    재미있네

  • @user-ym8jy7ye3q
    @user-ym8jy7ye3q 11 місяців тому

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

  • @Bob-xc6nk
    @Bob-xc6nk Рік тому

    누나 멋있으세요

  • @saeeun113
    @saeeun113 Рік тому

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

    • @코딩알려주는누나
      @코딩알려주는누나  Рік тому

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

  • @sarah._.k
    @sarah._.k Рік тому +1

    첫댓!

  • @jjihoon03
    @jjihoon03 Рік тому

  • @daisy-z5x
    @daisy-z5x Рік тому

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

    • @코딩알려주는누나
      @코딩알려주는누나  Рік тому +1

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

    • @대문-93
      @대문-93 Рік тому

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

    • @daisy-z5x
      @daisy-z5x Рік тому

      네 감사합니다 해볼게요!

  • @cheolnew6041
    @cheolnew6041 Рік тому

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

  • @backosip
    @backosip Рік тому +1

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

    • @1Q81725
      @1Q81725 Рік тому +1

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

    • @코딩알려주는누나
      @코딩알려주는누나  Рік тому

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

  • @wfhjkk-fp2eg1yu3f
    @wfhjkk-fp2eg1yu3f Рік тому

    공대 누나... ㅠㅠ

  • @moderationpositive5141
    @moderationpositive5141 Рік тому

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

  • @bulletprooves
    @bulletprooves Рік тому

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

  • @gwisekor
    @gwisekor Рік тому

    눈 진짜 크네요

  • @Jindo_haeng_gu
    @Jindo_haeng_gu Рік тому

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

    • @코딩알려주는누나
      @코딩알려주는누나  Рік тому

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

  • @쇼크렛
    @쇼크렛 Рік тому

    혹시 O형이세요?

  • @ADASD-wc2xj
    @ADASD-wc2xj 5 місяців тому

    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...
    이러네요ㅠ 프론트는 돼요

  • @성이름-g3q
    @성이름-g3q Рік тому

    미춋다 미춋다