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

팀 프로젝트 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이 할당할 수 없습니다!!!..

프론트엔드 부트캠프 68일차, 팀 프로젝트 2주일째 주말

뒤에 배경 동그라미를 넣을까? 하다가 굳이?싶어서 안 넣었다. 편안. 어차피 쓸모없는 이미지 대신에 이걸 넣자는 맥내님의 아이디어,,!!대박... 천재????? 넣는 건 쉬워서 참 좋다... 지금 댓글 작성하는 부분에서 표정을 좀 다른 걸 넣으려고 포토샵도 하고 폰트어썸에서 불러도 와보고 이것저것 하고 있는데.. 이렇게 폰트어썸꺼는 혼자 튄다. 왜.. 왜이러는지. margin, padding 다 0이고 overflow, width, height도 건들여봤으나 소용이 없었다. 그리고 너무 뚜때~(?)하게 생겨서 별로 넣고 싶지 않다... antd꺼에서 조금만 수정해서 넣고 싶은데 어떻게 안되겠니,,, antd는 당장 아이콘을 하나 더 만들라ㅠ 아이콘 타고타고 들어가면 뭐가 나올까 싶어 해봤는데 내 수준에선..

한 번 배포를 해보자

갑자기 말투가 바뀌는 이상한 구간이 있습니다,,, 1. (VSCode) build와 export하기 package.json "scripts": { "dev": "next dev", "build:ssg": "next build & next export", // 이거 추가 "build": "next build", "start": "next start", "lint": "next lint", "generate": "graphql-codegen" }, next.config.js const nextConfig = { reactStrictMode: true, trailingSlash: true, // 이거 추가 }; module.exports = { typescript: { ignoreBuildErrors: tru..