seopport.log

여러번의 useEffect 사용으로 다양한 로직 처리하기 1. 문제 상황 초기 state 값을 설정하기 위해 useEffect에서 비동기 함수를 사용하여 데이터를 가져와서 setCurrentReservedCount로 state를 set해야 하는 상황 단순하게 기존에 사용하던 useEffect에 로직을 추가하였더니, 기존 의존성 배열에 있던 인자들에 인해 선택한 날짜나 시간이 변경될 때마다 state가 초기 값으로 재설정되는 문제가 발생했다. useEffect(() => { setReserveInfo({ reserveDate: selectedDate, reserveTime: selectedTime }); const setInitialReservedCount = async () => { const initi..

카테고리 옵션을 클릭, 언클릭할 수 있는 메뉴의 중첩 필터링 코드이다. 카테고리 클릭시 필터조건이 추가되고, 카테고리 언클릭시는 true로 모든 아이템이 통과된다. return에서 두 조건이 모두 true인 아이템들만 필터된다. const filterByCategoryRecipes = filteredRecipes.filter((item) => { // 카테고리를 선택했으면 필터조건추가, 아니면 true로 필터링 조건 무시(모든 아이템이 통과) const filterByFood = selectedFood ? item.RCP_TYPE === selectedFood : true; const filterByCalories = selectedCalorieNumberLevel ? item.INFO_CAR

문제 상황 원했던 것 : task 컨테이너를 클릭했을 때 상세 페이지로 이동함. 버튼을 클릭했을 때는 navigate 되지 않음. 컨테이너 요소에 navigate를 걸어놓았을 때, 그 안의 버튼을 클릭하면 기능을 수행함과 동시에 페이지가 네비게이트 되어 원하는대로 실행되지 않는 문제. 이는 이벤트 버블링 때문에 발생하는 흔한 문제다. TaskBox 내 버튼(StProgressButton) 클릭이 상위 컴포넌트 이벤트(handleDetailNavigate)를 트리거해 원치 않는 페이지 네비게이션을 발생시키는 것이었다. 해결 방안 이 문제를 해결하기 위해 이벤트 버블링을 방지하는 로직을 구현해야 한다. 버튼의 클릭 이벤트 핸들러 내에서 event.stopPropagation() 메서드를 호출함으로써, 해당 ..

1. navigate로 페이지를 이동할 때 ?키이름={값} 쿼리스트링을 추가한다. navigate(`/detail?id=${item.id}`) 2. 이동한 페이지(컴포넌트)에서 searchParams Import const [searchParams, setSearchParams] = useSearchParams(); 3. get 메서드의 값으로 1번에서 지정했던 키이름을 넣는다. const targetId = searchParams.get('id'); 값을 읽어오는 메서드: searchParams.get(key): 지정된 key에 해당하는 값을 가져온다. 해당 key에 여러 개의 값이 있더라도 첫 번째 값을 반환한다. searchParams.getAll(key): 지정된 key에 해당하는 모든 값을 가져..

배포테스트를 위해 dev에서 main으로 PR을 날려 머지하려고 했는데, there isn’t anything to compare.amain and dev are entirely different commit histories. 서로 커밋 히스토리가 다르다면서 PR이 생성되지 않았다. 깃 그래프를 살펴보니 master 브랜치에서 각 기능 브랜치가 분기되고 있었고, origin/main과는 연결이 끊겨 있었다. 그 이유는 create-react-app을 하면 기본 브랜치로 'master'가 지정되어있기 때문이다. cra를 하고 main원격 브랜치를 가져와서 commit, push하지 않고 내 로컬의 master 브랜치에서 작업을 시작했기 때문에 history 연결이 안된 것이다. 그래서 리액트 프로젝트를 ..

reducers: { setReview: (state, action) => { //페이로드: 리뷰 데이터 전체 return { ...state, reviews: action.payload }; }, addReview: (state, action) => { //페이로드: 리뷰 데이터 객체 하나 return { ...state, reviews: [...state.reviews, action.payload] }; }, modifyReview: (state, action) => { //페이로드: 리뷰아이디, 수정된 리뷰 내용, 평점 const targetReviewId = action.payload.reviewId; const modifiedContent = action.payload.modifiedConten..

댓글마다 개별 모달 렌더링하기 이번에 댓글 기능을 구현하면서 댓글에 있는 점 옵션 메뉴를 클릭하면 수정,삭제 모달이 뜨도록 구현했는데, 문제는 옵션 버튼을 클릭하면 전체 댓글의 모달이 뜨는 문제가 생겼다. 이때까지 로그인 모달 등 모달이 하나만 뜨면 되는 것을 구현했었는데, 이번에는 어떻게 클릭한 리뷰를 특정해서 모달을 열리게 할까 고민해보았다. 원래코드는 점 버튼을 클릭했을 때 isOptionMenuOpen을 true로, 리뷰 전체 컨테이너를 클릭하면 false로 프롭스를 이용해서 렌더링을 관리했었다. export const StOptionsMenuModal = styled.ul` z-index: 999; width: 65px; height: 65px; font-size: 12px; display: $..

마이페이지에서 프로필 수정 구현하기 1. 수정사항 확인하기 const handleModifyCompleteButtonClick = async () => { // 닉네임과 프로필 이미지 모두 원본데이터와 같으면 수정X if (userInfo.nickname === modifiedNickname && userInfo.avatar === imageSrc) { alert('수정사항이 없습니다.'); return; } 우선 수정 사항이 없으면 수정이 완료되지 않게 return으로 실행을 끝내준다. 닉네임과 프로필사진 하나라도 변경값이 있으면 수정이 진행된다. 2. 수정 할 사용자 정보 작성하기 const updateUserInfo = {avatar: imageSrc, nickname: modifiedNicknam..

우선 라우터에서 로그인 안해도 볼 수 있는 페이지, 로그인 해야만 볼 수 있는 페이지로 중첩 라우팅을 구성한다. + Outlet 이해하기 부모 라우트 컴포넌트 안에 그 레이아웃 스타일을 상속할 자식 라우트 컴포넌트를 작성한다. 그런 다음 그 자식 라우트들을 렌더링할 곳에 Outlet으로 받으면 된다. 따라서 AuthLayout에서 Outlet으로 받으면 Home, MyPage, LetterDetailPage가 렌더링 되고 NonAuthLayout에서 Outlet으로 받으면 Loginpage가 렌더링 된다. 그런 다음 AuthLayout에서는 로그인 상태를 검사하여 만약 로그인상태가 아닐 경우 login페이지로 네비게이트하고 return으로 실행을 끝낸다. 로그인이 되지 않았을 때 페이지의 내용을 보여주지..

정규식 인풋에 영어와 숫자만 입력되게 하기 A-Za-z : 영어 입력되게 0-9 : 숫자 입력되게 -> 타겟의 value를 replace로 정규식의 조건에 맞춰서 치환해버림 const handleUserIdChange = (e) => { e.target.value = e.target.value.replace(/[^A-Za-z0-9]/ig, ''); setUserId(e.target.value); } 미들웨어 3초 후 에 디스패치해줘 -> 3초 기다리는 걸 미들웨어 없이는 구현하지 못함 이걸 할 수 있게 해주는게 미들웨어 Redux Thunk = dispatch에 객체가 아닌 함수를 dispatch할 수 있게 해준다. 중간에 우리가 하고자 하는 작업을 함수에 넣고그것이 중간에 실행 되는 것 액션이 리듀서로..