코드스테이츠 SEB FE 41기/Main-Project(MatP) (21) 썸네일형 리스트형 [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 맞나요 멘토님..? 데헷) 주신 피드백을 바탕으로 댓글 추가/수정/삭제 기능의 리팩.. [react] useAxios 커스텀 훅 사용기1(feat. typescript) 네트워크 통신이 많은 앱을 만들다보니 실시간 데이터 리로딩 로직의 필요성을 느끼게 되었고 더 이상 무수한 get 요청에 의존할 수 없다는 것을 깨달았다... 또한 네트워크 관련 코드들을 정리하여 관심사 분리를 진행해야겠다는 생각이 들었다. 코드가 너무 길고 지저분해지면 클린한 코드가 아니라는 생각이 들었기 때문이다. 작은 프로젝트지만 그래도 최대한 클린코드를 향해 나아가는(?) 마음가짐을 가지고 싶었다 :) 해당 문제를 어떻게 해결할지 팀원 분과 고민을 많이 하다가 멘토님께 조언을 얻기로 하고 질문 목록을 정리하여 미팅에 참석하였다! 멘토님께서 추천해주신 방법은 커스텀 훅을 만들어 네트워크 통신 후 response를 받아오도록 만들고, 네트워크 통신과 관련된 코드는 도메인 별로 나누어 파일로 정리하는 것.. 이전 1 2 3 다음
