[Main_day11]2022.11.22 회고_배포오류, 충돌의 늪, 인증페이지 레이아웃 구현완료, 아이디찾기 기능 구현 시작

wool·2022년 12월 10일

회고

목록 보기

17/29

Intro

기상 시간	오전 7시 30분
전날 취침 시간	새벽 2시
컨디션	그럭저럭

1122 회고 이슈

잘해오고 있는 부분

<개인>

인증페이지 레이아웃 빠르게 구현 한 것
회고작성 https://www.notion.so/Mainday11-2022-11-22--2107a2bdce704a029aeeba7f5f532b25

<함께 진행 한 것>

페이지 마무리 될 때 마다 배포 진행하는 부분
오류를 함께 해결 하는 것

아쉬운 부분

git에 대한 공부가 부족했던 것

개선할 점

git…책이라도 읽자
브랜치 꼬이지 않게 조심하자

Today log

배포 업데이트 후 오류

배포 후에 각 기기마다 다르게 보이는 오류가 있었다.
이 문제에 대해서 오류를 상세하게 기록 했고 멘토님께 여쭤보았다.
오류기록

접근하는 pc에 따라 보이는 화면이 다른 오류

오류메세지는 각 pc마다 같았다.
- 여울pc
- 성훈님 은비님 pc 전체 외곽은 잘 나옴 사용설명 보러가기 링크 안됨 글씨 애니메이션 적용안됨 하단 스크롤 문구 인덱스값 조정한 부분 적용 안됨 우측 스크롤 표시 보이지 않음
- 시간 지나니까 다 정상적으로 보인다! 오류메세지도 사라졌다!
- 배포 화면을 보기까지 시간이 너무 오래 걸리는 오류가 있음 ⇒ 배포 할 당시 아시아 까지만 접근 할 수 있도록 설정해서 그런 것은 아닐까? 배포를 다시 전체로 설정해서 배포 다시 해보기로 한다. 모든 엣지 로케이션으로 설정 변경함! 가격 분류를 최고성능으로 설정함! 다른 설정은 변경하지 않았음
- 클라우드 프론트 배포 이슈
  - 최초 설정 cdn리전을 남미, 호주쪽을 제외하고 배포 했었는데 이 문제인가 싶어서 모든 나라를 허용하도록 다시 설정해서 재배포 했다!
  - 조금 나아지긴 했는데 아직 문제가 있긴 하다

vsCode자동 완성

팀원들과 코드를 맞추도록 ESlint 파일을 두었는데 저장 할 때마다 코드 정리가 되지 않았다.
아니 왜 안되지 싶어서 찾다가 자료 찾아서 자동 완성 되게끔 했다

https://flowx.tistory.com/40

인증페이지 레이아웃 구현 완료

팀원들이 함께 구현 할 인증 페이지의 레이아웃을 컴포넌트로 따로 빼 내었다.
팀원들이 레이아웃을 가져다 사용 할 때 헷갈리지 않도록 어떻게 사용해야할지 pr시 설명을 적고 코드 내에도 jsdocs를 활용하여 설명을 작성하였다

코드

import Image from "next/image";
import Link from "next/link";

/**
 * @author yeowool
 * @description 사용 예시 : CertifyPageLayout태그 안에서 코드 작성
 **/

const CertifyPageLayout = (props: { children: React.ReactNode }) => {
  return (
    <>
      <div className="flex flex-col justify-center md:justify-evenly lg:justify-center bg-bgGray items-center  h-screen">
        <Link href="/">
          <Image
            className="cursor-pointer"
            src="/images/logo export(orange).svg"
            width={200}
            height={50}
          />
        </Link>
        <div className="flex h-4/5 w-80 lg:mt-11 lg:mb-10 lg:h-[32rem] md:w-4/6 lg:w-3/5 drop-shadow-2xl">
          <div className="lg:w-1/2 hidden md:hidden lg:block h-full bg-gradient-to-t from-[#FE4C00] to-[#FF9264]">
            <div className="flex justify-center	 items-center lg:h-full">
              <div className="absolute top-0 bottom-0 left-0 right-0 w-1/2 h-full bg-white/60"></div>

              <img
                className="flex  lg:h-4/6 "
                src="/images/시계누끼.png"
                alt="시계 이미지"
              />
            </div>
          </div>
          <div className="w-full p-8 lg:w-1/2  h-full bg-bgWhite">
            {props.children}
          </div>
        </div>
      </div>
    </>
  );
};

export default CertifyPageLayout;