5월 5주차 회고: 웹 컴포넌트
2024-06-03
이번 주에 한 것
- 유닛테스트에 대해 공부하고 과제에 적용 (jest 사용)
- 숫자 업앤다운 게임 콘솔 view에서 웹 브라우저로 전환 🔗 링크
- 목표 설정
- 브라우저 DOM, Event, Event Loop, Critical Rendering Path 등 공부
지난 주 개선점
어떤 개발자가 되고 싶은지, 어떤 환경에 들어가고 싶은지, 내가 부족한 점이 무엇이고 어떻게 채워나갈 것인지 고민할 것
세 개 중에 마지막 것만 했다. 내가 관심있는 회사들의 채용공고, 블로그, 면접 후기 같은 것을 보고 객관적으로 내가 필요한 경험이 무엇인지 찾고자 했다.
아래 세 개가 내가 뽑아낸 것이다. 2, 3번은 이전 회사에서의 경험으로도 어필할 수 있겠지만 조금 더 자신있게 나 이런 사람이에요! 말할 수 있도록 조금 더 경험을 쌓으면 좋겠다고 생각했다.
- 웹 성능 최적화 경험
- 고객 입장에서 문제를 정의하고 해결
- 고객 관점의 사고 & 좋은 UI/UX 높은 가치
근데 이것들을 채우는 방법을 찾아내는데에서 막혔고 멘토님께 도움을 요청했다. 저것을 한 번에 채우려하지 말고 작게 빠르게 채울 수 있는 방법을 찾아보면 좋겠다고 해주셨다. 가장 간단하게 블로그를 만들어보는게 어떻냐고도 말해주시고 본인이 생각하기에 불편한 것들을 찾아서 조금씩 만들어보면 좋지 않을까 얘기해주셨다! 그래서 다음주부터는 블로그 만들어보려고 한다. ☺️
고민한 부분
숫자 업앤다운 과제를 일단 무식하게 기능이 동작하게 짜고 코드를 살펴봤을 때, 코드를 알아보기 어렵고 무슨 내용인지 알기 어렵다는 문제가 있었다 (링크). 리팩터링하려고 살펴보니 컴포넌트마다 공통적으로 필요한 데이터와 행위가 있었다.
- HTML 템플릿 데이터
- 템플릿을 부모에 innerHTML로 넣는 행위
- 해당 컴포넌트 내부에 필요한 이벤트 리스너를 추가하는 행위
그래서 class로 추상화를 했다.
결과적으로 컴포넌트로 분리함으로써 알아보기 좋아졌다!
이렇게 하고 이 방식이 괜찮은가 싶어 구글에 검색을 해보니 이렇게 class로 component를 추상화한 예시가 많아 내가 틀리진 않았구나 알게되었다. 그리고 이 방식에서 더 나아가서 리액트와 비슷한 동작을 하도록 만들 수 있다는 것도 알게 되었다!
- Vanilla Javascript로 웹 컴포넌트 만들기 ⇒ 홀리해짐..
추가로 멘토님께 받은 피드백은 이 컴포넌트 class들의 부모 class를 만들어 필요한 프로퍼티나 메서드의 누락을 방지하는 게 좋지 않을까? 라는 것도 있었다. 이 부분은 다음주에 더 살펴보려고 한다~
잘한 것
- 컨디션 회복해서 매일 꾸준히 시간 할당해서 공부한 것!
- 매일 공부한 내용, 생각들을 기록한 것. 틈틈히 기록하다보면 내가 원래 하고자했던 주제에 벗어났을 때 빠르게 제자리로 돌아올 수 있었다. 이번주를 돌아보는 데에 좋은 자료가 되었다
부족하다고 느낀 점과 개선점
- 이번주는 만족스럽게 공부해서.. 요 템포를 쭉 끌고 나가는 게 과제가 되지 않을까!
- 기록 꾸준히 하기~
다음주 계획
- 날씨 앱 만들기 과제
- 자바스크립트 총정리 (헷갈리고 잘 대답 못했던 거 위주로)
- 이전 과제 개선
- 블로그 플젝 시작