본문 바로가기

전체 글

 (176)
[매일메일] 프론트엔드 E2E 테스트란? (FE.250117/BE.250107) (개발자 강화/프론트엔드) 2025. 1. 17. 21:13 테스트 코드가 필요한 이유버그를 조기에 발견하고, 리팩토링을 수행할 때 유용함개발 속도를 향상시키고, 코드에 대한 문서로서 역할을 수행할 수 있음 프론트엔드 E2E(End-to-End) 테스트(=기능 테스트, 브라우저 테스트)1. 개념- 어플리케이션의 사용자 경험을 처음부터 끝까지 시뮬레이션하여 테스트하는 방식- 사용자 관점에서 전체 어플리케이션이 의도한 대로 작동하는지 검증함- 테스트 과정에서 실제 사용자 동작을 흉내내어 시나리오를 테스트 함(버튼 클릭, 페이지 이동, 데이터 입력)- 예시) Cypress, Playwright 2. 장점- 사용자와 동일한 방식으로 작동시키기 때문에 사용자에게 직접적인 영향을 미치는 오류 조기 발견 가능- 프로덕트의 안정성 높이고, 실제 배포 후 발생하는 리스크 줄이는 ..
[매일메일] 웹 어플리케이션의 성능을 최적화 하는 방법? (FE.250107/250102) (개발자 강화/프론트엔드) 2025. 1. 15. 23:38 코드 스플리팅: 자바스크립트 번들을 여러 개로 분리해서 필요한 시점에 필요한 코드만 로드함대규모 SPA에서 유리함. 초기 로딩 시간을 단축시켜 줌.Webpack, Vite, Parcel 같은 모듈 번들러에서 코드 스플리팅을 지원Dynamic Import: import()를 사용해 특정 페이지나 기능이 필요하면 해당 모듈을 로드함Route-based Splitting: React Router의 lazy와 Suspense를 활용해 라우트 단위로 코드 분리레이지 로딩: 무거운 리소스(이미지, 비디오)를 사용자가 실제로 볼 때만 로드현재 화면에 보이는 만큼만 불러오고, 스크롤 이벤트가 발생하면 추가적으로 로딩. 브라우저가 이미지의 뷰포트 진입 시점에 로드함React.lazy() 동적 컴포넌트 로딩이미지 최적화:..
[매일메일] SSR의 개념과 장단점? (FE.250115) (개발자 강화/프론트엔드) 2025. 1. 15. 22:14 SSR(Server Side Rendering)이란 무엇인가?- 서버에서 완성된 정적 HTML을 클라이언트에 내려주는 방식- 클라이언트는 해당 HTML을 파싱만 해서 화면을 랜더링함 CSR(Client Side Rendering)이란 무엇인가?- 서버에서 비어있는 뼈대 HTML을 클라이언트에 받음- 필요한 자바스크립트 번들을 다운로드하고 번들을 실행해서 동적으로 컨텐츠를 채움 SSR의 장점?- SEO(Search Engine Optimization)에서 유리함.- 크롤러가 컨텐츠를 쉽게 인식함.- 초기 로딩 속도가 빠름. 이미 컨텐츠가 완성된 상태로 서버에서 보내주기 때문에 번들을 다운로드/실행할 필요 없음.- 블로그나 커머스 등, 컨텐츠 노출이 중요한 웹 애플리케이션에 적합함 SSR의 단점?- 클라이언..

티스토리툴바