Develop Note by J.S.

1. TDD TDD (Test Drive Development)는 테스트 주도 개발이라고 합니다. 테스트를 먼저 작성하고 테스트의 패스여부를 기준으로 개발을 진행하는 것입니다. 테스트가 모두 통과 될 때까지 테스트 -> 코드 작성 -> 테스트를 반복합니다. TDD는 초기에 테스트 코드를 작성해야하는 초기투자시간이 필요한 단점이 있지만, 코드의 품질 향상 및 장기적인 측면에서 개발과 테스트를 동시에 함으로 써 오류를 조기에 잡아내어 궁극적으로는 개발속도가 향상 될 수 있습니다. 2. BDD BDD (Behavior Driven Development)는 행동 주도 개발이라고 합니다. 사용자의 행위에 기준을 두고 테스트하며 개발을 진행하는 것입니다. BDD는 TDD의 한 종류로 볼 수 있는데, TDD에서 사용..

1. 동적 컴포넌트 동적 컴포넌트 :is 는 선택된 탭에 따라 렌더링되는 컴포넌트 기능 및 권한에 따라 노출되는 컴포넌트 기능 등등, 환경에 따른 동적 컴포넌트 렌더링 기능입니다. 2. 예제코드 동적 컴포넌트 렌더링 방법에 대한 예제 코드 입니다. markRow : 객체를 원시로 표현한 뒤 반환하여 반응형 시스템에서 관찰되지 않아 불필요한 재렌더링을 줄여 애플리케이션의 성능을 최적화함. markRow로 인하여 watch가 동작되지 않을 경우 // 기존 watch(props, (n, o) => (user.value = props.data)); // 변경 watch(() => { if (props.data) { user.value = props.data; } }, callback()); 참고사이트 https..

1. AND 선택자다중 조건을 모두 만족하는 엘리먼트를 선택하는 경우// 공백 없이 선택자를 붙여서 사용.class1#id2 { color : red;}div.className1.className2 { color : black;}2. OR 선택자다중 조건 중 1개라도 만족하는 경우// , 기호로 구분.class1, id2 { color : red;}div.className1, .className2 { color : black;}3. 중첩 선택자 (자손 선택자)특정 부모요소 안에 있는 특정 자손을 모두 선택하는 경우/* scss */.container { div { .child { .name { color: red; ..

Cypress의 Custom Commend를 활용한 Login, Logout Test 입니다. 1. Commend 등록 cypress/support/commonds.ts 파일과 cypress/support/index.d.ts 에 사용할 Custom Command를 정의합니다. // cypress/support/commands.ts file // 요소 가져오기 Cypress.Commands.add('dataCy', (selector) => { return cy.get(`[data-cy=${selector}]`); }); // 요소 접근 후 클릭 Cypress.Commands.add('actionClick', (selector) => { return cy.get(`[data-cy=${selector}]`)...

verbatimModuleSyntax Typescript 5.0 부터 Module elision(생략)를 명확하게 할 수 있는 옵션입니다. 만약 Type 지정만을 위한 import일 경우 빌드 시 해당 import가 삭제(elision)되는데, 해당 옵션으로 인해, type지정을 위한 import인 경우 type-only 형식으로 import해야 합니다. 1) Error Message 2) Type 키워드 사용

Cypress에 MSW(Mock Service Worker) 를 적용하여 테스트 하는 환경 세팅 방법입니다 . cypress/support/e2e.ts (or index.ts : cypress 버전에 따라 다름)에서 기존에 mockup api를 정의한 /src 디렉토리 내 mocking 파일을 불러와 Worker를 시작합니다. 1. e2e.ts import './commands'; import { setupWorker } from 'msw'; import authMocking from '@/services/mocking/auth.mocking'; // 경로문제발생! export const mocking = setupWorker(...authMocking); before(() => { // MSW 워커를 ..

Cypress에서 로그인 버튼 클릭 시 API 요청 및 응답에 대한 E2E Test 및 Component Test 예제를 작성하였습니다. 1. Cypress API TEST 종류 Cypress의 API TEST는 Spying과 Spying & Stubbing 및 Dynamic Stubbing 이 있습니다. // spying cy.intercept('/users/**') cy.intercept('GET', '/users*') cy.intercept({ method: 'GET', url: '/users*', hostname: 'localhost', }) // spying and response stubbing cy.intercept('POST', '/users*', { statusCode: 201, body..

Cypress에서 주로 사용되는 Method의 기능설명 및 Assertions, 주 사용 기능 예제 대해 정리하였습니다. 1. Cypress Method cy.visit(): 특정 URL에 대한 페이지 방문을 수행합니다. cy.get(): DOM 요소를 선택하기 위해 사용되며, 선택자, 클래스, ID 등을 통해 요소를 찾습니다. - cy.get('[data-cy=Selector]') .contains(): 텍스트를 기반으로 DOM 요소를 선택합니다. 해당 텍스트를 포함하는 요소를 찾습니다. .type(): 텍스트 입력을 시뮬레이션하기 위해 사용됩니다. 입력 필드에 텍스트를 입력하는 동작을 수행합니다. - enter 키 입력 cy.get('[data-cy=search]').type({enter}) .cli..