테스트에는 없던 버그는 왜 배포하면 생길까(+ 개발로그)

codic·2022년 10월 7일
6

slusy.io

목록 보기
5/8
post-thumbnail

이력서 피드백, 프로젝트 참여, QnA 등 개발자들과 커리어 활동이 필요하세요?
슬러시에 나의 프로필만 등록하면 이 모든 기회를 만날 수 있어요.

❄️ 슬러시에서 개발자 커리어 기회를 발견하세요!

저희 팀에서 만들고 있는 슬러시는 10월 7일 기준으로

825개의 제안 요청이 올라와 있고,
1,035명의 가입자분들이 함께 해주고 계시고,
4,500명 이상의 유저분들이 사이트를 방문 해주셨어요.

이번 개발로그는 아래와 같아요. 이번에는 조금 많이 바뀐게 있어서 v0.5 > v0.6 버전업 되었어요.

  1. 메모리 최적화 SSUL
  2. 기능 개선 이야기
  3. 배포 후 없던 오류가 생겼다.

0) 메모리 최적화 SSUL

저희는 저번 글에서 말씀드린 것처럼 서버 모니터링에 대한 교훈을 얻고 슬랙을 통해서 모니터링 알람을 받고 있어요. 그런데 어느날 이상하게 아침부터 오류 알림이 오더라구요.

확인해보니 리눅스 서버가 메모리가 부족해서 발생하는 이슈였어요.

프론트 서버가 점점 무거워져서 기존에 사용하던 $5 서버로는 램이 부족하다고 신호를 보내더라구요. 해당 서버 메모리가 쌓일 경우, nginx가 Proxy 502를 뱉어주고 있었어요. nginx는 살아있는데 실제 react 서버가 response를 못 준다는 의미겠죠..

예전에 라이트세일 $3.5 쓰는거 아니다라는 이야기를 들어서 $5를 쓰고 있었거든요..?
근데 이것도 부족했나 봅니다.😇

물론 저희 예상으로는 React 최적화에 이슈가 있다고 생각하고 있어요. 저희가 React를 처음 접해본 상태로 개발을 했거든요. (원래 앱 개발 or 백엔드 개발만 하던...)

아마 설정값이나 최적화 이슈가 있어서 그런걸거라고 생각은 하고 있습니다. NextJS의 Hydrate 개념도 찾아보고... 최적화에 대한 N가지 케이스를 건드려 보고 있습니다.

하지만 현재로서는 UX >>> 성능 라는 우선순위를 갖고 있어서 추후에 관리하고자 합니다.

지금은 $10 서버로 올려놓으니, 무리없이 운용되는 상태입니다. (맘 편해지는 가격 단돈 5000원)

다음에 의미있는 성과가 보인다면 최적화 경험을 개발로그에 올려볼게요 :)

1) 기능 개선 이야기

이번에는 꽤 많은 화면상 변화가 생겼어요.

0. 협업모집 글쓰기 기능 생성

기존에는 프로필 등록을 통해 포스팅되는 수동적이고 소극적인 형태의 협업 과정이었습니다. 누군가 나를 발견하기를 바래야만 했어요.

하지만 글쓰기 기능을 통해 이제는 '원하는 협업'을 공개적으로 찾을 수 있습니다.

가령 커리어 관련 궁금한게 있다면, 'QnA' 태그를 걸고, 글쓰기를 할 수 있습니다. 자세한 내용을 보고 누군가와 댓글로 소통하거나, 연락을 주고 받을 수 있겠죠!
괜찮은 내용이라면 QnA에 관심 있는 유저분들에게 뉴스레터도 뿌려볼 예정이구요..🤔

이제 여기에 개발자 대상으로 홍보가 필요하신 분들(개발 동아리, 사이드 프로젝트, 블로그 아티클 등)이 등록 되도록 많이 뛰어다닐 생각입니다 🏃‍♀️

이상한 학원 홍보 같은 건만 아니면 개발자들에게 다 도움이 되겠죠?

1. 프로필 페이지 UI 변경

프로필 페이지가 변화되었어요. 기존보다 UI를 다듬었고, 배경색상을 설정할 수 있게 했습니다. 다음에 커스텀 이미지도 추가할 수 있게 바꿀 예정이에요!

2. 프로필 등록 UX 개선

기존에는 사실 한 페이지에 때려박는(???) 느낌이었어요...
이 단계를 세분화해서 입력하시는 분들이 피로하지 않도록 노력해봤습니다.

3. 개발자 탐색 탭 추가

개발자를 찾을 수 있는 부분을 '개발자 탐색' 이라는 탭으로 구분했어요.
기존에 있던 개발자 검색 부분을 포함하고 있구요.
추가로 테마별로 개발자분들을 묶어서 노출하게 만들었어요.

가령 채용, 인턴십 태그를 갖고 계신 분들을 "채용 중이세요?" 와 같이 묶어 드렸습니다. 사이드 프로젝트, 스터디 태그 분들은 "팀빌딩 중인 개발자들"!

이렇게 하면 보고 싶은 개발자분들을 발견하는 경험을 할 수 있겠죠?

실제로 저희 서비스에 채용 관련으로 연락이 오고가시는 분들이 있다는 제보가 지속적으로 나오고 있습니다 ;)

2) 배포 후 없던 오류가 생겼다.

‘버터 바른 토스트와 고양이 영구동력(나무위키)’

"빵에 잼을 발랐을 때, 왜 항상 떨어뜨리면 바른 면이 바닥에 닿는가?"

농담으로 쓰이는 '고양이와 버터바른 빵을 통한 영구동력' 짤이지만...
개발자들에게는 이렇게 치환되지 않을까요...?

"왜 테스트에는 문제가 없는데, 왜 항상 배포하면 문제가 발생하는가?"

이래서 Test-Driven 한 방식들이 각광을 받나보다. 하는 생각이 드네요.

저희는 표준 Clipboard API 를 이용해서 연락하기 기능을 개발했습니다. 해당 유저의 연락하기를 클릭하면 이메일을 확인할 수 있는 기능인데요.

navigator.clipboard.writeText(post.contact);

배포 이후, 사용성 테스트를 하던 중

Application error: a client-side exception has occurred (see the browser console for more information).

이와 같은 오류를 만났습니다. 왜 늘 개발할 때는 잘되던게 배포하면 안될까요?😭

배포/개발 환경 차이 분석, 브라우저 변경 등 여러가지 시도를 해봤는데 결론은 아래 글에서 찾을 수 있었습니다.

navigator.clipboard is undefined (Stackoverflow)
클립보드 액세스 차단 해제

많은 새로운 API와 마찬가지로 Clipboard API는 HTTPS를 통해 제공되는 페이지에만 지원됩니다. 악용을 방지하기 위해 페이지가 활성 탭일 때만 클립보드 액세스가 허용됩니다.

클립보드 영역이 해킹될 경우, 해당 사용자의 개인정보 탈취에 대한 우려로 HTTPS 웹사이트에 대해서만 제공하고 있었습니다. 저희가 HTTP로 테스트하고 있었더랬죠.

브라우저 API를 이용하시는 분들은 이런 부분들 저처럼 놓치지 않길 바랍니다 😭


앞으로도 계속 개발자분들이 좋아할만한 컨텐츠들을 담아보려고 노력하겠습니다.
다만 어떤게 좋을지 계속 고민인데요.

좋은 아이디어가 있으시거나, "어 나 개발자 대상으로 홍보할게 있어!" 라고 생각되시는 분들은 글쓰기를 사용 해보세요!

긴 글 읽어주셔서 감사합니다 :)

슬러시 바로가기

profile
code-it

2개의 댓글

comment-user-thumbnail
2022년 10월 7일

하드디스크에 계시는 우리 프로그램이시여
디버그를 거룩하게 하옵시고
컴파일에 임하옵시며
명령이 키보드에 이루어진 것과 같이
모니터에서도 이루어지게 하옵소서
일용할 데이터를 주시옵고
우리가 프로그램의 오류를 용서한 것과 같이
우리의 오타를 사하여 주옵시고
우리를 버그에 들게 하지 마옵시며
다만 불시의 에러에서 구하옵소서
대개 속도와 파워와 안정성이 프로그램에게 영원히 있사옵나이다.
엔터

답글 달기
comment-user-thumbnail
2023년 1월 11일

저는 첫날부터 회원이었고 가끔 체크인했지만 사이트가 발전하는 것을 보는 것을 즐깁니다. 당신은 나의 전폭적인 지원을 받고 있습니다!

run 3

답글 달기