우선 영상 계속 업로드 해주셔서 감사드립니다. 이 정도 퀄리티의 무료강의는 찾기 힘든데 덕분에 잘 해나가고 있는 것 같아요! 보물을 찾은 것 같은 느낌도 들고 직접 뭔가를 만들면서 공부하니까 더 재밌네요 ㅎㅎ 계속해서 오랫동안 해주시면 항상 감사한 마음으로 챙겨보겠습니다! 화이팅!!
강의 너무 잠들 었습니다.~~ EC2 에서 배포한 코드랑 pc(로컬) 에서 코드 짠 것과 통신을 하고 싶은데요 ?? EC2로 통신을 하려면 const socket = io("ec2 주소"); 이렇게 짜면 될까요?? 그리고 EC2에서 pc롤 통신 하려면 API 롤 해야 할까요 아님 로컬로 보내는 방법은 무엇이있을까요 이런 고민을 한 이유는 현재 pc(로컬 측) 코드가 windows 모듈과 연결이 되여있는 모듈이 있어서요 ;;;;
안녕하세요^^ 시청해주셔서 감사합니다 일단 li가 추가가 된다는건 이벤트 자체는 정상적으로 실행 된다는 것으로 보이는데 내용이 안보이시는것이라면 1. querySelector를 정확히 설정 했는지 2. 서버쪽 메세지 받는 부분에서 정상적으로 넘어오는지? console.log()로 확인 3. 서버가 보낸 메시지를 받아주는 js 코드에서도 정상적으로 받아와지는지 콘솔 로그 확인 이 정도 확인 해보시면 아마 원인을 찾을 수 있을 것 같습니다 안되시면 답글주세요^^
14:16에서 express 깃헙을 보니깐 express 앱 자체적으로 listen할 때 이미 http.createServer()를 실행해서 http 서버를 열어주던데, 왜 따로 http 라이브러리를 따로 require해서 다시 http.createServer(app)처럼 다시 express앱을 넣는 방식으로 http서버를 만드는지 알수 있을 까요?
according to the translation, you are getting problem to display what you received from another user(in this case another browser) right? i guess that can possibly happen when your io.on or socket.on event listener doesnt work. so i would suggest you first check node js server to console the message if the socket is working, then check you front code script in your html code
지금 강의대로 따라해보고 있는데, 6번째 줄까지 코딩하다가 이해가 안돼는 부분이 있어요 const express = require(“express”); const app = express(); const path = require(“path”); app.use(express.static(path.join(__dirname, “src”))); const PORT = process.env.PORT || 5000; app.listen(PORT, () => console.log(`server is running ${PORT}`)); 똑같이 코딩하고 실행(node 파일명.js)해보면, localhost:5000 하면, “Safari cannot open the page because it could not connect to the server” 라고 떠요 왜?? localhost:5000으로 접속이 안되는 걸까요?? ( 그런데 지금, server is running 5000 은 이 부분은 터미널에 잘! 뜨거든요)
안뇽하세요~ 강의 잘보고 똑같이 했는데 궁금한게있게잇습니다!! 1. 시간이 쪼금이상한거같아요~ 시간이 현재시간과 맞지도 않고 또한 채팅을 동시에 여러번치면 시간이 1분씩 금방 변동이된다는?? 2. 혹시 메시지 배경색을 메시지 길이를 글자수에 맞게 줄일 수있나요? 현재는 글자 수와 상관없이 background color가 항상길어서 수정해보고싶네요! ㅎㅎ 감사합니다!!
유튜브에 좋은 강의들 정말 많지만 끝까지 들은 강의는 처음이에요. 이해하기 쉽게 알려주셔서 감사합니다!
너무 잘 배워갑니다. 정말 훌륭한 강의 였습니다. 감사드립니다.
현재30대 중반에 새로운 도전으로 자바스크립트를 배우며 큰 좌절을 맛보는 와중에 좋은 강의를 찾아서 정말 기쁩니다. 정말 오랜만에 재미있게 따라한거 같습니다! 앞으로도 자바스크립트 프로젝트 따라할수있는 강의 올려주시면 감사하겠습니다 :) 강의 정말 잘 보고갑니다
30대중반 늦은 나이라 생각하실 수 있겠지만 충분히 괜찮은 나이입니다!(길은 많으니까요)
자바스크립트를 선택하신것도 탁월하신 선택이구요!
화이팅 입니다 ^^
@@데브리 전 초딩인데 이해가 되네요
@@I_am_jake1104 ??? ㅋㅋㅋ
지금은 어떻게 지내실런디 궁금
좋은 자료 감사합니다. 재미나게 주말 보냈네요.. 나중에 인프런 같은데서 교육 하면 좋겠네요.
진짜진짜 고맙습니다. 사랑합니다!!
고맙습니다.
설명 너무 잘하시고 잘 배우고 갑니다. 구독했습니다. 40대중반 개발자지만 열심히 보고 갑니다 !!
감사합니다
와.. 이해가 쏙쏙 .. 만드는거야 잘하는사람이 많지만 설명도 잘하시다니 대단합니다.
우선 영상 계속 업로드 해주셔서 감사드립니다. 이 정도 퀄리티의 무료강의는 찾기 힘든데 덕분에 잘 해나가고 있는 것 같아요! 보물을 찾은 것 같은 느낌도 들고 직접 뭔가를 만들면서 공부하니까 더 재밌네요 ㅎㅎ 계속해서 오랫동안 해주시면 항상 감사한 마음으로 챙겨보겠습니다! 화이팅!!
감사합니다 이런 댓글들 남겨주시고 응원해주시는 분들 때문에 많이 힘이납니다
테트리스에 이어 채팅 프로그램도 완주 하였습니다. 아직 CSS 와 JS 공부한지 얼마 되지 않아 완벽하게 이해가 가진 않지만 계속 정진하겠습니다. 강의는 정말 좋았습니다.!!
크 진짜 대단한거같아요...!! 좋은 강의 정말 정말 감사합니다 👍👍👍👍👍
평소에 궁금했던 부분이였는데 동영상으로 올려주셔서 재미있게 따라해 보았습니다. 감사합니다!
프론트 불모지 유튜브에서 이런 좋은 강의를 찾다니 정말 좋습니다 ㅠ
이해가 정말 잘되네요 :) 감사합니다! 많은 강의 부탁드립니다. 파이어베이스 데이터연동해서 채팅기록 저장되게도 해보고싶네요.
항상 올려주시는 영상 잘 보고있습니다 감사합니다 😄
넘 재밌게 잘 따라했습니당!ㅎㅎㅎ 명강의네요!! 좋아요 구독 누르고 갑니다 ㅎㅎ
제가 정말 찾고 있던 기능인데 너무 감동입니다ㅠㅜㅜㅠㅠ
이렇게 좋은 강의 올려주셔서 감사합니다!!!
한가지 궁금한 점이 있는데,
혹시 이 프로젝트를 이클립스 다이내믹 프로젝트에 연결해서 사용할 수 있을까요??
너무 좋은 자료 감사합니다. 제가 꼭 찾고있던 강의였습니다! 구독했습니다!!
시간 나는 대로 얼른 또 따라해보겠습니다 감사합니다 ㅎ
감사합니다 ^^
노드 입문용으로 딱인것같아요 ㅎㅎ 소캣통신 설명 이해도 잘갔어요 최고!!!!!!!!!!!!
좋은 강의 💕
정말 실력이 대단하십니다.
좋은영상 감사합니다
(다 따라해봤는데 잘되네요...^^)
감사합니다 ^^
그냥 따라하는것도 힘들엇는데 그냥 쌤 좀 쩌는듯..
안녕하세요? 다 만들었는데요,혹시ngrok말고도메인주소로 유료라도 만들 수 있나요? 윅스나 모두같은 웹사이트에 넣을 수 있나요?
nodejs 써보고 싶었는데.. 다음은 이겁니당!!
마지막에 설명하신 ngrok 주소는 그 주소를 다른 사람에게 보내도 제 컴퓨터가 서버가 되서 동작한다는 말씀인가죠? 강의 잘 들었습니다.
구독하고 정주행중입니다! 갑사합니다
1:00:07 주인장님 최소 부장급인 것 같습니다.......
아악 아재 개그가 아니었....
좋은 강의 감사합니다. 만든 웹페이지에 이 채팅을 연결 하고 싶은데 app.js를 연결하면 되는걸까요?..
안녕하세요?챗을다 만들었는데, 스크롤이 안돼요.클래스랑 그 아랫것도 다 입력했는데, 어디가 잘못됐는지 알 수 있을까요?
강의 너무 잠들 었습니다.~~ EC2 에서 배포한 코드랑 pc(로컬) 에서 코드 짠 것과 통신을 하고 싶은데요
?? EC2로 통신을 하려면 const socket = io("ec2 주소"); 이렇게 짜면 될까요?? 그리고 EC2에서 pc롤 통신 하려면 API 롤 해야 할까요 아님
로컬로 보내는 방법은 무엇이있을까요 이런 고민을 한 이유는 현재 pc(로컬 측) 코드가 windows 모듈과 연결이 되여있는 모듈이 있어서요
;;;;
좋은 강의 감사해요!
안녕하세요? 11분대에서 localhost:5000까진했는데, 들어갔을 때, Hello라는 말이 안 보여요. 어떻게 해야 보이는지 방법이 있을까요? 감사합니다.
항상 너무 감사해요 혹시 리액트 강의는 예정에있으신가요 ? 상태관리 너무 어렵내요..
곧 리액트 뷰도 다룰 예정입니다 ^^
안녕하세요. 영상 업로드 해주셔서 감사하고 잘 봤습니다. 다따라해서 chatting app이 구현이 되긴됬는데 처음에 localhost:5000 브라우저에 넣은후에 대화명과 채팅내용도 넣지 않았는데 undefined 이미지 undefined 채팅내용 시간 (시간은 정상적으로 나옵니다) 이순서로 프린트 되는데 이걸 없앨수있는 방법좀 알려주실수 있나요? html display-container definition부분에는 li가 다지워져있습니다. 감사합니다!
[nodemon] app crashed - waiting for file changes before starting...라는데 왜이러죠? 16:45초 보고있는데
css가 결국 이상해져 버렸어요..하핳 중간에 뭔가 하나 놓친게 있는데 모르겠네요ㅠㅠ css야 뭐.. 나중에 고치면 되겠죠?! 좋은 강의 감사합니다
HTML이랑, CSS 올려주시면 확인 해드릴게요
으아 감사합니다ㅠㅠ
근데 사실 css display-container부분 다 지우고 다시 해보던 도중에 쉬는시간이 끝났어요.. 영상 다시 보고 빼먹은 곳 찾아보려구요 다시 해보고 안되면 그때 도움 부탁드려도 될까요?..
제가 flex를 잘 이해못해서 생긴 문제같아요ㅜㅜ
css 잘 바꿨어요! 이리저리 바꾸다가 뒤섞여서 이게 왜 되지? 싶지만.. 기쁘네요 진짜 ㅠㅠ
안녕하세요 챗을다만들었는데 ngrok은 시간제한이있어서요, 도메인을 사도 html로만되고 node app. js를 영원히 실행할 수 있고, 아니면, 그런 도메인을 어케 만드나요? 궁금해요, 진짜.
27~31 분 챗팅이 되는지 확인하는 과정에서 새로운 브라우저로 보낸 챗팅이 기존 브라우저에는 안보이네요.
브라우저는 크롬입니다. (각브라우저에는 li가 추가는 됩니다.)
안녕하세요^^ 시청해주셔서 감사합니다
일단 li가 추가가 된다는건 이벤트 자체는 정상적으로 실행 된다는 것으로 보이는데
내용이 안보이시는것이라면
1. querySelector를 정확히 설정 했는지
2. 서버쪽 메세지 받는 부분에서 정상적으로 넘어오는지?
console.log()로 확인
3. 서버가 보낸 메시지를 받아주는 js 코드에서도 정상적으로 받아와지는지
콘솔 로그 확인
이 정도 확인 해보시면 아마 원인을 찾을 수 있을 것 같습니다
안되시면 답글주세요^^
@@데브리 server 측에서 받은 데이터를 socket.emit으로 보내서 그랬던것같습니다.. io.emit으로 보내야 했는데.. 죄송합니다.
@@jaouk124 아닙니다! 이렇게 하나 잘못 적어보고 안되는거 발견하고 찾은게 결국 다 나중에 실력으로 직결 되니, 하나 더 얻어가시는겁니다!
화이팅이요 ^^
구독하고 정주행중!
감사합니다 ^^
14:16에서 express 깃헙을 보니깐 express 앱 자체적으로 listen할 때 이미 http.createServer()를 실행해서 http 서버를 열어주던데, 왜 따로 http 라이브러리를 따로 require해서 다시 http.createServer(app)처럼 다시 express앱을 넣는 방식으로 http서버를 만드는지 알수 있을 까요?
강사님 moment 라이브러리 사용했는데 시간이 제각각으로 나오네요.. 말그대로 9:42 PM이 나와야하는데 9:20PM, 9:22PM 등등 난리가 납니다.. 왜이런걸까요..?
시간이 제멋대로 나와요 보낸시간이 2시30분이라고하면 2:50분 이런식으로나와요 현재시각이안나오고 ㅠㅠ
강의에는 실수로 h:ss 로 시와 초를 사용해서 그렇습니다 h:mm로 시 분으로 맞춰보시면 되실겁니다
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') 오류를 해결할 수 가 없네요... 해결방법을 다 써보았는데..
해결했습니다... 명강의 장난아니네여
@@흠흠-d1y 어떻게 해결하셨나요? 저도 여기서 막혔어요
근데 cmd에서 ngrok 실행할때 에러 뜨는데 뭐죠..?
여러명이서 대화중에 한사람만 내용을 볼수 있게 해려고 하는데 닉name을 대상으로 걸러내게 하는게 좋을까요?
22:58 책갈피
안녕하세요 ,감사합니다. 10:57분 부분에서 server is running ${PORT} 이렇게 TERMiNAL에서 출럭되는 것은 왜 그런가요? 좋은 컨턴츠에 감사드립니다.
강사님은 server is running 5000이 출력되는 데요
저는 숫자 1옆의 `로 감썄어요
아마 `로 감싸지 않으신것 같아요
안녕하세요. 유익하게 보면서 공부하고 있습니다.
혹시 궁금한 게 있는데
11분대에서 localhost 5000이 아닌 5500으로 해야지 Hello라는 문장이 뜨는데 이걸 5000으로 했을 때 뜨게 하는 방법이 뭔지 알 수 있을까요?
라이브서버말고 node express로 띄우셔요
cors문제
look i'm not a koran but thanks for this hahaha i follow ur tutorial and well great job bro keep it +1 follow ^^
github주소는 따로 공유 안 하시나요?
해당영상 잘보고 만들어밨습니다. 아무것도모르고 따라해밨어요
혹시 여쭤보고싶은게있는데 해당 채팅을 만들었는데 전체화면으로 꽉차게 보여서요
오른쪽 한쪽에만 조그만하게 채팅 화면나오게 하려면 어떻게해야할까요? 어떤걸 공부해야하는지모르겠어서요
css로 전체를 감싸는 태그에 넓이를 줘보세오
감사합니다.하지만 어떤 이유에서인지 사람들이하는 말에 대한 목록을 작성하지 않습니다. 답장에 코드를 작성할 수 있습니까? 감사합니다-Jake
(Google Translate)
@@믲 you can speak eng to me ,i am a ntive but still can communicate
according to the translation, you are getting problem to display what you received from another user(in this case another browser) right?
i guess that can possibly happen when your io.on or socket.on event listener doesnt work.
so i would suggest you first check node js server to console the message if the socket is working,
then check you front code script in your html code
Ok, thank you, so there has to be chat.js app.js and index.html, I think I made a typo on the li creating part, I will check this again
@@믲 yes after checking you cannot see what the problem is,
then check.my github repo
github.com/code-scalper/chatting
완전 잼잇쪙
추후 node 강의도 따로 올라오나요!?
네 노드js도 한번 만들어보겠습니다
@@데브리 감사합니다 기대하고 있겟습니다! 😀
“서버”의 개념을 좀 더 알고 싶은데요. 강의대로 코딩한다면, 서버는 제 개인컴퓨터가 되는건가요??? 그러면, 제 컴퓨터를 끄면, 채팅도 못하게 되는 건가요??
네 맞습니다, 그런 개발용 환경을 로컬 서버라 부르는 것이고
항시 돌아가는 서버를 위해 호스팅서비스 또는 직접 서버를 마련하여 고정아이피로 설정해놓는 것입니다
지금 강의대로 따라해보고 있는데, 6번째 줄까지 코딩하다가 이해가 안돼는 부분이 있어요
const express = require(“express”);
const app = express();
const path = require(“path”);
app.use(express.static(path.join(__dirname, “src”)));
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`server is running ${PORT}`));
똑같이 코딩하고 실행(node 파일명.js)해보면,
localhost:5000 하면, “Safari cannot open the page because it could not connect to the server” 라고 떠요
왜?? localhost:5000으로 접속이 안되는 걸까요?? ( 그런데 지금, server is running 5000 은 이 부분은 터미널에 잘! 뜨거든요)
@@어바웃시애틀 사파리의 네트워크 셋팅 문제 같습니다
셋팅 초기화 하고 다시해보시거나 다른 브라우저로 해보셔요
1:03:58 부분에 addEventListner에 실행되는 함수에 send 말고 send() 이런식으로 뒤에 ()를 붙이지 않는 이유가 있을까요?
button.addEventListener('click',send()) 로 하면 () 로 인해서 (이벤트 리스너 등록시에 등록과 동시에 ) send 함수가 실행이 되버립니다 .
@@데브리 아.. 답변감사합니다!
10:00 에 막대기는 키보드 어디에 있나요?
안뇽하세요~ 강의 잘보고 똑같이 했는데 궁금한게있게잇습니다!!
1. 시간이 쪼금이상한거같아요~ 시간이 현재시간과 맞지도 않고 또한 채팅을 동시에 여러번치면 시간이 1분씩 금방 변동이된다는??
2. 혹시 메시지 배경색을 메시지 길이를 글자수에 맞게 줄일 수있나요? 현재는 글자 수와 상관없이 background color가 항상길어서 수정해보고싶네요! ㅎㅎ
감사합니다!!
1번 같은문제는 영상 자세히 보시면 h:ss 로 시와 초를 받았습니다 h : mm 로 분 값을 주셔야 값이 동일하게 나올 것입니다!
채팅이 옆에 뜨지 않아요
cdnjs.com에서 복사해서 받았는데도 아직도 console에는 chat.js가 안뜹니다 왜그런걸까요 도와주십쇼
넴 프로젝트 폴더 구조랑
html 코드먼저 보여주시겠어요?
혹시 메시지 보낼때마다 input창에 입력되있던 메시지 초기화 하려면 어떻게 해야할까요?
input에 들어가는 메시지를 초기화시켜주면 될거같은데 방법을 잘 모르겠네요
구글링해보니
send 함수에 마지막줄에
chatInput.value = " " ;
추가해주니까 초기화 됐네요!!
아이고 답변이 늦었네요
맞습니다 input.value 를 "" 해주시면 됩니다 ^^
@@데브리 이정도면 빠른 답장이죠 ㅎㅎ 답변 감사합니다!!
@@이훈석-y3h 오 감사합니다 👍 댓글보고 빠른 수정!!
10분 40초쯤에 나오는 백태그가 무슨 말인지 모르겠습니다. 계속 변수가 안 나오고 ${PORT}그대로 나와요 ㅠㅠ
키보드 숫자 1 옆에 있는 ` 요
' 나 "게 아니에요
@@데브리 빠른 답변 고맙습니다 ㅠㅠ 이제 되네요
화이팅!! 성공하시길 기원합니다 ^^
@@데브리 채팅관련으로 기능을 추가 하고 싶은데 멀티채팅중에 한 사람한테만 보이게 하려면 어떻게 하는게 좋을까요?
혹시 만들기전 질문인데, 친구와 같이 쓴다면 친구가 프로그램같은거 안깔고 사용이 가능한가요??
그렇죠 인터넷만 되면 사용가능합니다
다만 제작하시는분께서
외부에서 접속이되도록 웹서버를 구성해주셔야겠지요
@@데브리 이 강좌를 보고 만들면 인터넷만 되면 사용되게 웹서버를 구성해주나요?
영상말미에 임시 포트포워딩 방법이 나오는데 그걸로 서비스처럼 사용하기는 어렵고 짧은시간 동안은 가능할거에요
그게 아니라면 웹서버 구축하는법을 배우셔야겠지여
이걸로 친구들끼리 할려고 도메인에다가 웹사이트연결까지했는데 index.html파일이 src폴더에 있어서 웹사이트 연결도 안되고 그렇다고 밖에다빼면 채팅이 안쳐져요 어떻게 해야할까요..?
서버사이드는 무슨 언어로 하셨을까요?
서버 설정을 src로 하던지 아니면
index.html에서 src로 href로 걸던지
location.href로 강제로 리다이렉팅 시키던지 하시면 되지 않을까 싶네요
@@데브리 혹시 좀더 쉽게 알려주실수 있나요?
@@pjwoo662 웹사이트 연결하셨다고 하는데 폴더구조가 어떻게 되나요?
어떤 서비스를 사용하신건가요?
@@데브리 파일은 똑같이했고 netlify 라는것을 사용했습니다
@@pjwoo662 제가 도와 드릴 수 있는 범위를 조금 벗어난 것 같긴 한데,
영상에서는 Nodejs를 백엔드로 사용하고 있습니다. app.js가 서버의 시작 지점이 되는 것이구요.
nodejs 백엔드로 호스팅 서비스 셋팅하신건 맞을까요?
28:20
감사합니다. 그런데 "너비"를 계속 "넓이"로 잘 못 말하시는 듯 합니다.
으 감사합니다 지적!
chat.js할때 연결된다는게 안떠요 ㅠㅠ 어떻게하죠
일단 확인 해 실것은
1. 노드js쪽 서버 돌아가고 있는지 확인
2. html파일에서 socket.io js라이브러리 링크거셨는지
3. chat.js 연결 거는 부분에 console log() 로 괄호 사이에 변수들 하나씩 넣어가면서 확인해보시고
에러메시지 확인해보세요
바닐라의 뜻을 모르시나요?
무슨 뜻인가요?
맛있게따
${data.name} 이 undefined 라는데 뭐가잘못된거죠
아 고쳐졌습니다 죄송합니다
어떻게 고치셨나요 저도 똑같이되서..
어떻게 고치셨나요,,,