박현호 개인 스터디 - 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가지 과정을 거쳐야 한다.
- Socket.js 파일을 만들어 express와 연결한 뒤 이벤트 리스너 4가지(CONNECTING(연결 중), OPEN(열림), CLOSING(닫는 중), CLOSED(닫힘))를 작성한다.
- app.js에 웹 소켓을 연결한다.
- index.html 혹은 main.ejs에 script로 웹 소켓 설정을 한다. WebSockect 객체에 HTTP서버 값을 넣어 연결을 활성화한 뒤 이벤트 리스너를 작성한다.
- 기본적인 이벤트 리스너 종류로는 onopen, onmessage, onclose, onerror 등이 있다. 이 외에도 버튼 활성화/비활성화 등 다른 것들도 많이 있다.
2022.01.12
<3> 지난 번엔 위에 소개한 웹 소켓 서버 구현 방법 중 모듈을 사용했으니 이번엔 Socket.io를 활용하여 구현해봤습니다. 게임에서 보면 접속해 있는 서버에 따라 지역 채팅창도 달라지는 것처럼 구현하려고 했고 ROOM1, ROOM2와 같이 지역 채널을 만들어 보았습니다. node를 실행시켜 확인한 결과(단, localhost로 두 창을 띄워 확인함) 서로 메시지를 주고 받는 과정에서 통신이 원활하게 진행되었고 메시지 송수신 또한 양호했습니다만 ROOM을 옮겼을 때 채팅 기록 초기화 및 유저 퇴장 시 메시지 출력 등 몇 가지 기능들이 작동하지 않아 이 에러들을 수정하고 있습니다.
▶ 룸을 변경하였지만 채팅 내역이 사라지지 않음
2022.01.13
<4> 전날 발생했던 ROOM 관련 문제를 고치고 있는 한편 Chatbot을 넣었을 때 데이터 처리를 어떻게 할 것 인가에 대해 고민하였고 방법을 찾는 시간을 가졌습니다. 클라이언트에서 입력 받은 값을 바로 처리하는 방법과 MySQL과 같은 DB에 값을 저장 후 학습 시키는 방법 사이에서 고민하고 있었고 여러 방면으로 찾아본 결과 DB를 거쳐가는 것이 더 낫다고 판단돼서 Port-Forwording과 새 스키마 생성, 외부 공유 설정 등 MySQL을 다뤘습니다.
2022.01.14
<5> 평소에 즐겨 쓰던 RESTful API를 WS API처럼 써볼 수 있을까? 란 생각에 정보를 3~5초 주기마다 반복문을 사용하여 재호출 하는 방법으로 구현해봤습니다. 이 방법은 꽤 흥미로운 점들이 있었는데 다음과 같습니다.
- RESTful API로도 실시간 데이터 송수신이 가능하긴 하다는 점을 발견했습니다. 다만, 분당 1200회가 리미트였고 이 이상 넘어가게 되면 에러가 출력됐습니다.
- 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 단위 작성이 특화되어 생산성과 유지 보수가 훨씬 편리하다는 장점이 있었습니다.
- 개인적으로 Node.js의 express와 같이 학습에 용이하게 만들어진 것과 Controller나 Model 등과 같은 부분들을 Component 하나로 만들 수 있다는 것이 좋았습니다.
- 직접 느끼진 못했지만 훌륭한 가비지 컬렉터와 메모리 관리가 가능하다는 점이 마음에 들었습니다.
- 자주 사용하던 Ajax 통신을 사용 못하는 것과 기본적인 Model, Router와 같은 기능들을 직접 구현해야만 사용 가능하다는 것이 좀 아쉬웠습니다.
2022.01.30 ~
<11> 백엔드 서버 작업 중 Proxy를 사용해 리액트와 간접적으로 연결할 수 있도록 소켓 클라이언트 파일을 새로 하나 만들어 구현했습니다. 이 부분에 대해선 더 학습이 필요해 보여 공부 중입니다.
2022.02.02
<12> 노트북을 들고 이동할 일이 생겨 포트 포워딩을 해놓은 MySQL 서버가 닫힐 것을 염려해 임시 MySQL 서버를 열어놓을 수 없을까 고민을 했습니다. 이에 대해 여러 가지 시도를 해보고 공부해보았습니다.