Sokect.io를 활용한 채팅 서비스

🗣️ 프로젝트 소개 양방향 통신을 위한 웹 소켓 기술을 활용하여 채팅 기능 구현 ✍ 기능 채팅 기능 보낸 시간 채팅 라인 수 확인 대화 상대 목록 공백 입력 X ✍ 코드 기술 static index.css my-chat 사용자가 보낸 채팅 메시지는 오른쪽 div 요소에 메시지 내용과 함께 사용자의 닉네임 출력 other-chat 상대방이 보낸 채팅 메시지 왼쪽 index.js 채팅 애플리케이션의 프론트엔드 코드 Socket.io 소캣 객체 생성 socket.on(' ', ()=>{...}); 소켓에 연결되었을 때 실행할 이벤트 핸들러 등록 views chat.ejs chat.js node.js, Socket.io 로 클라이언트와 서버 간의 양방향 통신을 구현 express 모듈 사용 클라이언트가 웹페이지..

• format_list_bulleted [Study] BE/Node.js
• · 2023. 4. 20.
• textsms

[포스코x코딩온] Socket

더보기 ⚙️ 네트워크 지식이 필요한 부분이었다고 생각한다. 처음 듣는다면 정말 멍 때리고 있을 것 같다. 학교 수업 좀 더 열심히 들을 걸 후회한다. 오늘도 뼈저리게 느끼고 가는 전공지식의 중요성...🤣 그렇지만 통신에 대해 빠져버리니 끝도 없이 공부할 게 계속해서 나온다. 더 깊게 공부하는 것이 맞는지, 코드를 구성하기 위한 지식만 이해하고 넘어가는 게 맞을까라는 의문이 든다. 이해는 되지만,코드는 내 맘대로 안 짜져지는 슬픔이 있었기에 이론을 한 번 더 정리해보고 넘어가는 것도 많은 도움이 될 것 같다. 소켓 소켓은 프로그램이 네트워크 상에서 데이터를 주고 받을 수 있도록 서버랑 클라이언트를 연결해주는 도구이다. 휴대폰을 충전하고자 콘센트 구멍을 찾고 있었다. 그러나 구멍이 없는 벽에 코드를 넣는다 ..

• format_list_bulleted [Study] BE/Node.js
• · 2023. 4. 18.
• textsms

[포스코x코딩온] Cookie, Session

더보기 🍪 특정 사이트에 들어가는 순간 보이는 팝업 창은 모두 닫아버리는 나였다. 눈에 거슬리던 것들이 cookie 라니,, 한 두 개의 팝업이면 모를까 , 여러 개면 더욱더 거추장스럽다. 나처럼 보기 싫은 사람들을 위한 첫 화면에서 많은 쿠키가 있다면 모든 쿠키를 한 번에 제거할 수 있는 방법을 개발하면 좋을 것 같다. Cookie 웹 브라우저 ( 클라이언트)에 저장되는 키와 값(이름, 값, 만료일, 경로 정보)이 들어있는 작은 데이터 파일이다. 개발자 도구 Appliction > Cookie > 확인 가능 ex. 자동 로그인, 안내문의 "☐ 오늘 그만 보기" 동작 방식 클라이언트가 페이지를 요청한다. 서버에서 쿠키를 생성한다. http 헤더에 쿠키를 포함하여 보내고, 만료기간이 끝나지 않았다면 쿠키를..

• format_list_bulleted [Study] BE/Node.js
• · 2023. 4. 12.
• textsms

[포스코x코딩온] Sequelize

더보기 📂 이 모든 것을 알고 나면 편안해지는 게 맞겠죠? ORM 패키지인 Sequelize를 배우고 정리해봤다. 더 자세한 것을 알기 위해서는 공식 문서를 읽어보는 것이 정답일 수도 있겠다. 문제가 생긴다면 가장 빠른 해결 방법은 구글링이라 생각한다. 이전에 sql문을 작성할 때는 실수가 잦았는데, sequelize를 사용하니 좀 더 편리하다는 생각이 들었다. Sequelize ORM 라이브러리 중 하나로 데이터베이스의데이터를 자바스크립트 구문을 통해 sql 문으로 변환한다. 이를 활용하면 sql 언어를 사용하지 않아도 DB 설정이 가능하다. 많은 RDBMS를 지원하고 promise 기반으로 구현되었기에 비동기 로직을 편하게 작성할 수 있다는 장점도 있다. 기존에는 SQL문 쿼리를 작성해서 CRUD를 ..

• format_list_bulleted [Study] BE/Node.js
• · 2023. 4. 9.
• textsms

[포스코x코딩온] MVC_MySQL

더보기 📂 프로젝트 생성만 N번째, 이제는 눈감고도 칠 것 같지 않다. 이제 조금 늘었다는 생각이 드는 건 npm install 에서 install 다 안치고 i 만 쳐버린다. 이 자신 정말 장하다 장해! 저번 시간에 배운 mvc 방식에 mysql 을 연결하여 사용하는 방법을 알아봤다. 아직 mvc도 잘 모르겠는데 내가 어떻게 mysql 연결까지 하지 라는 생각을 했지만 또 질질 끌려가고 있다. 📂 프로젝트 폴더 구조 controller Cvisitor.js View 와 Model 연결 부분 model Visitor.js 데이터 처리 node_modules routes index.js 경로 설정 views 404.ejs index.ejs visitor.ejs UI 관련 처리 .gitignore app.j..

• format_list_bulleted [Study] BE/Node.js
• · 2023. 4. 9.
• textsms

[포스코x코딩온] 데이터베이스

데이터베이스 데이터를 저장하는 구조/자료의 모음으로 데이터의 종합소이다. 데이터 간의 중복은 없어야 한다. 데이터베이스가 없을 때는 파일 시스템을 사용해서 데이터를 저장해왔다. 그러나, 데이터가 중복되고 데이터 간 불일치가 발생하였고, 이를 DBMS로 해결하였다. DBMS(DataBase Management System) 파일 시스템이 가진 문제를 해결하기 위해 만들어졌다. 데이터베이스에 접근하고 이를 관리한다. - 관계형 데이터베이스 = RDBMS(Relational DBMS) 데이터베이스 용어 열 = column = atrribute = 속성 행 = record = tuple = 튜플 테이블 = table = relation key : 데이터베이스에서 튜플을 찾거나 순서대로 정렬할 때 구분하고 정렬의..

• format_list_bulleted [Study] BE/Server
• · 2023. 4. 6.
• textsms