김수정 블로그 김수정 블로그

cy.origin()을 사용한 방법:수동으로 소셜 로그인 흐름을 시뮬레이션: 이 방법은 Cypress 테스트 코드에서 소셜 인증 흐름을 직접 시뮬레이션즉, 사용자의 행동을 모방하여 소셜 로그인 버튼을 클릭하고, 로그인 페이지로 이동하며, 사용자 인증 및 권한 부여를 처리이는 테스트 코드를 작성하고 관리하는 데 더 많은 작업을 필요로 합니다.유연성 및 사용자 정의 가능: 수동으로 테스트를 작성하기 때문에 테스트 코드에 필요한 모든 사용자 정의 및 유연성을 추가할 수 있습니다.https://docs.cypress.io/guides/end-to-end-testing/social-authentication#__docusaurus_skipToContent_fallbackcypress-social-logins를 사..

Cypress의 명령 체인 내에서 then() 또는 should()을 사용하거나, cy.wrap()과 같은 명령을 사용하여 프로미스를 처리합니다.then() 또는 should() 사용:it('비동기 처리 예제', () => { cy.visit('/some-page') .then(() => { // 비동기 작업 수행 return new Promise((resolve, reject) => { // 예: setTimeout 사용 setTimeout(() => { // 비동기 작업 완료 후에는 resolve 호출 resolve(); }, 2000); }); }) .then(() => { /..

- Cypress가 직접적으로 함수가 호출되거나 컴포넌트 내부의 값을 인지하는 것은 어려울까 ?: Cypress로 직접적으로 함수 호출을 감지하는 것은 기본적으로 어렵다. Cypress는 웹 애플리케이션의 동작을 테스트하는 데 주로 사용되며, 테스트 코드는 일반적으로 사용자의 행동 및 상호작용을 시뮬레이트하고 해당 동작에 대한 결과를 검증합니다.  함수가 호출됨으로써 발생하는 결과를 통해 간접적으로 확인할 수 있습니다. 대신, 함수가 호출되었음을 간접적으로 확인할 수 있습니다. 예를 들어, 함수가 호출될 때 해당 함수가 변경하는 상태나 DOM 요소의 변화를 검증할 수 있습니다. 함수가 호출되었을 때 상태가 변경되거나, 특정 DOM 요소가 생성되거나 변경되는지를 통해 함수 호출을 확인할 수 있습니다. 이를..

- Expected to find element: , but never found it.요소가 렌더링되지 않았을 수 있음: Cypress는 테스트 중에 DOM 요소를 찾으려고 할 때 해당 요소가 렌더링되어 있어야 합니다. 그렇지 않으면 요소를 찾지 못할 수 있습니다. 코드를 보면 npm start를 실행하는 beforeEach() 훅이 있습니다. 이렇게 하면 응용 프로그램이 시작되고 렌더링되기 전에 테스트가 시작될 수 있습니다. 이 경우 Cypress는 해당 요소를 찾을 수 없을 수 있습니다.Cypress의 기다리는 방식 이용: Cypress는 기본적으로 명령이 완료될 때까지 기다리지만 명시적인 기다리기 없이는 비동기적으로 로딩되는 요소를 찾는 데 문제가 발생할 수 있습니다. cy.wait()를 사용하여..

- 에러상황export function createHooks(callback) { let stateContext = {current:0, states:[]}; let memoContext = {current:0, memoValue:{}}; function resetContext() { stateContext.current = 0; memoContext.current = 0; } const useState = (initState) => { const {current, states} = stateContext; const _index = stateContext.current; //초기값 설정 if(states.length === _index){ sta..

콜 스택, 메모리 힙이란?자바스크립트 엔진은 Memory Heap 과 Call Stack 으로 구성되어 있습니다. 가장 유명한 것이 구글의 V8 Engine입니다. 자바스크립트는 단일 스레드 (sigle thread) 프로그래밍 언어인데, 이 의미는 Call Stack이 하나 라는 이야기입니다. 즉 멀티가 되지 않고, 하나씩 하나씩 처리한다는 의미입니다. 콜 스택(Call Stack)원시 타입(숫자 등) 데이터가 저장된다.실행 콘텍스트(Execution Context)를 통해1) 변수 식별자(이름) 저장,2) 스코프 체인 및 this 관리,3) 코드 실행 순서 관리 등을 수행.*실행 컨텍스트의 상세 구조 및 원리는 이 글의 범위를 넘어가므로 다루지 않습니다. 메모리 힙(Memory Heap)참조 타입(객..

import './App.css'; import {useState} from 'react'; function Header(props){ return { event.preventDefault(); props.onChangeMode(); }}>{props.title} } function Nav(props){ const lis = [] for(let i=0;i{t.title} ) } return {lis} } function Article(props){ return {props.title} {props.body} } function Create(props){ return Create { event.preventDefault(); const title = event.target.title.value; const..

px (pixels): 픽셀은 디지털 화면에 표시되는 가장 작은 단위이다. 고정된 크기를 가지며, 따라서 다른 요소나 설정에 영향을 받지 않는다. em: em 단위는 상대적인 단위로, 해당 요소의 부모 요소의 글꼴 크기에 상대적이다. 예를 들어, 부모 요소의 글꼴 크기가 16픽셀이고 자식 요소의 글꼴 크기가 1em으로 설정되면, 자식 요소의 글꼴 크기도 16픽셀이 된다. 만약 자식 요소의 글꼴 크기가 2em으로 설정되면, 그것은 부모요소의 두 배인 32픽셀이 됩니다. rem (root em): rem도 상대적인 단위지만, HTML 문서 최상단 루트(root)요소()의 글꼴 크기에 기반한다. 이렇게 하면 사이트 전체에서 일관된 스타일링을 쉽게 유지할 수 있다. vw (viewport width) : 하나의..