📷 11월 6일 커피챗
🪄 3주차 과제 회고
- isinit 대신 render 함수 실행 이후에 이벤트 등록을 render 함수 바깥에서 하는 게 좋을 듯
- function으로 다들 작성을 하셨는데, 시간이 되시면 클래스 컴포넌트 형태로도 구현해보시길 권장
- 에러 처리 방식에 대해 질문을 많이 주셨는데, 지금 과제 같은 경우에는 바로 throw를 해도 될 것 같음
- 복잡한 값들은 하위 단에서 처리를 하고, props를 넘긴다는 생각으로 setState처리를 하시면 될 듯. 가능한 App에서 많은 처리를 하지 않도록 하는 것을 권장
- TodoCount 같은 경우에도 count 계산을 TodoCount 안에서만 처리를 해도 좋을 것
- TodoList에서 토글과 삭제 버튼을 구분할 때는 버튼의 태그 네임이나
date-type을 버튼으로 해서 구분하기를 권장.
- 삭선을 긋는 방식의 경우, 토글을 할 때마다 삭선을 긋는 클래스를 추가/삭제를 하는 식으로 구현하면 좋을 듯
- 클래스 형으로 구현할 때에는 init 렌더링 시에 event를 등록하는 함수를 따로 구현해서 실행하면 좋을 것
❓질문
곧 시작하는 개인 프로젝트 또한 이번 과제와 마찬가지로 컴포넌트로 쪼개서 구현해야 하는데, 어떤 기준으로 컴포넌트를 나누는 것이 좋을 지 궁금합니다! 😁 너무 작게 쪼개는 것도, 너무 크게 쪼개는 것도 좋지 않다고 해서 기준점을 명확히 하고 싶습니다
A) state를 기준으로 특정 상태가 변할 때 재렌더링이 너무 많이 일어난다고 판단이 되면 효율성을 고려해서 컴포넌트를 구분하는 편입니다. 너무 작게 컴포넌트를 쪼개는 것도, 너무 안 쪼개는 것도 모두 문제입니다. 사실 컴포넌트를 구분한다는 것이 가독성을 고려한 측면이라 무엇이 정답이라 말할 수 없겠지만, 본인이 판단했을 때 코드가 너무 길어진다 싶으면 구분하는 게 좋아보입니다.
공부와는 별개로, 요즘 화면을 보는 시간이 늘어남에 따라 눈이 너무 아픈데.. ㅠㅠㅠㅠ 멘토님께서는 현직 개발자로서 눈 관리법이 있으신가요?!! 😎
A) 저도 눈 건강이 그리 좋진 않습니다.(어렸을 때부터 눈 안 좋아서 라섹했어요ㅎㅎㅎ...) 개인 차가 있는지라 특별한 눈 관리법을 말씀드리기가 어렵네요. 보통 다른 분들을 보면 안약을 눈에 넣으시거나 눈을 잠깐 쉬는 방법으로 관리하시는 것 같아요.
앉아만 있으니까 체력이 뚝뚝 떨어지는 느낌이네요 ㅠ 멘토님은 따로 건강관리하시나요??
A) 생존을 위해서 운동을 하는 편입니다.(?) 작년에는 필라테스를 하고, 판교로 이사 후에는 운동을 안하다가 pt를 끊었어요. 그런데 체력이 느는지는 잘 모르겠네요.ㅎㅎㅎ 개인적으로 유산소운동을 할 때 체력이 늘어나는 것 같았어요.
자바스크립트 책을 읽어보고싶은데 추천해주실만한 책 있으신가요?😊
A) 모던 자바스크립트 딥 다이브가 가장 나은 것 같습니다. 자바스크립트 완벽가이드라는 책도 읽어 봤는데 너무 백과사전 느낌이라 좋진 않았던 것 같아요. 모던 자바스크립트 딥 다이브는 스터디용으로 팀원들과 함께 읽어보심이 좋을 것 같습니다.
취업이나 이직할 때 좋은 회사를 고르는 기준이 있을까요!?😃
A) A: 돈(?) 많이 주는 회사가 제일 좋은 회사... 아직 연차가 많지 않아서 큰 회사를 선호하는 편입니다. 연차가 좀 쌓이면 작은 회사라도 연봉을 높여서 높은 자리로 들어갈 수 있겠지만, 저는 아직 그럴만한 연차가 아니라서 큰 회사를 선호하고 있습니다. 개인적으로는 주니어 때는 역량이 엄청 뛰어나지 않은 이상, 회사 규모 나 기술 스택 상 본인의 커리어에 도움이 되는지 생각해서 회사를 고려하면 좋을 것이라고 생각합니다. 특히 개발을 정말 좋아하신다면 SI기업은 지양하는 편이 좋을 것 같아요. 가능하면 서비스를 개발하는 회사를 선택하시는 게 더 좋을 것 같습니다.
다른 회사와 비교했을 때 멘토님이 생각하시는 카카오페이의 장단점이 궁금해요!
A) 일단 야근비가 많이 나오고(?) 최근 복지가 매우 좋아졌습니다. 그리고 동료들도 열정이 넘치고, 일주일 마다 기술 세션을 진행하기도 합니다. 같이 일하는 동료들도 모두 성실하고 친절해서 같이 일하기 좋습니다. 만족도 최상. 단점은...회사가 성장하고 있는 지라 일이 많습니다. 그래서 야근을 하긴 하는데, 야근비를 많이 줘서 크게 불만은 없습니다.
재랜더링을 하고 싶지 않을때 innerHtml을 사용하기도 하는데요, innerHTML을 사용하면 스크립트 XSS이슈가 있는걸로 알고있습니다! 바닐라 자바스크립트에서 재런더링을 하지 않고 특정 돔만 바꾸는것은 가상돔을 이용해야하는걸로 알고 있습니다 다른 방법은 없을까요?
A) 바닐라 자바스크립트의 innerHTML 문제만으로는 재렌더링 문제를 완벽히 막는 방법은 없는 것 같아요. 이 문제를 해결하기 위해 가상 돔을 사용하는 것이라, 직접 가상 돔을 구현하지 않는 이상은 해결이 어려울 것 같습니다.
멘토님은 오류가 발생했을 때 어떤 것부터 확인해 보시나요? 빠르게 원인을 찾는 것에 대한 팁이 있을까요?
A) 모니터링 앱을 사용하고 있습니다. 저희 회사의 경우에는 센트리(Sentry)를 사용하고 있는데, 로그가 다 남겨지기 때문에 다양한 에러 상황과 원인을 모니터링할 수 있습니다. 배포한 이후에 오류가 없어야 하기 때문에, 배포 전에 많은 테스트를 하고 있습니다. 프론트의 경우, 로컬 외에도 빌드한 이후 직접 띄워 보면서 테스트를 하는데, 프론트는 정말 테스트를 많이 해봐야 하는 것 같아요.
react에서 아토믹 디자인으로 컴포넌트를 짜다 보면, atom까지 props를 넘기다며보면 props driling이 많아 지는 경우가 있어 헷갈리는 경우가 가끔있습니다. 그렇다고 상태관리 store에 넘기기에는 너무 비용이 많아 지는것 같고.. 고민이 됩니다..🥲
A) 가능하면 렌더링 비용을 고려해서 state를 분리하는 게 좋을 것 같아요. 예를 들어, 상위 컴포넌트에서 state를 변경하면 props driling되는 모든 컴포넌트가 재렌더링이 되는 문제가 있겠죠. 이런 경우에는 리렌더링을 막을 수 있는 방법을 고려해서 state를 따로 분리해야할 것입니다. 최적화에는 정답이 없기 때문에 이것 저것 해보면서 리렌더링에 영향을 준다면 -> 애토믹(store 등) 그저 한 두단계정도라면 -> props 전달 로 생각해도 좋을 것 같아요.
UID로 리스트의 키를 처리할 때, usememo를 사용하면 UID가 달라질 때마다 재렌더링되는 문제가 있습니다. 이런 경우에는 어떻게 해야할까요?
A) usememo도 두번째인자를 통해 렌더링 시점을 선택할 수 있습니다. 개인적으로는 memo를 현업에서 쓰는 경우가 많지는 않은 것 같습니다. canvas 같은 경우에는 memo를 쓰긴 하는데, 다른 상황에서는 굳이 memo를 쓸 필요까지는 없었던 것 같아요. memo 같은 경우에는 children이 메모가 되지 않는 이슈가 있기 때문에 굳이 사용해야 할 필요가 없으면 사용하지 않아도 될 것 같습니다. react에서는 꼭 사용할 필요가 없는 옵션의 경우에는 사용하지 않아도 된다는 관점으로 접근하는 것이 좋습니다. 참고하면 좋은 글 https://yrnana.dev/post/2021-10-25-when-should-you-not-use-react.memo