Facts
- 로이드의 리액트 강의를 들었다.(2시간)
- 페이먼츠 미션 중 카드를 추가할 때 사용되는 컴포넌트를 모두 만들었다. (5시간 30분)
Feelings & Findings
로이드의 리액트 강의를 들었다
리액트 공식 문서 중 state와 생명 주기 챕터로 2시간 강의를 들었다. 로이드는 공식 문서의 한 글자 한 글자에 의미를 두고 읽으신다. 아무 생각 없이 쭉 읽고 이해됐다고 넘어간 나의 공부 방법이 잘못되었다는 것을 알게 되었다. 그리고 공식 문서도 잘못된 문장이 많이 있다는 것도 새로 알게 되었다. 아는 만큼 보이는 것 같다.
가장 충격적이었던 것은 setState가 비동기라는 것이었다. setState는 비동기인 것을 알고는 있었는데, 왜 비동기가 될 수 밖에 없는지에 대한 이유가 충격적이었다. 조금만 생각해봐도 알 수 있는 것인데 생각을 하지 않았었다. 만약 1초 마다 100개의 컴포넌트에서 setState가 발생한다고 가정해볼 때, setState가 동기적으로 실행되면 첫 번째의 setState => state 변경 => 컴포넌트 랜더링 => props의 변화가 있는 자식 컴포넌트 랜더링 등의 과정을 거칠 것이다. 이것을 100번 하게 되면 생각만 해도 끔찍하다. 그렇기 때문에 리액트에서 setState를 사용하면 자신들의 queue에 쌓고, 일정 주기에 따라 queue에 모인 것들을 실행시키면서 한 번에 처리하는 것이다. 그렇게 하면 성능을 챙길 수 있게 된다.
그래서 이전 state와 연관되어서 바뀌어야 한다면 ex) state.count + 1 함수형으로 전달하면 된다고 한다. 아직 사용해본 적은 없지만 곧 사용할 일이 생길 것 같다.
로이드의 강의를 들을 때마다 정말 많은 것을 생각하는 것 같다. 그래서 로이드의 패스트캠퍼스 강의도 수강하고 싶다는 생각이 자꾸 든다. 하지만 시간이 없기 때문에 듣는다면 방학 때 듣을 것 같다.
페이먼츠 미션 중 카드를 추가할 때 사용되는 컴포넌트를 모두 만들었다.
드디어 컴포넌트를 모두 만들었다. 오늘은 가장 어렵다고 생각되었던 카드 번호와 카드 만료일 컴포넌트를 도전했는데, 생각보다 엄청 간단했다. 부모 요소에 flex하고 각각의 input에 width와 padding만 조금 조절하니까 완성이 되었다.
오히려 복병은 question mark였다. CVC를 입력하는 곳에 ? 표시가 있고 ?을 hover하면 말풍선이 나오면서 CVC의 위치를 알려주도록 구현하기로 했었는데, 이 말풍선 만드는 것이 꽤나 까다로웠다. 엄청난 고생을 했지만 결국 구글링하다가 발견한 말풍선 만들어주는 사이트에서 받아서 사용하게 되었다. 그래도 어떤식으로 말풍선이 만들어지는지 알 수 있어서 좋은 기회였다.
오늘은 컴포넌트를 모두 만들었기 때문에 오래 하지 않고 끝냈다. 내일부터 힘내서 기능 구현을 하기로 했기 때문이다. 기능 구현 자체는 그렇게 어렵지 않을 것으로 예상된다. 예상이 일치했던 적이 없어서 어떻게 될지는 모르겠지만 괜찮을 것이라고 생각한다. 컴포넌트를 모두 만들었으니 이제 리액트의 컨셉대로 조립만 하면 되는데, 조금은 설렌다.
로또 미션을 할 땐 기능 구현과 컴포넌트 구현을 동시에 해서 리액트의 컴포넌트의 재사용성이라는 의미가 잘 와닿지 않았었는데, 이번에는 벌써부터 컴포넌트를 만들 때 다른 컴포넌트를 재사용하기도 해서 재사용이라는 말이 와닿고 있다. 그래서 이 컴포넌트들을 원하는 곳에 붙이기만 하고, state와 props만 부여해주면 완성될 것이고, 그렇게 쉽게 완성이 되면 희열을 느낄 수 있을 것 같다. 내일이 기대된다.
오늘은 공부를 생각보다 많이 하지는 못해서 살짝 아쉽다. 번아웃은 아닌 것 같지만 살짝 지치는 것 같긴 하다. 잠을 못 자서 그런 것일수도 있다. 예전에는 쉴 때 잠깐 유튜브를 보다가 질려서 코딩하고, 공부하고 했었는데 오늘은 왠지 계속 쉬고 싶었다. 그래서 미련을 버리고 쉬었다. 그래도 자기 전 30분 ~ 1시간은 책을 읽는다는 계획을 세웠으니 책은 읽으려고 한다.
Plans
- 페이먼츠 미션 기능 구현
- 1시간 책 읽기
