회사에 있는 다양한 프로젝트 안에 백엔드 테스트 코드는 많았지만, 프론트엔드 테스트 코드가 부족한 상태였다. 검수 과정에서 동일한 작업이 반복되는 문제가 있어, 이를 해결하기 위해 E2E 테스트 코드 도입을 제안했고, 그 과정에서 정리한 내용을 공유하려 한다.E2E 테스트란?E2E(End-to-End) 테스트는 사용자의 실제 행동을 시뮬레이션하여 애플리케이션이 예상대로 동작하는지 확인하는 테스트 방법으로, UI 및 네트워크 상호작용을 포함한 전체 애플리케이션 흐름을 테스트할 수 있다.조사했던 후보로는 Playwright, Cypress, Selenium 등이 있었다.E2E 테스팅 툴 특징 정리Playwright특징Chromium, Firefox, WebKit 지원 → 크로스 브라우저 테스트 가능병렬 실행..
전체 글
https://github.com/bysxx2024년도 참 빨리 지나갔고 돌이켜보면 나에게는 정말 중요한 한 해였다. 중요하지 않은 연도가 어디 있겠냐만은 올해는 정말 좀 특별한 한 해였다.대학을 졸업하는 해이기도 했고, 회사에서는 꽤 중요하게 오랫동안 쓰일 수 있는 수도 있는 경력도 쌓았다. 아직 졸업 이전이라 나에게 중요한 롤을 맡길 회사가 없을 것이라 생각했었다.그렇기에 사실 2024년을 시작했을 땐 개발자로서 무언가 중요한 경력을 남길 것이란 기대를 하진 않았다. 그래서 올해 초의 목표는 학업과 어느 정도의 실무를 병행하면서 2025년에 좋은 회사에서 중요한 역할을 하기 위한 준비를 하는 한 해를 만들어 볼 계획이었지만 운이 따라줘서 이 목표를 상회해서 마무리한 것 같다. 조직팀 빌딩 초기에 합류를 했고 그 이후에 다양한 사람이 들어오고 ..
가장 애용하는 스택 중 하나인 Tailwind CSS의 새로운 메이저 버전인 v4에 대한 베타가 나와 바로 내용들을 확인했고,v4에 나올 피쳐들은 대부분 확정된 것 같아 내용들을 익힐 겸 글도 같이 써보려고 한다.업그레이드 방법npx @tailwindcss/upgrade@next 업그레이드 하는건 크게 어렵지 않게 위 커맨드를 통해 진행할 수 있었고,업그레이드 후 주요 변경 사항으로는 config 파일에 대한 규칙 변경과 기존 클래스 이름 수정 등이 있었는데, 아래 링크에 있는 레포에서도 변경된 내용에 대한 커밋 내용을 기록해 두었습니다. https://github.com/bysxx/next15-ts-template-fullstack/commit/d7d40c7e9dafed9a33884b7b1a360efc..
나는 누군가가 조언을 구하면 정말 나의 일처럼 고민하고 생각해서 답변을 해주는 편이고, 내가 도움이 되지 않을 것 같다면 차라리 답변을 포기한다. 그렇기에 나는 조언을 구할 때도 정말 신중하게 고민한 이후 구하고, 조언을 정말 소중하게 여긴다. 하지만 이렇게 고민하고 생각해서 답변을 하면 대부분의 사람들은 본인들의 생각이 있고 그 생각이 맞다는 걸 그냥 동의해 주길 바라는 사람들이 대부분이다. 그렇기에 매번 힘이 빠지지만 나는 조언을 통해 너무 좋은 의사 결정을 한 기억이 많고,내가 해주는 조언을 정말 깊게 생각해보는 사람들이 있기에 아직은 신중하게 생각해서 답변을 해주고 있다.(하지만 매번 그냥 동의를 해주길 바라면서 조언을 구하는 사람에게는 그냥 원하는 대로 해주는 편이다.) 아무튼 모든 사람들이 조..
개발자 인생 추첨을 해서 참석할 수 있는 컨퍼런스는 당첨된 적이 없었으나 최초로 당근 테크 밋업에 당첨되어 기분 좋게 다녀왔다. 도착 & 네트워킹세션 시작은 11시였지만, 10시부터 네트워킹을 진행한다고 해서 10시까지 도착하였다. 입장하였더니 이것저것 주셨는데 스티커, 펜, 노트 등 다양한 굿즈와 물을 주셨다.직장 동료와 함께 자리를 잡고 나는 프론트엔드 코어팀과 네트워킹을 진행하였다. 해외 웹사이트, 웹뷰 배포 등의 업무를 맡고 계셨고 여러 가지 궁금한 걸 여쭤봤다. 일단 스프린트를 어떤 식으로 관리하시는지 궁금했는데 height.app이라는 툴을 사용하고 있다고 한다.지라, 트렐로, 노션 등 다양한 관리 툴들을 보았지만 height.app은 처음 보는 툴이었는데 설명해 주시는 걸로는 지라보다 훨씬 ..
2분기 회고 이후로 한 분기 동안은 별다른 글이 없었고 회고로 오랜만에 글을 작성하게 되었다.바빴다는 핑계를 대고 싶기도 하지만 안 바쁜 개발자는 없기에 되돌이켜보면 중간중간 작성 중인 초안이 있기는 했지만, 뭔가 글을 완성해갈수록 만족스럽지 않아 올라가지 않은 글이 많다. 그렇지만 3분기를 되돌이켜보면 크고 작은 일들이 많았다.MongoDB.local 20242023년도에 이어 2년 연속 참석했는데, 내가 다녔던 컨퍼런스 중 식사나 장소 섭외와 같이 외적인 요소에 대한 준비성은 단연 1등인 것 같다.강연 내용도 물론 퀄리티가 좋지만 이런 외적인 요소들의 퀄리티도 신경 쓴 게 놀라운 것 같다. 새로운 버전에 대한 내용도 듣고 활용 사례도 들었지만 사실 이 날 내가 기대했던 건 네트워킹이었다.사내 데이터베..
애자일위 사진은 최근 사내 세미나에서 발표했던 자료인데 발표를 준비했을 만큼 평소에 애자일이란 방법론에 관심이 많았고,특히 이번 분기에는 회사에 애자일을 어떻게 적용시켜야 할까라는 고민을 지속적으로 해왔다. 그냥 시키는 대로 일하면 되는 게 아닌가라는 생각을 가지는 사람들도 나는 충분히 이해한다.하지만 나는 애자일 방법론을 건강하게 적용했을 때 팀이 가지는 성장 속도를 경험했기 때문에 힘이 닿는 데까지는 노력을 해보고 싶다. 나도 애자일을 통달한 건 절대 아니지만 애자일에 대한 개인적인 생각을 좀 적어보자면,애자일은 다양한 가치들을 가지지만 가장 중요한 가치는 점진적인 개발이 가능하다는 점인 것 같다.처음에는 조금 삐걱대고 어색할 수 있지만, 타임박싱을 지키고 팀의 Velocity를 점점 개선하는 방향으..
패션 이커머스 플랫폼 무신사는 PC 화면을 버리고 모바일 화면에 집중하는 결정을 내렸다. 개발자들 사이에서는 물론이고 다양한 커뮤니티에서 화제가 된 것 같다.야놀자, 카카오 메이커스와 같이 사실 모바일 화면만 가져가는 플랫폼은 이전에도 존재했지만, 기존의 잘 작동하던 PC 화면을 포기한 경우는 거의 처음이라 화두에 오른 것 같다. 이는 사용자의 모바일 사용 증가와 더불어, 모바일 중심의 UX/UI 최적화가 필수적인 현시대의 흐름을 극단적으로 보여주는 사례라고 생각된다. 본론에 들어가기 앞서 서론을 조금만 더 보태자면 나는 무신사의 결정을 크게 동의하지도 반대하지도 않는다.그러나 현 시대의 흐름을 잘 보여주고, 개발자로서 다양한 생각을 하게 해주는 사례이기 때문에 의미를 조금 분석하고 글에 녹여보려고 한다..
Next 15 Release Candidate (RC) 발표Next.js 15 RC가 나왔다고 한다. 아직 정식 출시는 이전이고 출시 전에 최신 기능을 테스트할 수 있는 기회를 준다고 하는 것 같은데, 내용을 간단하게 확인해보려고 한다.주요 기능 업데이트:React: React 19 RC 지원, React Compiler(실험적), 하이드레이션 오류 개선캐싱: 기본적으로 fetch 요청, GET 라우트 핸들러, 클라이언트 네비게이션이 캐시되지 않도록 변경부분 사전 렌더링(실험적): 점진적 적용을 위한 새로운 레이아웃 및 페이지 설정 옵션next/after(실험적): 응답 스트리밍 후 코드를 실행할 수 있는 새로운 APIcreate-next-app: 로컬 개발에서 Turbopack 활성화 플래그와 업데이트..
블로그에서 next.js를 주로 다루고 있기도 하고, 조금이라도 이슈를 더 알리고 싶어 글을 작성하게 되었다. 관련 링크: https://github.com/vercel/next.js/security/advisories/GHSA-fr5h-rqp8-mj6g Server-Side Request Forgery in Server Actions### Impact A Server-Side Request Forgery (SSRF) vulnerability was identified in Next.js Server Actions by security researchers at Assetnote. If the `Host` header is modified, and the below conditi...github.com관..