WIL 10

항해99 64일차	2022. 7. 11.(월)	실전프로젝트 (프론트2+백3+디자이너1 협업)	D반 - 실전프로젝트 8조(6명), 중간발표 발제(10시), 오전 팀 회의, 버튼 컴포넌트 생성 등 JS 스터디
항해99 65일차	2022. 7. 12.(화)	실전프로젝트 (프론트2+백3+디자이너1 협업)	D반 - 실전프로젝트 8조(6명),  이번주 1차 프+백 통합테스트(저녁 이후) JS 스터디
항해99 66일차	2022. 7. 13.(수)	실전프로젝트 (프론트2+백3+디자이너1 협업)	D반 - 실전프로젝트 8조(6명),  중간발표 자료 준비(FE) JS 스터디
항해99 67일차	2022. 7. 14.(목)	실전프로젝트 (프론트2+백3+디자이너1 협업)	D반 - 실전프로젝트 8조(6명),   JS 스터디
항해99 68일차	2022. 7. 15.(금)	실전프로젝트 (프론트2+백3+디자이너1 협업)	D반 - 실전프로젝트 8조(6명),   이번주 2차 프+백 통합테스트(아침부터 하루 종일)
항해99 69일차	2022. 7. 16.(토)	실전프로젝트 (프론트2+백3+디자이너1 협업)	D반 - 실전프로젝트 8조(6명),  MVP 중간발표
항해99 70일차	2022. 7. 17.(일)	Weekly I Learned 작성, 산책, 과제	D반 - 실전프로젝트 8조(6명),  웹소켓

 

MVP개발을 하는 3주 동안 어떤 기술들을 다뤄봤는지 정리해보세요.

 

1. 모달창 관련 (모달창 처음 구현했는데, 많이 필요했고, 아직 더 남았다..)

>기능

모달창 컴포넌트 만들어서,

props, css 등을 설정하고

const { open, close, children } = props;

 <div className={open ? "openModalcss" : null}>
      {open ? (
        <div className="Reviewmodal">
          <ModalTitle>{children}</ModalTitle>

모달창 띄울 페이지에서, useState로 여닫기

//신청하기 모달창 여닫기
  const [applyModal, setApplyModal] = useState(false);
  const openApplyModal = () => {
    setApplyModal(true);
  };
  const closeApplyModal = () => {
    setApplyModal(false);
  };

<div style={{ display: "flex", justifyContent: "center" }}>
              <Button
                orange_small
                margin="0 0 4.9em 0"
                _onClick={() => {
                  openApplyModal();
                }}
              >
                신청하기
              </Button>
              <WriteModal
                children="신청하기"
                open={applyModal}
                close={closeApplyModal}
              />

 

>CSS

( 모달창 띄우고 뒷 배경은 어둡게 하는 css 설정.... 모달창 포지션을 fixed로 해놨는데,,, 모달창 크기가 작지 않아서 CSS를 어떻게 변경할지 고민 중이고, 이왕이면 모달창이 드래그로 이동되면 좋겠다...... 찾아 볼 예정..)

.openModalcss {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 2;
}

.modal {
  position: absolute;
  top: calc(50vh - 350px);
  left: calc(50vw - 350px);
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
  width: 100%;
  max-width: 640px;
  height: 645px;
}

2. 회원가입, 로그인 관련 (이 부분은 매번 쉽지 않다, 보완점이 계속 생긴달까, 인증 이거 쉬운 거 아니다)

>기능

SPRING과의 협업 중이라, JWT 방식으로 회원가입/로그인 구현. 

현재는 access 토큰을 로컬스토리지에 저장하는 단계이고, 이제, 리프레시 토큰으로 엑세스 토큰 만료 후 유효성검사해서 토큰 다시 받아오고 어찌고 를 구현할 예정이다.

코드 등은 나중에 따로 정리해야겠다..

 

3. CI/CD 구축 관련 (배포 환경에서 테스트할 때 매우 편리하다)

https://writingcode.tistory.com/79

 

4. 이미지 보내기, 이미지 슬라이더 관련

#이미지formdata

이미지 업로드 부분을 다른 컴포넌트로 분리시켜서, 리덕스에 이미지 저장하고 그걸 다시 상세페이지로 불러온 후 폼데이터에 담아, 다른 콘텐츠와 함께 서버로 보냈다.

// 데이터 formData로 보내기
  const addReview = async () => {
    const formData = new FormData();
    image.forEach((image) => formData.append("image", image));
    
    dispatch(DB(formData));
  };

 

 

#이미지슬라이더 (패키지 사용 안하고)

  //이미지 슬라이더
  const [slide, setSlide] = useState(1);
  const moveDot = (index) => {
    setSlide(index);
  };

<div className="imgBox">
                {reviewDetail.reviewImgList?.map((image, index) => {
                  return (
                    <>
                      <div
                        key={image.id}
                        className={
                          slide === index + 1 ? "slide active-anim" : "slide"
                        }
                      >
                        <img src={image} alt="reviewImages" />
                      </div>
                      <div className="containerDots">
                        {Array.from({
                          length: reviewDetail.reviewImgList.length,
                        }).map((item, index) => (
                          <div
                            key={index}
                            onClick={() => moveDot(index + 1)}
                            className={
                              slide === index + 1 ? "dot active" : "dot"
                            }
                          ></div>
                        ))}
                      </div>
                    </>
                  );
                })}
              </div>

CSS 설정이 중요한데, 

.imgBox {
  display: flex;
  width: 560px;
}
.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 150px;
  opacity: 0;
  transition: opacity ease-in-out 0.4s;
}
.slide img {
  width: 560px;
  height: 350px;
  object-fit: cover;
}
.active-anim {
  opacity: 1; /* 불투명도 0~1 */
}
.containerDots {
  position: absolute;
  bottom: 245px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 0 5px;
  background: #f1f1f1;
}
.dot.active {
  background: #fa5a30;
}

 

5. 글씨 구부려 회전시키기 애니매이션 관련

https://writingcode.tistory.com/81

 

+웹소켓통신 기능 구현 중