1. CBD 기반 라우터 구현

CBD 라이브러리에서 컴포넌트가 바뀌었을 때, 라우터와 렌더링을 구현해주었다. 각 컴포넌트에서 click 이벤트가 발생하면 그 때의 a 태그의 href 값을 구하여 pushState 메서드로 history를 등록해주고 상태로도 할당해주어 렌더링을 발생시켰다.

즉, signin 클릭해서 click 이벤트 발생하면 history등록, setState로 상태 갱신을 해주었다.

그리고 App 컴포넌트에서는 popstate 이벤트를 등록하여 브라우저의 뒤로가기, 다음 버튼을 클릭했을 때, 해당 path 상태를 window.location.pathname으로 변경시켜줘서 라우터가 변경되면 렌더링 발생하는 기능도 구현하였다.

문제점은 구현을 하다가 작은 부분에서 막혀서 그 작은 부분을 해결하려고 몰두해있었던 점이 문제라고 생각한다. 작은 문제는 근본적인 문제가 아닌 경우가 많은 것 같다. 큰 문제를 해결하면 작은 문제는 알아서 해결될 수 있으니 큰 틀에서 생각하려고 해야겠다.

1. click 이벤트 발생 시 -> pushState 메서드로 history 관리 + setState 메서드로 화면 재렌더링 발생

2. history API 사용 시 -> popstate 이벤트 핸들러 등록하여 setState 메서드로 path 상태를 window.location.pathname로 갱신

popState 시 navigate() 함수 안에서 pushState() 해주고 있어서 더 이상 history API가 제대로 동작하지 않으므로.. 이를 확인하자.

위 두가지 로직이 전부이다.

2. MatchingCards CBD 상태 관리

매칭 카드 알고리즘 구현한 것을 CBD 구조에 맞게 상태로 관리해주었다. CBD 구조가 setState로 상태가 변경되서 렌더링 될 때, App 컴포넌트는 한번만 호출되지만, App 컴포넌트에서 다른 컴포넌트를 그려주는 역할을 하는 domStr() 메서드가 반복 호출 되므로, 이 때, 다른 컴포넌트(클래스)가 new 연산자로 호출되므로 컴포넌트가 새롭게 생성되어 지역 컴포넌트의 상태를 관리해주기가 까다로웠다.

이러한 문제를 해결하기 위해서는 CBD 구조를 개편해야만 했다. 하지만 프로젝트 시간동안에는 힘들것 같아서 상태관리를 App에서만 해주기로 하였다.

App 컴포넌트에서 상태를 등록하고 다른 컴포넌트로 보내줄 때, 아래와 같이 전달해준다.

1
2
3
4
5
${new Page({
  ...this.state,
  navigate: this.navigate.bind(this),
  checkCard: this.checkCard.bind(this),
}).domStr()}

상태를 받는 컴포넌트에서는 아래와 같이 props를 통해 받는다.

1
2
3
4
5
6
${this.props.shuffledNum
.map(
  (num, index) => `
<div class="cards ${
  this.props.openCard[0] === index + 1 || this.props.openCard[1] === index + 1 ? 'opened' : ''
}" data-id="${index + 1}">

단, props에서 받을 때, 메서드를 받게 된다면 this가 꼬일 수 있기 때문에 bind(this)를 사용하여 this를 일치시켜서 보내줘야 한다.

만약 함수정의를 보내주는 것이 아닌 함수 호출값을 보내주고 싶다면 call(this, 인자) 이렇게 전달해줄 수 도 있다.

3. form 형식으로 서버에게 데이터 전송에 대해 알게된 점

서버는 express를 사용하여 구현하였다.

로그인 기능 구현을 위해 form 형식의 input 값을 서버에 axios를 사용하여 보내주었다.

기본적으로 form 형식은 x-www-form-urlencoded 이런 형식의 데이터로 전달된다. 서버는 이런 데이터를 해석하기 위해 파싱을 express.urlencoded({extended:true}) 메서드를 사용한다.

하지만 axios를 사용하면 클라이언트에서 데이터 요청을 json 형식으로 서버에 요청하기 때문에 서로 다른 형식으로 주고 받기 때문에 제대로 된 요청과 응답이 먹히지 않게 되었다.

이러한 문제를 해결하기 위해서 서버에서 express.json()메서드를 사용하여 json 형식의 데이터를 받아 파싱해주도록 하였다.

또한, 서버에서 request를 확인해보면 'content-type': 'application/json'인 것을 확인할 수 있었다.

심지어 axios 홈페이지에서도 json으로 직렬화된 데이터로 요청한다고 나와있다!

이런 부분은 눈으로 읽기는 읽었지만 그 배경에 대해 제대로 이해하지 못한 체로 읽었기 때문이다. 이렇게 하나 하나 배워가다 보면 배경지식도 넓게 쌓여서 새로운 지식을 배울 때에도 두려움이 적어질 것 같다.

소감

이전에 라우터를 구현했던 방법은 상태를 관리하지 않고 했었기 때문에 쉬웠고 상태를 관리하면서 라우터를 구현하는 것은 머리가 복잡해지고 의욕이 떨어졌다.. 그래도 동기들에게 물어보면서 이번 기회에 제대로 알게 된 것 같아 기쁘다.

로그인 구현과 서버에 대해 스스로가 두려움을 느끼고 있는 것 같아 더 머리가 안돌아가는 것 같다.

최대한 이번기회에 로그인 회원가입에 대한 로직과 친숙해져서 다음 프로젝트 때에는 막힘없이 도전해보고 싶다!