프론트엔드로 가는 길121 1주차 과제 - 게시물 삭제 (5) 5. 게시물 삭제 기능 구현 ✅ 게시물마다 삭제하기 버튼을 만들고, 삭제하기 버튼을 클릭하면 해당 게시물이 삭제되어야 한다. 1. 삭제버튼만들기 { deletePosting(); }} /> 2. posting state 가져오기 3. 배열 객체 삭제하기 4. 배열 setPosting에 넣기 const deletePosting = (id) => { let copy = [...props.posting]; copy.splice(id, 1); props.setPosting(copy); }; 2023. 1. 29. 1주차 과제 - 좋아요/즐겨찾기(4) 4. 좋아요, 즐겨찾기 기능 구현 ✅ 게시물에 좋아요❤, 즐겨찾기⭐ 버튼을 만든다. ✅ 좋아요 버튼을 클릭하면 숫자가 1 올라가야 한다. ✅ 즐겨찾기 버튼을 클릭하면 즐겨찾기 버튼이 강조되고, 강조된 버튼을 다시 클릭하면 강조가 취소되어야 한다. + 좋아요를 한 게시물의 제목을 따로 모아서 볼 수 있는 리스트를 만든다. + 즐겨찾기를 한 게시물의 제목을 따로 모아서 볼 수 있는 리스트를 만든다. ✅ 게시물에 좋아요❤, 즐겨찾기⭐ 버튼을 만든다. [좋아요] ✅ 좋아요 버튼을 클릭하면 숫자가 1 올라가야 한다. { goodBtn(index); }} /> {props.posting[index].good} 1. App -> posting state에 good을 추가한다. let [posting, setPosti.. 2023. 1. 29. 1주차 과제 - 게시물 작성(3) 3. 게시물 작성 기능 구현 제목과 내용을 입력하고 제출을 하게 되면 (글 번호, 제목, 내용, 날짜)를 담은 게시물이 생성된다. ✅ 최근에 작성한 게시물이 상단에 생성되어야 한다. 1. App.js에 게시물 data를 state에 저장 let [posting, setPosting] = useState([ { id: 0, title: "첫 게시물 제목", content: "내용" }, ]); 2. posting state를 App에서 Header로 전달 3. props.posting state를 Header에서 Modal로 전달 4. 내용을 입력한 데이터를 posting 전달 const addContent = () => { let copyData = [...props.posting]; copyData.u.. 2023. 1. 28. 1주차 과제 - 입력폼구현(2) 2. 입력폼 구현 모달창 안에 제목과 내용을 입력할 수 있는 입력 폼을 구현한다. ✅ "글쓰기" 버튼을 눌렀을 때 빈칸이 있다면 빈칸을 포커싱한다. 글쓰기 제출 내용 - 제목 { setInput(e.target.value); }} > - 내용 { setTextarea(e.target.value); }} > (1) 글쓰기 제목과 내용을 state 저장 let [input, setInput] = useState(""); // 제목 let [textarea, setTextarea] = useState(""); // 내용 (2) 제목과 내용이 빈칸일 때 const titleInputRef = useRef(); const textareaInputRef = useRef(); useRef로 특정 Dom 선택 { se.. 2023. 1. 28. 이전 1 ··· 17 18 19 20 21 22 23 ··· 31 다음
