본문 바로가기
반응형

전체 글

 (501)
[react & typescript]리코일 찍먹(?) 사용기 - 로그인한 유저 정보 저장하여 전역 상태로 관리하기(feat. recoil) 상태관리 라이브러리를 프로젝트에서 사용해본 것은 이번이 처음이였다. 이전에 redux는 잠깐 배워봤었으나 사용법이 간단하지만은 않아(?) 상태관리와는 친하지않은 상태였다. 그래서 이번 프로젝트에서도 가끔씩 props 드릴링을 하며,,, 상태관리와는 데면데면한 사이를 유지하고 있었다. 하지만 상태관리를 써야만하는 상황이 왔으니, 그것은 바로 Post & Comment를 작성자만 수정/삭제가 가능하도록 만들어야하는 것이였다! 우리 프로젝트에서는 구글 및 카카오 로그인을 사용하였다. const [searchParams] = useSearchParams();: useSearchParams는 리액트의 훅으로, 현재 URL의 쿼리 파라미터 정보를 가져올 수 있게 해준다. 이 코드에서 searchParams는 URL..
[회고] Main project '맛P' 회고 소개 맛집에 대한 경험 기록 및 공유를 통해 차원이 다른 맛집 순례 라이프를 즐길 수 있도록 도와주는 나만의 맛집 지도 & 일기 맛피플들의 다양한 후기가 담긴 맛포스트를 통해 증명된 맛집 후기를 얻어 더욱 퀄리티 높은 맛집 탐방 즐기기 방문하고 싶거나 재방문하고 싶은 맛집을 골라 맛픽커 그룹에 저장하여 맛집 지도 만들기 맛집을 방문한 후 해당 맛집에 대한 나의 경험과 후기가 담긴 맛포스트를 작성하여 추억이 담긴 맛집 일기장 만들기 기간: 1월 4일 ~ 2월 1일 (약 28일) 깃허브: http://bit.ly/3YWi3ZI 배포 링크: http://bit.ly/3YBZTg7 기술 스택 Typescript, React, Axios, Mui, Styled-Components, Eslint 담당 기능 맛포스트..
[react] 프로필 이미지 변경하기(feat. typescript) 유저의 프로필 이미지 변경하는 기능은 추후에 참고할 일이 생길 것 같아 기록해본다. 프로필 이미지를 변경해주는 로직은 텍스트 에디터에서 이미지를 핸들링해주었던 방법과 비슷하다. 엔드포인트도 같았다. 간단히 진행 방식을 기록해보자. 1. 파일 업로드를 위한 input 태그를 만들어준다. // 프로필 이미지 수정을 위한 ref const fileInput = useRef(null); 2. 이미지 클릭시 ref가 input 태그를 가리킨 후 파일 업로더가 뜨도록 한다. // 프로필 이미지 클릭시 파일 업로더 뜸 const onClickImg = () => { if (fileInput.current) { fileInput.current.click(); } }; // image uploader const onCh..
[react & typescript] useAxios 커스텀 훅 사용기2 - 데이터 실시간 업데이트해보기 지난번에 useAxios 커스텀 훅을 만들어 네트워크 통신 후 response를 받아오도록 만들고, 네트워크 통신과 관련된 코드는 도메인 별로 나누어 API 문서화를 진행하였다. 이제는 이 useAxios 커스텀 훅과 네트워크 통신 코드를 사용하여 데이터가 바뀌었을 때, 바뀐 데이터를 컴포넌트에 실시간으로 적용을 시켜주어야하는 과정이 필요하다. 이 방식을 알아내기 위해 관련된 블로그를 몇날 몇일을 붙잡고 기본적인 로직의 처리 과정에 대해 이해하려고 노력했다. 노력끝에 정답을 발견하였을 때 정말 유레카를 외칠 뻔했다~ 설날이였는데 설 연휴 내내 이 문제를 해결하기 위해 노트북만 붙들고 있었던 것 같다. 해결방법 발견 후에 글로 정리하여 디스코드에 올려 프로젝트 팀원분들께 공유드렸다. 팀원분들도 결과적으로 ..
[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 형태에 맞추어 변..
반응형

티스토리툴바