[5/30 ~ 6/5] 코드스쿼드 마스터즈 21주차 회고

🤦‍♀️  벌써 2주차가 지나갔다니..

이번 주는 중간에 선거날이 껴있어서 그런가 되게 금방 지나간 것 같다. 크게 한 건 없지만 간단하게라도 정리해봐야겠다.

 

 

🤔  어떻게 재사용해야 할까?

이번 주에 그나마 가장 많이 고민한 부분이 컴포넌트 재사용에 관한 부분인 것 같다. 지난주에 만들다 말았던 검색바를 마저 만들었는데, prop으로 검색바의 크기를 받아서 분기 처리하다 보니 전체적으로 좀 복잡해지는 것 같아서 최대한 깔끔하게 정리하려고 했다. 또 크기에 따라 보여지는 내용이 달라야 해서 return문도 삼항 연산자로 다른 내용을 반환하도록 했는데, 이 부분도 깔끔하게 만들고 싶어서 따로 파일을 만들어서 분리해볼까 하는 생각이 들었다. 그런데 이렇게 사용해본 적이 없어서 리뷰어님께 질문을 했고, 답변을 받는 대로 반영해볼 예정이다.

 

또 고민했던 부분이 모달인데, 이전에 구현할 때는 모달이 화면의 정가운데 위치해 있어서 createPortal을 사용해 루트 요소 외부에 있는 돔 요소를 선택해 모달을 렌더링 해줬었다. 하지만 이번에는 정가운데 뜨는 모달뿐만 아니라 특정 요소의 하단에 위치하는 모달들이 있어서 이 부분을 어떻게 구현할지 많이 고민했던 것 같다. 따로 분리하자니 생김새가 거의 비슷해서 어떻게 잘하면 재사용할 수 있지 않을까 하는 생각이 들었다. 그래서 이것저것 찾아보다가 적용한 방식이 createPortal을 사용하되 특정 요소 밑에 렌더링 되는 경우에는 해당 요소를 prop으로 받아서 컨테이너로 지정해주고, 그렇지 않으면 루트 요소 외부에 렌더링 해서 화면 정가운데에 띄워줄 수 있도록 구조를 잡았다. 그런데 이렇게 하면 특정 요소 밑에 렌더링 하는 경우에는 그냥 모달 컴포넌트를 바로 넣어주는 거랑 다를 게 없는 것 같아서 이런 식으로 사용해도 되는지 확신이 잘 안 섰다. 이 부분도 리뷰어님께 질문했는데 아직까지도 리뷰를 받지 못했다..🥲

 

 

🔎  검색바 CSS 처리

검색바의 각 영역이 구분선으로 나뉘어 있는데, 이 구분선을 마지막 영역을 제외한 영역에 CSS 가상요소 ::after로 넣어줬었다. 그런데 영역에 마우스를 올렸을 때 해당 영역의 좌우에 있는 구분선이 사라져야 하는데, 다른 영역에 있는 구분선을 어떻게 지워줘야 할지 고민이 됐다. 

 

${PeriodArea}, ${PriceArea}, ${PersonnelArea} {
    height: 100%;
    padding: 16px 24px;
    border-radius: 60px;

    &:hover {
      background-color: ${theme.color.grey5};

        &::before,
        & + div::before {
            display: none;
        }
    }
}

그래서 해결한 방법이 구분선을 ::before를 사용해서 넣어주는 걸로 변경하고, hover 상태일 때 + 연산자를 사용해서 해당 영역의 오른쪽에 있는 구분선까지 함께 보이지 않도록 처리를 해주는 것이었다. 평소에는 거의 안 써서 까먹다시피 한 연산자였는데, 이번 기회에 확실하게 알게 되었던 것 같다.

 

 

📈  그래프 그리기

메인 페이지의 주요 기능이 캘린더와 슬라이더였는데, 나는 슬라이더 부분을 맡아서 하게 됐다. 슬라이더에는 가격 범위 데이터를 차트로 보여주는 부분이 포함되어 있었는데, 이전에 농구 게임 만들 때 썼던 것처럼 캔버스로 간단한 걸 그려보기만 했지 이렇게 본격적으로(?) 써본 적은 없어서 좀 걱정되기는 했다. 그래도 사용법을 찾아가면서 하니 몇몇 부분을 제외하고는 크게 어렵지는 않았던 것 같다. 그래프를 바와 라인 두 가지 형태로 구현했는데, 라인형 그래프를 그릴 때는 곡선 형태로 그리는 게 좀 어려웠다. quadraticCurveTo라는 메소드를 활용했는데, 사실 아직도 잘 이해하지 못했다.. 다른 분들은 bezierCurveTo를 많이 사용하신 것 같던데, 이거는 설명을 들으니 어느 정도 이해가 되는 것 같기도 했다. 다음번에 이 메소드를 사용하는 걸로 변경해봐야겠다고 생각했다. 바 형태의 그래프는 좌표를 계산하는 게 좀 까다롭긴 했는데 개발하기 전 미리 정리해둔 대로 만드니 생각보다 금방 구현할 수 있었다. 두 형태 모두 들어오는 데이터의 크기에 맞게 유동적으로 그려질 수 있도록 구현했다.

 

 

🏠  홈커밍데이

목요일에 다른 수료생들과 대화를 나눌 수 있는 홈커밍데이가 진행됐다. 클래스별로 그룹을 나눠서 질의응답하는 방식으로 진행됐는데, 우리 방이 생각보다 너무 조용한 분위기여서 거의 수료생분들의 토크쇼 같은 느낌이라 좀 죄송하기도 했다... 그래도 도움이 되는 얘기를 정말 많이 해주셔서 감사했다. 들으면서 나도 내년에 그런 얘기를 할 수 있을 정도로 성장해있을까 하는 생각이 들기도 했다. 물론 말주변이 별로 없어서 참여할 수 있을 것 같진 않지만 열심히 해야겠다는 동기부여가 되었던 것 같다. 또 문제 해결을 어떻게 했는지 잘 기록해두라는 얘기도 해주셔서, 다음주부터는 개발할 때 어려웠던 부분을 간단하게라도 잘 정리해둬야겠다고 생각했다.

 

 

💫  힘든 한 주였다 ••• 

이번 주도 바쁘게 지나간 것 같다. 뭔가 한 건 없는데 시간은 항상 엄청 빨리 간 느낌..ㅠㅠ 유난히 이번에는 왠지 모르게 의욕도 별로 안 생기고 집중도 잘 안 됐던 것 같다. 타입스크립트도 새로 적용하게 됐고 구현해야할 기능도 훨씬 많아졌는데도 지난 프로젝트를 할 때와 비교하면 현저히 열정이 떨어진 게 느껴져서 스스로도 왜 이럴까 하는 생각이 많이 들었다. 금방 극복할 순 없겠지만 무기력하다고 손 놓고 있지 말고 자꾸 뭐라도 해보려고 노력해야겠다.

그리고 회고를 일주일 단위로 나눠서 쓰니까 초반에는 뭘 했는지 잘 기억이 안 나서 기억을 더듬어서 쓰게 되는 것 같다. 요일별로 나눠서 써볼까 싶기도 한데 매일 쓰려면 힘들 것 같기도 하고... 어떻게 할지 방법을 좀 생각해봐야 할 것 같다.