프롬프트 AI&OpenAPI&공공데이터를 활용한 웹앱개발자 양성 과정 70일차

1. javascript 변수 사용 관례

key value 중 안쓰는 요소에 대해서는 하나만 넣어주는 것이 관례
관례 arr.filter(, index)

또한 람다식안에 겹치는 변수명이 있을 땐 매개 변수쪽에 _을 넣어주는것이 관례다.

arr.filter(_index)

2. 리펙토링

보면 리펙토링을 위해 분리한 함수에서, 값을 객체 상태로 넘기고 객체상태로 받고 있다는 것을 알 수 있다.

console.clear();

import React, { useState } from "https://cdn.skypack.dev/react@18";
import ReactDOM from "https://cdn.skypack.dev/react-dom@18";

const NumberRecorderForm = ({ num, setNum, saveNumber, clearNumbers }) => {
	return (
		<>
			<div>
				<span>숫자 : {num}</span>
				&nbsp;
				<button onClick={() => setNum(0)}>취소</button>
			</div>
			<div>
				<button onClick={() => setNum(num + 1)}>증가</button>
				&nbsp;
				<button onClick={() => setNum(num - 1)}>감소</button>
				&nbsp;
				<button onClick={saveNumber}>기록</button>
				&nbsp;
				<button onClick={clearNumbers}>전체기록삭제</button>
			</div>
		</>
	);
};

const NumberRecorderList = ({ recordNums, removeNumber }) => {
	return (
		<>
			<div>
				{recordNums.length == 0 ? (
					<span>기록 없음</span>
				) : (
					<>
						<h5>기록</h5>
						<ul>
							{recordNums.map((recordNum, index) => (
								<li key={index}>
									<span>
										{index + 1}번 : {recordNum}
									</span>
									&nbsp;
									<button onClick={() => removeNumber(index)}>삭제</button>
								</li>
							))}
						</ul>
					</>
				)}
			</div>
		</>
	);
};

const App = () => {
	const [num, setNum] = useState(0);
	const [recordNums, setRecordNums] = useState([10, 20, 30]);

	const saveNumber = () => {
		setNum(0);
		setRecordNums([...recordNums, num]);
	};

	const removeNumber = (index) => {
		setRecordNums(recordNums.filter((_, _index) => _index != index));
	};

	const clearNumbers = () => {
		setRecordNums([]);
	};

	return (
		<>
			<NumberRecorderForm
				num={num}
				setNum={setNum}
				saveNumber={saveNumber}
				clearNumbers={clearNumbers}
			/>
			<NumberRecorderList recordNums={recordNums} removeNumber={removeNumber} />
		</>
	);
};

ReactDOM.render(<App />, document.getElementById("root"));

변수를 객체 형태로 넘긴다.

printName({ name, age });

3. 시간날때 한번 게임만들기도 도전해 볼 것

pygame 파이썬 게임만드는 툴

tick 밀리초단위
deltatime 간격

fps(frame per sec)

https://www.pygame.org/wiki/GettingStarted