박치기 하면서 공부한거 적는공간
nest 소켓 통신1
문제상황
소켓 통신을 해야해서 받았는데 통신이 안됨.
해결과정
-
백엔드 코드를 처음봐서 구조 파악이 안됨.
-
그래서 코드를 보다가 팀원이 남겨놓은 익스텐션 소켓연결 코드 발견
-
소켓연결을 해도 계속 ws/${ip}/ws failed 발생
-
해결방법을 찾기 위해서 인터넷 검색
cra 기본설정때문에 포트 충돌이 난다(우리는 react를 안썼지만 호스트 포트랑 충돌나는지 점검), webpack으로 권한 설정을 해줘야 한다 등등.. -
전부 안되서 팀원들과 같이 보기 시작함
-
일단 네스트 서버에서 소켓이 뚤리는지 확인함.
-
소켓서버가 안뚤려있어서(소켓작업 처음해봐서 잘 몰랐음) 게이트웨이를 module에 추가하고, 포트번호를 4000번으로 바꿈(원래는 설정안했는데 서버 포트로 뚤렸던거 같음) -> postman으로 확인하니까 서버 열린거 확인됨
-
이후 익스텐션에서 서버로 연결하는 방법 찾는중
-
결국 serviceWorker.js에서 코딩하던거 싹 밀어버리고 contentScripts 파일에서 작업하니까 바로 됨.
{
"manifest_version": 3,
"name": "Learn On-Air",
"version": "1.0",
"description": "Learn On-Air for Chrome && inflearn",
"permissions": [
"activeTab",
"tabs",
"storage",
"notifications",
"http://localhost/*",
"<all_urls>"
],
"action": {
"default_popup": "./src/popup.html",
"default_icon": "images/icon-16.png"
},
"web_accessible_resources": [
{
"resources": ["sounds/alarm.mp3"],
"matches": ["<all_urls>"]
}
],
"icons": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
},
"content_scripts": [
{
"js": ["dist/contentScript.bundle.js"],
"matches": [
"http://*/*", "https://*/*"
]
}
],
"background": {
"service_worker": "dist/serviceWorker.bundle.js"
}
}
// manifest
배운거
- node.js는 module이라는게 필요하다. 메타데이터를 전해준다고 한다.(공부 필요함)
- chromeExtension 코드를 짤때 script 폴더 안의 폴더들이 각각 독립적으로 작동한다는 것을 배웠음.
- 포트번호 충돌나는걸 조심해야 한다.
nest 소켓 통신2
문제 상황
익스텐션과 nest 서버를 소켓연결하고, http 통신으로 post를 받아 특정 socket에 신호를 보내고 싶음.
해결 과정
- 먼저 extention과 nest 서버 사이를 소켓 연결 했음.
const SERVER_URL = 'http://localhost:4000';
let socket;
function connect() {
socket = io(SERVER_URL, {
autoConnect: true
});
socket.on('connect', () => {
alert('소켓 연결이 되었습니다!');
chrome.storage.local.get('authToken', function(data) {
const authToken = data.authToken;
socket.emit('sendData', { socketId: socket.id, token: authToken });
});
});
//extention 코드
....@WebSocketGateway(4000, { cors: 'localhost:3000', })
export class AppGateway implements OnGatewayConnection, OnGatewayDisconnect {
constructor(
private jwtService: JwtService,
) {}
private hashTable = new Map();
@WebSocketServer() server: Server;
//이하 생략..
-
서버와 extention의 데이터 통신이 원활하게 되는것을 확인함.
-
이후 http 통신 파일에 게이트웨이의 의존성을 주입하여 http post 데이터를 게이트웨이의 통신 핸들러를 통해 특정 socketId로 데이터를 보냄.
-
데이터를 수신한 특정 socketId의 extention이 반응함.
어려웠던점
소켓을 2번정도 하긴 했었는데 한번은 하루 깔짝했었고(0주차), 두번째는 c언어로 기본적인 에코서버 구현과 간단한 서버를 만드는 것이라 nest서버-extention 사이의 소켓 + http 통신을 구현하는것이 힘들었음.
오늘 하루종일 이거잡고 있었음(약 10시간)
javascript month+1 버그
특이하게 자바스크립트에서는 month를 쓸때 +1을 해줘야 한다.
const month = date.getMonth() + 1;스택 오버플로우에서도 같은 의문을 가진 사람들이 많았는데
요약하자면 다음과 같다.
-
자바스크립트 만든 사람이 month를 zero-base로 했다
-
자바스크립트 데모 버전을 만드는데 시간이 짧아서 못고쳤다고 한다.
-
이후 많은 사람들이 library를 만들었지만 month버그는 여전히 남아있다고 한다.
-
결국 0부터 11까지 쓴다는 것이었다.
불편하지만 어쩔수 없다는거 같다.
프론트-백엔드-서버 통신
문제상황
크롬 extension에서 사용해야 하는 보고서 페이지가 필요한데, extension에서는 cookie에 접근이 불가능 하기 때문에 인증을 요구하지 않는 데이터 연결이 필요했음. 그래서 extension용 nest서버 Get 엔드포인트 하나, 프론트용 http 엔드포인트 하나를 만들어서 통신 연결을 하였다.
해결 과정
// nest 서버용 Get 엔드포인트
@Public()
@Get('/extension')
@ApiOperation({
summary: '회원레포트 익스텐션에서 상세 조회',
})
async readHistoriesInExtension(
@Query('lectureHistoryId') lectureHistoryId: number,
): Promise<ReadHistoryReportExtentionDTO> {
const quizResult =
await this.historyService.retrieveQuizResultEntity(lectureHistoryId);
const quizzes =
await this.quizService.retrieveQuizEntityByQuizResultEntity(quizResult);
const quizResultString =
await this.llmService.convertQuizResultToString(quizzes);
const gptSummery = await this.llmService.generateSummary(quizResultString);
const readHistoryReport =
await this.historyService.readHistoryReportExtension(
lectureHistoryId,
quizzes,
);
return { readHistoryReport, gptSummery };
}
}
// extension에서 푼 문제를 