TIL

[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 바인딩 이슈로 클래스의 메서드로는 화살표 함수를 쓰지 말아야겠다고 생각한 적이 있는데, 그 외에 추가적으로 함수에 프로토타입이 생기지..

[TIL] 2023-1004

Facts - e2e 테스트 - 기타 수정 등등 Feelings - 오랜만에 다시 기계식 키보드로 두드리니깐 좋았다. Findings - yarn script 에서 &&는 순차처리 &는 병렬이라는 사실을 알게됨 - cypress 에서 가끔 크롬 브라우저와 연결이 안되는 에러가 뜰 때가 있는데, 이땐 일반 크롬 브라우저를 다 닫고 다시 테스트를 열면 해결된다. Cypress failed to make a connection to the Chrome DevTools Protocol after retrying for 50 seconds. This usually indicates there was a problem opening the Chrome browser. The CDP port requested was..

[TIL] 2023-1003

Facts - 다시 블로그 만들기 시작함 Feelings - 연휴 끝 Findings - 커스텀 컴포넌트에서 JSX Element 가 아닌 일반 Element 타입으로 인식되는 오류가 있었음. - 찾아보니 의존성 패키지 안에서 선언된 타입간에 충돌이 발생할 경우 위와 같은 문제가 발생할 수 있어서, 전체 패키지에 대한 업데이트를 진행했다. yarn upgrade --latest - 노션 블럭 -> html 변환을 직접 모듈 만들어서 하려고 했는데, 너무 오래걸릴 것 같아 잘 만들어진 바퀴 (react-notion-x) 를 활용하기로 함

[TIL] 2023-0930

Facts - cypress e2e 테스트 작성중... 특정 응답에 대한 케이스를 테스트하는 중이라 intercept 활용중 Feelings - 연휴동안 엄청 쉬고 다시 시작하려니 힘들다. 하기 힘든 날에는 30분이라도 들여다 봐야지 Findings - intercept 가 모든 요청에 대해 적용되는게 아니고, 첫번째 요청에만 적용되는 현상이 있음 => intercept 를 위치시키는 순서의 문제, axios interceptor 랑 헷갈렸다. intercept 의 순서가 중요함..! 이 부분만 따로 실행시키는 initialize 메서드가 있으면 좋겠군. Cypress.Commands.add('migrationLogin', (email, password) => { // 이 구문이 실제 api 요청을 보내..

[TIL] 2023-0926 테스트

Facts - 주요 서비스 로직 중 하나의 동작 과정에 대한 e2e 시나리오 작성 - 라우터 관련 이슈가 있어서 수정 - e2e 테스트 도입 및 디자인 패턴에 대한 발표 영상을 공부함 - 가슴운동 및 유산소 Feelings - 몇일 째 비슷한 영역의 이슈로 1일 1회 수정하고 있음 - 비가와서 그런지 연휴 전날이라 그런지 엄청 하기 싫고 생산성이 저하됨 Findings - 재밌는 짤을 찾았다. - e2e 테스트도 시간이 지남에 따라 레거시가 되는 것 같은데 어떻게 하면 쉽게 유지보수 할 수 있을까, 여기도 디자인 패턴을 적용하는 사례가 있는데... 링크 Commands 옵션이 있는데 여기는 아예 관심사별로 클래스를 만들어 재활용 하는 방식을 택하고 있다. Commands 보다 더 명시적으로 관리가 되는 ..

[TIL] 2023-0925 점진적 과부하

Facts - 사내 프로젝트 EsLint 룰 공통화 하면서 정리하는 작업을 했음. - 또 예측하지 못한 오류가 발생해 수정하고 배포했음. - 그래서 정작 오전에 계획한 회사 일은 하지 못했다. - 홀딩했던 전화 영어도 다시 시작! - 로또 과제 진행, view 와 controller간 의존성은 분리했는데 이벤트 바인딩 덕분에 역할을 정의할 수 없는 모호한 영역이 생겨버림. Feelings - QA 가 꼼꼼하게 진행되지 못하고 테스트도 제대로 갖춰져 있지 않아서 이런 자잘한 버그를 찾느라 생산성이 저하되는 것을 느낌. - 좋은 품질의 제품을 만드는 것은 내 시간까지 아껴주는 일이라는 것을 몸소 느끼게 되었음.. - 사람은 적은데 할 일은 많으니 시간을 아껴줄 수 있는 시스템을 잘 구축해야겠다고 다짐한 하루..