workspace 하나에 들어가면 해당 보드들이 출력되는데 거기에서 진행률을 넣었었습니다. 그런데 넣는 과정에서 두개의 백엔드를 가져와서 연결하니 로딩이 걸린다고해서 백에서 다 로직을 돌린후 결과를 가져와야한다고해서 변경해주었습니다.
처음 사용하는 방법이라 기존에 리더님이 작성해주신 코드를 참고해서 작성했습니다.
- 변경 전 board-columns.service.ts - countWorkspaceCards
const totalCardCount = await this.boardColumnRepository
.createQueryBuilder('column')
.innerJoin('column.board', 'board')
.leftJoin('column.cards', 'card')
.where('board.workspace = :workspaceId', { workspaceId })
.select('SUM(card.board_column IS NOT NULL) as totalCount')
.getRawOne();위 코드를 참고해서 아래처럼 변경후 사용했습니다.
- 변경 후 board-columns.service.ts - countWorkspaceCards
const totalCardCount = await this.boardColumnRepository
.createQueryBuilder('column')
.leftJoin('column.cards', 'card')
.where('column.board = :boardId', { boardId })
.select('SUM(card.board_column IS NOT NULL) as totalCount')
.getRawOne();
const doneCardCount = await this.boardColumnRepository
.createQueryBuilder('column')
.leftJoin('column.cards', 'card')
.where('column.board = :boardId', { boardId })
.andWhere('column.name = :name', { name: 'Done' })
.select('SUM(card.board_column IS NOT NULL) as doneCount')
.getRawOne();
const result: any = { total: totalCardCount.totalCount, done: doneCardCount.doneCount };
// console.log(result);
return result;중간 발표
중간 발표 튜터님 질문
aws에서 ec2,rds와 같은 것은 vpc로 묶여있을테니 들어있는것을 확인하고 공부
메인 기능은?
-> 화상채팅이나 일반 채팅들이 있어 다른 트렐로와는 차이점을 보여줌
서비스 아키택쳐를 좀 더 세세하게 프로토콜을 명시, 백엔드 안에서 머터나 웹itc는 넣을 필요는 없고, 어떻게 통신하는지 보여주면 좋음.
트러블 슈팅을 구체적으로. 어떤 문제가 생겼고 어떻게 해결했는지
chat.js 보면 우리나라 시간으로 바꾸기 위해 하드코딩을 했는데 이렇게 하드코딩을 하면 안됨. 다른 방법을 찾아볼것.
인기가 많아져서 트래픽이 높아지면 어쩔건가?
-> 아직 고려하지 않은 부분. (데브옵스나 다른 인프라를 생각해볼듯하다고함.
채팅이나 이런 부분을 시간을 제어할수 있는 코드가 있는가?
-> 디도스 같은 공격에 대비해야하니 생각해보도록
통신할때 소캣을 쓰는데 다른 서버에서 소캣 메세지를 보냈을때 서버를 검증하는 방법이 있나?
-> 저희 서버에서 연결된 클라이언트 아이디를 기준으로 서버에 유저 값을 저장해서 검증하고 있습니다.
--> 그럼 만약 서버를 만든후 다른이에 소캣을 날리면 요청이 안되나?
---> 기존에 있는 에세스토큰을 검색해서 검증해서 확인.
트러블 슈팅
발생한 문제 - EntityPropertyNotFoundError
-
하나의 배열에 넣기엔 저장되야하는 추가 파일이 s3로 저장되기 때문에 따로 배열을 만들어서 보냄. 이름은 순서를 맞추기위해 따로 저장.
-
그래서 따로 보냈는데 오류가 남.
cards.controller.ts
//카드 수정
@Patch('/:cardId')
async UpdateCard(
@Param('cardId') id: number,
@Query('board_column_Id') board_column_Id: number,
@Body() data: UpdateCardDto,
@Body('members') memberIds: string[],
@Body('originalnames') originalnames: string[],
@Body('alreadyFiles') alreadyFiles: string[],
@Body('alreadyFileNames') alreadyFileNames: string[],
@Body('alreadyFileCount') alreadyFileCount: number,
@Req() req: MulterRequest,
@Res() res: Response
) {
const files: any = req.files;
let fileArray = [];
let fileName = [];
if (files[0]) {
files.forEach((file) => {
fileArray.push(file.location);
});
if (files.length > 1) {
originalnames.forEach((name) => {
fileName.push(name);
});
} else {
fileName.push(originalnames);
}
}
if (alreadyFiles[0]) {
if (alreadyFileCount > 1) {
alreadyFiles.forEach((file) => {
fileArray.push(file);
});
alreadyFileNames.forEach((name) => {
fileName.push(name);
});
} else {
const name = alreadyFileNames;
fileArray.push(alreadyFiles);
fileName.push(name);
}
}
await this.cardsService.UpdateCard(board_column_Id, id, data, fileArray, fileName, memberIds);
return res.status(HttpStatus.OK).json({ message: '카드를 수정하였습니다.' });
}cards.service.ts
//카드 수정
async UpdateCard(
board_column_Id: number,
id: number,
cardInfo: UpdateCardDto,
files: string[],
originalnames: string[],
memberIds: string[]
) {
const column = await this.boardColumnService.findOneBoardColumnById(board_column_Id); // BoardColumnService에서 컬럼 가져옴
if (!column) {
throw new NotFoundException('컬럼을 찾을 수 없습니다.');
}
console.log(files, originalnames);
await this.cardRepository.update(id, {
...cardInfo,
file_url: files,
file_original_name: originalnames,
members: memberIds,
});
}- cards.service.ts에서 찍은 console.log는 배열로 잘 나오는 것을 확인.
아직 오류를 잡지 못했습니다. 컨트롤러에서 새 배열을 생성해서 넣어서 보내는데 왜 엔티티 에러가 나는지 이해가 가지 않습니다.
그리고 카드 수정시 아래 사진과 같이 저장된 파일을 불러오는것까지는 하였는데 지울때 두번 눌러야 프론트에서 지워지지만, 실제로는 안에서는 한번만 누르면 지워집니다.
여기서 그러기 때문에 문제가 발생하는데, 사진을 보면 처음에는 검사창과 현재 실행중인 사이트에서는 두개씩 찍혀있지만
여기서 출석부2.pdf를 지우기를 한번 눌렀을 경우 아래 사진과 같이 사이트에는 아직 두개의 파일이 남아있지만 실제로는 하나의 파일인 cat.jpg만 남아있습니다.
그래서 저 출석부2.pdf가 아직 있는 상태이므로 한번더 누르게 되면,
사이트에서는 cat.jpg만 남은거 같지만 실제로는 모두 지워진것을 확인할 수 있습니다.
그래서 이부분을 해결하고자 onclick이 아닌 id로 받아와서 처리를 해봐도 변화가 없고, 따로 함수를 만들어 onclick을 해도 변화가 없었습니다.
/* 첨부파일 삭제 */
function deleteFile(num) {
document.querySelector(`#file${num}`).remove();
// filesArr[num].is_delete = true;
// filesNameArr[num].is_delete = true;
filesArr.splice(num, 1);
filesNameArr.splice(num, 1);
console.log(filesArr, filesNameArr);
}위 코드에서 저 remove라는 것이 잘 안먹히는 거같은데 아직 다른 방안을 찾지 못했습니다.
기술면접 top30
16. OSI 7계층에 대해 아는대로 설명해주세요.
-> 물리 계층, 데이터 링크계층, 네트워크 계층, 전송 계층, 세션 계층, 표현 계층, 응용 계층으로 나뉘어 있습니다.
물리 계층은 물리적인 장비를 말하고, 데이터 링크 계층은 통신 흐름을 관리합니다. 네트워크 계층은 데이터를 목적지까지 안전하고 빠르게 전달해주고, 전송 계층은 두 지점간의 신뢰성이 있는 데이터를 주고 받게 해주는 역할을 합니다. 세션 계층은 통신하는 호스트 간의 연결을 유지하고 표현 계층은 전송하는 데이터의 표현 방식을 결정합니다. 마지막으로 응용 계층은 최종 목적지로 응용 프로세스와 직접 관계해 일반적인 응용 서비스를 수행합니다.
참고 자료
