본문 바로가기

👨‍💻 web.dev51

프론트엔드 E2E 테스팅 (with Cypress) 💡 이번 포스트는 사내 위클리에서 발표한 내용을 정리한 것입니다. 📌 들어가며 작년 12월부터 약 3개월간 항공 웹 개발을 진행했는데, 생각보다 다양한 동선이 있어서 고생을 했던 기억이 있습니다. 더군다나 제가 진행했던 업무(웹 허브 오픈, TF v12 전환)가 항공의 전체적인 동선에 적용이 필요했던 것들이어서 더욱 그랬던 것 같은데요. 아직 E2E 테스트 작성경험이 없어서 이번 기회에 공부도 해볼 겸 국제선 예약동선의 E2E 테스트를 진행해봤습니다. 📌 E2E 테스트란? 우선 간단하게 E2E 테스트가 무엇인지 살펴보겠습니다. 흔히 E2E (End to End) 테스트는 브라우저 환경에서 유저가 사용하고 있다는 가정하에 애플리케이션의 전체적인 동작을 검증하는 것을 말합니다. 유닛 테스트와 통합 테스트에서.. 2023. 3. 19.

왜 index 는 0부터 시작할까? 얼마전 프로그래밍을 이제 막 시작한 지인분이 다음 질문을 주셨습니다. 이제 막 프로그래밍을 시작한 사람이라면 누구나 한번 쯤 의문을 품을만한 것이라고 생각합니다. 왜 배열의 index 가 0부터 시작하는 것인가요? 저 또한 처음 C언어로 프로그래밍에 입문 했을 때 0부터 시작하는 인덱싱 체계가 낯설었지만 그때 당시에는 그냥 그런가보다~ 하고 받아들이고 넘어갔었는데, 이번 기회에 알아보면 좋을 것 같다는 생각이 들어서 이와 관련된 몇가지 배경을 찾아보고 정리해봤습니다. 📌 TL;DR 0부터 시작하는 인덱스는 자연스럽고 직관적이며, 배열의 첫 번째 원소가 항상 0번 인덱스라는 점에서 이점이 있다. 또 다른 이유는, 0부터 시작하는 인덱스는 메모리 주소를 계산하기 쉽게 만들어준다. 📌 자연스럽고 직관적이다 0.. 2023. 3. 12.

Next.js styled-component 설정하기 (SSR FOUC 이슈) 📌 Next.js ❤️ styled-component Next.js 와 Styled Component 를 함께 사용할 때 적절한 설정을 하지 않으면 SSR 시에 FOUC (Flash of Unstyled Content) 현상이 발생하게 됩니다. 🤔 FOUC? 페이지의 스타일시트 정보가 로드 시점에 포함되지 않아 잠시 스타일이 적용되지 않은 페이지가 나타나는 현상입니다. 📌 FOUC 원인 파악하기 Next.js SSR (Pre Rendering) Server-side Rendering 과 Static Generation 모두 Pre-rendering 방식이며 필요한 data fetching 과 HTML 렌더링이 client 에게 보내지기 전에 이미 수행됩니다. 이를 통해 client 는 non-intera.. 2022. 11. 27.

TypeScript + Jest 유닛 테스트 작성하기 이번 포스트에서는 TypeScript 환경에서 Jest 로 유닛 테스트를 진행하기 위해 필요한 설정들과 확인을 위한 간단한 예시 코드를 작성해보겠습니다. 사용할 테스트 프레임워크는 가장 대중적으로 사용되고 있는 Jest 입니다. 📌 Jest 설정 1️⃣ 패키지 설치 먼저 필요한 패키지를 설치합니다. npm i -D jest @jest/globals ts-jest 💡 @jest/globals 명시적인 import 를 선호하기에, 해당 패키지를 사용해서 jest api 사용했습니다. 💡 ts-test TS 로된 모듈 테스트를 수행할 때 컴파일 + 타입 체크까지 함께 수행할 수 있도록 해줍니다. 2️⃣ config 파일 추가 // jest.config.js /** @type {import('jest').Con.. 2022. 11. 27.

AWS SDK 로 s3 파일 사이즈 조회하기 📌 업로드 할 바우처에 크기 제한을 추가할 수 있을까요? 트리플 TNA 파트너웹 에는 파트너가 고객에게 예약 바우처를 전송하는 기능이 있습니다. 기존에는 파일 사이즈의 제한 없이 전송하도록 했는데, 사이즈가 커질 경우 이슈가 생겨서 이번에 리뉴얼하면서 서버에서 바우처 사이즈가 클 경우 이를 분리해서 전송 처리하는 것 이외에 프론트엔드에서도 개별 바우처에 용량 제한(15MB)을 추가하기로 했습니다. 이를 위해 브라우저에서 올리는 파일 사이즈 체크 이외에도 S3 에 이미 업로드 된 바우처 파일 사이즈를 조회해서 각 바우처 항목에 용량정보를 함께 노출해줘야 했습니다. 그래야 고객이 어떤 파일에 문제가 있는지 한번에 확인이 가능할 테니까요. 📌 S3 파일 사이즈 (HeadObject) 브라우저에서 업로드한 파일.. 2022. 11. 26.

React 이벤트 처리방식과 SyntheticEvent React 는 W3C 명세에 따라 합성 이벤트를 정의하기 때문에 브라우저 호환성에 대해 걱정할 필요가 없습니다. 합성 이벤트는 Synthetic Event 객체로 정의되며 브라우저 고유 이벤트와 완전히 동일하게 동작하지는 않습니다. 이번 포스트에서는 React 의 내부 이벤트 시스템의 동작 방식에 대해서 살펴보겠습니다. 😀 📌 SyntheticEvent 래퍼 객체 React 의 이벤트 핸들러는 크로스 브라우징의 일환으로 모든 플랫폼에서 동일한 이벤트 처리를 위해 구현된 인터페이스인SyntheticEvent 객체를 사용합니다. 이는 stopPropagation 과 preventDefault 등을 포함하여 브라우저 고유 이벤트와 동일한 인터페이스를 가지지만 모든 브라우저에서 동일하게 동작함을 보장합니다. S.. 2022. 10. 17.

이전 1 2 3 4 5 6 7 ··· 9 다음

티스토리툴바