공부 기록장

전통적인 테스트 도구들은 브라우저 외부에서 원격으로 명령을 전송하는 방식이었다면, Cypress는 브라우저 내부에서 직접 실행됩니다. Cypress를 실행하면 실제 브라우저 창이 열리고, 테스트가 실행되는 모든 과정을 실시간으로 시각적으로 확인할 수 있습니다.타임 트래블 기능도 지원합니다. 테스트의 각 단계를 클릭하면 그 시점의 상태로 되돌아가서 DOM의 상태, 네트워크 요청, 콘솔 로그 등을 자세히 살펴볼 수 있습니다. 설치 과정1. 프로젝트 루트 디렉토리에서 다음 명령어를 실행합니다.npm install cypress --save-dev 2. package.json에 스크립트를 추가합니다.{ "scripts": { "cy:open": "cypress open", "cy:run": "cyp..

프론트엔드 개발에서 테스트 코드는 선택사항이 아닌 필수 요소가 되었습니다. 특히 React와 같은 컴포넌트 기반 라이브러리에서는 각 컴포넌트의 독립성과 재사용성을 보장하기 위해 체계적인 테스트 전략이 중요합니다. 이번 글에서는 React 테스트 코드 작성의 목적부터 실제 적용 방법까지 차근차근 살펴보겠습니다.테스트 코드를 작성하는 이유정확성과 신뢰성 확보테스트 코드의 가장 기본적인 목적은 작성한 코드가 올바르게 동작하는지 확인하는 것입니다. React 컴포넌트는 다양한 props와 state 조합에 따라 다르게 렌더링되며, 사용자의 인터랙션에 따라 동적으로 변화합니다. 테스트 코드를 통해 이러한 모든 시나리오에서 컴포넌트가 예상대로 동작하는지 검증할 수 있습니다. 안전한 리팩토링 환경 제공프로젝트가 성장..

1. position 프로퍼티position 프로퍼티는 HTML 요소의 위치를 결정하는 방식을 설정한다. 웹 페이지의 레이아웃을 구성할 때 필수적인 속성으로, 각 요소를 원하는 위치에 배치할 수 있게 해준다.position 속성 값은 static, relative, absolute, fixed 네 가지가 있으며, 각각의 특성은 다음과 같다.속성값 기준점 다른 요소에 영향 스크롤 시 동작static기본 문서 흐름영향 있음함께 스크롤relative원래 위치영향 없음함께 스크롤absolute상위 요소영향 없음함께 스크롤fixed뷰포트영향 없음고정 위치 유지 1) 정적 위치(static position) 지정 방식static은 position 프로퍼티의 기본값이다. 다른 태그와의 관계에 의해 자동으로 배치되며,..

1. HTML 과 CSS 연동 방법적용할 태그에 style 속성으로 넣기 (인라인 스타일)가급적 사용하지 않아야 한다. Hello World!  HTML 문서 Hello World!  HTML 문서 Hello World   2. SelectorHTML 문서의 특정 부분에 대해 렌더링 방법을 정의하기 위해서는 특정 부분을 선택할 수 있어야 함 CSS Selecotr는 이런 특정 부분을 선택하기 위한 문법이다.전체 셀렉터(``) : 모든 요소를 선택태그 셀렉터 : HTML 태그 이름으로 선택 (예 : p, div, span)클래스 셀렉터 (.) : 특정 클래스가 적용된 요소 선택ID 셀렉터(#) : 특정 ID를 가진 요소 선택속성 셀렉터([]) : 특정 속성이나 속성값을 가진 요소 선택전체 셀..

1. HTML 구조 및 기본 태그HTML 문서는 웹 페이지의 기본 구조를 정의하는 마크업 언어이다. 모든 HTML 문서는 다음과 같은 기본 구조를 가진다. DOCTYPEHTML 문서는 최상단에 항상 위 태그를 사용해야한다. 해당 문서를 브라우저가 다르게 렌더링 하지 않도록 하기 위해 HTML 문서임을 알려주는 태그이다.문서 범위 설정 태그로 html 문서는 해당 태그로 오픈한 후 작성되어야 하고 맨 마지막에 해당 태그로 닫아야한다.속성lang: 문서 언어 설정 (ko, en ...)html 문서 제목을 의미한다. 주로 해당 웹페이지를 보여주는 웹브라우저 상단에 표시한다.문서 제목문서 전반에 걸친 정보를 표시하기 위한 설정 // 호환성 관련 태그속성charset: 문자 인코딩 설정 (utf-8, eu..