BOM Study
  • README
  • Computer Science
    • 운영체제
      • 운영체제와 컴퓨터
      • 메모리
        • 메모리
        • 캐시 메모리
        • 가상 메모리
        • 메모리 할당
      • 프로세스 & 스레드
        • 프로세스
  • Algorithm
    • 버블정렬
    • 선택정렬
    • 삽입정렬
    • 삽입정렬이 버블정렬과 선택정렬보다 빠른 이유
  • Data Structure
    • 스택
    • 큐
    • 해시 테이블
  • Algorithm Program Solve
    • 문제 해결법 소개
    • 문제의 이해
    • 문제 해결 패턴
      • 빈도수 세기 패턴
      • 빈도수 세기 패턴 과제
      • 다중 포인터 패턴
      • 다중 포인터 패턴 과제
      • 기준점 간 이동 배열 패턴(Sliding Window Pattern)
      • 분할과 정복 패턴(Divide and Conquer)
  • Javascript
    • 변수
    • 데이터 타입
    • 연산자, 형변환
    • 함수
    • 실행 컨텍스트
    • 이벤트 루프
    • 호출스택(Execution Stack)
    • 스코프(Scope)
    • 스코프 체인과 클로저
    • This
    • V8 Engine
    • DreamCoding
  • Typescript
    • 타입스크립트
    • 타입스크립트 컴파일러 옵션
    • 타입스크립트의 기본 타입
    • 배열과 튜플 타입
    • 객체 타입
    • 타입 별칭과 인덱스 시그니처
    • 열거형 타입(Enumerable Type : Enum Type)
    • any, unknown
    • Void타입과 Never타입
    • 타입스크립트 이해하기
    • 타입계층도
    • 객체타입간의 호환성
    • 대수 타입
    • 타입 추론
    • 타입 단언
    • 타입 좁히기
    • 서로소 유니온 타입
    • 함수 타입
    • 사용자 정의 타입 가드
    • 인터페이스
    • 클래스
    • 제네릭
    • 타입 조작하기
    • 조건부 타입
    • 유틸리티 타입
  • React
    • 전역 상태 관리
    • 컴포넌트 설계하기
  • React Deep Dive
    • JSX
    • JSX Transpiler
    • Virtual DOM & React Fiber
    • Class Component
    • Functional Component
    • Class Component vs Functional Component
    • Rendering
    • Hooks
    • Server Side Rendering
    • React Server Side Rendering
    • 리액트 상태관리
    • ESLint
  • NextJs
    • Client Component
    • Server Component
    • Link 컴포넌트를 사용하는 이유
  • Frontend Test
    • 테스트 방법과 테스트 전략
    • 테스트 코드
    • 비동기 처리 테스트
    • 목 객체
    • 웹 API 목 객체
    • 목 함수를 사용하는 스파이
    • 테스트 실행하기 전, 후 공통 설정
    • UI테스트
    • 컴포넌트 스냅숏 테스트
    • NextJs 통합 테스트 - React Context
    • NextJs 통합 테스트 - Next Router
    • 입력 테스트
    • MSW
    • 스토리북 테스트
    • 시각적 회귀 테스트와 E2E 테스트
  • FrontEnd Security
    • 웹 보안
    • HTTP
    • HTTPS
    • CORS
    • 사이드 채널 공격 대책
    • XSS
    • CSRF
    • 클릭재킹
    • 오픈 리다이렉트
    • 인증 · 인가
    • 라이브러리 보안 리스크
  • Clean Code
    • 클린코드
    • 깨끗한 코드
    • 의미 있는 이름
    • 함수
    • 주석
  • TestCode
    • 좋은 소프트웨어 만들기
    • 도구 다루기
  • NestJs
    • 프로젝트 셋업
    • Nest CLI 프로젝트 생성하기
    • 파이프로 요청 데이터 검증하기
    • 서비스와 레파지토리
    • 제어 역전
    • 모듈로 코드 정리하기
    • API 설계, TypeORM, 데이터베이스
    • Type Orm
    • 리포지토리
    • 데이터의 생성 및 저장
    • 데이터 쿼리(데이터 조회, 수정, 삭제 등)
    • Error
    • 응답 속성 제외
    • 인터셉터
    • 커스텀 데코레이터
    • 인증
    • Session
    • 로그아웃
    • 커스텀 데코레이터 & 인터셉터
    • 인증 가드
    • 테스트
    • 테스트 코드 리팩토링
    • 로그인 테스트
  • NestJs 개인 학습
    • NestJs 회원가입 관련 개인 학습내용
  • Node.js
    • Node.js 소개
    • Node.js와 브라우저의 차이점
    • V8 JavaScript Engine
    • Blocking과 Non-Blocking
  • Megatera FrontEnd Dev Road
    • 1주차 : 프론트엔드 개발 환경
      • 개발환경
      • TypeScript
      • React
      • Testing Library
      • Parcel + ESLint
    • 2주차 : JSX
      • JSX
      • UI Tree
      • DOM Node
    • 3주차 : React
      • React Component
      • Data
      • Atomic Design
      • React State
    • 4주차 : React Hooks
      • Express
      • Fetch API & CORS
      • React Hook
      • useRef & Custom Hook
      • usehooks-ts
    • 5주차 : 테스트
      • TDD
      • React Testing Library
      • MSW(Mock Service Worker)
      • Playwright
    • 6주차 : External Store
      • External Store
      • TSyringe
      • Redux 따라하기
      • usestore-ts
    • 7주차 : Route
      • Routing
      • Routes
      • Router
      • Navigation
    • 8주차 : CSS in JS
      • Design System
      • Style Basic
      • CSS in JS
      • Styled Components
      • Props
      • Attrs
      • Global Styles
      • Theme
    • 9주차 : 온라인 쇼핑몰 1
      • 개발하기 전 준비
      • 목록 보기
      • 상품 상세 보기
      • 장바구니
      • 장바구니에 상품 담기
    • 10주차 : 온라인 쇼핑몰 2
    • 11주차 : 온라인 쇼핑몰 3
    • 12주차 : 관리자 페이지
Powered by GitBook
On this page
  • 시각적 회귀 테스트
  • E2E 테스트
  1. Frontend Test

시각적 회귀 테스트와 E2E 테스트

시각적 회귀 테스트

우아한형제들 디자인 시스템에 시각적 회귀 테스트 적용하기

E2E 테스트

Playwright

Previous스토리북 테스트Next웹 보안

Last updated 10 months ago