.png)
프로그래머스 데브 매칭
한 주동안 데브 매칭을 준비했다. 마치고 나니 되게 아쉬웠다.
시간 조금만 더 있으면 잘할 수 있을거 같은데.. 하는 마음이 들었다. 필수 구현사항은 다 한거 같은데 옵션은 대부분 못했다. 3분 정도 남았을 때 떠오른 아이디어가 있었는데 그걸 못했다😭.
시험칠 때에는 문제 푸느라 생각을 못했는데 끝나고 나니 소스를 백업이라도 해둘걸 그랬다. 그리고 연습문제가 큰 도움이 되었다.
프로그래머스에서 2가지 연습 문제를 제공해주었다. 하나는 API 호출로 받은 데이터를 요구사항에 맞게 화면을 구현하는 것이고 또 다른 하나는 SPA을 구현하는 것이다. 모두 바닐라 자바스크립로만 구현해야 하며 어떠한 라이브러리나 프레임워크를 사용하면 안된다.
👍 첫번째 연습문제
문제점
API를 fetch로 호출해서 데이터를 받아왔다. 받아온 데이터를 요구사항에 맞게 innerHTML과 insertAdjacentHTML로 태그를 바로 DOM에 붙여버렸다. 그리고 요소에 해당하는 정보를 data-* 프로퍼티에 주요 정보를 담아두었다. 처음에는 id와 name 정도만 넣어두려고 했는데 타입이나 parent 정보를 담는 등 점점 많아졌다.
데이터를 어떤 객체(또는 배열)에 담아두고 이벤트가 발생하면 그 객체 내에서 필요한 데이터를 가져오거나 수정하고 화면을 바꿔야 하지 않나라는 생각을 했는데 그걸 어떻게 구현해야할지 떠오르지가 않았다.
우선 요구사항에 맞도록 구현은 했지만 대부분의 데이터를 dataSet 객체에 할당하고 받아오는게 좋은 방법은 아닌거 같았다. 컴포넌트를 분리한 것도 엉성한것만 같았다. 그리고 이벤트가 하위로 전달되니 eventListener 내에서 최하위의 요소를 가져오는 것을 막기 위해 pointer-none을 사용했는데 맞는건지 의문이 들었다.
내가 알게 된 것
- DOM으로 직접 접근을 최소화하고 상태 관리를 통해 UI 업데이트하기
- 모듈별로 상태 관리 객체를 만들고 상위 컴포넌트에서 받아온 인자
- 각 컴포넌트간의 의존성 최소화 (두 컴포넌트의 전달이 필요한 경우 한 단계 상위에 컴포넌트를 만들고 콜백 함수를 이용하기)
✌️ 두번째 연습문제
바닐라 자바스크립트만으로 라우팅 처리를 하기 위해 location.pathname으로 분기 처리를 해서 상황에 맞는 페이지 모듈을 호출하도록 하였다. 아직 정리중이므로 알게 된 내용은 차주에 기록해야겠다.
내가 알게 된 것
history.pushState를 이용해서 URL만 업데이트하고 웹 브라우저의 페이지 이동 처리는 방지할 수 있다.
책
-
기초부터 완성까지, 프런트엔드
velog에서 추천글을 보고 읽는 중이다. 절반 정도 읽은 상태인데 챕터들이 프런트엔드 개발자라면 알고 있어야 할 내용들로 구성되어 있고, 설명을 쉽게 해주고 있어서 좋았다. 몰랐던 것은 쉽게 이해할 수 있고 원래 알고 있던건 다시 정리하는 의미로 읽어보기 좋은 책인거 같다. -
프로그래머의 뇌
이 책도 추천받아서 읽어보고 있다. 처음 보는 코드나 내가 예전에 작성한 코드를 다시 볼 때 코드를 분석하고 이해하기 어렵다고 하자 친구가 추천해주었다.
난 저자가 설명하는 세 가지 종류의 부족에 모두 공감한다. 분석중인 오픈소스의 크기가 꽤 커서 스타트포인트부터 흐름을 따라가려하면 특정 모듈을 호출하고 그 안에서 또 다른 모듈을 호출하고 그 모듈들을 또 쫓아가다보면 헷갈리고 흐름을 읽기가 어려웠다.
이렇게 이해가 어려운 코드는 내가 알기 쉽도록 리팩터링을 해보거나 인쇄해서 보는게 도움이 된다고 한다. 또 그래프나 표를 이용해보라고 한다. 그 외에도 공감돼서 웃긴 부분이 종종 있었다.
코딩 테스트를 위한 알고리즘 문제를 많이 풀어봐야 한다는 것도 반복 학습을 통해 LTM에 저장해놓고 실전에서 기억해내기 위함인거 같다.
차주 계획
- 프로그래머스 데브 매칭의 연습 문제를 조금 더 정리해한다. 로컬스토리지를 이용해서 get/set하는 방법과 이벤트가 발생하면 setState 함수가 여러번 발생하는 이유를 찾아봐야겠다.
- 리액트 Hook에 대해 정리한 내용을 마무리해야한다.
