일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 테스트 코드
- 백준
- webGPU
- frontend
- 항해
- 알고리즘
- 프론트엔드
- 리뷰
- 항해99
- 항해 플러스 프론트엔드
- rust
- wil
- naver
- 성능최적화
- 항해플러스
- 개발공부
- 항해 플러스
- React Query
- typescript
- 보안
- 성장일지
- 분기 회고
- 자바스크립트
- React
- 개발자
- FE
- javascript
- 회고
- GPU
- 개발 공부
- Today
- Total
목록항해 플러스 프론트엔드 (2)
느릿늘있
항해 플러스를 진행하면서 메모이제이션을 구현해보는 미션을 받았습니다. 객체를 비교함에 있어서도 얕은 복사(Shallow Copy), 깊은 복사(Deep Copy)와 마찬가지로 얕은 비교(Sallow Equals), 깊은 비교(Deep Equals)라는 용어를 사용한다는 것도 이번 과제을 진행하면서 처음 알게 되었는데요. 그런데 두 개념을 이해함에 있어서 깊이(Depth)라는 키워드가 약간 다르게 쓰이는 것 같아서 이번 기회에 깔끔하게 정리해보겠습니다. 보통 개발을 바닥부터 시작하게 되면 저처럼 얕은 복사와 깊은 복사에 대해서 먼저 접하게 되는데요. 제 기준으로는 비교에 대해서 먼저 짚고 넘어가는 게 이해하기가 더 수월하다고 생각이 듭니다! 그래서 비교에 대해서 먼저 정의를 해보겠습니다. 정말 간단한데요..
Q1. 과제 이번주 과제의 주제는 React Hooks 였습니다. 회사에서 class 기반으로 개발을 하다보니(Angular) hook을 쓸 일이 없었는데 이번에 확실하게 개념을 잡을 수 있었습니다. hook도 그 근본은 class이다보니 이해하는 데 큰 어려움은 없었습니다. 그래서인지 심화 과제도 hook 그 자체보다는 메모이제이션과 관심사 분리가 주된 내용이었습니다.Q2. 시도 가장 기억에 남는 시도는 useRef를 useState로 구현하는 부분이었습니다.Q3. 문제점 머리 속에 useRef는 리랜더링 되지 않는 값, useState는 리랜더링이 필요한 값이라고 주입식으로 외우다 보니 useRef를 useState를 써서 구현하라는 요구 사항이 처음에는 이해가 되지를 않았습니다. 그러나 잘 생..