코딩

[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. 이렇게 함수를..

프론트엔드 부트캠프 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가 맞으면 댓글 달 수 있게 할거고, 아니면 댓글을 못 달게 할 것이다. 댓글을 못 달게 하는 방법은 여러가지가 있을 것 같다. ..

프론트엔트 부트캠프 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이 할당할 수 없습니다!!!..

프론트엔드 부트캠프 67일차, 팀 프로젝트(13) unselected 색 변경, radio button의 defaultValue

라이브러리랑 다퉈야할(?) 상황에 한숨... 문제라고 생각하고 있긴 했는데, 고칠 방법이 없어서 그냥 냅뒀는데 기획단에서 수정하라고 말씀해주셔서... 시도해봐야지.,,, 그 문제는 바로 ..이번에도 댓글창에 있다. 댓글창에 문제가 많네 ㅎㅎ 1. unselected 색 변경하기 (antd Rate color 변경하기) 일단 표정이 다 같은 것도 ㅠㅠ약간 문제가 있고... (fetch할 땐 색을 다르게 해서 가져와서 괜찮..을걸?) 맨 오른쪽이 배경과 거의 물아일체 수준. 5번째는 약간 매직아이해야 보일 것 같은 회색이다. 이걸 ....이걸 바꿀 수 있을까? antd가.. 그렇게 친절할까? 일단 color로 노란색->보라색으로 바꾼건데, 회색을 지정하고 있는 속성은 뭘까?? https://github.co..

프론트엔드 부트캠프 65일차, 팀 프로젝트(11) 밖에서 공부, 라디오버튼 라이브러리

와서 비타민 타서 (내가 반강제한)건배 하고 어제 올린 깃 적용이 안되어있어서 하나하나 복붙했다. 저기 수정 아이콘이랑 삭제 아이콘 간격 줘야하고 크기 똑같이 맞춰야 한다. 그리고 탈출, 난이도, 평가 있는 거 조금 위로 올리고... 또 그냥 탈출/난이도가 너무 큰 것 같기도 const onClickOpenDeleteModal = () => { Swal.fire({ title: "삭제하시겠습니까?", showCancelButton: true, confirmButtonColor: "#843dca", cancelButtonColor: "#ff6262", confirmButtonText: "네!", cancelButtonText: "고민 좀 하고요.", }).then((result) => { if (resul..

프론트엔드 부트캠프 64일차, 팀 프로젝트(10) 댓글달기

손목이 찌릿하고 아파서 무서워서 손목받침대를 바로 시켰다.,,, 코드 작성해둔게 너무 보기 힘들어서 스킨을 바꿨다. css를 뒤져봤지만 코드 지정된 부분을 못 찾겠었던 기억이 있어서! 그냥 아예 새로 바꿈... (적응안돼~) 기존에 작성해둔 함수가 있긴한데, 이번엔 새로운 걸 배워보기 위해 moment.js를 깔아볼거다!! 날짜 포맷 라이브러리 - moment yarn add moment npm은 npm install moment 쓸 부분에서 {moment()} 라고 쓰니까 글씨색 왜이래 자동으로 import moment from "moment"; import 됐다! moment.js는 오버로드된 getters와 setters를 이용한다고 한다. moment().seconds(30).valueOf() =..

프론트엔드 부트캠프 63일차, 팀 프로젝트(9) 배너에 네비게이션 이름 띄우기

클라우디너리 가입하기 여기서 라이언을 메모해놓는다. 상단바 오른쪽에 아이디가 적혀있는데 이것도 메모 해놓는다. vscode에서 const [createThemegql] = useMutation(CREATE_THEME); const router = useRouter(); const [imgurl, setImgurl] = useState(""); const { register, handleSubmit } = useForm(); const [value, setValue] = useState(0); const onSubmitCreateTheme = async (data) => { try { const result = await createThemegql({ variables: { cafeName: data.ca..

프론트엔드 부트캠프 62일차, 팀 프로젝트(8) - api요청해보기! Next 네비게이션 활성/비활성 표시

지금 문제점 : 모바일에서 보면 main으로 넘어갈 수 있는 방법이 없다... 지금 현재 넘어갈 수 있는 방법은 Enter나 esc누르는 것 밖에 없기 때문이다ㅠㅠ 그리고 모바일에서 hover event... 카드 뒤집기 되는지도 확인해봐야 한다. useEffect(() => { const handleKey = (event: KeyboardEvent) => { if (event.key === "Escape" || event.key === "Enter") { window.removeEventListener("keydown", handleKey); router.push("/home"); } }; const clickKey = (event: MouseEvent) => { console.log(event); }..