본문 바로가기

전체 글226

[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.
[12] TDD(Test Driven Development), React Testing Library Test Driven Development(TDD, 테스트 주도 개발)실제 코드를 작성하기 전에 테스트 코드를 먼저 작성한다.테스트 코드를 작성 한 후, 그 테스트 코드를 Pass 할 수 있는 실제 코드를 작성한다. TDD를 하면 좋은 점TDD를 하므로 인해 많은 기능을 테스트하기에 소스 코드에 안정감이 부여된다.실제 개발하면서 많은 시간이 소요되는 부분은 디버깅 부분이기에 TDD를 사용하면 디버깅 시간이 줄어들고 실제 개발 시간도 줄어든다.소스 코드 하나하나를 더욱 신중하게 짤 수 있기 때문에 깨끗한 코드가 나올 확률이 높다. React Testing Library 란?Create React App로 리액트 앱을 생성하면 기본적으로 테스팅할 때 React Testing Library를 사용하는 것을 볼.. 2024. 12. 9.
[11] React Router Dom React Router DomReact Router DOM을 사용하면 웹 앱에서 동적 라우팅을 구현할 수 있고, 라우팅이 실행 중인 앱 외부의 구성에서 처리되는 기존 라우팅 아키텍처와 달리 React Router DOM은 앱 및 플랫폼의 요구 사항에 따라 컴포넌트 기반 라우팅을 용이하게 한다.React Router DOM은 SPA(Single Page Application)에서 URL 기반 탐색과 동적인 경로 매칭을 가능하게 하는 라우팅 라이브러리입니다. 이를 통해 전체 페이지 새로고침 없이도 다양한 화면 간 이동이 가능합니다. React Router DOM의 주요 개념1. RoutesRoutes는 앱에서 생성될 모든 개별 경로에 대한 컨테이너/상위 역할을 한다.Route로 생성된 자식 컴포넌트 중에서 .. 2024. 12. 8.
[10] The Movie DB API 생성하기 및 Axios 인스턴스 생성 및 요청 보내기 The Movie DB API 생성하기1. The MovieDB Website 로 이동https://www.themoviedb.org/ The Movie Database (TMDB)환영합니다 수백만 개의 영화, TV 프로그램 및 인물을 발견하세요. 지금 살펴보세요.www.themoviedb.org 2. 가입 후 로그인 & API_KEY 받기 3. Text Editor에서 the MovieDB API를 위한 설정  Axios 인스턴스 생성 및 요청 보내기 Axios란?Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리쉽게 말해서 백엔드랑 프론트엔드랑 통신을 쉽게하기 위해 Ajax와 더불어 사용한다. Axios 사용 방법 Axios 인스턴스화 하는 이.. 2024. 12. 6.
[9] Create React App으로 리액트 설치하기 1. Github에 repository 우선 만들기2. repository 만든 후, 터미널 창 열기3. 아래와 같이 수행한다.git clone https://github.com/사용자이름/레포지토리폴더이름.git(repository 폴더의 첫글자를 대문자로 하면 터미널에 안 만들어진다.) 4.  Create React App 수행하기npx create-react-app 또는npx create-react-app .현재 위치에 바로 설치하기 2024. 12. 6.
react 확장 프로그램 추가하기 https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko React Developer Tools - Chrome 웹 스토어Adds React debugging tools to the Chrome Developer Tools. Created from revision c7c68ef842 on 10/15/2024.chromewebstore.google.com 2024. 12. 4.
[8] useCallback을 이용한 함수 최적화 / useMemo를 이용한 결과값 최적화 useCallback을 이용한 함수 최적화 삭제 버튼 함수 APP 컴포넌트로 이동 위 코드를 React.useCallback 적용으로 문제 해결!!useMemo를 이용한 결과값 최적화 2024. 12. 4.

티스토리툴바