오늘 고민했던 코드들

전반적으로 팀원 코드 맞춰주느라 내 코드를 많이 못 만져보긴 했지만 그래도 오늘 사진 URL로 올리는 것은 기술매니저님 통해서 했다.

0. 오늘 한 일 : 팀원 코드 리뷰 + merge 리뷰 + 사진 URL 올리는 기술

1. 전반적인 코드

(AddMovie.jsx)

 const obj = {
      title : movieContent.title,
      content: movieContent.content,
      url : movieContent.url,
      id:Date.now()
    }
 
    // 사진 등록 및 미리보기
    const postUrl = () => {
      if(obj.url === "" || obj.url === undefined) {
        return alert ("URL을 입력해주세요!")
      }else{
        setPrevImg(obj.url)
        alert("등록이 완료되었습니다.")
      }
    }
    // 인풋값 등록버튼
  const onClickButton=(event)=> {
    event.preventDefault();
    if (movieContent.content.trim() === "" || movieContent.title.trim() === "" )  {
      return alert("모든 항목을 입력해주세요.");
    }     
        dispatch(__addmovies(obj))
        setMovieContent({
          title: "",
          content: "",
        });
        navigate("/movielist");
}
  //사진등록 토클
  const [toggle, setToggle] = useState(false);
  
  const editToggleHandler = () =>{
    toggle ? setToggle(false) : setToggle(true);
  }
  
  return (
    <>
      <Header />
      {/* 썸네일,타이틀 */}
      <StContainer><Stcontainerbox>
        <StThumbNail>
          <img src={prevImg} />
        </StThumbNail>
         <Stbutton onClick={editToggleHandler}>사진등록하기</Stbutton>  
         {toggle ? (
            <div>
              <StThum><img src="/show.jpg" alt="안내이미지" /></StThum>
              <P>구글에서 원하시는 이미지 검색후 우클릭하여 주소를 복사해주세요</P>
              <PutBox>
                <Input type="text" value={movies.url} name="url" placeholder="사진 URL을 등록해주세요!" onChange={onChangeHandler}/>
                <Button type="button" onClick={postUrl}>등록완료</Button>
              </PutBox>
          </div>
          ):null 
          } 
        </Stcontainerbox> 

        {/* input그룹 */}
        <InputGroup>
          <Stinput 
          type="text"
          name="title"
          value={movies.title} onChange={onChangeHandler}
          placeholder="제목을 입력해주세요"/>
          <Stinput 
          type="text"
          name="content"
          value={movies.content} onChange={onChangeHandler}
          placeholder="내용을 입력해주세요"/>
          <StButton onClick={onClickButton}>작성완료</StButton>
        </InputGroup>

      </StContainer>
    </>
  );
}

(리듀서 부분은 건들지 않았기 때문에 패스)

2. 코드에 대한 리뷰

1. 원래 쓰던 코드

const onClickButton=(event)=> {
  // 기존 onclick button 이용 해서 url만 추가해서 값을 입히는 형식
    event.preventDefault();
    if (movieContent.content.trim() === "" || movieContent.title.trim() === "" )  {
      return alert("모든 항목을 입력해주세요.");
    }     
        dispatch(__addmovies(obj))
        setMovieContent({
          title: "",
          content: "",
        });
        navigate("/movielist");
}

2. 추가한 코드

const obj = {
      title : movieContent.title,
      content: movieContent.content,
      url : movieContent.url,
  // 새로 항목화한 부분
      id:Date.now()
    }
 
    // 사진 등록 및 미리보기
    const postUrl = () => {
      if(obj.url === "" || obj.url === undefined) {
        return alert ("URL을 입력해주세요!")
      }else{
        setPrevImg(obj.url)
        dispatch(__addmovies(obj.url))
        alert("등록이 완료되었습니다.")
      }
    }
    // 새로 추가한 함수. 유효성 검사 + dispatch 보내주기
    
  ...
  ...
  
  //사진등록 토클
  const [toggle, setToggle] = useState(false);
  
  const editToggleHandler = () =>{
    toggle ? setToggle(false) : setToggle(true);
  }
  
  // 토글 활용해서 이미지 업로드 및 미리보기 창 숨김
  
  return (
    <>
      <Header />
      {/* 썸네일,타이틀 */}
      <StContainer><Stcontainerbox>
        <StThumbNail>
          <img src={prevImg} />
// 이미지 src에 사진이 들어가는 원리 이용
        </StThumbNail>
         <Stbutton onClick={editToggleHandler}>사진등록하기</Stbutton>  
         {toggle ? (
            <div>
              <StThum><img src="/show.jpg" alt="안내이미지" /></StThum>
              <P>구글에서 원하시는 이미지 검색후 우클릭하여 주소를 복사해주세요</P>
              <PutBox>
                <Input type="text" value={movies.url} name="url" placeholder="사진 URL을 등록해주세요!" onChange={onChangeHandler}/>
                <Button type="button" onClick={postUrl}>등록완료</Button>
              </PutBox>
          </div>
          ):null 
          } 
        </Stcontainerbox> 
    

3. 고민한 점들

1. 전반적으로 로직이 어떻게 되는지 고민 : 매니저님 조언을 따라서 보면 어짜피 한 페이지에서 처리할 것이면 img태그에 이미지가 들어갔을 때 화면에 어떻게 뜨는지를 상상해보고 이걸 유저가 입력한 값을 변수로 한 입력 방법을 고민해보는 것.

2. 실제로 고민해서 시도해본 것 : img 태그에 이미지 넣어봄 -> 일련의 과정 걸쳐 onchange값으로 url 저장 -> dispatch도 해봄

3. 멘토링 : 프리뷰를 위한 useState 값이 필요. 핸들러에서 실제로 값을 잘 못 받아옴(이름 값 잘못 되어 있었음)

4. 실제 완성

내일 검토해보고 푸쉬한 뒤 백엔드와 소통해봐야겠다.