박현호 개인 스터디 - cheomuk/ChatbotWebSite GitHub Wiki

2022.01.09

<1> 챗봇을 웹사이트에 구현하기 위해선 통신이 필요한데 기존에 쓰던 HTTP 통신은 이에 적합하지 않다 생각해 WS(Web Socket) 서버에 대해 공부하기 시작했습니다.

  • 웹소켓 서버의 장점은 기존 HTTP 서버와는 달리 하나의 HTTP 접속으로 양방향 메시지를 자유롭게 주고받을 수 있다는 것입니다.
  • 다만, HTTP와 달리 Stateful protocol이기 때문에 서버와 클라이언트 간의 연결을 항상 유지해야 하고 만약 비정상적으로 연결이 끊어졌을 때 적절하게 대응해야 하며 Socket 연결을 유지하는 것 자체로도 비용이 많이 드는 단점이 있습니다.

2022.01.10

<2> WS를 Node.js에서 구현하는 방법은 2가지가 있는데 socket 모듈을 이용하는 것과 Socket.io를 사용하는 방법이 있는데 이번 스터디에선 WS 모듈을 사용하는 방향으로 잡았습니다.

  • 웹소켓 서버 동작을 하기 위해선 크게 3가지 과정을 거쳐야 한다.
  1. Socket.js 파일을 만들어 express와 연결한 뒤 이벤트 리스너 4가지(CONNECTING(연결 중), OPEN(열림), CLOSING(닫는 중), CLOSED(닫힘))를 작성한다.
  2. app.js에 웹 소켓을 연결한다.
  3. index.html 혹은 main.ejs에 script로 웹 소켓 설정을 한다. WebSockect 객체에 HTTP서버 값을 넣어 연결을 활성화한 뒤 이벤트 리스너를 작성한다.
  • 기본적인 이벤트 리스너 종류로는 onopen, onmessage, onclose, onerror 등이 있다. 이 외에도 버튼 활성화/비활성화 등 다른 것들도 많이 있다.

2022.01.12

<3> 지난 번엔 위에 소개한 웹 소켓 서버 구현 방법 중 모듈을 사용했으니 이번엔 Socket.io를 활용하여 구현해봤습니다. 게임에서 보면 접속해 있는 서버에 따라 지역 채팅창도 달라지는 것처럼 구현하려고 했고 ROOM1, ROOM2와 같이 지역 채널을 만들어 보았습니다. node를 실행시켜 확인한 결과(단, localhost로 두 창을 띄워 확인함) 서로 메시지를 주고 받는 과정에서 통신이 원활하게 진행되었고 메시지 송수신 또한 양호했습니다만 ROOM을 옮겼을 때 채팅 기록 초기화 및 유저 퇴장 시 메시지 출력 등 몇 가지 기능들이 작동하지 않아 이 에러들을 수정하고 있습니다.

캡처 캡처1 ▶ 룸을 변경하였지만 채팅 내역이 사라지지 않음

2022.01.13

<4> 전날 발생했던 ROOM 관련 문제를 고치고 있는 한편 Chatbot을 넣었을 때 데이터 처리를 어떻게 할 것 인가에 대해 고민하였고 방법을 찾는 시간을 가졌습니다. 클라이언트에서 입력 받은 값을 바로 처리하는 방법과 MySQL과 같은 DB에 값을 저장 후 학습 시키는 방법 사이에서 고민하고 있었고 여러 방면으로 찾아본 결과 DB를 거쳐가는 것이 더 낫다고 판단돼서 Port-Forwording과 새 스키마 생성, 외부 공유 설정 등 MySQL을 다뤘습니다.

2022.01.14

<5> 평소에 즐겨 쓰던 RESTful API를 WS API처럼 써볼 수 있을까? 란 생각에 정보를 3~5초 주기마다 반복문을 사용하여 재호출 하는 방법으로 구현해봤습니다. 이 방법은 꽤 흥미로운 점들이 있었는데 다음과 같습니다.

  1. RESTful API로도 실시간 데이터 송수신이 가능하긴 하다는 점을 발견했습니다. 다만, 분당 1200회가 리미트였고 이 이상 넘어가게 되면 에러가 출력됐습니다.
  2. 1대1 채팅 정도의 작은 규모 실시간 데이터 통신은 RESTful API가 WS API보다 더 빨리 실행된다는 것이었습니다. 작은 규모의 범위는 분당 1200회 미만이어야 합니다.
  • 둘의 기능이 애초부터 다르긴 했지만 의외로 RESTful API가 부분적으로 나마 구현됐다는 것이 매우 신기했습니다.
  • 이 둘을 일상생활에 비유하자면 RESTful API는 방문을 열고 들어간 뒤 방문을 닫는 것이고, WS API는 수도꼭지를 계속 틀어놓은 것이라 할 수 있겠습니다.

2022.01.16

<6> WS API와 MySQL을 연결하기 위해 공부했습니다. MySQL을 연결하기 위해 sequelize를 오랜만에 사용했더니 sequelize.import is not a function 라는 에러가 출력됐습니다. 전에 사용할 적엔 본 적 없는 에러라 찾아봤더니 sequelize 버전이 5.X 에서 6.X로 올라오면서 몇몇 변경 사항이 있었다고 합니다.

  • const model = sequelize.import(path.join(__dirname, file)) -> 이 코드는 5.X 버전까지만 사용 가능하다!
  • const model = require(path.join(__dirname, file))(sequelize, Sequelize.DataTypes) -> 6.X 버전으로 오면서 새롭게 바뀐 문법이다!
  • 이 형식대로 바꿨더니 성공적으로 MySQL과 연결됐습니다.

2022.01.17 ~ 2022.01.18

<7> 기존에 구현했던 WS 채팅 웹에 ID를 추가하여 추후 AI가 MySQL 내 정보를 ID로 분류하여 실시간 학습할 수 있도록 만들었습니다. ID/PW를 만들어서 그 정보를 사용하는 방법과 prompt로 바로 입력 받아서 사용하는 방법 중에서 고민했는데, 간편히 입력 가능한 prompt 기능을 사용하여 구현했습니다. 이번 구현 과정에서 애를 먹었던 것은 다름 아닌 DB연결이었던 것 같습니다.

  • 스크립트 내에서 DB의 경로를 어떻게 선언하느냐에 따라 prompt가 작동하지 않는 버그가 있었습니다. -> 스크립트가 아닌 app.js에서 구현하는 것으로 해결했습니다.
  • DB가 연결되더라도 정보가 제대로 저장되지 않는 현상이 있었습니다. -> HTML 내 스크립트에서 받는 변수 순서와 app.js에서 받는 순서가 달라 에러가 발생했었습니다.
  • DB 관련 코드가 한 줄이라도 인식이 안 되는 경우 메시지 전송 기능이나 채팅창 최신화 기능 등이 마비되는 현상이 있어 정말 조심스레 작업해야 했습니다.
  • createAt 컬럼과 updatedAt 컬럼이 생성은 됐지만 연결할 때 인식 못하는 문제가 있었습니다. -> MySQL 워크밴치에서 삭제 후 재설치하는 것으로 해결했습니다.

2022.01.20

<8> 지난 번 채팅 기록을 MySQL에 추가하는 create 기능을 구현했고 이번엔 CRUD의 나머지 기능들을 구현하려 합니다. create와 달리 나머지 기능들은 프론트에서 사용자가 버튼을 누르는 등의 이벤트가 있어야 작동하게끔 해야 하므로 소켓 이벤트를 추가한 뒤 추후 프론트에 id를 추가하여 연결하는 방식으로 구현하려 합니다.

2022.01.21 ~ 2022.01.23

<9> 딥러닝의 기초를 살펴보고 코드를 분석하는 시간을 가졌습니다. 특히 텍스트를 어떻게 인식하는지, 학습은 어떻게 하는지 등을 중점적으로 봤습니다. 양이 방대하고 처음 접해보는 분야이다 보니 학습하는데 꽤 오랜 시간이 필요할 것 같습니다.

2022.01.26

<10> 곧 프론트 쪽과 작업해야 할 때가 다가와 리액트에 대해 공부했습니다. 최근 프론트 엔드 라이브러리의 추세는 동적인 웹 페이지를 보다 효율적으로 유지 보수하고 관리할 수 있도록 하기 위함인데 이 부분에서 리액트는 Component 단위 작성이 특화되어 생산성과 유지 보수가 훨씬 편리하다는 장점이 있었습니다.

  1. 개인적으로 Node.js의 express와 같이 학습에 용이하게 만들어진 것과 Controller나 Model 등과 같은 부분들을 Component 하나로 만들 수 있다는 것이 좋았습니다.
  2. 직접 느끼진 못했지만 훌륭한 가비지 컬렉터와 메모리 관리가 가능하다는 점이 마음에 들었습니다.
  3. 자주 사용하던 Ajax 통신을 사용 못하는 것과 기본적인 Model, Router와 같은 기능들을 직접 구현해야만 사용 가능하다는 것이 좀 아쉬웠습니다.

2022.01.30 ~

<11> 백엔드 서버 작업 중 Proxy를 사용해 리액트와 간접적으로 연결할 수 있도록 소켓 클라이언트 파일을 새로 하나 만들어 구현했습니다. 이 부분에 대해선 더 학습이 필요해 보여 공부 중입니다.

2022.02.02

<12> 노트북을 들고 이동할 일이 생겨 포트 포워딩을 해놓은 MySQL 서버가 닫힐 것을 염려해 임시 MySQL 서버를 열어놓을 수 없을까 고민을 했습니다. 이에 대해 여러 가지 시도를 해보고 공부해보았습니다.