과제 체크포인트
배포 링크
https://realstone2.github.io/front_6th_chapter1-2/
기본과제
가상돔을 기반으로 렌더링하기
- createxNode 함수를 이용하여 xNode를 만든다.
- normalizexNode 함수를 이용하여 xNode를 정규화한다.
- createElement 함수를 이용하여 xNode를 실제 DOM으로 만든다.
- 결과적으로, JSX를 실제 DOM으로 변환할 수 있도록 만들었다.
이벤트 위임
- 노드를 생성할 때 이벤트를 직접 등록하는게 아니라 이벤트 위임 방식으로 등록해야 한다
- 동적으로 추가된 요소에도 이벤트가 정상적으로 작동해야 한다
- 이벤트 핸들러가 제거되면 더 이상 호출되지 않아야 한다
심화 과제
Diff 알고리즘 구현
- 초기 렌더링이 올바르게 수행되어야 한다
- diff 알고리즘을 통해 변경된 부분만 업데이트해야 한다
- 새로운 요소를 추가하고 불필요한 요소를 제거해야 한다
- 요소의 속성만 변경되었을 때 요소를 재사용해야 한다
- 요소의 타입이 변경되었을 때 새로운 요소를 생성해야 한다
과제 셀프회고
1주차 과제때도 그렇고 2주차 과제도 그렇고, 구현해야 되는 기능은 구현을 완료했으나, e2e테스트에서 통과를 못한 점이 많이 아쉽습니다. 스스로도 구현할 자신이 있었고, 내용도 이해했다고 생각해서 더 아쉬웠던 것 같습니다. 1주차때 테스트코드를 다 완성하고 돌리다가 실패했던 경험으로, 이번에는 유닛테스트를 중간에 계속 돌려가면서 기능 구현을 했으나, e2e테스트에서 실패하는거보고 너무 좌절이었습니다. 3주차 과제때는 어떻게 접근하면 좋을지 고민이 됩니다.
기술적 성장
jsx가 어떻게 렌더링이 되고 attribute를 어떤 방식으로 등록하는지 직접 구현하면서 습득하였습니다. react에서 매칭시켜놓은 이벤트, 프로퍼티, attribute, class, style 등의 구분을 명확히 이해할 수 있게 되었습니다.
코드 품질
이벤트 위임방식의 구조를 클로저를 활용하여 하나의 인스턴스로 구성한 부분이 깔끔하게 구성되었다고 생각하였습니다.
노드간의 파싱하면서 복잡함이 크니까 타입스크립트로 작성하면서 정확히 타입을 추론해서 하고자 했는데, 장점도 있지만 normalize createElement 등등을 거치면서 의도치 않은 타입을 발생시키고 오히려 디버깅을 어렵게 만든 요소였던 것 같기도 합니다.
학습 효과 분석
이번 과제에서 가장 크게 배운건 실행력, 섬세함, 명확성 입니다. 과제 초반에 1주차에 비해 너무 정답이 정해져있다보니 내가 어떤 것을 얻을 수 있을까 고민하면서 실행자체를 제대로 못하고 있었습니다. 하지만 같은팀 준형님은 과제를 진작에 끝내고, suspense? 비동기 노드들은 어떻게 동작할까 등 관련된 다양한 고민들을 하셨습니다. 이 모습을 보고 준형님의 실행력을 본받아야겠다 느끼고 얼른 실행을 해야지 실패도 빨리 겪고 더 좋은 방향으로 학습을 할 수 있겠구나 느꼈습니다.
이번에 너무 즉흥적으로 코테풀듯이 하나의 함수에만 집중하면서 테스트코드를 통과하며 수행했는데, 그러다보니 유닛테스트는 다 통과하더라도 전체적으로 합쳐졌을 때 올바르게 동작하지 못하였습니다. 각 함수간의 흐름 및 각 함수가 어떤것을 실행하는지 명확하게 구분짓고 특히 updateElement쪽 함수를 섬세하게 설계해서 진행했더라면 하는 아쉬움이 컸던 것 같습니다.
renderElement에서 updateElement를 실행안하고 기본과제로만 돌면 e2e테스트가 통과하긴 합니다!
과제 피드백
1주차 과제가 다양한 방법을 고려해보며 설계해보고 구현해보는 과정이었는데, 2주차 과제는 그에 비해서 너무 정답이 주어진 느낌이고, 테스트 코드 정답에 맞게 알고리즘을 풀어야되는 느낌이라 과제를 하면서 어떤것을 배워야할지 방황을 많이 했습니다. 어렵더라도 좀 더 고민할 수 있는 과제면 더 재밌을 것 같습니다.
리뷰 받고 싶은 내용
-
함수에서 해야되는 역할과 테스트 코드가 명확히 적혀있다보니 과제를 하면서 어떤것을 얻어야할까 고민을 많이 했던 것 같습니다. 이부분에 대해서 코치님의 조언을 들어보고 싶습니다!
-
1주차때도 그렇고 스스로 구현하고자 했던 내용을 다 구현했으나 완성도가 떨어지는 것 같습니다. 이번주차는 특히 유닛테스트는 통과했는데 e2e는 실패하는 등 큰숲을 못본걸까? 라는 생각도 들었습니다. 특히 AI와 함께 바이브코딩을 하다보면 큰숲을 못보고 지금 앞에있는 문제만 집중하게되는 경향도 있는 것 같습니다. 이런 부분에 있어서 코치님의 의견과 조언을 받아보고 싶습니다!
-
1,2 내용에 기반해서 3주차때는 어떤 마인드로 과제에 접근해보는게 좋을지 조언받아보고 싶습니다!
-
1주차때는 class를 사용하여 이벤트 인스턴스를 구현해보고, 이번주차에서는 클로저를 활용하여 이벤트 인스턴스를 구현해보았습니다. 둘다 사용해봤을 때 비슷하면서도 함수 방식이 좀 더 익숙하다보니 더 편하다는 생각을 하였습니다. 자바스크립트에서 class 자체를 abstract 메소드나 나 상속개념이 없다면 사용할 이유가 없다고 생각해도 될까요?
-
마지막으로.. e2e실패하는 이유가 updateElement 구현이 누락된건지 다른 코드 어떤 부분이 누락된건지 피드백 받고싶습니다!
과제 피드백
진석님 이번주도 고생 많으셨습니다~ 아쉽게 E2E에 있어서 테스트가 실패하기도 했고, 회고를 읽어보니 여러 아쉬움이 느껴지는 부분이 있는 것 같은데요 ㅠㅠ
첫 번째 질문을 주신 부분과 이어지는 내용인데요. 결국 저희가 해결해야 하는 문제의 형태는 동일하지만 그 문제를 해결할 수 있는 방법은 여러가지 인데 과제의 특성상 테스트를 통해 해당 모습을 어쩔수 없이 제한을 걸게 되는 것 같아요. 그럼에도 이미 아시겠지만, 꼭 그 문제를 그 방법으로 구현해야만 반드시 해결할 수 있는게 아니듯이 관통하는 가장 중요한 문제해결 핵심은 뭔지 고민을 하는게 제일 중요하지 않을까 싶습니다. (테스트를 통과하지 못했더라도 그 부분을 명확하게 챙길 수 있다면 충분히 의미있어다고 생각해요!)
앞으로 과제를 진행하는데 있어서도 명확한 채점 기준 또는 테스트가 있는 경우가 많을텐데요. 이 테스트를 통과시켜야해 라는 관점으로 접근하는것도 좋지만, 좀 더 큰 그림을 바라보고 접근하면 좋을것 같아요. 대신! 바이브 코딩을 하다라도 너~무 큰 그림을 보기보다는 감당할 수 있는(한번에 검증할 수 있는) 범위의 큰그림에서요.
너무 넓은 범위의 작업을 맡기다보면 퀄리티가 떨어지는 부분도 있고 저희가 검증하기도 어려워지니 계속해서 다시 고치다보면 시간이 더 들어가는 경우들도 많이 있어서요. 내가 구현하고자 하는 부분의 계획을 명확하게 하고 AI에게 그 계획을 통해 구현하게 하는 접근방식도 함께 사용해보시면 좋을것 같습니다!
아! 그리고 테스트에 있어서도 CI에 깨지는 부분이 명확하게 드러나는 것 같은데요.
직접 실행을 해보고 내용을 디버깅해보면 좋을것 같은데, 제가 채점을 해야하는 인원이 너무 많다보니..일일히 확인하기 어렵다는 점 양해해주시면 감사하겠습니다. 추후에 더 고민해보시고 찾기 어려우시다면 개인적으로 연락주셔서 함께 고민해보는것도 방법일 것 같아요.
그리고 '자바스크립트에서 class 자체를 abstract 메소드나 나 상속개념이 없다면 사용할 이유가 없다고 생각해도 될까요?'라고 질문을 주셨는데요. 이 부분은 비슷한 기능을 각각 구현해서 사용할 수 있는 관점에서 적절하게 선택해서 사용하면 되는 관점이지만, 가독성 관점이나 추상화, 캡슐화등의 관점에서 오는 장점도 명확해서요! 사용 목적에 대해서는 명확하게 하고 장점과 단점을 공부해보는건 큰 도움이 될 것 같습니다.
고생하셨고 다음주도 화이팅이에요 진석님!