[TIL] 230701

메인화면 크기

Header와 Footer 사이에 있는 페이지가 너무 커서 너비를 조절하고 다른 페이지를 생성했을 때에도 적용할 수 있도록 Wrapper.jsx 파일에 옮겨주었다.

export const MainBox = styled.div`
  width: 80%;
  margin: 0 auto;
  padding: 30px;
`;

게시글 posting 버그 수정

posting을 수행하면 다른 게시글 까지 사진이 변경되는 문제가 있었다.

shortid를 이용하여 게시글 id의 폴더로 사진이 저장되도록 수정하였다.
Posting.jsx

const fidId = shortid.generate(); // 등록할 fid id

const createUsers = async (event, newImgURL) => {
    event.preventDefault();
    if (newImgURL === undefined) return;

    if (newTitle.trim() === '' || newContent.trim() === '') {
      alert('제목과 내용을 입력해주세요.');
      return;
    }

    const newFid = {
      id: fidId,
      about: newAbout,
      title: newTitle,
      contents: newContent,
      createdBy: auth.currentUser.displayName,
      createUser: auth.currentUser.email,
      imgURL: newImgURL
    };

    await addDoc(userCollectionRef, newFid);

    // 글 등록 후 입력 폼 초기화
    setNewAbout('');
    setNewTitle('');
    setNewContent('');
    setnewImgURL('');
  
  	dispatch(addFids(newFid));

    alert('피드가 등록되었습니다!');
  };
.
.
<FileUpload onImageUpload={createUsers} newFidId={fidId} />

하나의 변수에 shortId를 사용하여 같은 값이 지정되도록 변경해주었다.
새 피드가 등록되었으니, redux의 fid에도 새 객체를 추가해준다.

FileUpload.jsx

const handleUpload = async (e) => {
    if (selectedFile) {
      const filename = `img${fileIndex}`;
      const imageRef = ref(storage, `fids/${newFidId}/${filename}`);
      await uploadBytes(imageRef, selectedFile);

      const downloadURL = await getDownloadURL(imageRef);
      console.log(downloadURL);
      onImageUpload(e, downloadURL); // 이미지 URL 전달

    }
  };

등록하기 버튼이 눌러지면 수행하는 함수이다.
storage에 저장될 때 넘겨받은 게시글의 id를 폴더로 만들어주었다.

클릭 시 게시물 내용

기존에 DB에서 불러오던 코드를 지우고 redux로 상태관리를 해주었다.
DetailFeedPage.jsx

const selectedFid = useSelector((fids) =>
    fids.fids.filter((fid) => {
      return fid.id === uid;
    })
  )[0];

제일 먼저 url의 param과 비교하여 1개만 filter 될 테니 0번째 객체를 지정해주었다.
selectedFid 변수를 직접 지정하니 새로고침이 되었을 때 오류가 발생하여 useState로 관리해주었다.

const [fid, setFid] = useState('');
setFid(selectedFid);

fid의 상태에 따라 렌더링이 되도록 useEffect함수에 의존성 배열로 넣어주고 로그인 되어있는 사람이라면 버튼이 나타나게 만들어줬다.

useEffect(() => {
    setFid(selectedFid);
    setCuruser(user.email);
    console.log('게시글 상세', selectedFid);
    if (user.email === fid.createUser) {
      setcheckUser(true);
    }
  }, [fid]);

삭제 버튼 클릭 시

db에 직접적인 영향이 가지 않도록 redux로 관리해주었다.
DetailFeedPage

const deleteFid = () => {
    console.log('delete', uid);
    console.log('?', fid);

    navigate('/');
    alert('삭제되었습니다!');
    dispatch(deleteFids(uid));
  };

fids.js

case DELETE_FIDS:
      return state.filter((fid) => {
        return fid.id !== action.payload;
      });

수정 버튼 클릭 시

동작과정

기존 창은 비활성화 되고 입력받는 창이 활성화 된다.
클릭한 fid 들의 title, content 값을 가져와서 input의 value들의 기본 값으로 set해주었다.
수정 완료 버튼이 눌러지면, 수정하는 창은 비활성화 되고 수정 된 값들이 redux의 update가 실행되면서 같은 id인 fid의 title과 content값들을 바꿔준다.

• dispatch 실행 전 들어온 값 test
  
  DetailFeedPage

const updateFid = () => {
    const newUpdateFid = {
      ...selectedFid,
      title: newupdateTitle,
      contents: newupdateContent
    };
    console.log('업데이트 할 내용', newUpdateFid);
    // dispatch(updateFid());
  };

redux에서 잘 받았는지 확인해보았다.

잘 들어오는 것을 확인했으니, 해당 게시글만 수정하여 redux의 fid를 변경해준다.
DetailFeedPage

const updateFid = () => {
    const newUpdateFid = {
      ...selectedFid,
      title: newupdateTitle,
      contents: newupdateContent
    };
    console.log('업데이트 할 내용', newUpdateFid);
    dispatch(updateFids(newUpdateFid));
    setFid(newUpdateFid); // 업데이트 한 내용 다시 set
    showUpdateFid();
  };

fids.js

case UPDATE_FIDS:
      console.log('update', action.payload);
      return state.map((fid) => {
        if (fid.id === action.payload.id) {
          return action.payload;
        } else {
          return fid;
        }
      });

도메인

발제 문서에 저렴한 도메인을 구매하여 커스텀 도메인 적용해보기가 있었는데, 정확히 어떤 역할을 하는지 찾아보았다.

도메인이란?

인터넷 상에서 특정한 웹사이트를 구분할 수 있는 주소
ex) google.com
구글처럼 특정한 웹사이트를 지칭하는 것 처럼 보이게 만드는 것 같다.

vercel로 배포했을 경우에 프로젝트이름.vercel.app 이렇게 주소가 보이는데 이걸 마음대로 수정하라는 의미인 것 같다!
즉, 기억하기 쉽게 주소를 변경하는 것이다.

용어 및 주의할 점

• 로컬 DNS 캐시 : 사용자의 컴퓨터나 라우터에 저장된 최근 DNS 정보를 담고 있는 캐시
  <도메인 이름, 도메인의 IP주소>가 저장
  이전에 DNS 서버에 질의 보내고, 도메인 이름에 대한 IP 주소 정보를 받아온 경우, 정보를 캐시에 저장 함
  다음에 같은 도메인 이름에 대한 질의가 들어올 때, DNS 서버에 다시 질의하지 않는다.
  로컬 DNS 캐시에서 바로 IP 주소 정보를 가져와서 사용한다.
  
• DNS 서버 : DNS 서비스 제공 서버
  <도메인 이름 - IP 주소> 간의 매핑 정보를 저장하고 제공
  DNS 질의에 대한 IP주소 정보 제공
• 질의 (Query) : 특정 도메인 이름에 대한 IP 주소 정보를 요청하는 것
• 네임서버 (Name Server) :
  특정 도메인에 대한 IP 주소 정보를 갖고 있는 서버
  도메인이름은 전세계적으로 유일하기 때문에, 이를 관리하는 서버가 필요하다.
• 최상위 네임 서버 (Top-Level Domain Server) : 인터넷에서 가장 상위 수준의 도메인 정보를 관리함
  전세계적으로 13개 운영
  A 루트: Verisign, Inc. (미국)
  B 루트: Information Sciences Institute, University of Southern California (미국)
  C 루트: Cogent Communications, Inc. (미국)
  ...
  최상위 도메인(TLD)은 총 1544개 (com, org ....)

도메인 주소를 정할 때 전세계에서 유일한 식별자 이기 때문에 이름을 잘 골라야 한다.

시험공부와 알고리즘을 다 풀고 시간이 남으면 사진 수정기능 까지 구현하고 월요일에 제출 전에 팀원들이 적용한 디자인을 통합하고 배포와 도메인을 적용해봐야겠다.