ALL

[TIL] 2023-1206 크로스 브라우징 지원, 테스트 코드 작성 등등등...

Facts - cypress 테스트를 위한 셋업, QA 수정사항은 테스트 코드와 함께 수정하려고 함... 근데 무진장 오래걸리겠는데 흠... - QR 코드 스캔하는 부분을 cypress 테스트로 작성하려고 함... 흠... 오래걸리겠지만 그래도 해봐야지... Findings - 사파리 브라우저 기본 컬러값이 크롬이랑 달라서, 사파리에서 버튼이 파랗게 보인다던지.. 그런 경우 디자인에 맞는 정확한 컬러를 지정해주면 된다. 전역으로 color 값을 지정한 경우라도 button 태그의 color 는 적용이 안되기 때문에 그런 현상이 있었던 것으로 보여짐. - max-height 과 overflow-y scroll 속성이 있는 경우 blur 처리되어서 나오는 현상이 있음.(크롬브라우저) 이 때 border-ra..

프론트엔드 e2e 테스트 도입기: 구조화가 필요해..! (feat. cypress)

배경 기존에 서비스중이던 프로젝트 구조를 변경에 대응하기 쉽도록 리팩토링하는 작업을 맡게 되었다. 그 중 가장 시급했던 부분은 로그인/인증 파트였는데, 기존에도 이상하게 에러가 많이 발생하는 파트였지만... 에러를 잡기 위해서 고치면 고칠수록 다른 부분에서 또 다른 이슈가 발생하는 상황이 있었다. 규모가 규모인지라, 별도의 QA 팀도 없어서 이슈를 고쳤을 때 또 다른 이슈는 없는지, 또 어느 범위까지 영향을 미치는 것인지 충분히 파악이 되지 않은 상태에서 배포를 하다보니 미흡한 부분이 그대로 유저에게 노출이 되었고... 비슷한 이슈에 대한 반복적인 대응에 나를 포함한 다른 여러 유관부서 팀원들의 리소스를 낭비하게 되는 현상이 있었다. 😢 분명 나는 개선하려고 리팩토링을 시작했던 건데... 가독성도 좋아지..

[TIL] 2023-1129

Facts - QA 넘기고 코드 개선 작업 진행중... 흠... - 디깅한 내용을 문서로 정리하는 중... 빠른 시일내에 블로그 글로 재탄생 시켜야지..! Feelings - 새 프로젝트가 시작되는데 기간이 아주 타이트함.. 하지만 재밌을 것 같다.. 하지만 일정이 제대로 갖춰질까..~? Findings 1. CSS 선택자 꿀팁... only-child 선택자를 사용하면 요소가 1개만 있을 때 속성을 제어할 수 있다. 아래는 2개 컬럼의 그리드에서 요소가 하나만 존재할 때 1개 컬럼으로 변경하는 코드.. display: grid; grid-template-columns: repeat(2, 1fr); /* 자식요소 하나만 있을 때 그리드 컬럼 1줄로 변경... */ & li:only-child { grid..

[TIL] 2023-1124

Facts - 에러 핸들링 로직을 수정했다. 커스텀 에러 바운더리를 쓰고 있는데, 현재 로직상으로 Get 요청에서 에러가 발생해도 에러가 발생한 UI를 다시 재렌더링 하므로 무한 Get 요청과 에러 지옥에 빠지는 현상이 있었다. 일단 급한대로 에러 바운더리에서 에러가 발생한 메서드 타입을 확인해서 분기처리 하도록 했는데.. 조금 더 우아하게 에러를 처리할 방법이 없는지 고민을 해봐야겠다. 흠..~ Feelings - 어제 수도 코드를 쓰자는 셀프 피드백을 받아들여서 적용해봤는데, 작업하다 흐름이 끊겨도 내가 어디까지 생각하고 있었는지 바로 복귀할 수 있어서 좋았음. 역시 메모와 기록을 생활화..~ 생각도 적으면서 하기..~ Findings [Five lines of code] - 함수가 한 번에 한가지 ..

[TIL] 2023-1123

Facts - 기록을 멈춘지 또 한달이 금세 지나버렸다. - api 연동 및 에러핸들링 로직 작성중. - five lines of code 스터디 시작. Feelings - 성장의 동력을 잃은 느낌... 나는 왜 일을하고 공부를 하고 발전해야 하는가... 인스턴스 즐거움 >> 깊이를 요하는 즐거움이 되어버린 요즘. - 하지만 성장의 즐거움과 기쁨을 이미 조금이나마 맛보았으므로, 다시 잃기 전에 빨리 돌아와야겠다. ~.~ Findings [Five lines of code] - 회사에서 기존 코드 리팩터링할 일이 많은데, 효과적으로 하고자 구매하게 됨. - 리팩터링에 있어서.. 메서드를 추출하는 까닭은 긴 코드

[TIL] 2023-1023 부상 주의 삐용삐용

Facts - 또 잠깐 방심한 사이 며칠이 지나버렸다. 회사 일 이외에 운동밖에 안해서 딱히 뭘 써야할지 몰랐다고 하고 넘어가자. - 새로 런칭하는 프로젝트 개발 일정 산출 및 개발 착수 - 배포 전 QA 에서 발견된 이슈 수정 Feelings - 허벅지 부상당해서 병원 다녀왔다. 미세하게 찢어져 피가 고여 감각이 이상하게 느껴질 수 있다는 의사선생님의 말씀이... 가동범위 나온다고 쭉쭉 늘리지 말고 스트레칭 잘 하고 준비가 잘 된 상태에서 들어가도록 하자. 흠 분명 스트레칭 열심히 했는데 참;;; 부상 조심 ㅠ Finding - Sentry init 을 한 뒤 초기 CSS 가 깨지는 현상이 있었다. 원인은 replay 플러그인이었는데, 다음과 같이 App 컴포넌트에서 lazy loadin g 하도록 해..

[TIL] 2023-1011

Facts - 어제 했던 일이긴 하지만, Next.js 프로젝트에 Suspense 를 사용해 로딩 화면을 띄워봄 - 오늘은 빌드시에 환경변수에 현재 날짜와 시간을 주입하는 스크립트 파일을 작성해봄 - 정기 배포일, 브랜치 전략을 수립함 - 왜 하는지 모르겠는 회의 ... Feelings - 정기 배포건과 버그 픽스가 다른 날짜에 배포된다고 생각하니 일단 든든하고, 업무적으로도 더 정리된 느낌이 듬 - 이건 이래서 안되고 저건 저래서 안되고 보단... 일단 해보고 되도록 고친다고 마음 먹는게 좋은 것 같음 Findings - react query 에서 suspense 옵션을 true로 두면, 특정한 useQuery 에 대해 무한대로 요청을 보내는 현상이 있다. 다른 요청과의 차이점이라면 onSuccess ..

[TIL] 2023-1008

Facts - react-notion-x 를 활용해 notion page 를 html 로 옮기는 작업을 하고 있음 - 그냥 문서 보면서 적용해보는 중 Feelings - 이것저것 뜯어보는 재미는 있다. Findings - supperHydrationWarning Next.js 의 app router 와 server component 를 사용하는 도중 아래와 같은 에러를 만났다. 결론적으로 위 에러를 안보이게 하려면 suppressHydrationWarning 옵션을 true로 주면 된다. 이런 에러가 발생하는 원인이 뭘까? 서버를 통해 렌더링 되기를 기대하는 결과물과 실제로 클라이언트에서 렌더된 결과물이 일치하지 않았을 때 발생하는 에러이다. hydration 의 정의를 생각해보면, 서버에서 렌더링된 정..

[TIL] 2023-1006 배포주기에 대한 고민, 하체한 날

Facts - 오래된 e2e 테스트 로직을 최신화함. - 테스트 구조화에 대한 문서 작성 - 이슈 디버깅, 사내 웹 배포관련 의견 리뷰 Feelings - 테스트 로직도 구조화가 잘 되어있으니 작성에 드는 시간이 줄어드는 것이 느껴짐. 역시 일단 단순하고 이해하기 쉬워야 한다. Findings - cypress 에서 대부분의 이해하지 못하는 에러(이게 왜?) 는 껐다 다시 키거나 버전을 업데이트하면 해결 되는 것 같다. 까다로운 녀석 - 배포 주기에 대한 고민... 다른 개발자분께서 타 팀은 어떻게 배포하는지 정보를 가져와주셨는데, 역시 회사마다 팀 상황마다 모두 다른 것 같다. - 최근에 정기 배포로 빠져야 할 변경사항 (리팩토링이라던지..) 들이 핫픽스와 함께 딸려 배포가 되다보니, 제대로 검증이 되..

[TIL] 2023-1005

Facts - 유닛 테스트 짜다가 store 동기화 때문에 짜증나서 잠시 미룸 - 다른 로직의 e2e 시나리오 및 테스트 코드 작성 Feelings - 테스트로직 짜는데 시간이 너무 걸린다. 엉엉 하루종일 테스트만 짠다 엉엉 - 처음부터 TDD 를 시도하면 어떨까.. Findings - jsdom이 업데이트 되어서 jest 에서 localStorage 를 모킹하지 않아도 동작한다고 함. 하지만 어쩐지 내 코드에서는 안되었던 것 같아 모킹이 되어있음. 별 문제는 없어서 이대로 쓸 생각임 ㅋㅋ - 클래스 메소드에서 화살표 함수를 사용하는 것? 좋은 글이 있음, 예전에 this 바인딩 이슈로 클래스의 메서드로는 화살표 함수를 쓰지 말아야겠다고 생각한 적이 있는데, 그 외에 추가적으로 함수에 프로토타입이 생기지..