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

1. 개발 과제 정리

교육자료의 리액트(React), 레코드 폼과 레코드 리스트로 컴포넌트 분리
를 fork 해서 아래 과제 수행하기.
수행 후 https 첨부

• NumberRecordListItem 분리 [https://codepen.io/jxdpqbjt-the-selector/pen/poBwgBP?editors=1111]
• 수정 버튼 넣기 [https://codepen.io/jxdpqbjt-the-selector/pen/oNOwbRm?editors=1111 ]
• 수정 버튼 누르면 다시 일반모드로 변경 [https://codepen.io/jxdpqbjt-the-selector/pen/GRLEoVR?editors=1111]
• 수정모드에서 input 만들기 _포크 못땀... 아래참조
• 수정모드에서 input 값 변경 가능하도록 [https://codepen.io/jxdpqbjt-the-selector/pen/PogjNwP?editors=1111]
• 수정 완료 누르면 원래 보이던 값이 변경되도록 [https://codepen.io/jxdpqbjt-the-selector/pen/WNWOwYM?editors=1111]
• 수정시 음수 금지 [https://codepen.io/jxdpqbjt-the-selector/pen/abxwNQg?editors=1111]
• 수정 취소시 input 값을 초기화 [https://codepen.io/jxdpqbjt-the-selector/pen/PogjNXm?editors=1111]

2. tailwind활용 관련

아래처럼 tailwind 사용하는 것도 가능하다.

넓이, 높이 100px주기
w-[100px]
h-[100px]

3. tailwind활용 관련

과제 아래 ui ux 구현하기
https://cdpn.io/pen/debug/yLrXJaw?authentication_hash=PBMNWdOWLvdr

주의사항

				<input type="Number"
					value={num}
					className="input input-bordered w-[244px] h-[48px] max-w-xs
										 px-2 py-4" 
					
					onChange={(e)=>{
						let _num=0;
						let inputValue = e.target.value;
						
						if(!isNaN(parseInt(inputValue)) && parseInt(inputValue)>=0){
						    _num = inputValue;
						}

						setNum(parseInt(_num));
					 }
					}
					/>

inputtype가 number이어도 문자형 의외의 다른값이 입력되는 경우도 있으니 주의

구현 결과물:
https://codepen.io/jxdpqbjt-the-selector/pen/YzMQWpV

강사님의 해결책:
숫자는 e.target.valueAsNumber로 가져와야 바른 타입으로 가져올 수 잇다.

return false와 같은 작용
onSubmit={(e) => e.preventDefault()}

input 태그에서 min지정 가능

조건없이 배열 set호출하면 무한반복 갇힐 수 있으니 주의

setTimeout 한번만 실행됨
setInterval 특정 시간단위로 반복 실행됨

배운김에 강사님 코드를 보고 todo리스트를 간단히 수정해봤다.
삭제기능 까지 완료됬다.
https://codepen.io/jxdpqbjt-the-selector/pen/bGJRwOE?editors=1111