👨‍💻 사건

MySQL 쿼리문을 통하여, filter 처리 ( 각 항목별 오름차순,내림차순 정리 ) 하려고 하였다.

우선, 내가 필터를 적용시키기위해 한 생각이다.

1. 가장 첫페이지를 로드할때는 현재능력치(ca) 가 높은순으로 페이지 로드를 한다.

2. 항목을 클릭하면, filter를 적용할 필드의 스트링 값을 쿼리문에 포함하고, 오름차순으로 정리할지 내림차순으로 정리할지 결정한다. (초기는 DESC 이고, 클릭을 하면, ASC 로 정렬 )

3. 원하는 페이지를 로딩한다.

조건문을 활용하여, 원하는 쿼리문을 적용시킨다.
또한 'Date of birth' 와 'Values_column' 처럼 특수문자나 띄어쓰기를 한 쿼리는 따로 예외처리를 해주어야한다.

✅ 해결

순서대로 처리를 하여, 문제를 해결하였다.

먼저 Seach page 의 코드이다.

// useState 를 통하여, 상태관리
const [verify, setVerify] = useState(initialVerify)
const [filter, setFilter] = useState(initialFilter)

//현재 filter의 값과, 클릭한 filter의 값이 일치하면 verify 값을 전환한다. 그후, filter 값을 선택한 필터값으로 업데이트한다.
const handleFilterChange = (newFilter) => {
  if (filter === newFilter) {
    setVerify(!verify)
  } else {
    setVerify(true)
  }
  setFilter(newFilter)
}

// 각 항목을 클릭했을경우, 위의 함수를 실행시킨다.
<th onClick={() => handleFilterChange('ca')}>현재능력</th>
<th onClick={() => handleFilterChange('pa_converted')}>최대 잠재능력</th>
<th onClick={() => handleFilterChange('Date of birth')}>생일</th>
<th onClick={() => handleFilterChange('Name')}>이름</th>
<th onClick={() => handleFilterChange('Values_column')}>가치</th>
<th onClick={() => handleFilterChange('Salary')}>급여</th>

이제 이렇게 상태관리한 값을 클릭할때마다, useEffect 로 리패칭을 한다.

아래는 쿼리문을 작성한 코드이다.(API)

// filter 값이 req 로 넘어온것이 있다면 그대로 사용하고 아닐경우 초기값으로 현재능력치(ca) 값으로 설정한다.
let filter = req.query.filter ? req.query.filter : 'ca'

// verify 값이 true 일 경우에는 내림차순, 아닐경우에는 오름차순으로 세팅한다.
const verify = req.query.verify === 'true' ? 'DESC' : 'ASC'

// 띄어쓰기 혹은 특수문자가 있는 filter의 경우 예외처리를 해준다. 그래야 제대로 쿼리가 작동한다.
if (filter === 'Date of birth' || filter === 'Values_column') {
  filter = `\`${filter}\``
}


const query = `SELECT *, 
// 잠재능력 같은경우, 랜덤포텐이 섞여있어 아래와 같이 예외처리를 해줘야한다.
CASE
  WHEN pa < -10 THEN pa * -2
  WHEN pa < 0 THEN pa * -20
  ELSE pa
END AS pa_converted ,
// Not For Sale 인 선수들의 몸값이 347975206 로 되어있어서, -1 로 만들었다. 
// Search 페이지에서 가치가 -1 인 값은 "Not For Sale" 로 렌더를 하기위해서 -1 로 처리했다. 
// ( 오름,내림 차순도 고려한 판단이다.)
CASE
  WHEN Values_column = 347975206 THEN -1
  ELSE Values_column
  END AS Values_column FROM fm_table ORDER BY ${filter} ${verify} LIMIT ${limit} OFFSET ${offset}`

connection.query(query, (err, result) => { ...

위처럼, 코드를 작성하니 원하는 값에 도출할수있었다.

💭 개선

• 이제, filter 는 적용했으니, input 값에 맞는 선수를 뽑아낼수있도록 설정해봐야겠다.