Facts
- 네이버 2차 과제 테스트
프로그래머스 - 거리두기
탐색범위가 충분히 작아서 완전 탐색으로 해결했다. 탐색 범위가 배열로 되어 있어서 모든 경우를 체크하느라 힘들었다.
잘한것은 문제의 범위를 판단이 가능해지는 시점까지 좁혀간것이고, 못한것은 중간에 테스트 해야하는 구간을 지나친 것이다. 복잡해지면, 일단 빼서 학습하고 넣든지 하자.
Feelings
네이버 과제 테스트를 봤다. 문제 자체는 평이했다. 프레임워크를 쓰지 못하는 탓에 custom element 를 활용해서 모듈화를 시도했다. 여러가지 대안들을 찾아봤지만, 이것이 제일 모듈화에 좋은 것 같아서 시도했다. 상위 컴포넌트에서 하위 컴포넌트로 데이터가 흐를때는 HTMLElement 의 attribute 를 활용했고, 하위 컴포넌트에서 이벤트가 발생할때는, 커스텀 이벤트로 감싸서 상위 컴포넌트로 버블링 해주었다.
-> 7.11 추가.
위의 방법은 오류가 많다. 자세한 내용은 읽어봐야 겠지만, google guide 에서는 custom element 사이의 데이터 전달에서 attribute 이용시, 원시값만을 전달하는 것을 권장하고 있다.
일단 더 편한 방법이 있다. 상위 컴포넌트에서 자바스크립트로 하위컴포넌트의 prop 을 지정할 수 있고, 이 방식으로 콜백도 지정이 가능하다.
이벤트 버블링을 통해서 데이터 흐름을 양방향으로 만든것이 결정적인 실수였다. 관리가 너무 어려웠다. 데이터는 단방향으로 흘러야 관리가 쉬워지고, 심플해진다. 생각해보니 너무 바보 같았다... ㅜ
이렇게 되면, 인터페이스가 문제인데.. 생성자 함수를 이용해서 prop 을 설정해주는 것이 자연스럽지 않을까? 상위 컴포넌트에서 가져다 쓸때는 생성자 + tag 이름?
심기 일전해서 고양이 사진첩을 다시 한 번 custom element 로 구현해보자. 화이팅!
확실히 리액트를 사용할때보다 많이 번거롭긴 했지만, 못할 정도는 아니었는데, 숙련도가 낮았던 탓에 잔실수가 엄청 많았다. attribute 로 전달될때는 문자열 형식으로 밖에 안된다는 걸 깜빡해서, 많은 시간을 소모했다. 'false' , 'true' 로 전달될 줄이야.. ㅜ
custom element 에서 지원되는 생명주기 콜백의 이름도 헷갈려서 시간을 날려먹었다. 분명 맞게 쓴거 같은데, 결과가 나오지 않아서 계속 콘솔을 찍어봤는데, 그게 패배의 요인이었던 것 같다.
어쨌든 결론은, 광탈 하하.. 써놓고 보니 그냥 노력부족이다. 이번 패배를 크게 성장하는 계기로 삼아야겠다. 오늘 배운것은, 나름 열심히 했다 는 자신에게 이로울게 없다는 것이다. 결과가 나왔을때, 더 할 수 있었던 일들이 떠오르는 것과 나름 열심히 했다는 방어논리가 떠오르는 게 싫다. 주어진 시간에 더 해볼수 있는게 없었다라는 느낌이 들고 싶다.
다행히 기회는 이번뿐은 아니다. 다음번에는 더 철저히 준비하자. 화이팅이다 나.
