[TIL : 230525] - 1일

🌊 TIL : 2023년 5월 25일  

 

오늘 한 것

• 과제 실습으로 나온 story book 으로 컴포넌트를 제작
• react hook 복습 

 

 

 

잘한 점

 

상황

간략한 상황 설명

- 솔로프로젝트 리팩토링을 하며 공통 컴포넌트를 분리하며 storybook을 제작해보았다.

 

액션

 

Alert 오류

- 두 컴포넌트를 공통으로 분리하였는데, 자꾸 오류가 발생하였다. 분명 방금 전 까지만 해도 괜찮았었는데, FilterButton 컴포넌트를 제작한 후로 작동되지 않아 코드에 문제가 있는 것은 아니라고 생각하였다. 검색해보니 React에서 undefined를 반환하고 있어 생긴 문제였다. Alert의 코드는 변경하지 않았기 때문에 다른 이상이 있을 거라 생각하지 않아 그저 새로 작성한 Alert.stories.js 파일만을 고치려고 노력하였다. 왜냐면 Storybook에서만 나오는 에러였으며 일반 리액트 서버에선 전혀 이상을 발견할 수 없었기 때문이다. 

하지만 Alert이 반환하는 것이 undefined라는 것에 의문을 갖다가 Alert 컴포넌트를 살펴보다 문제를 알 수 있었다.

 

export default function Alert({ type, name }) {
  const DetailComponent = DetailComponents[type] 

  return (
    <section className={styles.container}>
      <DetailComponent name={name} />
    </section>
  );
}

 

해당 코드에서 const DetailComponent = DetailComponents[type]을 보고 눈치챘다. Alert 컴포넌트를 사용하고 있는 부분 모두 내가 type을 지정해두었는데, storybook에선 select로 type을 선택할 수 있으니 type값이 지정이 안 되어 undefined가 되는 것이었다.

 

storybook select

그러니까 내가 선택해둔 type이 아닌 'Choose option'이 선택되어 렌더링이 안되고 있던 것이었다. 

 

export const Default = {
  argTypes: {
    type: {
      options: ['data', 'bookmark', 'content', 'error'],
      control: {
        type: 'select',
      },
    },
  },
  // 기본값 추가 
  args: {
    type: 'data',
  },
};

 

그리하여 Alert.stories.js에서 기본값(초기값)을 지정해두어 오류를 수정하였다.

 

칭찬

오류를 찾아 해결한 나 칭찬해~

 

 

배운 점

 

배움

- 오늘 storybook에서 args와 argTypes의 차이에 대해 알게 되었다. 

- 공통 컴포넌트 관리하는 법에 대해 배우게 되었다.

 

오늘 배움의 의미

- storybook은 현업에서 많이 쓰이는 라이브러리로 익혀두면 좋을 것이라 생각하였다. 하지만 sec3에서 배울 땐 너무나 복잡해보이고 자신 없어서 리액트 조금 더 공부하고 배워야지.. 하고 미루었는데 오늘 기회가 되어 다시 공부하게 되었다.

- 나름 공통된 컴포넌트를 잘 관리하고 있었다 생각하였는데 생각해보니 더욱 쪼개어 관리할 수 있게 되었다. 컴포넌트를 어떻게 나누느냐에 따라 작업 속도도 더욱 빨라질 것이라 생각한다. 

 

개선점

 

문제

- 오늘 storybook으로 구현한 사항들이 그렇게 많은 편이 아님에도 정말 오래 걸렸다.

 

원인

-  작업 자체가 오래 걸린 것은 아니고 집중력이 떨어져 자꾸 다른 것을 하게 되었다.

 

해결방법

- 오늘부터 뽀모도로 공부법을 하여 25분 집중, 5분 휴식을 반복해볼 생각이다.

 

 

 

 

그 외

오늘 부트캠프에서 부트캠프 수료하신 선배님이 조언을 해주시는 시간이 있었는데 TIL 방식에 대해 추천해주셔서 한 번 수정해보았다.

예전에 블로깅을 조금 열심히 하다가 요즘은 TIL만 부랴부랴 적고, 그것도 조금 대충 적는 경향이 생겼는데.. 사실 좋아하는 개발유튜버분이 블로깅에 모두 기록해두면서 공부하기에는 우리가 공부해야할 것이 너무 많다. 꼭 필요한, 필수의 것만 기록하자고 하셔서 굉장히 공감하여 의도적으로 줄인 것도 있었다. 하지만 적어나가는 것이 생각 정리를 할 때 좋은 방법인 것 같아 다시 한 번 열심히 적어보도록 해야겠다.

 

또, 우연히 SNS에서 100일동안 개발 공부해둔 것을 아주 간단하게 하루하루 기록해두신 것을 보았다. 내가 부트캠프를 진행하며 공부에만 집중했냐고 하기엔 솔직히 양심이 많이 찔린다. 블로깅도 하겠지만 나도 100일 기록을 짧게나마 해서 목표 의식을 다시 세워야겠다.

 

마지막으로, section4가 마무리 되면 부트캠프 일정도 끝.. 부트캠프 시작하면 먹고사는 문제 때문에 빠른 취업을 희망했는데 공부하다보니 더더더욱 공부가 하고싶었다. 나는 지금 React에서 허덕이고 있지만, TypeScript와 Next.js, 알고리즘, 컴퓨터 지식까지 익히고 싶었다. 그러다보니 맘이 초조해졌는데 코드를 볼 때 이해는 해도 스스로 작성하는 것이 잘 되지 않아 자신감이 뚝 떨어져있는 상태였기 때문이다. 다른 사람들도 나처럼 이럴까.. 내가 재능이 많이 없어서 헤매는 거 아닐까. 라는 고민도 많이 하고 있던 것을 동생에게 고민을 얘기하였다. 연년생이지만 어릴 땐 한 없이 돌봐줘야하는 어린 동생으로만 생각해왔는데, 지금은 훌륭히 취업도 하고 멋지게 살아가고 있는 동생이 나한테 해준 말이 너무 인상 깊어서 힘이 났다. 현재 30대 평균 수명이 130세까지 산다는 말이 있다고, 아직 100년이나 남았는데 공부 하고싶은 것 하고, 취업 밀리는거 걱정하지 말라고. 그 말에 다시 힘을 얻어 다시 한 번 걸을 힘을 내게 되었다. 나 자신 빠이팅!!