클론 프로젝트 후기

관련 깃허브

기술적으로 말도 많고 탈도 많았던 클론프로젝트였다. 결과는 나름대로 선방한? 느낌이지만 아쉬움은 남는 프로젝트였다. 그래도 뿌듯한 일주일이었다.

1. 주요 고민 코드 및 문제점

1. Likes.jsx

const Likes =(props)=>{ 

    const dispatch = useDispatch();
  
    const [likes, setLikes] = useState(false)
    const [count, setCount] = useState(props.count)

    useEffect(() => {
        dispatch(__like(props.id))
          }, [likes]);

    const onLike = () => {
        if(likes === true){
            setCount(count-1)
            setLikes(false)
        }else{
            setCount(count+1)
           setLikes(true)
        }
      }

    return(
        <>
            <LikeButton onClick={onLike}>{likes ? "❤️" : "🤍"}</LikeButton>
            <Span>{count}</Span>
        </>
    )
}

• like는 PostList에서 useSelector할 경우 통째로 리랜더링이 되기 때문에 컴포넌트를 빼서 관리해줬어야 했다.
• 아이디 등은 PostList 컴포넌트에서 props로 받아오면 된다.

2. 회원가입 유효성 검사

const useremailCheck = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/;
  const usernicknameCheck = /^[a-z]+[a-z0-9]{5,19}$/g;
  const passwordCheck = /^(?=.*\d)(?=.*[a-zA-Z])[0-9a-zA-Z]{8,16}$/;

  const onSubmitHandler = (event) => {
    event.preventDefault()
    if(!useremailCheck.test(obj.email)){
      return alert("이메일 양식에 맞춰주세요")
    }
    if(!usernicknameCheck.test(obj.nickname)){
      return alert("닉네임 양식에 맞춰주세요")
    }
    if(!passwordCheck.test(obj.password)){
      return alert("비밀번호 양식에 맞춰주세요")
    }

    if(obj.email === "" || obj.email === undefined) {
      return alert("빈칸을 입력해주세요.")
    }

    if(obj.nickname === "" || obj.nickname === undefined) {
      return alert("빈칸을 입력해주세요.")
    }

    if(obj.password === "" || obj.password === undefined) {
      return alert("빈칸을 입력해주세요.")
    }

    dispatch(__userSignUp(obj))
  }

• 여러 검사를 했지만 가장 이슈인건 역시 정규표현식. 찾지 말고 여기서 아예 정리해서 가자.

3. slick Slider

const settings = {
 
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
  };
...
...
 {
                              posts.img && (
                                <>
                                 <StyledSlider {...settings}>
                                  {
                                    posts.img.map((imgs)=> {
                                      return(
                                        <div key={imgs.id}>
                                          <img src={imgs}
                                          style={{ width: "320px", height: "320px"}}/>
                                        </div>
                                      )
                                    })
                                  }
                                  </StyledSlider>
                                </>
                              )
                            }

• 슬릭슬라이더는 잘 돌아간다. 대신 CSS적으로 자리차지하는 부분이 많아서 그런지 모르겠으나 불필요한 댓글 공간을 만들었어야 했다.(자리차지 이슈) : 아마 slider 관련한 CSS를 만졌어야 했나 싶다.

4. extraReducer data 필요한 것 받기

      if(action.payload.data.statusCode === 200){
        state.feeds = action.payload.data.feeds;
        state.detail = action.payload.data
      }

      // 데이터에 필요한 값만 배열에 넣어준다.

• 한 state에서 여러 데이터를 받아오는 방법도 알아야한다. 이후 useSelector에서 {}로 받아오면 된다.

2. 피드백

• 회원가입 시 닉네임에 대한 친절한 설명 필요
• 미적감각은 떨어져도 되나 유저의 사용성 측면은 고려해서 CSS를 짜야 한다.
• 버튼 등 CSS 적 안정성을 중요하게 봐야 한다. (영역 침범)
• 좋아요가 DB에 저장이 안 되고 있었다. 이건 아마 새로 로직 짜면서 그렇게 된 듯..
• 극한의 QA를 생각해서 짜야한다.(유저는 호락호락하지 않다.)
• 상세글 보기에서 이전 버튼이 없다.

3. 전반적인 진행(소통, 기술 등)

백엔드와 전반적으로 소통이 잘 된 일주일이었다고 본다. 기술적인 측면에서 서로 이해도 좋았고 경청하는 자세가 있어서 좋았다. 나도 백엔드가 어려웠던 것은 마찬가지였지만 백엔드도 프론트엔드가 어려운건 마찬가지이니 그 부분에서는 서로 양보하며 진행한게 컸던 것 같다.

또한 서로 부탁하는 것에 대해 어려움이 없어서 잘 통한 것 같다. 실례로 로그인 시 닉네임을 받았어야 하는 경우나 피드를 역순으로 만드는 것 등 계속 조심스럽게 부탁드렸는데 잘 들어주신 것이나 UX 적인 면에 대해서 논의하거나 테마에 대해 논의하는 등이 잘 통했던 것 같다.

기술적인 부분도 서로 스코프를 잘 잡아서 한 쪽에 치우치지 않게 한 것이 컸던 것 같다. 프론트와 백엔드 모두 만족스러운 결과를 낸 것도 스코프에서 서로 욕심을 내지 않은게 크지 않았나 싶다.

4. 소회

• 재밌는 경험이었다. 백엔드와 소통도 잘 되었고 프론트엔드끼리도 잘 맞는 느낌이라 즐겁게 진행했다. 미니프로젝트에 비해 시간적 여유가 있었던 것은 아무래도 했던 기술의 연속이었어서 그런 것 같다. 그래도 새로운 기능(좋아요 등)도 많이 배울 수 있어서 좋았고 백엔드와 원활한 소통도 배울 수 있어 좋았다. 소회라기에 좀 짧긴 하지만 이번 프로젝트는 성공적으로 기억될 것 같다.