다재다능한 모험가

export async function updateFood(id, formData) { const response = await fetch(`${BASE_URL}/foods/${id}`, { method: 'PUT', body: formData, }); if (!response.ok) { throw new Error('데이터를 수정하는데 실패했습니다'); } const body = await response.json(); return body; } updateFood를 만들어주고 id값과 formDate를 받음 id값을 통해 수정하기 위해 쿼리값을 id로 만들어주고 메서드는 PUT body는 formDate로 만들어줌 먼저 FoodForm에 creatFood 함수 대신 onSubmit이라는 함수를 받아서..

editingId라는 State를 만들어줌(수정할id를 저장할값) 초기값으로는 null 리뷰리스트에서 item.id가 editingId와 같은 경우에만 ReviewForm을 렌더링하도록 함 그리고 ReviewListItem 컴포넌트에 onEdit이라는 프롭으로 setEdittingId를 넘겨주고 리뷰리스트 아이템에는 onEdit 이라는 프롭을 추가해주고 핸들 에딧클릭이라는 함수를 만들어서 onEdit(item.id) 프롭으로 실행해줌 그리고 수정버튼을 추가하고 핸들에딧클릭을 내려줌 function ReviewList({ items, onDelete }) { const [editingId, setEditingId] = useState(null); const handleCancel = () => setEdi..

export async function createReview(formData) { const response = await fetch(`${BASE_URL}/film-reviews`, { method: 'POST', body: formData, }); if (!response.ok) { throw new Error('리뷰를 생성하는데 실패했습니다.'); } const body = await response.json(); return body; api.js 파일에서 fetch를 받아 올 함수에 formData를 받고 method는 POST로 지정해주고 body는 formData로 지정해줌 const handleSubmit = async (e) => { e.preventDefault(); const for..

function Star({ selected = false, rating = 0, onSelect, onHover }) { const className = `Rating-star ${selected ? 'selected' : ''}`; const handleClick = onSelect ? () => onSelect(rating) : undefined; const handleMouesOver = onHover ? () => onHover(rating) : undefined; return ( ★ ); } className은 별점을 보여줄 css를 의미하고 handleClick은 별점이 있을 때(true) 별점의 값을 onSelect로 넘겨줌 handleMouseOver는 마우스가 떠났을 때 별점의 값을 o..

애자일 방식 결과물을 만들어 미리 확인하고 수정하며 진행 장점 중간중간 사용하면서 발전시키기 때문에 기능 변경이 유연함 폭포수방식 기획 개발 테스트 배포 유지보수 과정을 거쳐 진행됨 단점 수정사항이 많이 생길 가능성이 높고 개발자들이 수정사항을 반영하기 힘듬 테스트 프로세스 얼마나 시급한가? 담당자는 누구인가? 빼먹은 버그가 있는가? 버그가 잘 고쳐졌는가? 버그가 발생하면 담당자가 기록하는데 이것을 이슈라고 부름 이런 시스템을 이슈트레킹 툴이라고 함 이슈의 상태 open 이슈가 생김 in-progress 개발자가 개선작업진행 Resoleved 문제가 해결됨 Closed 테스트결과 버그가 잘 해결됨 Reopen 추가적인 문제 발생시 다시 open으로 돌아감 Assign 담당자 지정 버전관리(개발을 할때 매..

사이드 이펙트란 웹브라우저에 메모리를 할당하는 것을 말함 컴포넌트 함수에서 외부의 상태를 바꾸는 것임 React에서는 사이드에펙트를 다루는 경우에 주로 useEffect를 사용함 useEffect(()=>{ if(!value) return; const nextPreview = URL.createObjectURL(value) setPreview(nextPreview) }, [value]) URL.creacteObjectURL을 사용하면 파일의 값을 문자열로 받을 수 있음 사이드 이펙트 정리하기 useEffect(()=>{ if(!value) return; const nextPreview = URL.createObjectURL(value) setPreview(nextPreview) return (()=> {..

제어 컴포넌트는 react에서 input의 value를 제어 했을 때 사용자의 value값도 함께 제어하는 것을 비제어 컴포넌트라고 함 위의 코드가 제어 컴포넌트임 react에서는 제어컴포넌트를 활용할 것을 권장하고 있음 실시간으로 유효성 검사가 필요한 경우에는 '제어 컴포넌트'를 사용하는 것이 좋고 불필요한 재랜더링을 줄이고 싶고 제출시에만 값이 필요할 때는 '비제어 컴포넌트'를 사용하는 것이 좋음 비제어 컴포넌트는 말그대로 react에서 사용자의 value 값을 제어하지 못하는 컴포넌트임 상황에 따라 '제어 컴포넌트'와 '비제어 컴포넌트'를 활용해야 함

export async function getFoods({ order = '', cursor = '', limit = 10 }) { const query = `order=${order}&cursor=${cursor}&limit=${limit}`; const response = await fetch(`https://learn.codeit.kr/api/foods?${query}`); const body = await response.json(); return body; } 우선 api.js에서 order,cursor 값을 문자열로 받고 limit을 10으로 설정해줌 (limit = 10은 한번에 10개씩 가져온다는 뜻) 그리고 쿼리값을 템플릿리터럴을 이용해 문자열을 만들어주고 fetch로 데이터를 가져올 주..