3시간동안의 과제 테스트를 끝내고

 

주기적으로 데브매칭이 이루어지는데, 작년에는 신청해놓고, 일정이생기는 바람에 응시를 못했었다.

드디어 이번에 한번 응시해보게 되었는데, 나의 난독증이 도져서 과제형인줄 모르고 그냥 열심히 알고리즘 공부하다가 쳤다.

덕분에 나의 평소실력을 검증해볼 기회였다.

 

웹개발자의 본질인 HTML, CSS, JS 만을 다루어, SPA를 요구사항에 맞도록 구현하는 내용이었다.

분명 한번쯤 SPA를 개발해보고자 했었는데, 기어코 한번도 못해보다가 시험으로 처음해본다.

 

근데그렇게 어렵게 느껴지지는 않았다.

핵심은 페이지를 하나로 유지하면서 커스텀한 라우팅 시스템을 만들어야하는 것이었고, 그에 맞춰 화면을 렌더링 시켜주면 되었다.

 

컴포넌트를 만들기위해서 어떻게 동적으로 생성해낼까 고민을 한 30분했던 것 같다.

JSX가 그렇게 고마운 역할을 해주는지, 역시.. 없어봐야 체감한다.

긴 고민끝에 createElement()를 하나씩 해주는건 생산성이 너무 떨어지다고 생각했고,

그렇다고 template literals 를 받아서, 파싱하자니, 이 짧은시간에 내가 JSX를 만들어내야된다? 라는 생각이 들어 다른방법을 생각한 끝에, createElement에서 templete 이라는 것이 있었다.

templete 태그를 만들어서 그 content를 빼내서 쓰면, string그대로 tag를 뽑아낼 수 있었다.

물론다른 아무태그로해도되겠지만, 이런 용도로 나온친구가 아닐까? 싶다

 

이렇게 컴포넌트만드는 문제는 해결했고, 그다음은 라우팅이었다.

url 문자열을 실제로 라우팅하지않고, 변화시키는 메서드가 history.pushState()가 있었다.

location 객체는 실제로 라우팅시켜버리기 때문에, 사용할 수 없었다.

그리고 이어서 이벤트리스너로 window에서 popstate 이벤트를 리스팅하면서, 뒤로가기시에도 SPA렌더링을 해줬어야 했다.

다구현하고보니 어렵지는 않았는데, 익숙하지 않은 webAPI를 다수 사용해서, webAPI를 왼만큼 알고있었다고 생각했는데도, 다시한번 반성하게됬다.

 

그다음은 엘리먼트들에 이벤트를 다라주는 일이었다.

기본 html 태그의 속성 onclick 에 함수를 넣어주기위해서는, window객체에 추가해줘야했는데, 엄청간단해보이긴 하지만 왠지 아닌거같다는 생각에, 비슷한 방법이긴하지만, body에 전역 이벤트를 주고, 이벤트 위임을 통해서 클릭이벤트를 달아주었다.

그런데 지금 생각해보니, 이렇게 하는건 컴포넌트를 각각 생성할때마다 동적으로 함수를 생성할 수 도없어서 차라리 window객체에 추가해서 string으로 사용했으면 좋았을 것 같다.

 

나머지는 fetch를 통해서 json데이터를 파싱해오고, localStorage에 저장한후에, 이것저것 동작한것들을 재방문을 하더라도 유지시키는 것이었는데, 여기까지하고 이후로는 구현하지못했다. 시간이없어서...

 

처음에 SPA를 구현하는데 시간을 1시간 넘께 할애해서, 정작 문제를 풀 시간이 별로없엇던점이 아쉽고,

또한번 자극을받게되는 계기가 된거같아서 좋다.

이때까지 외주, 항해 를하면서 구현과 react, 서버 관련된 공부만을 주구장창했는데, 이번 시험을 통해서 진짜 웹 개발자라면 갖춰야할 자질이 무엇인가를 생각해보게 된다.