부트캠프

팀 프로젝트 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. 이렇게 함수를..

프론트엔드 부트캠프 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주째 회고를 쓰는 게 많이 늦었다. 저번주 금요일부터 주말까지 나름 많은 일이... 있어서... 이건 일기로도 정리했지만 블로그에도 남겨놓고 싶어서 추후에 글을 쓰겠다. 일단 금요일날 반에서 확진자가 몇 명 나와서 급하게 모두들 집으로 갔다. 내일 촬영할 예정이었어서 조명이랑 다 갖다놓고 삼각대도 갖고 왔었는데 다 두고 온 것 같다.(아니 그래야만 한다..집에 없거든) 누군가 마지막일 수도 있다 그래서 뭔가 좀 슬퍼졌었다. 그래도 설마 마지막이겠어?!하고 검사 받고 후다닥 집에 왔다. 집에 지병을 앓고 계신 분이 계시고, 엄마도 몸이 완전 건강하신 편은 ..

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

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

벌써 2주째! 발표는 2주도 안 남았다. 이번 일주일은 저번주보다 힘들었지만, 저번주보다 열심히 하지는 않았던 것 같다. 기능이 안 나온 걸 핑계로 일찍 나가버린 적도 있다...! 근데 이게 꽤 긍정적인 영향을 미쳐서, 그 다음날 굉장히 열심히 했다. 그래서 그냥 할 거 없거나 안되는 날엔 과감하게 쉴 수도 있어야겠다는 생각을 했다. 쉬는 것도 어려운 일이었다... 아파서 쉬어야할 때도 죄책감이 덕지덕지 붙어있었다. 혼자 공부하는 것도 아니고 팀 프로젝트니까, 그럴 수 있다고 생각한다. 하지만 전체적인 효율성으로 봤을 때...?! 좋지 않다... 쉴땐 그냥 쉬고 다음날 더 열심히 하면 되는 것 같다. 이번주는 프론트보다 백이 더 힘들었을 것 같은 한 주였다. 프론트는 퍼블리싱의 연장 + api 기능 나오..

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

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

프론트엔드 부트캠프 66일차, 팀 프로젝트(12) react-hook-form, 라디오 버튼 라이브러리

1. react hook form : submit 후 input 창 비우기 const { register, handleSubmit, formState, setValue, trigger, reset } = useForm({ mode: "onChange", }); useForm에서 reset을 추가로 가져온다! const onClickSubmit = async (data) => { try { const result = await createThemeReview({ variables: { createThemeReviewInput: { writerName: "신만두", ...data, }, themeId: router.query.id, }, refetchQueries: [ { query: FETCH_THEME_..

프론트엔드 부트캠프 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() =..