코드스테이츠 SEB FE 41기 (123) 썸네일형 리스트형 [react & typescript] MUI Popover 사용기(Delete confirm 기능) 삭제 버튼을 누르면 바로 DELETE 요청이 처리되며 post 또는 comment가 삭제되는 과정에서, 유저가 실수로 삭제 버튼을 눌러 원치않는 삭제를 하게 될 경우가 발생할 가능성이 있겠다는 생각이 들었다. 그래서 버튼 클릭시 유저가 삭제를 원하는지 재확인하여 처리하는 기능을 추가하기로 결심했다. 구글링을 해보니 Delete confirm 기능을 구현하는 데에는 tooltip, window confirm 등 여러 가지 방법이 있었는데, 나는 그 중 MUI의 Popover 라이브러리를 사용하여 구현하게 되었다. https://mui.com/material-ui/api/popover/ Popover API - Material UI API reference docs for the React Popover c.. [react] 간단히 star rating chart 구현하기(feat. typeScript) 리액트로 간단히 별점 종합 차트를 만들어보자. 마치 배민처럼! 먼저 컴포넌트 구성을 해준다. Excellent {starCount[4]} Good {starCount[3]} Average {starCount[2]} Poor {starCount[1]} Terrible {starCount[0]} CSS는 styled-component를 이용하여 작성해준다. const RatingsChart = styled.div` .card { padding: 30px 30px 20px 30px; } .rating-label { font-weight: bold; font-size: 15px; } .rating-box { width: 130px; height: 130px; margin-right: auto; margin-le.. [react] star-rating 구현하기 2탄(이번엔 소수점까지!) 이에 구현할 별점 컴포넌트는 소수점까지 정교하게 표시되도록 하여 유저가 더욱 빠르고 정확하게 해당 음식점에 대한 후기를 접할 수 있도록 해보자. 구현 방법을 정리해보자. 베이스가 될 별 모양을 배치(star_rating_base)한다. 평점을 표시할 별모양을 똑같이 만든 후(star_rating_fill) display: absolute로 베이스 별을 덮어쓴다. 별점이 보여지기를 원하는 만큼 width를 지정하면 된다. 먼저 컴포넌트 구성을 해준다. ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ css는 styled-component를 사용하여 작성해준다. .star_rating { color: #989898; position: relative; unicode-bidi: bidi-override; width: ma.. [react & typeScript]'개체가 null인 것 같습니다' 에러 해결하기 프로필 이미지 변경 기능을 만들던 중 이미지 업로드 핸들러 내 event 객체에 'e.target.files는 null일 수도 있습니다'라는 오류 메세지가 떴다. // image uploader const onChangeImage = async (e: React.ChangeEvent) => { const formData = new FormData(); formData.append("multipartFiles", e.target.files[0]); const response = await axios.post("서버 배포 url/endpoint", formData, { headers: { "Content-Type": "multipart/form-data", }, }); // response 형태에 맞추어 변.. [react & typescript] useRef 사용시 "개체가 null(undefined)인 것 같습니다" 에러 해결하기 프로필 이미지 변경 관련 로직을 구현하던 중 만난 에러였다. // 프로필 이미지 수정을 위한 ref const fileInput = useRef(null); 프로필 이미지 변경 기능 구현을 위해 useRef를 사용하여 파일 업로드를 위한 태그를 가리키거나, 프로필 이미지 클릭 시 프로필 이미지를 가리킬 수 있도록 만들고 있던 찰나 // 프로필 이미지 클릭시 파일 업로더 뜸 const onClickImg = () => { fileInput.current.click(); }; 위의 코드에서 '개체가 null인 것 같다는 에러가 뜨고 말았다ㅠㅠ 타입스크립트 너 진짜 깐깐하다!!! 구글링을 해보니, useRef를 선언할 때, 초기값으로 null을 준 것이 원인이였다. useRef는 초기값을 current에 저장.. [react] navigate 시 props 전달하기 // '수정' 버튼 클릭 시 PostUpdateModal로 이동 const navigate = useNavigate(); const handleEdit = () => { navigate(`/edit/${id}`, { state: responseData }); }; // navigate로 컴포넌트 이동 후 받아온 props const { state } = useLocation(); [react] 구조 분해 할당 이름 변경하기(feat.typeScript) 구조 분해 할당으로 변수를 받아 올 때, 이름을 변경할 수 있다는 사실! const { axiosData: updateC } = useAxios( () => updateComment( "rhino", "https://user-images.githubusercontent.com/94962427/211698399-0cf1ffff-89d3-4595-8abb-5bcb23843a5d.jpeg", editedComment, createdAt, newSingleComment.id ), [editedComment, createdAt], true ); const { axiosData: deleteC } = useAxios( () => deleteComment(newSingleComment.id), [deleteClick.. [react] props를 state로 설정하여 state 변경 실시간 업데이트해주기(feat. Typescript) 메인 프로젝트를 진행하며 가장 궁금했던 부분.. 바로 state 변경 시 화면에 실시간으로 업데이트를 시켜주는 것이다. 댓글이 수정 되었을 때 그것이 실시간으로 반영이 되도록 만들고 싶은데, 이를 위해 매번 state 변경 이후 GET 요청을 보내주어 변경사항을 반영해주어야하는지에 대한 고민을 많이 하였다. 결국 멘토님께 질문을 했고 멘토님께서 해주신 말씀은 이렇다. 자식 컴포넌트의 상태는 자식 컴포넌트에서 관리해야한다. 자식 컴포넌트가 바뀌었다고 그걸 부모 컴포넌트에서 다시 뿌려주는 과정을 거쳐야할까? 부모 컴포넌트는 뿌려주기만 할 뿐, 자식의 상태는 자식이 지지고 볶아야 한다. (적어도 내가 이해한 바로는 이렇다^^7 맞나요 멘토님..? 데헷) 주신 피드백을 바탕으로 댓글 추가/수정/삭제 기능의 리팩.. 이전 1 2 3 4 5 ··· 16 다음
