프론트엔드✏️/팀 프로젝트✨

230504 로그인 후 보던 페이지로 이동시키고 싶어

🚨 문제 발생! const handleOk = () => { setModalState({ text: "", openModal: false, }); localStorage.setItem("prevPage", router.asPath); router.push("/signin"); }; useEffect(() => { if (!accessToken) { console.log("hi"); setModalState({ text: "로그인이 필요합니다.", openModal: true, icontype: "warning", ok: "확인", onClickOk: handleOk, }); } }, [accessToken]);useAuth() const handleLoginButton = async () => { eve..

0427 오늘의 에러

name : AxiosError 리액트 특정 컴포넌트에만 css 변경사항이 적용 안 되는 문제 검색 키워드 : react component style not applying, react component style not updating, 리액트 캐시 초기화 다른데는 적용이 잘 되는데 answer에만 되지 않았다. 그러고보니 answer만 파일 이름이 소문자... 그래서 Answer.tsx로 바꿔봤는데 그때부터 변경사항이 실시간 반영된다ㅎㅎ 이게 문제였던건지 아니면 그냥 파일이름을 바꿔줌으로써 뭔가 초기화가 된건진 모르겠다. 컴포넌트 이름이 대문자로 시작해야 한다는 건 알고 있는데, 파일 이름도 그런가? 원래 answer 부분도 밑줄 쳐져있었는데 그게 문제였던걸까 -아직 해결 못 함 문제 상황export..

팀 프로젝트 room:in us 회고

방탈출 카페를 영화처럼 쉽게 예약하고 즐길 순 없을까? 방탈출 카페 통합 예약 플랫폼 - 룸인어스 배포 주소 : https://roominus.site/ 프론트엔드 깃허브 백엔드 깃허브 발표 영상 발표 자료 제작(서브), 발표 Landing, Theme Page 반응형 디자인, 전체적인 디자인 터치업 ⏰ 작업 기간 2022년 6월 28일 ~ 2022 8월 3일 ( 팀원 발표 ~ 팀프로젝트 기간 ~ 발표날 까지 ) 😎 팀원 프론트엔드 4명 : 손은채, 김지수, 신하니, 이영주 백엔드 2명 : 오세웅, 정민준 기획자, 디자이너 🗡 기술스택 1등 사실 2등 정도(?)라고 생각했는데 1등이었다! 일곱팀 중에 1등이라 좀 의미가 있는 것 같다. 팀 프로젝트 1위를 하면 패스트파이브 출입증을 3개월간 이용할 수 있..

[roominus] 팀 프로젝트 4주차 - 주차별 회고(4)

// ThemeDetailPage 전체 코드 import { gql, useQuery } from "@apollo/client"; import { useRouter } from "next/router"; import { useEffect, useState } from "react"; import { useRecoilState } from "recoil"; import { userInfoState } from "../../../src/commons/store"; import ThemeCommentList from "../../../src/components/units/theme/comment/list/ThemeCommentList.container"; import ThemeCommentWrite from ..

프론트엔드에서 검색을 해보자~~~!!!

백엔드에서 search: 인수 받는 게 없을 때 프론트엔드에서만 검색을 해보는 법 !~~~~~~~!!!!!!!!!! ELK하면 비싸대욤 const [searchedData, setSearchedData] = useState([]); const onChangeSearchInput = (event) => { console.log(event.target.value); const filtered = props.themesAll.fetchThemesAll.filter((themeList) => { return themeList.title.includes(event.target.value); }); setSearchedData(filtered); }; (쓰로틀링이나 디바운싱이 필요할 것 같다.) 1. 이렇게 함수를..

JavaScript heap out of memory - 힙 메모리 누수 확인, 디버깅

Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory node -e 'console.log(v8.getHeapStatistics().heap_size_limit/(1024*1024))' // 힙 사이즈 확인 export NODE_OPTIONS=--max_old_space_size=800 // 힙 사이즈 늘리기 AWS 배포 중 터진 오류! 위처럼 힙 사이즈를 확인해보고 한 단계 올려주니 저 문제는 해결! 근데 그 다음엔 'SIGKILL' 이게 정확히 heap 문젠지 다른 메모리 문젠지 긴가민가 해서 일단 누수날 것 같은 부분을 다 잡아보기로 했다. AdminCafeDetail.container에서..

프론트엔드 부트캠프 78일차, 팀 프로젝트(20) 글은 일인당 하나로 제한합니다.

오늘은 1인 1개 넘으면 못 쓰게 할거야 어제하던 코드는 그냥 container에서 주는 것으로 바꿨다. 더 위로 타고 올라가기엔 쿼리를 추가로 날려야하기 때문에 추가로 안날려도 되고 딱 &&하나만 써도 되는 지점에서 isReviewer를 써도 될 것 같다고 생각했다! useEffect(() => { data?.fetchReservationsUser.filter( (ele: IFetchReservationData) => ele.theme_menu.theme?.id === router.query.id ).length >= 1 ? setIsReviewer(true) : setIsReviewer(false); }, []); return ( isReviewer && ); } 이렇게 했더니 생긴 문제!!! 리렌더..

프론트엔드 부트캠프 77일차, 팀 프로젝트(19) 예약한 자에게만 댓글을 허용하노라

내가 예약한 테마가 아니면 테마 후기를 달 수 없게 하자! const [isReviewer, setIsReviewer] = useState(false); useEffect(() => { data?.fetchReservationsUser.filter( (ele: IFetchReservationData) => ele.theme_menu.theme?.id === router.query.id ).length >= 1 ? setIsReviewer(true) : setIsReviewer(false); }, []); isReviewer 라는 state 변수를 하나 선언했다. reviewer가 맞으면 댓글 달 수 있게 할거고, 아니면 댓글을 못 달게 할 것이다. 댓글을 못 달게 하는 방법은 여러가지가 있을 것 같다. ..

[roominus] 팀 프로젝트 3주차 - 주차별 회고(3)

export const StarScore = styled(Rate)` .ant-rate-star-second { color: #c6c8de; } `; 3주째 회고를 쓰는 게 많이 늦었다. 저번주 금요일부터 주말까지 나름 많은 일이... 있어서... 이건 일기로도 정리했지만 블로그에도 남겨놓고 싶어서 추후에 글을 쓰겠다. 일단 금요일날 반에서 확진자가 몇 명 나와서 급하게 모두들 집으로 갔다. 내일 촬영할 예정이었어서 조명이랑 다 갖다놓고 삼각대도 갖고 왔었는데 다 두고 온 것 같다.(아니 그래야만 한다..집에 없거든) 누군가 마지막일 수도 있다 그래서 뭔가 좀 슬퍼졌었다. 그래도 설마 마지막이겠어?!하고 검사 받고 후다닥 집에 왔다. 집에 지병을 앓고 계신 분이 계시고, 엄마도 몸이 완전 건강하신 편은 ..

프론트엔트 부트캠프 72일차, 팀 프로젝트(18) 좋아요 디바운스, 포토하임, 조명, 자전거

어제는 블로그를 쓰지 않았다! 사실 한 것도 별로 없고 일찍 퇴근했기 때문이다,,, Room -> room 변경! const getDebounce = _.debounce(async () => { const result = await createLikeTheme({ variables: { themeId: router.query.id }, }); setLove(result.data?.createLikeTheme); }, 500); const onClickLove = async () => { getDebounce(); }; 좋아요 0.5초에 한 번만 눌리게 하기! 디바운싱~ useEffect(() => { data?.fetchTheme.likeUsers.filter( (el: IFetchThemeData) =..

프론트엔드 부트캠프 70일차, 팀 프로젝트(16) 타입, 속성주기, 랜딩, 이력서

1. Function -> 어제 말했던 문제가 터졌다! 왜 어젠 못봤지? 내가 Function이라고 지정해놨는데.... 그래서 다시 SubmitHandler로 타입을 변경했다. 2. antd Rate onChange 거는건 const onChangeStar = (value: number) => { props.setValue("star", Number(value)); props.trigger("star"); }; 이렇게 value: number ... 로 줘야 한다. 3. property에 없대 이건 쓰라는 함수 그대로 가져다 쓴건데 어째서,, 함수 형식이 저렇게 되려면 어떻게 해야하는건지...? const [rank, setRank] = useState(); const onChange: FormEvent..

프론트엔드 부트캠프 69일차, 팀 프로젝트(15) 타입스크립트~!, 더보기, 활성버튼 표시, 카테고리 검색

1. useForm- TypeScript 어제 계~속 헤맸는데 오늘 용님한테 물어보고 바로 답을 얻었습니다. 근데 어디서 찾는거죠 이런거ㅠㅠ ! 물어보고 쓰는 글 type에 아무거나 적어서 마우스대보면 FormState 형식은... 이라고 친절하게 알려준다! 근데 난 이게 안됐었는데, 어제 썼던 글에 있듯이 useForm이런식으로 가져와서였다. const { register, handleSubmit, formState, setValue, trigger, reset } = useForm({ mode: "onChange", }); 그래서 useForm뒤에 아무것도 안붙여줬다! handleSubmit에 타입을 주면 그게 감싸고 있는 onClickUpdate랑 onClickSubmit이 할당할 수 없습니다!!!..