![]()
리액트 훅이 나오기 전까지 클래스 컴포넌트를 메인으로 사용하였다. 그러므로 훅에서 클래스로 변환해본다. * 리액트는 버전 16.8부터 함수 컴포넌트를 기본 컴포넌트로 사용하기 시작했지만, 그 이전에는 클래스 컴포넌트를 기본 컴포넌트로 사용했다. 기존코드와 변경코드를 비교할때 import, interface, export 또는 class 부분을 비교하면서 보면된다. 기존코드 Button 기존코드 : 더보기 import React from 'react'; import Styled from 'styled-components'; interface ContainerProps { readonly backgroundColor: string; readonly hoverColor: string; } const Conta..
![]()
1) 프로젝트 만들기 application.properties server.port=80 spring.datasource.driver-class-name=com.mysql.jdbc.Driver spring.datasource.url=jdbc:mysql://localhost:3306/shop?serverTimezone=UTC spring.datasource.username=root spring.datasource.password=root spring.jpa.properties.hibernate.show_sql=true #콘솔창에 출력되는 쿼리를 가독성 좋게 포맷팅 spring.jpa.properties.hibernate.format_sql=true #쿼리에 물음표로 출력되는 바인드 파라미터 출력 loggi..
![]()
1) MYSQL MySQL :: Download MySQL Installer Maven – Welcome to Apache Maven Welcome to Apache Maven Apache Maven is a software project management and comprehension tool. Based on the concept of a project object model (POM), Maven can manage a project's build, reporting and documentation from a central piece of information. If you maven.apache.org 2) JDK Java Downloads | Oracle 3) MAVEN Maven – We..
![]()
State 테스트 App.tsx return ( { toDoList.map((item, index) => ( deleteToDo(index)}/> )) } setToDo(text))}/> ); } App.test.tsx import React from 'react'; import { render, screen, fireEvent } from '@testing-library/react'; import App from './App'; import 'jest-styled-components'; describe('', () => { it('renders component correctly', () => { const {container} = render(); const toDoList = screen.getBy..
![]()
Input 테스트 Input/index.test.tsx import React from 'react'; import { render, screen, fireEvent } from '@testing-library/react'; import 'jest-styled-components'; import { Input } from './index'; describe('', () => { it('renders component correctly', () => { const { container } = render(); const input = screen.getByDisplayValue('default value'); expect(input).toBeInTheDocument(); //expect(container)..
