⬆︎ 벨로그 클론코딩 시연영상

클론코딩 프로젝트 주제를 velog로 정했다.

velog가 리액트로 개발되어서 뜯어보면서 공부하기에 좋은 주제였다.

이번에 개발하면서 고려한 점, 더 나은 코드를 짜려고 노력한 점은 컴포넌트 잘 사용하기 였다.

컴포넌트 나눌지 말지, 나눈다면 얼마나 나눌지 항해 리액트끼리 얘기한 건 많은데
나는 그렇게까지 노력해서 나눠보지도 않은 상태에서 벨로그 코드를 뜯어보게 되어서 좋은 기회였다고 생각된다.
미니프로젝트까지는 1페이지 당 1 컴포넌트만 사용해보고, 계속 중복되는 함수와 스타일이 많았다.
이번에는 그 중복 코드를 좀 줄여보는 걸 목표로 시작했다.
결론적으로 말하면 그렇게까지 성공적이진 않았는데 또 그렇게까지 실패는 아니었다.

벨로그 전체 페이지 구성을 보고 그 중에서 일정과 우리 실력 내에서 구현 가능한 것 / 도전해볼 것 / 구현 불가능한 것들을 나누고 나서 시작했는데 그래서 와이어프레임과 흐름을 따라서 그려보다보니까 벨로그는 헤더에서부터 모든 기능들에 접근할 수 있다는 걸 알게됐다. 그래서 헤더 컴포넌트 짜는 역할을 따로 뺐고, 그 이외에는 기능 및 페이지 별로 역할분담을 했다.

이번에 컴포넌트 나누기에서 뿌듯한 점은 로그인/회원가입 창을 모달로 띄우고, 그 일련의 과정 속에서 url이 바뀌지 않은 채로, 컴포넌트만 변경하면서 화면을 보여줬다는 점이다 ~

헤더 컴포넌트의 자식으로 넣어서 보여주는 방식을 쓰고(헤더 안에 있는 로그인 버튼을 누르면 보이게), 그 안에서 삼항연산자로 로그인 뷰를 보여줄지 회원가입 뷰를 보여줄지 결정했다. 근데 다른 분들 코드를 보니까 useState안에 컴포넌트 자체를 넣어서 관리하는 방식도 있었다. 내 경우에는 모달 창을 사용하는 경우였어서 이 방식이 맞는 것 같은데, useState방식이 너무 참신해보여서 언젠가 한번 써보고 싶다. 그 분은 탭에 따라 뷰가 달라지는 경우였다.

⬇︎ 헤더 컴포넌트에서 모달 관련 코드

const [showModal, setShowModal] = useState(false);

const openModal = () => {
  setShowModal(true)
}

const closeModal = () => {
  setShowModal(false);
}
.
.
.
//로그인 버튼을 누르면 showModal이 true가 되고, 
<LoginBtn onClick={openModal}>
  로그인
</LoginBtn>

//그러면 Login 컴포넌트에 showModal과 closeModal함수를 보내면서 로그인 컴포넌트를 보여주는 삼항 연산자
{showModal ? <Login showModal={showModal} closeModal={closeModal} /> : null}

헤더의 자식으로 로그인 컴포넌트가 있고, 모달 창을 띄우는 것까지 했는데 모달창을 닫으려면 헤더 컴포넌트의 state인 showModal을 false로 바꿔야하는, 자식의 액션으로 부모의 state를 바꿔야하는 상황에 부딪혀서 이런 경우는 불가능하다고 했는데 그럼 못하나?! 싶었는데 그런 경우에는 그 state를 바꾸는 함수까지 props로 내려주면 된다고 한다. 그렇게 했고 됐다!

게시글 작성 페이지에서는 toastUI 에디터로 마크다운 문법으로 게시글 작성하고, 옆에 미리보기를 띄워주는 패키지를 사용해봤다. 벨로그도 코드 안에 toastify라는 부분이 있어서 토스트 UI를 사용하는 줄 알고 이걸 골랐는데, 나중에 더 자세히 알아보니 codemirror를 사용한 것 같았다.

게시글 작성, 삭제까지 모두 했는데 수정에서 막혀서 못했다. 수정하려면 사용자가 쓴 글의 내용을 defaultValue로 넣어놔야하는데, 토스트 UI 안에 initialValue로 변수를 넣는걸 실패해서 ... 포기해버렸다. 그냥 string은 얼마든지 적용 되는데 작성/수정할 때 같은 컴포넌트를 사용하게 만들고 싶어서 장황한 삼항연산자를 쓰다가 맘처럼 안돼서 포기해버렷다. 너무 장황해서 내가 코드를 잘못 읽었거나, 아니면 실수를해서 그런건지 아니면 예외처리를 해줘야 했었던건지 true일때 부분적으로 false 뷰가 보여버리는 상황들이 있었다.

새로운 패키지를 사용해본 것에 의의를 뒀다 . . .

댓글 작성 수정 까지는 완료했는데!
한 게시글 안에 내가 쓴 댓글이 2개 이상이 있으면 한꺼번에 input이 보여지는 상황을 만나게됐다 ... 못고쳤다.

태그를 쉼표로 구분해서 작성하면 split되어서 나오게 했다!