Written by Jieun

👩🏻‍💻 내 마음대로 Today I Learned

React, Next

이전 글 보기 이전에 필드 테스트까지 했다면 이번엔 필드에 입력 후 로그인 버튼을 누르면 가짜 로그인 프로세스를 만들려고 한다. https://jsonplaceholder.typicode.com/ JSON placeholder는 가짜 REST API를 제공하며, DB와 연동하지 않아도 HTTP메서드(GET, POST, PUT, DELETE 등)를 지원한다. 그래서 JSON placeholder에서 user 데이터 중 아이디가 1인 user 정보를 받아오려고 한다. https://jsonplaceholder.typicode.com/users/1https://jsonplaceholder.typicode.com/users/1 1. API 테스트 npm install axios 설치하기 * CRA에서 axios..

2023. 11. 11.

React, Next

1. 요소들이 컴포넌트에 렌더링 되었는지 확인 먼저 src/components/login/Login.jsx 로그인 컴포넌트를 만들고 src/components/Login.test.js 테스트 파일 만들기 (스타일은 미리 적용해놓은 상태) // Login.jsx import React from "react"; const Login = () => { return ( 로그인 ); }; export default Login; // Login.test.js import { render, screen } from "@testing-library/react"; import Login from "./login/Login"; test("email input should be rendered", () => { render..

2023. 11. 10.

etc

TDD(Test-Driven Development)란? TDD는 코드 작성 전에 테스트를 작성하고 테스트에 통과하도록 코드를 작성하는 것으로 Red-Green테스트라고 한다. 1. Red: 코드 작성 전에 실패하는 테스트 케이스를 작성해서 코드가 제대로 작동하지 않는 '빨간색' 상태로 만든다. 2. Green: 코드 작성 후 테스트를 통과할 수 있는 코드를 작성해서 '초록색' 상태로 만든다. 3. Refector: 마지막으로, 코드를 리팩토링하여 중복을 제거하고 가독성 높이는 작업을 수행한다. TDD를 사용하는 이유 테스트 코드는 코딩 프로세스의 일부라고 생각하면, 원하는 대로 작동하는지 확인할 수 있고, 코드를 변경해도 자동으로 테스트를 실행해서 기존의 기능들이 올바르게 작동하는지 확인할 수 있디 때문..

2023. 11. 8.

React, Next

1. React Testing Library create-react-app은 기본적으로 테스트를 위한 환경을 제공한다. 그래서 터미널에 npm start 말고 npm test를 입력하면 아래처럼 감시모드가 실행이된다. (종료는 q) src 폴더 안에 App.test.js 파일이 생성됐을텐데 이게 바로 npm test를 실행했을 때 실행되던 테스트파일이다. import { render, screen } from '@testing-library/react'; import App from './App'; test('renders learn react link', () => { render(); const linkElement = screen.getByText(/learn react/i); expect(link..

2023. 11. 7.

코딩테스트, 알고리즘

1. 문제설명 https://www.acmicpc.net/problem/9095 9095번: 1, 2, 3 더하기 각 테스트 케이스마다, n을 1, 2, 3의 합으로 나타내는 방법의 수를 출력한다. www.acmicpc.net 2. 예제 입/출력 예제 입력 예제 출력 3 4 7 10 7 44 274 3. 문제 풀이 const fs = require("fs"); let input = fs .readFileSync("/dev/stdin") .toString() .trim() .split("\n") .map(Number); let T = input[0]; for (let i = 1; i

2023. 11. 6.

React, Next

1. React Testing Library란? 테스트가 소프트웨어가 사용되는 모습을 닮을 수록 테스트는 더욱 신뢰할 수 있게 된다. The more your tests resemble the way your software is used, the more confidence they can give you. React 컴포넌트의 특정 메서드나 상태를 테스트하는 게 아니라, 컴포넌트가 렌더링한 결과와 상호작용하는 방법을 모방하는 쿼리를 사용한다. 그래서 사용자가 페이지에서 DOM 요소를 찾고 상호작용하는 것과 유사항 방식으로 테스트 코드를 작성할 수 있다. 이로 인해 컴포넌트 내부 구현이 변경되더라도 테스트 코드가 깨지지 않고 유연하게 유지 된다. RTL 주요 목표는 컴포넌트의 사용자 경험을 테스트하는..

2023. 11. 2.