{"id":18611512,"url":"https://github.com/gloriajun/chatapp","last_synced_at":"2026-04-18T04:33:19.849Z","repository":{"id":105095983,"uuid":"163278313","full_name":"gloriaJun/chatApp","owner":"gloriaJun","description":"chatting programming based on vue.js","archived":false,"fork":false,"pushed_at":"2019-01-10T01:59:03.000Z","size":109,"stargazers_count":0,"open_issues_count":4,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-16T23:33:41.592Z","etag":null,"topics":["nodejs","socket-io","vuejs","vuetify"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gloriaJun.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-12-27T09:59:59.000Z","updated_at":"2019-04-18T08:03:54.000Z","dependencies_parsed_at":null,"dependency_job_id":"87608de1-8681-4f3a-b951-0216d444b55c","html_url":"https://github.com/gloriaJun/chatApp","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/gloriaJun/chatApp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gloriaJun%2FchatApp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gloriaJun%2FchatApp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gloriaJun%2FchatApp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gloriaJun%2FchatApp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gloriaJun","download_url":"https://codeload.github.com/gloriaJun/chatApp/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gloriaJun%2FchatApp/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31956989,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T00:39:45.007Z","status":"online","status_checked_at":"2026-04-18T02:00:07.018Z","response_time":103,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nodejs","socket-io","vuejs","vuetify"],"created_at":"2024-11-07T03:14:05.521Z","updated_at":"2026-04-18T04:33:19.810Z","avatar_url":"https://github.com/gloriaJun.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Chatting App\n\u003e 채팅 어플리케이션 구현\n\n## Contents\n\n- [개발 환경](#configuration)\n- [프로젝트 구조](#structure)\n- [Installation](#installation)\n- [Requirement](#requirement)\n- [문제 해결 전략](#solution)\n- [개선할 부분..](#more)\n\n### 개발 환경 \u003ca id=\"configuration\"\u003e\u003c/a\u003e\n\n#### Backend\n\n- Node.js\n- Socket.io\n\n#### Frontend\n\n- Vue.js\n- Vuetify.js\n\n#### Testing\n\n- Jest\n\n### Project Structure \u003ca id=\"structure\"\u003e\u003c/a\u003e\n\n```bash\n├── README.md\n├── backend\n│   ├── package.json\n│   └── src\n│       ├── model\n│       ├── server.js\n│       └── socketEvents.js\n└── frontend\n    ├── babel.config.js\n    ├── package.json\n    ├── postcss.config.js\n    ├── public\n    │   ├── favicon.ico\n    │   └── index.html\n    ├── src\n    │   ├── App.vue\n    │   ├── assets\n    │   ├── components\n    │   ├── constants\n    │   ├── directives\n    │   ├── main.js\n    │   ├── plugins\n    │   ├── router\n    │   ├── socket.js\n    │   ├── stores\n    │   ├── styles\n    │   └── views\n    └── tests\n        ├── e2e\n        └── unit\n```\n\n### Installation \u003ca id=\"installation\"\u003e\u003c/a\u003e\n\n#### 패키지 설치\n\n```bash\ncd backend\nyarn install\n\ncd frontend\nyarn install\n```\n\n#### 프로젝트 실행\n\n```bash\ncd backend\nyarn start\n\ncd frontend\nyarn serve\n```\n- 접속: http://localhost:8080\n\n#### 테스트 실행\n\n```bash\n# unit test\nyarn run test:unit\n```\n\n### Requirement \u003ca id=\"requirement\"\u003e\u003c/a\u003e\n\n- Client side rendering으로 개발\n- 언어에 대한 제한은 없음\n- 서버 구현 방법에 대한 제한 없음 (REST API, Long Polling, Socket...)\n- 프론트엔드 구현 방법은 제한 없음 (Angular, React, Preact, Vue, jQuery...)\n- UI 구현에 대한 제약은 없음\n- 단위 테스트 필수, UI 테스트(Storybook, Selenium)와 통합 테스트는 선택\n\n#### User Story\n\n- 사용자는 첫 진입 시, ID를 입력하여 접속할 수 있다.\n- 채팅방 리스트에서 채팅방을 선택하여 들어갈 수 있다.\n- 채팅방에 다른 사용자를 초대할 수 있다.\n- 사용자는 채팅방에서 텍스트를 입력할 수 있다.\n- 사용자는 채팅방에서 이미지를 입력할 수 있다.\n\n### 문제해결 전략 \u003ca id=\"solution\"\u003e\u003c/a\u003e\n\n#### UI 구성\n\n- UI Component 라이브러리는 Vuetify.js를 사용\n- 화면 구성은 아래와 같이 구현\n  - 로그인 화면 : Login.vue\n  - 로그인 후에 구현되어있는 채팅룸 리스트를 확인하기 위한 화면 : ChatHome.vue\n  - 채팅룸 화면 : ChatRoom.vue\n  \n- 화면을 구성하는 아래의 부분은 컴포넌트로 구현하여 화면에서 사용한다.\n  - 로그인 폼\n  - 로그인 후의 채팅 어플리케이션 상단 툴바\n  - 메시지 입력 박스\n  - 이미지 업로드 버튼\n  - 메시지 리스트\n  - 채팅룸 리스트\n\n#### 각 화면에 대한 기능 구현\n\n##### 로그인 화면\n\n- 사용자는 첫 진입 시, ID를 입력하여 접속할 수 있다.\n  - 이미 서버에서 사용 중인 아이디라면 중복 에러가 발생되어 화면에 에러메시지가 출력되도록 처리\n    - 사용 중인 아이디인지 어떻게 체크할 것인가??\n      - 서버에서 로그인이 성공하면 사용자에 대해 내부 배열에 저장하여, 사용자명이 배열에 포함되어 있는 지 체크한다.  \n\n- 사용자 정보 모델 \n```\n{\n  socketId: String,\n  username: String,\n}\n```\n\n##### 채팅룸 리스트 화면\n\n- 이미 생성되어 있는 채팅룸 리스트를 어떻게 서버에서 받아올 것인가?\n  - 로그인을 성공하면 서버에서 콜백메서드에 생성되어있는 채팅룸 배열을 담아서 전달한다.\n     - 클라이언트는 전달받은 값을 store에 저장\n\n- 채팅룸 모델 \n```\n{\n  roomId: Number,\n  name: String,\n  member: Array,\n}\n```\n\n##### 채팅방 화면\n\n- 내가 전달한 메시지인 경우에 별도의 다른 색상으로 표현\n   - 현재 접속된 사용자의 메시지인지 확인하기 위해 로그인 후에 사용자의 정보를 store에 저장한다.\n- 메시지 객체를 store에 저장한다.\n   - 채팅룸을 나가면 해당 객체는 초기화한다.\n- 메시지가 전달되면 제일 하단으로 화면을 스크롤 처리\n   - 메시지 객체가 변경되면 일정 시간 후에 스크롤 이벤트를 발생시킨다.\n   - 재사용성을 위해 vue.js의 directive를 이용하여 구현\n- 채팅방에 사용자를 초대\n  - 초대가 가능한 사용자 정보를 어떻게 불러올 것인가?\n    - 채팅방의 사용자 초대 버튼을 클릭하는 시점에 서버로 요청\n    - 현재 온라인 상태(서버에 접속되어 있는)인 사용자 중에 채팅방의 member로 포함되어있지 않은 사용자를 필터링 하여 서버에서 전달한다.\n\n#### 그룹 채팅\n\n- socket.io의 room을 이용하여 채팅 그룹을 생성하고, 해당 그룹에 메시지를 전달하도록 한다.\n```javascript\n// 룸을 생성 또는 조인\nsocket.join(roomName);\n\n// 해당 룸에 속한 클라이언트에 메시지를 브로드캐스팅\nio.to(roomName).emit('event name');\n```\n\n#### 서버와의 통신\n\n- 어떠한 기술을 사용할 것인가??\n  - [Socket.io](https://socket.io/)를 이용하여 서비스를 구현한다.\n  - html5의 websocket을 이용하는 경우 구형 브라우저는 지원이 되지 않는 문제가 있을 수 있음\n  - socket.io는 *브라우저와 웹 서버의 종류와 버전을 파악하여 가장 적합한 기술을 선택하여 사용하는 방식*\n- 로그인, 채팅방 목록 등 모두 소켓 통신을 이용하여 구현할 것인지? 채팅방 접속 이후와 사용자 초대 기능에 대하여 소켓통신을 구현할 것인지??\n  - 각기 나누어 기술을 구현하는 것이 적합한지 아닌지 정확한 판단이 되지 않으므로 socket 통신 기술을 이용하여 구현\n  - 만약, 사용자 초대 기능과 채팅방 기능에 대해서만 소켓통신을 사용하고 실시간 통신이 필요하지 않은 기능에 대해서는 http 통신을 이용한다면...\n    - socket.io의 namespace를 이용하여 사용자 초대와 채팅방 기능을 구분하여 통신하도록 구현하는 것도 방법일 듯 함.\n\n### 더 개선해보기 \u003ca id=\"more\"\u003e\u003c/a\u003e\n\n#### 프론트앤드\n\n- [ ] 채팅방 검색\n- [ ] 대화내용 검색\n- [ ] 채팅방 추가\n- [ ] 현재 채팅방에 포함된 사용자 리스트 확인 기능\n- [ ] 반응형 적용\n\n#### 백앤드\n\n- [ ] Database 연동 (firebase, mongodb, redis, ...)\n\n### 기타\n\n- [ ] 화면 리프레쉬하는 경우에, 이미 인증한 사용자 정보가 날라가지 않게 처리하기 (세션, 쿠키) \n  - 백앤드에서 세션을 이용해서???\n  - 아니면, 프론트에서 브라우저 쿠키에 저장해놓고, 쿠키 정보가 있으면 다시 로그인을 시도해서???\n- [ ] CI/CD 구현하기\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgloriajun%2Fchatapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgloriajun%2Fchatapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgloriajun%2Fchatapp/lists"}