리액트 숙련 주차. (4)

css 강의

컨텐츠에는 대부분 max width가 정해져 있다. 

그렇다고 해서 아예 웹사이트 자체에 max-width를 정해놓지는 않는다. 

그럼 어떡해야하는가???

 

각 컴포넌트는 100%를 차지하되, max-width를 정해놓아야만 한다. 

max-width는 :root에다가 정의한 뒤, 컨테이너를 이용해서 사용한다. 

 

width : 100%
max-width :1200px
magin : 0 auto 

padding : 10px

아이콘을 받는 패미키 -> lucide-react

 

링크나 버튼에는 패딩을 적절하게 줘서, 사이즈를 키우는 것도 좋다. 

개인 프로젝트 트러블 슈팅

이미지 파일의 첨부. 

  const textHandler = (e) => {

    setNickname(e.target.value);

  };

  const fileHandler = (e) => {

    setImgFile(e.target.files[0]);

  };

  const handleSubmit = async (e) => {

    e.preventDefault();

    const formData = new FormData();

    formData.append("avatar", imgFile);

    formData.append("nickname", nickname);

    updateProfile(formData, token);

  };

이미지 파일을 첨부하기 위해서는 input file을 써야한다는 점은 알고 있었는데, 이걸 폼데이터화하는 방법, 폼데이터 안에 있는 데이터를 조회하는 방법을 모르고 있었다. 

 

for (let [key, value] of formData.entries()) { console.log(`${key}:`, value); }

 

파일을 다룰 때는 e.target.files의 0번째 배열을 불러와야 한다는 걸 알았으며, 콘솔로 폼데이터를 확인하려면 저런 서식을 따라야한다는 것을 알았다. 

 

그리고 이런 로직을 사용할 때, formData 안에는 e.target이 들어가면 안 된다. 여기서 폼 데이터의 생성은 일종의 폼데이터라는 박스를 만들어서, request할 때 포장해 보내주는 용도로 쓰기 때문이다. 

visibility를 갱신해주는 로직에서의 실수. 

export const updateTestResultVisibility = async (id, visibility) => {

  const toggle = !visibility;

  const response = await jsonApi.patch(`/testResults/${id}`, {

    visibility: toggle,

  });

  return response.data;

};

 

patch를 할 때에는 , 뒤에 단순 toggle만 넣는다고 끝나는 게 아니라, 저렇게 객체 형식으로 무엇을 어떻게 바꿀 지를 정확하게 명시해줘야 한다. toggle만 넣었다가 계속 실패했었는데, 그 이유를 늦게서야 알아냈다. 

다른 사람에겐 비공개된 카드가 보이지 않게끔. 비공개여도 내 카드는 내게 보이게끔. 

if (visibility === true || userProfile.id === cardId) {

    return (

      <li className="flex flex-col items-center shadow-lg m-10 bg-white rounded min-h-[300px] w-[500px]">

        <span>{nickname}</span>

        <img

          src={avatar || defaultImg}

          className="h-[50px]"

          alt="유저 프로파일 이미지입니다."

        />

        {userProfile.id === cardId && (

          <div className="flex flex-row gap-5 p-3">

            {visibility ? (

              <StBlueButton onClick={visibilityBtnHandler}>

                비공개로 전환

              </StBlueButton>

            ) : (

              <StBlueButton onClick={visibilityBtnHandler}>

                공개로 전환

              </StBlueButton>

            )}

            <StRedButton onClick={deleteBtnHandler}>Delete</StRedButton>

          </div>

        )}

        <span>{mbtiResult}</span>

        <p className="text-sm">{description}</p>

      </li>

    );

 

2시간 정도 머리를 싸맸는데, 생각보다 단순한 문제였다. 조건문에 or 연산자로 저렇게 작업을 걸어주니 비공개된 게시물은 자신에게만 보이게끔 잘 수정되었다.