221215_TIL

오늘 공부한 내용

• 항해 99 심화주차

• 글쓰기 페이지 기능 구현

오늘은 팀원 조분들이 페이지 구현에 막히고 계신것 같아서 만들어보지는 않았지만, 그 페이지를 처음부터 만들면서 어떻게 들어가는지, 어디로 들어가서 값을 어떻게 받아오는지, 그것을 또 다시 활용하는 방법까지 말씀드리는 시간을 가졌다.

갑작스럽게 말씀 드리게 된거라 아무생각 없이 만들어 보았는데, 다행히도 코드를 짜는게 재밌어서 그런지 구현도 잘 되어서 어려움없이 말씀드릴 수 있었다 .

우선은 메인페이지에서 카테고리 리스트별로 보여지는 카드리스트들이 다르다. 그렇기에 글쓰기 페이지에서 카테고리별로 데이터를 저장하는 방법이 필요하다.

정말 간략하게 표현하자면 다음과 같다.

1. 페이지가 렌더링 될 때 서버에서 카테고리 관련 리스트들을 불러온다.

1-1. useDispatch를 사용하여 Axios.get으로 서버에 있는 데이터들을 리듀서에 저장한다.

1-2. useSelector를 사용하여 리듀서에 있는 데이터들을 컴포넌트(뷰)로 가져온다.

 

2. 그리고 select box를 만들때 가져온 데이터 리스트들을 넣어준다.

2-1. useSelector로 가져온 객체들 중 name만 따로 배열로 반환하여 변수에 담는다.

2-2. 배열이 담긴 변수를 map함수를 사용하여 select box 안에 있는 option에 props를 전달한다.

 

3. select box를 선택할 때 useState에 값을 저장하고 제목, 내용을 입력후 추가하기를 누르면 dispatch함수와 redux-thunk를 사용하여 Axios.post를 하고 서버에 저장한다.

 

 

const [title, setTitle] = useState("");
  const [content, setContent] = useState("");
  // eslint-disable-next-line no-unused-vars
  const [select, setSelect] = useState("");
  // eslint-disable-next-line no-unused-vars
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getComm());
  }, []);
  // dispatch로 Axios.get 요청 > 서버에서 모든 데이터를 가지고 와서 스토어에 저장을한다.
  // useSelector로 저장된 comm에 데이터들을 가지고 컴포넌트(뷰)로 온다 > state.post.comm
  // 데이터들이 담긴 변수(globalValue)들은 배열이다. console.log로 확인해보면 알 수 있음.
  // 변수를 map함수 (map함수는 배열함수) 를 사용하여 객체의 name만 뽑아서 변수에 따로 저장한다. 변수: name
  // console.log(name)으로 뽑아낸 변수들을 확인한다.

  const globalValue = useSelector((state) => state.post.comm);

  const id = globalValue.map((data) => {
    return data.id;
  });
  const name = globalValue.map((data) => {
    return data.name;
  });
  console.log(id);
  console.log(title, content);
  const onsubmitHandler = () => {
    console.log(select);
    dispatch(
      __addNewPost({
        title,
        content,
        category: select,
        img: "https://image.bugsm.co.kr/album/images/500/202860/20286013.jpg",
      })
    );
  };

 

+ 추가

 

상세페이지를 추가로 만들었다.

원래 어제가 과제 제출일이었는데.. 팀원분들이 페이지를 못 만드는 사태에 이르러 결국 새벽4시까지 혼자 팀프로젝트를 하고 업로드 해본다.

상세페이지에서 페이지 자체를 수정 및 삭제를 했어야했고 댓글 또한 수정 및 삭제를 했어야했지만 시간상 어쩔 수 없이 상세페이지 댓글 쓰는 기능까지만 만들어야 했다.

원래대로라면 서버에 아이디,비밀번호를 저장해서 삭제 수정시 확인하고 삭제하는 것까지 만들어 보고 싶었는데, 그러지 못해서 너무 아쉽다.. 

 

 

 

export default function Detail() {
  /*
  1. 렌더링
  1-1. url에서 아이디 값을 가져온 후 서버에서 전체리스트 정보를 들고 온다.
  1-2. url과 전체리스트를 find함수를 사용하여 같은 객체를 반환한다.
  2. 반환한 내용을 뷰에 뿌려준다.
  2-1. map함수를 사용하여 html 작성
  */
  const dispatch = useDispatch();
  const globalValue = useSelector((state) => state.post.lists);
  const repleValue = useSelector((state) => state.post.reple);
  const params = useParams();
  const id = useRef();
  const password = useRef();
  const [render, setRender] = useState("");
  console.log(repleValue);

  const obj = globalValue.find((data) => {
    if (Number(params.id) === data.id) {
      return data;
    }
    return "";
  });
  console.log(obj);
  const reple = useRef();

  useEffect(() => {
    dispatch(getLists());
    dispatch(getReple());
  }, [render]);

  // eslint-disable-next-line consistent-return
  const addRepleHandler = () => {
    if (password.current.value.length < 4)
      return alert("비밀번호는 4자리 이상 입력해주세요.");
    dispatch(
      setReple({
        content: reple.current.value,
        id: id.current.value,
        password: password.current.value,
        page: Number(params.id),
      })
    );
    reple.current.value = "";
    id.current.value = "";
    password.current.value = "";
    setRender(!render);
  };

  return (
    <StWrapper>
      <div className="detail_page_inner">
        <StPageTitle>{obj.title}</StPageTitle>
        <div className="detail_content_wrapper">
          <div className="flex-column gap-50-0">
            <div className="detail_content_container">
              <div className="detail_content">{obj.content}</div>
            </div>
            <div className="reple_field_wrapper">
              <div className="textarea_container">
                <div className="user_info">
                  <input type="text" placeholder="닉네임" ref={id} />
                  <input
                    type="password"
                    placeholder="비밀번호"
                    ref={password}
                  />
                </div>
                <StTextArea name="" id="" cols="30" rows="10" ref={reple} />
                <div className="write_btn_container">
                  <StRepleButton type="button" onClick={addRepleHandler}>
                    Write
                  </StRepleButton>
                </div>
              </div>
              <StRepleWrapper>
                {repleValue &&
                  // eslint-disable-next-line consistent-return
                  repleValue.map((data) => {
                    console.log(data.page, Number(params.id));
                    if (Number(params.id) === data.page) {
                      return (
                        <StRepleContainer key={data.id}>
                          <span>{data.id}</span>
                          <span>{data.content}</span>
                        </StRepleContainer>
                      );
                    }
                  })}
              </StRepleWrapper>
            </div>
          </div>
        </div>
      </div>
    </StWrapper>

느낀점

시간이 부족해서 수정/삭제 기능은 만들지 못해서 너무나도 아쉬웠다. 팀프로젝트를 매번 혼자하는 느낌이다. 왜 나만 과제를 하는건지..

내일은 또 새로운 분들을 만나 팀프로젝트를 새로 시작한다. 벌써부터 무섭다.. 왜.. 나만 해 과제..

내일 할 일

• 새로운 팀프로젝트