week4 메이커로그
쓰는 사람이 편하기 위한 QAing 개발기
안녕하세요!
이제 곧 QAing의 QA를 앞둔 QAing 팀입니다!
어느덧 4주차가 되었네요!
이번 4주차는 본격적인 개발 주차에 돌입한 주차였는데요!
그 사이 있었던 몇가지 에피소드들을 풀어보려 합니다!
그럼 바로 시작해볼게요~!
프론트엔드, 첫 번째 관문 크롬 익스텐션 제출!
저희는 크롬 익스텐션으로 서비스를 제공하다보니
프론트엔드에서 저희 도메인과 크롬 익스텐션을 나눠서 두 개의 레포지토리를 관리해야 했어요!
크롬 익스텐션 코드는 미리 크롬 브라우저에 로드해서 테스트해볼 수 있었습니다!
수많은 테스트 끝에 드디어 오늘! 프로그램 제출을 완료할 예정이랍니다!
아직 만들어지는 중인 저희 QAing 프로그램이 보이네요!
백엔드, 배우고 바로 적용하기
백엔드에서는 새로 하는 것들이 너무 많았어요!
로그인 회원가입 관련해서는 구글의 passport 2.0 을 사용하면서 예상치 못한 문제들을 해결하느라 고생했던 과정이 스쳐지나가는데요!
passport 2.0은 프론트에서 로그인에 관여하지 않고,
백엔드에서 모든 걸 처리해서 쿠키에 토큰을 담아서 FE 도메인으로 보내는 방식이에요!
저희의 백엔드 서버에서 프론트로 토큰을 보내도, 다른 도메인 주소이기 때문에 헤더 설정이 안되어서 쿠키가 담기지 않는 문제가 있었습니다!
다른 도메인으로 쿠키를 보내려면 sameSite = none을 해야하고, http only true , secure true 와 꼭 함께 사용해야했어요!
이렇게 하니까 응답 header에 쿠키를 담아서 클라이언트한테 보내는 것까지 성공을 했는데요!
이제는 클라이언트가 그 쿠키를 다시 백엔드로 보내서 본인을 인증하는데 문제가 생겼습니다
이 문제는 access-control-allow-origin이라는 속성값을 백엔드에서 전부 열어놨던 것이 원인이었어요!
access-control-allow-origin 값이 모두에게 허용되어있으면
http only ture, secure ture 값을 써도 무효로 돌아가기 때문에 sameSite = none이 작동하지 않았던 거죠!
결국 access control allow origin을 특정 도메인만 열어서 문제를 해결할 수 있었어요!
하지만 여기서 또 문제는 다른 도메인에서 오는 요청을 처리하는 것이었는데요!
현재는 리버스 프록시 서버 작업을 해두었는데 완전히 해결되지 않아서
포워드 프록시 서버도 세팅을 추가로 하려고 하는 중이에요!
또 저희가 영상을 변환하고, 편집해서, 저장하는 로직을 만드는 과정에서 어려움이 컸는데요!
ffmpeg이라는 라이브러리를 사용하는 과정에서
자료가 많지 않아서 정말 문제를 해결하기 가장 어려웠던 것 같아요!
fluent-ffmpeg을 import해서 사용하는데, fluent-ffmpeg의 메소드와 ffmpeg의 cli가 달라서
fluent-ffmpeg가 제대로 작동하지 않았어요
결국 cli로 하드코딩해서 해결했답니다!
여기서 이미지와 영상 처리는 문제없이 작동하는데,
그 처리 시간이 엄청나게 오래 걸린다는 문제가 있었어요!
20초 길이의 영상을 업로드하는데 5분 이상 걸리는 때가 있어서
S3에 업로드된 영상을 열어서 속성을 확인해보니
영상이 때에 따라서 30fps, 1000fps 등으로 값이 완전 자유분방했습니다!
그래서 bitrate, fps, 해상도 등의 속성들을 모두 설정해줘서 다시 인코딩 후 편집함으로써
5분이 걸리던 시간이 10초로 단축되었어요!
하지만 여기서 더 시간을 단축하기 위해서
저희 서비스에 가장 적합한 인스턴스 테스트를 진행하는 등
서버 개선, 아키텍쳐 개선을 진행할 예정이에요!
쓰는 사람이 편하기 위해서
저희가 자주 하는 말이 있는데요!
‘안그래도 하기 귀찮은 QA’라는 말입니다!
저희가 개발을 하는 과정에서 사용자분들이 우리 서비스를 쓰면서 어떤 경험을 하실까?를 생각했을 때
QA를 하면서 불편함, 귀찮음을 느끼고 계시는데,
그런 상황에서 저희 서비스를 사용하실 때
최대한 명확하고, 빠르게 이해할 수 있고 사용할 수 있게 하기 위해서
계속해서 상기하는 말인 것 같아요!
우아한형제들의 김봉진 대표님 말씀처럼
쓰는 사람이 편할 수 있도록 열심히 개발해보도록 하겠습니다!
마무리는 저희 사무실에 있던 라이언 인형이 저 대신 일해주는 사진으로 마무리해보겠습니다!
그럼 다음주에 뵈어요!
QAing이 여러분의 QA를 도와드릴게요! 지금 바로 사전신청 등록해보세요!