따라하며 배우는 리액트 A-Z
[프론트엔드, 웹 개발] 강의입니다.
이 강의를 통해 리액트 기초부터 중급까지 배우게 됩니다. 하나의 강의로 개념도 익히고 실습도 하며, 리액트를 위해 필요한 대부분의 지식을 한번에 습득할 수 있도록 만들었습니다.
✍️
이런 걸
배워요!
리액트
NextJS
타입스크립트
정적 사이트 자동 배포
도커
강의: https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%8A%94-%EB%A6%AC%EC%95%A1%ED%8A%B8#
강의 자료 : https://github.com/braverokmc79/DiagramPDF
소스 :
https://github.com/braverokmc79/react-button-app
[6]. React TDD 를 이용한 간단한 앱 생성 및 배포
66.TDD를 이용해서 만들 앱 소개
강의:
67.앱 만들기 시작
강의:
App.test.js
import { render, screen } from '@testing-library/react';
import App from './App';
test('the counter start 0', () => {
render(<App />);
const counterElement =screen.getByTestId("counter");
expect(counterElement).toHaveTextContent(0);
});
App.js
import logo from './logo.svg';
import './App.css';
import { useState } from 'react';
function App() {
const [count, setCount]=useState(0);
return (
<div className="App">
<header className="App-header">
<h3 data-testid="counter">{count}</h3>
</header>
</div>
);
}
export default App;
68.플러스, 마이너스 버튼 생성
강의:
App.test.js
import { render, screen } from '@testing-library/react';
import App from './App';
test('minus button has correct text', ()=>{
render(<App /> );
const buttontElement =screen.getByTestId("minus-button");
expect(buttontElement).toHaveTextContent("-")
});
test('plus button has correct text', ()=>{
render(<App />);
const buttontElement =screen.getByTestId("plus-button");
expect(buttontElement).toHaveTextContent("+");
})
App.js
import './App.css';
import { useState } from 'react';
function App() {
const [count, setCount]=useState(0);
return (
<div className="App">
<header className="App-header">
<h3 data-testid="counter">{count}</h3>
<button data-testid="minus-button">-</button>
<button data-testid="plus-button">+</button>
</header>
</div>
);
}
export default App;
69.플러스, 마이너스 버튼 기능 넣기(fire event)
강의:
App.test.js
~
test('When the + button is pressed, the counter changes to 1', ()=>{
render(<App />);
const buttontElement =screen.getByTestId("plus-button");
fireEvent.click(buttontElement);
const counterElement =screen.getByTestId("counter");
expect(counterElement).toHaveTextContent(1);
});
App.js
import './App.css';
import { useState } from 'react';
function App() {
const [count, setCount]=useState(0);
return (
<div className="App">
<header className="App-header">
<h3 data-testid="counter">{count}</h3>
<button data-testid="minus-button" onClick={()=>setCount((count)=>count-1)}>-</button>
<button data-testid="plus-button" onClick={()=>setCount((count)=>count+1)}>+</button>
</header>
</div>
);
}
export default App;
70.on/off 버튼 만들기(toHaveStyle)
강의:
App.test.js
test("on/off button has blue color", ()=>{
render(<App />);
const buttontElement =screen.getByTestId("on/off-button");
expect(buttontElement).toHaveStyle({backgroundColor : "blue"});
});
App.js
import './App.css';
import { useState } from 'react';
function App() {
const [count, setCount]=useState(0);
return (
<div className="App">
<header className="App-header">
<h3 data-testid="counter">{count}</h3>
<button data-testid="minus-button" onClick={()=>setCount((count)=>count-1)}>-</button>
<button data-testid="plus-button" onClick={()=>setCount((count)=>count+1)}>+</button>
<div><button data-testid="on/off-button" style={{backgroundColor:"blue"}}>on/off</button></div>
</header>
</div>
);
}
export default App;
71.on/off 버튼 클릭 시 버튼 disabled
강의:
App.test.js
test("Prevent the -, + button from being pressed when the on/off button is clicked", ()=>{
render(<App />);
const onOffButtonElement =screen.getByTestId("on/off-button");
fireEvent.click(onOffButtonElement);
const plusButtonElement=screen.getByTestId("plus-button");
expect(plusButtonElement).toBeDisabled();
})
App.js
import './App.css';
import { useState } from 'react';
function App() {
const [count, setCount]=useState(0);
const [disabled, setDisabled] =useState(false);
return (
<div className="App">
<header className="App-header">
<h3 data-testid="counter">{count}</h3>
<div>
<button data-testid="minus-button" onClick={()=>setCount((count)=>count-1)} disabled={disabled}>-</button>
<button data-testid="plus-button" onClick={()=>setCount((count)=>count+1)} disabled={disabled}>+</button>
</div>
<div><button data-testid="on/off-button" onClick={()=>setDisabled(prev=>!prev)} style={{backgroundColor:"#1393bf"}}>on/off</button></div>
</header>
</div>
);
}
export default App;
72.Github Action을 이용한 AWS S3로 앱 자동 배포하기
강의:
73.앱 배포를 위한 AWS S3 버킷 생성하기
강의:
74.AWS S3 버킷 설정 및 애플리케이션 배포하기
강의:
75.S3로 앱 자동 배포를 위한 yml 파일 완성하기
강의:
댓글 ( 4)
댓글 남기기