221214_TIL

오늘 공부한 내용

• 항해99 심화 주차

• 팀프로젝트 메인페이지 기능 구현 완료 및 깃허브 업로드

어려웠던 내용

• Sidebar 컴포넌트에서 카테고리 리스트들을 클릭 할때 클래스를 부여해서 style을 주고 싶었다. 자바스크립트에서는 DOM에 대한 접근이 가능해서 정말 간단하게 만들 수 있는 기능이지만, React에서는 도저히 생각을 해도 클릭 했을 때 class를 부여할 방법이 생각나지 않아 초반에 많이 막혔던 것 같다. 
• 해결 방법을 찾아가는 과정에서 이번 주차는 json-server를 사용해야 했기 때문에 곤란한 점이 많았던 것 같다. 서버에 저장되어 있는 데이터들을 가지고 와서 수정한다음 다시 서버에 넣는 방법이 나에게는 너무나도 어려웠기 때문에, 그 작업을 리덕스를 활용해서 스토어에 저장한 후에 다시 꺼내와서 작업을 하는 방식을 선택했다.
• 리스트를 추가하기 위해서 모달창을 팝업하고 리스트를 추가하는 과정은 그리 어렵지 않았다. 상당히 재밌었고 즐거웠던 시간이었다.

 

//모달창 컴포넌트화

<StModalContainer className={modal ? "modal open" : "modal"}>
     <div className="modal_inner">
       <div className="modal_header">
         <span>{header}</span>
         <StClose className="modal_close_btn" onClick={close} />
       </div>
       <StContent>
         <div className="modal_content_inner">{props.children}</div>
         <div className="modal_footer">
           <StButton type="button" onClick={submit}>
             {button}
           </StButton>
         </div>
       </StContent>
     </div>
 </StModalContainer>
 
 
 //모달창 사용
 
<Modal
  modal={modal}
  close={closeEventHandler}
  submit={onSubmitHandler}
  header="리스트 추가하기"
  button="추가하기"
>
  <StTitle>리스트이름 : </StTitle>
  <StModalInput type="text" ref={contentInput} />
</Modal>

// 모달창 띄우는 기능 관련된 커스텀 훅

import React, { useState } from "react"; // eslint-disable-line no-unused-vars

const useModal = () => {
  const [modal, setModal] = useState(false);
  const handler = () => {
    setModal(!modal);
  };
  return [modal, handler];
};

export default useModal;

 

궁금한 내용 / 부족한 내용

• 처음 페이지가 렌더링 되어있을 때 커뮤니티 첫번째 리스트가 클릭된 상태로 있게 하고 싶었다. 하지만 그것 역시 Dom에 접근하기 어려워서 어떻게 해야할지 감이 오지 않아 결국 포기했다. 자바스크립트로 만들게 되면 5분도 안되서 만드는 기능 모든 것들을 사용할 수 없어 너무나 답답했다.

느낀점

이번 주차를 처음 시작할 때 redux-toolkit , redux-thunk, Axios, custom hook, 컴포넌트화에 대한 개념들을 전부 처음 접하다보니 너무나 힘이 들었다.

이걸 어떻게 소화해내지라는 막연한 걱정만이 있었던 것 같은데.. 자는시간 3~5시간을 빼고 대부분의 하루를 최선을 다하다보니 안될 것도 없다라는 생각이 들기도 한다. 역시 안되면 되게하라는 멋진 말이다. 

그런데 이렇게 해도 다음주는 또 더 힘들겠지..? ㅠ

내일 할 일

• 이번 주차 과제 제출일이다. 열심히 도와드려보자.
• 시간이 난다면 알고리즘문제도 풀어보자!