Weekly I Learned - 09

Weekly I Learned
2023-01-06 ~ 2023-01-13 (1주일)

Q. 실전 프로젝트를 진행하며 기술적으로 막혔던 부분은 무엇인가요?

* 해결했다면 어떻게 해결했는지 과정을 작성해주세요!

1) react slick slider를 많이 사용한다고 하는데 slick을 사용하면서 일어나는 트러블 슈팅에 대해서는 많이 나와있지 않음. 코드를 똑같이 입력했음에도 화면에 슬라이드가 나오지 않고 밑에 dots만 나옴.
-> 강의 영상을 다시 보고, 주변에 질문하고, 여러 블로그들을 서핑했고, 코드를 여러번 새로 작성 + node.modules에 있는 css파일을 찾아서 width, height 값을 줘도 안됐으나 혹시나 싶어서 위아래로 div태그로 감싸서 큰 상자로 둘러싼 후 styled components를 주자 slider가 나타남...!

return (
    <StDiv SliderBox>
      <Slider {...settings}>
        <StDiv Slider1>
                    <img태그로 이미지파일 넣기!!>
          <StBtn MainTopStartBtn>
            START
            <AiOutlineArrowRight />
          </StBtn>
        </StDiv>
        <StDiv Slider2>
                    <img태그로 이미지파일 넣기!!>
          <StBtn MainMiddleGoBtn>
            자세히 알아보기
            <AiOutlineArrowRight />
          </StBtn>
        </StDiv>
        <StDiv Slider3>
                    <img태그로 이미지파일 넣기!!>
        </StDiv>
        <div>
                    <img태그로 이미지파일 넣기!!>
        </div>
      </Slider>
    </StDiv>
  );
};

const StDiv = styled.div`
  ${(props) =>
    props.SliderBox &&
    css`
      position: relative;
      width: 100%;
      height: 100%;
      margin-bottom: 20px;
    `}

2) 회원가입 페이지에서 필수항목과 휴대폰 문자 인증을 해야만 다음버튼으로 넘어갈 수 있게 설정해야했음. (아래사진처럼)

 const [nextDisabled, setNextDisabled] = useState(true);
 const [msgDisabled, setMsgDisabled] = useState(false);
 const [pnDisabled, setPnDisabled] = useState(false);

useState를 지정해주고

useEffect(() => {
    if (
      ageCheck === true &&
      privacyCheck === true &&
      useCheck === true &&
      okConfirm === true
    ) {
      setNextDisabled(!nextDisabled);
    } else {
      setNextDisabled(true);
    }
  }, [ageCheck, privacyCheck, useCheck, okConfirm]);

  const sendMessageHandler = (phoneNum) => {
    __SMSSend(phoneNum)
      .then((res) => {
        setCodeNumber(res.data.data);
        setPnDisabled(true);
        setShowInput(true);
        console.log(res.data.data);
      })
      .catch((error) => console.log(error));
      }
  };
  
   const MessageConfirmHandler = () => {
    if (codeNumber === confirmNumber) {
      setCheckP("인증되었습니다.");
      setOkConfirm(true);
      setMsgDisabled(true);
    } else if (codeNumber !== confirmNumber) {
      setCheckP("인증번호를 확인해주세요.");
      setOkConfirm(false);
      setMsgDisabled(false);
    }
  };

• 전송버튼에 disabled={pnDisabled}, pnDisabled={pnDisabled},
  (pn은 phone을 줄인 문자. 전송이 되었을 때 잘 전송되었으면 disabled처리)
• 인증버튼에 disabled={msgDisabled}, msgDisabled={msgDisabled},
  (인증버튼을 누른 후 인증번호를 알맞게 입력했을 때 disabled, 맞지 않을 때는 입력가능)
• 다음버튼에 disabled={nextDisabled}, nextDisabled={nextDisabled}
  (인증버튼이 disabled 처리가 되면 disabled처리 된 게 풀리고 페이지 이동가능하게 버튼 활성화)