AWS로 배포까지 했는데, 검색하면서 어떻게 해내기는 했는데 아직 잘 모르는 부분이 많아서 공부가 많이 필요할 것 같다. ECS를 사용해서 배포했고, Docker를 사용했기 때문에 ECR, 그리고 외부에서 접근할 수 있도록 EC2이미지 등 파일을 위한 S3, 도메인 관리를 위한 Route53, 배포된 console 확인을 위한 CloudWatchGithub Actions로 push만 하면 배포까지 되도록 설정했다. ECS https://dazz6study.tistory.com/99ECR https://dazz6study.tistory.com/100Github Actions https://dazz6study.tistory.com/101CloudWatch https://dazz6study.tistory.co..

연하장 작성에서는 초안을 등록하거나, 등록된 초안을 불러오거나, ChatGPT로 내용을 작성할 수 있다배경은 디자인 페이지 (https://dazz6study.tistory.com/111) 에서 설정한 이미지가 불러와진다 초안 목록에서 원하는 초안을 선택하면 작성 페이지 textarea 내용이 덮어씌워진다.const LoadDraft = () => { nav.push("../write", { id: receiverId, nickname: receiverNickname, selectDraftContent: selectDraftContent, }); }; onClick 이벤트로 LoadDraft 가 실행되는데, useHistory를 사용해서 id, nickname, s..

신청하면 receiver 테이블에 데이터가 생긴다.여기서 신청받은 데이터에 연하장을 작성하는 시점에 post 테이블에 데이터가 생성되는데,receiver에는 있지만 post에는 없는 신청의 경우 '작성 전'작성 중에 임시저장한 경우 '작성 중'작성 완료하고 저장한 경우 '작성 완료'1월 1일 기준으로 작성 완료인 연하장만 수신인이 확인할 수 있다. 모바일 웹이기 때문에 페이징 대신 무한스크롤을 구현해 보았고,여러 조건으로 조회되어야 하기에 QueryDSL을 사용했다. QueryDSL https://dazz6study.tistory.com/94react-query로 무한 스크롤 구현하기 https://dazz6study.tistory.com/98 @Override public Page findRece..

https://dazz6study.tistory.com/112 에서 복사한 고유 링크를 접근하게 되면,비회원인 상태로 신청하거나 로그인한 뒤에 신청할 수 있다. 고유 링크는 암호화되어 있기 때문에, useEffect로 먼저 서버에서 복호화 작업을 거치도록 했다.useEffect(() => { const validateUrl = async () => { try { const response = await axios.get(`/api/inquiry/validate/url`, { params: { link: link, }, headers: { Accept: "application/json", ..

연하장을 신청받기 위해 질문을 등록하는 화면이다.예를 들어 나이 질문을 추가해 두면, 신청하는 사람에게 나이 질문이 출력되고 답변을 등록할 수 있는 식.구현하면서 답변 방식도 지정하고 싶은 욕심이 있었는데 (날짜, 객관식 등...) 일단은 전부 주관식으로 간단하게 구현해 보았다 질문 추가하기 버튼을 눌러 새로운 질문을 등록하거나,삭제하고 싶은 질문의 삭제 버튼을 눌러 지울 수 있다.그때마다 데이터베이스, 서버에 접속하는 건 너무 비효율적이라는 판단이 들어서 // form이 submit 되었을 때 // 기존 데이터와 비교하여 수정 / 추가 / 삭제 구분 // 구분에 맞춰 처리함 const onSubmit = (formData: { questions: IQuestionItem[] }) => { ..

매년 디자인을 설정하는 부분!여기서는 배경, 썸네일, 글꼴, 글꼴 크기 및 색상까지 페이지를 넘나들며 설정해야 하므로 recoil을 사용했다.recoil 보러 가기 https://dazz6study.tistory.com/91 페이지 초기 접근시 해당 유저가 설정해 둔 정보를 불러와야 하므로 useQuery를 사용했다.useQuery 보러 가기 https://dazz6study.tistory.com/89const [design, setDesign] = useRecoilState(ADesignState);const { isLoading, data } = useQuery( ["designPost", userId], () => DesignPostLoad(userId), { enabled..

고마워써 프로젝트에서는 왼쪽 상단 햄버거 메뉴에서 여러 경로에 접근 가능하다.햄버거 메뉴는 react-burger-menu 라이브러리를 이용했다.import { slide as Menu } from "react-burger-menu";//...// jsx} customCrossIcon={} width={"250px"} isOpen={isMenuOpen} onStateChange={({ isOpen }) => setIsMenuOpen(isOpen)} styles={MenuStyles} > 회원정보 수정 나의 편지함 ..

새로 회원가입한 유저일 경우 전화번호를 등록해야 하기에 자동으로 회원정보 수정 경로로 이동한다.여기서 전화번호를 꼭 입력해야 하기 때문에 useForm을 사용한 required 를 넣어 주었다. const onInvalid = (errors: any) => { if (errors.tel) { toast.error(errors.tel.message); // 전화번호 오류 메시지를 toast로 출력 } };// ...// jsx  required의 오류 메시지는 toast 알림으로 출력되게 했다. toast 알림 보러 가기 https://dazz6study.tistory.com/97 React 06 - react-toastify 사용해 보기토스트 알림(간단한 팝업 알림)을 react-t..

고마워써 홈 화면은 사실 비로그인인 상태에서 접근할 일이 잘 없다.특정 사용자가 공유한 고유 링크를 통해 접근하고,그 경로에서 신청을 완료한 뒤 원하는 사용자만 추가적으로 로그인 / 회원가입을 하게끔 구현했기 때문이다.그래서 간단하게 카카오 로그인을 할 수 있는 버튼을 추가하고,session을 확인하여 userId 값이 존재할 경우 로그인한 상태로 간주하여연하장 설문을 생성하는 경로로 이동하는 버튼을 출력되게 했다.const userId = parseInt(sessionStorage.getItem("userId") || "0");// ...// jsx{userId ? ( nav.push(`/create-form`)}> 연하장 신청받기 ) : ( )}간단하게 삼항연산자를 사용한 출력을 사용..

고마워써 프로젝트의 데이터베이스 설계!이전 프로젝트에서 비효율적이라고 생각했던 점이 있었는데,(user_id 하나 가지고 오려고 테이블 타고타고 user 테이블에 접근해야 하다니 ㅜ게다가 페이지마다, 기능별로 자주 접근하는데?)그걸 보완하기 위해 정규화에 너무 집착하지 않고 굳이 컬럼을 추가해 주는 방식을 사용했다 추가적으로 연하장은 매년 새로 작성 / 관리되어야 하기 때문에year 컬럼을 적극적으로 사용했다!테이블 설명 user (사용자)id (고유번호)kakao_id (카카오 아이디)name (이름)tel (전화번호)is_sms_allowed (문자메시지 수신 동의) inquiry (설문)id (고유번호)user_id (사용자 고유번호)year (연도)nickname (닉네임) inquiry_item..