본문 바로가기

개발일지157

[18] Prettier와 ESLint 테스팅할 때 matcher를 알맞게 쓰는지 확신이 들지 않을 때가 있으며, 코드의 형식이나 자바스크립트 문법 등을 올바르게 사용하지 못할 때가 있습니다. 그러한 부분을 도와주는 모듈을 알아보겠습니다.Prettier코드 구현과는 관련 없는, 일관된 텍스트 작성을 도와주는 도구Prettier를 사용하면, 프로젝트 내에서 일관된 텍스트 형식을 가질 수 있습니다.탭의 줄 간격이나, 줄바꿈 정도 등 텍스트 작성에 대한 많은 부분을 사용자가 원하는 대로 설정 가능주로 코드 형식을 맞추는데 사용작은 따옴표(')을 사용할지 큰 따옴표(")를 사용할지, Indent 값을 2로 줄지 4로 줄지 등등, 에러 찾는 것이 아닌 코드 포맷터 역할 Prettier 설치 방법 2가지1. 플러그인 없이 Extention 설치혼자서 편.. 2024. 12. 20.
[17] React Testing Library 주요 API, render 함수 render 함수DOM에 컴포넌트를 렌더링하는 함수인자로 렌더링할 react 컴포넌트가 들어감return은 RTL에서 제공하는 쿼리 함수와 기타 유틸리티 함수를 담고 있는 객체를 리턴(Destructuring 문법으로 원하는 쿼리 함수만 얻어올 수 있다.)-> 소스 코드가 복잡해지면 비추천 !!! screen 객체를 사용하기.왜냐하면 사용해야 할 쿼리가 많아질수록 코드가 복잡해질 수 있음. 2024. 12. 20.
[16] Iframe 아이프레임은 HTML Inline Frame 요소이며 inline frame의 약자이다.효과적으로 다른 HTML 페이지를 현재 페이지에 포함시키는 중첩된 브라우저로iframe 요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 다른 페이지를 불러와서 삽입할 수 있다.또한 웹 페이지 안에 다른 HTML 페이지나 콘텐츠를 삽입하는 데 사용된다. 흔히 동영상(예: YouTube), 지도(예: Google Maps), 또는 다른 웹 페이지를 임베드하는 데 사용된다. 기본 문법 주요 속성src:삽입할 콘텐츠의 URL을 지정.예: YouTube 동영상 링크, 다른 웹 페이지 주소.width:iframe의 너비를 지정.단위: px, % (예: 600, 100%).height:iframe의 높이를 지정.단위: px.. 2024. 12. 9.
[15] Styled Component란? Styled Component는 Css-in-JS라고 하는 Javascript 파일 안에서 CSS를 처리할 수 있게 해주는 대표 라이브러리이다.https://styled-components.com/docs/basics styled-components: BasicsGet Started with styled-components basics.styled-components.com npm 설치 방법with npm npm install --save styled-components yarn 설치 방법with yarnyarn add styled-components 2024. 12. 9.
[14] 쿼리 함수 https://testing-library.com/docs/queries/about/ About Queries | Testing LibraryOverviewtesting-library.com 쿼리 함수란?쿼리는 페이지에서 요소를 찾기 위해 테스트 라이브러리가 제공하는 방법이다. get, find, query의 차이점여러 유형의 쿼리("get", "find", "query")가 있다. 이들 간의 차이점은 요소가 발견되지 않으면 쿼리에서 오류가 발생하는지 또는 Promise를 반환하고 다시 시도하는지 여부이다. 선택하는 페이지 콘텐츠에 따라 다른 쿼리가 다소 적절할 수 있다.  지침 원칙에 따라 테스트는 사용자가 코드(구성 요소, 페이지 등)와 상호 작용하는 방식과 최대한 비슷해야한다.이를 염두에 두고 다음.. 2024. 12. 9.
[13] Jest란? Jestfacebook에 의해서 만들어진 테스팅 프레임워크이다.최소한의 설정으로 동작하며 Test Case를 만들어서 어플리케이션 코드가 잘 돌아가는지 확인해준다.단위(Unit) 테스트를 위해서 이용한다. Jest 파일 구조 및 설명1. Jest 파일 구조Jest 테스트 파일의 전형적인 구조는 다음과 같습니다.describe: 테스트를 그룹화하는 블록입니다. 예를 들어, 특정 함수나 컨트롤러와 관련된 테스트를 하나의 describe로 묶습니다.it 또는 test: 각 개별 테스트를 정의합니다. it은 읽기 쉽게 "이 테스트는 무엇을 해야 한다(it should...)"와 같은 문장을 작성할 때 유용합니다.expect: 테스트에서 검증하는 부분으로, 결과값이 기대값과 일치하는지를 확인합니다.매처 (matc.. 2024. 12. 9.

티스토리툴바