본문 바로가기

분류 전체보기226

[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.

티스토리툴바