-
항해 99 5기 TIL_79항해 99 2022. 3. 30. 04:17
▶ Today I Learned
<실전 프로젝트>
[테스트 시 CORS 에러]
프론트 측의 사이트나 백 측의 서버가 배포되지 않은 경우
CORS문제로 접근이 불가능 할 수 있다.
이때는 자신의 브라우저에서 설정에 들어가 해당 옵션을 임의로 지정해줄 수 있다.
내가 쓰는 brave의 경우 brave://flags/ 라는 주소를 입력하면 브라우저의 여러가지를 설정할 수 있는 곳이 나온다.
거기서 아래의 문구가 있는 곳을 Enabled해준 다음 빈 칸에 자신이 접속하고자 하는 브라우저의 url을 넣고 브라우저를
relaunch하면 된다. 그러면 해당 브라우저의 uri를 안전한 origin으로 인식해준다.
(물론 서버 코드 내에서도 cors를 설정해주어야 하니 참고하자.)
Insecure origins treated as secure
Treat given (insecure) origins as secure origins. Multiple origins can be supplied as a comma-separated list. Origins must have their protocol specified e.g. "http://example.com". For the definition of secure contexts, see https://w3c.github.io/webappsec-secure-contexts/ – Mac, Windows, Linux, Chrome OS, Android, Fuchsia
[sequelize DB 조작]
특정 카테고리에 해당하는 방을 더보기를 눌렀을 때 불러오기 위해 다음의 코드를 사용한다.
문제: 메인 아래 더보기를 누르면 마지막 방까지 보여주고 더보기를 눌러도 방을 더 보여주지 않아야 하는데 같은 방이 중복으로 나옴
categoryRooms: asyncWrapper(async (req, res) => { const { categoryId } = req.params; const { p: page } = req.query; let offset = 0; if (page > 1) { offset = 8 * (page - 1); } // categoryId로 방 검색해서 가져오기 const rooms = await Room.findAll({ where: { categoryId }, offset: offset, limit: 8, attributes: [ "id", "title", "isSecret", "createdAt", "likeCnt", "participantCnt", ], include: [ { model: Category, attributes: ["id", "name"], }, { model: Tag, as: "Tags", attributes: ["id", "name"], through: { attributes: [] }, }, ], order: [["createdAt", "desc"]], }); return res.status(200).json({ isSuccess: true, data: rooms, }); }),
알고보니 프론트 측에서 query를 보낼 때 쿼리문의 시작을 ?로 알려주기만 하면 되는 것이었다.
+ 여기서 offset이 무엇인지 몰라 공식 문서를 참조하였다.
offset의 영어 단어 뜻 자체는 '상쇄'이며 무언가를 없앤다는 느낌이다.
아래의 영문 설명처럼 검색하여 나오는 값 중 offset의 수만큼 건너뛴다음 나머지 결과 값을 보여줄 때 사용한다.
// limit the results of the query Project.findAll({ limit: 10 }) // step over the first 10 elements Project.findAll({ offset: 10 }) // step over the first 10 elements, and take 2 Project.findAll({ offset: 10, limit: 2 })
출처:
https://sequelize.org/v5/manual/models-usage.html
▶ 느낀 점
오늘도 코드의 구성을 뜯어보고 조금씩 문제를 해결해 나갔다.
프로젝트의 전반적인 코드를 좀 더 잘 알게 되었다.
코드와 별개로 Docker나 CI/CD를 적용도 이루어지고 있는데
이에 대해서도 차근차근 공부해보아야겠다.
▶ 공부 시 참고 링크들
https://morningame.tistory.com/154
테스트할 때 임시로 cors 설정하는 법
https://community.brave.com/t/brave-config-not-working/140889
https://sequelize.org/master/manual/model-instances.html
'항해 99' 카테고리의 다른 글
항해 99 5기 TIL_81 (0) 2022.04.01 항해 99 5기 TIL_80 (0) 2022.03.31 항해 99 5기 TIL_78 (0) 2022.03.29 항해 99 5기 TIL_73 (0) 2022.03.25 항해 99 5기 TIL_72 (0) 2022.03.25