[7팀 최용훈] Chapter 1-1. 프레임워크 없이 SPA 만들기

by yhun9407312025. 7. 5.

과제 피드백

안녕하세요 최용훈님, 과제 수고하셨습니다. 이번 과제는 프레임워크 없이 순수 JavaScript로 복잡한 SPA를 구현하면서, 현대 프레임워크들이 해결하는 문제들을 직접 경험해보는 것이 목표였습니다.

각 파일들이 너무 커지지 않도록 역할별로 책임을 나누고 폴더와 파일을 분리를 열심히 나눠준 부분은 참 잘했습니다. 하나의 파일이 너무 커지고 책임이 많아진다면 관리를 하기 어려울테니까요.

현재 코드에서는 안 써도 될 코드들 가령 render()와 같은 부분들을 자동화 할 수 있도로 코드의 책임을 안쪽으로 위임할 부분과 꼭 적어야하만 하는 상태, 템플릿, 이벤트 등을 분리하는 작업과 현재 역할과 계층으로 분리해둔 것과는 별개로 Product, Main등 Route별로, 화면별로, 데이터 별로도 모아서 관리할 수 있도록 구조를 만들어보는 것까지도 목표로 남은 주차들 잘 진행해보시기 바랍니다.

Q) 간만에 바닐라로 코드를 작성하다 보니, 디렉토리 구성과 함수 분리에 시간 투자를 하지 못했습니다.

전반적으로 시간에 쫓기면서 기능 구현을 하다보니, 스스로의 코드를 찾아서 수정하는 것 조차 버겁다는 느낌이 들었습니다.. 앞으로 초기 프로젝트 설계 관점에서 기본적으로 확립할 방향과 리팩토링 진행 시, 최소한의 방향성에 대하여 피드백 부탁드립니다...!

=> 우리가 만들고자 하는 과정에 이미 정답지가 있답니다 바로 React죠! 스스로 생각을 해보다가 막히게 되면 한번 그냥 interface나 모양, 구조들을 그냥 한번 따라가보세요. 왜 이렇게 만들었을까? 하면서 그 배경을 따라가다 보면 얻을 수 있는게 많을 거에요. 그간 10년간의 FE들의 시행착오의 집약체이니까요.

=> 하지만 또 VDOM, 이벤트 델리케이트, hook은 상당히 추상화 기능이 깊은게 있다보니 짧은 시간 SPA를 만들어 보기에 이걸 다 만들어내기는 부담스러울수도 있죠. 그럴때는 Vue등에서 사용되는 Signal을 참고해보는 것도 좋겠습니다. React가 아닌 프레임워크는 전부 Signal을 기반으로 하고 있으니까요.

=> 나머지 Router나 기타 형태들은 npm에서 가장 많이 쓰이는 라이브러리에서 특히나 사용자에게 제공하는 interface를 유지하면서 이걸 어떻게 만들 수 있을까? 이렇게 한번 생각해보시면 좋겠습니다.

Q) 이벤트 분리와 등록/해제 시점에 대해 피드백 부탁드립니다. 렌더 함수가 돌때마다 렌더 함수의 시작, 끝에 해제/등록을 진행헀지만, 핸들러 함수가 많아질 수록, 혼란스러움이 커지는 것 같습니다...

=> 이렇게 열고 닫고 하는 식의 것들이 참 많죠. 이런한 경우에는 cleanup 함수로 반환하는 방식을 자주 사용하곤 합니다. useEffect를 한번 떠올려 보세요.

function useEventListener(target, fn, options) { target.addEventListener(fn, options) return () => target.removeEventListenr(fn, options) }

와 같이 만들어 둔다면 기존에 있던 내용이 뭐든지 상관없이 다음과 같이 사용할 수 있습니다.

const cleanup = useEventListener(window, "click", () => {})

cleanup() // 을 호출하면 해제 가능.

그렇다면 이게

const cleanups = [ useEventListener(window, "click", ...) useEventListener(window, "click", ...) useEventListener(window, "click", ...) useEventListener(window, "click", ...) ]

cleanups.forEach(fn => fn()) 이런 방식이거나 심지어 이것 또한 등록하고 해제하는 것을 cleanup 방식으로 만들 수 있겠죠.

위와 같이 해야할 동작을 미리 기술하고 함수로 리턴하여 lazy하게 사용할 수 있도록 만드는 방법들은 js를 잘 쓰는 자주 쓰이는 기법중에 하나니 잘 응용할 수 있으면 좋겠네요.

좋은 경험이 되었기를 바랍니다. 2주차도 화이팅입니다. 수고하셨습니다.

항해플러스 프론트엔드

yhun940731 님의 상세페이지 ＞ [7팀 최용훈] Chapter 1-1. 프레임워크 없이 SPA 만들기