[TIL] 2022/01/10 Mon - masonry layout, useParams(), async/await

 

 

 

 

Today I Learned

 

 

오늘은 정기 회의가 있는 날이었는데, 디자인을 크게 수정해야 하는 상황이 됐다.

디자이너분들이 열심히 만들어주셨지만, 모두 적용하고 보니 처음에 기대했던 라인 아트워크와는 거리가 멀어 보였다.

그래서 디자인 수정본이 나오기 전까지 할 수 있는 것들을 하고 있다.

 

 

📌 서버에 퀴즈 결과 및 메인/퀴즈 인트로 페이지 랜딩 방문자 전송하기 

 

백엔드 분들로부터 통계를 위한 추가 정보 요청이 있어서 간단하게 구현했다.

 

axios api 인덱스 파일에 파라미터와 메소드, 경로를 작성한 후 전송할 컴포넌트 안에 임포트하여 연결하였다.

 

방문자 정보는 백에서 받을 때 ip 중복 처리가 되게끔 해주셔서 파라미터나 리퀘스트 바디로 보내는 데이터가 없었고,

퀴즈 결과도 url에 퀴즈 주제와 스코어를 모두 실어서 보내기 때문에 리퀘스트 바디에는 데이터가 들어가지 않았다.

물론 리스폰스로 받는 데이터도 어딘가에 사용되는 건 아니라서 리덕스는 사용하지 않았다.

 

/* Main.js, QuizIntro.js */

/* 생략 */

useEffect(() => {
  async function submitVisitors() {
    try {
      const result = await mainApi.countVisitors()
    } catch (error) {
      console.log('방문자 전송 문제 발생', error.response)
    }
  }
  submitVisitors()
}, [])

/* 생략 */

 

 

📌 짤방 페이지에 masonry 레이아웃 적용하기

 

내가 담당했던 기능은 모두 구현이 끝났고, 다른 분들도 거의 끝나가고 있어서

남는 시간 동안 처음 프로젝트를 시작할 때 후순위로 두었던 masonry 레이아웃을 짤방 페이지에 적용해보기로 했다.

 

참고할만한 레퍼런스는 많았지만 대부분 라이브러리를 사용하는 방식이어서

간단하게 구현할 수 있는 방법을 찾던 중 CSS만 사용하는 방법을 발견했다.

 

 

 

현재는 가장 오른쪽과 같은 상태인데,

이미지 순서가 1열 -> 2열 -> 3열로 진행되다 보니 한 페이지가 끝나고 다음 페이지로 스크롤이 될 때

순서가 다시 뒤섞이는 문제가 있어서 어떻게 수정해야 할지 고민 중이다.

 

 

📌 useParams()을 props로 넘겨줄 때 주의사항

 

서버에 유저가 맞힌 퀴즈 문제 수를 전송하기 위해 퀴즈 결과 컴포넌트로 퀴즈 카테고리 데이터를 가져와야 했는데

퀴즈 문제 페이지에 useParam()을 이용해서 추출한 퀴즈 카테고리 데이터가 있어서 그걸 퀴즈 결과 컴포넌트에 props로 넘겨주려고 했다.

 

퀴즈 문제 컴포넌트 안에서 현재의 인덱스 조건을 충족하면 퀴즈 결과 컴포넌트로 렌더링되도록 만들었는데

사실상 퀴즈 결과 컴포넌트가 문제 컴포넌트의 자식 컴포넌트가 되는 개념이기 때문에 props로 넘기는 건 어렵지 않았다.

 

/* useParams를 사용하려면 'react-router-dom'에서 임포트해야 한다. */
import { useParams } from 'react-router-dom'

/* useParams() 뒤에 category는 실행 파일에서 라우트하는 path에 설정한 콜론(:) 뒤의 이름이다.  */
const category = useParams().category

/* 임포트한 퀴즈 결과 컴포넌트에 category를 props로 넘겨준다. */
<QuizResult quiz_list={quiz_list} category={category} />

 

문제는 퀴즈 결과 컴포넌트에서 useEffect로 서버에 결과 데이터를 보내는데,

서버로 보내는 경로에는 실제 카테고리 이름이 아닌 undefined로 보내지고 있었다.

 

당연한 얘기지만 props로 넘기고 있는 category라는 이름은 껍데기일 뿐, 진짜 내용물은 useParams().category인데,

받아와서 사용하는 퀴즈 결과 컴포넌트에는 useParams 훅이 임포트되어 있지 않아서 발생하는 문제였다.

 

퀴즈 결과 컴포넌트에서도 useParams 훅을 임포트한 후, category를 콘솔로 출력해보니 원래의 카테고리 이름으로 잘 출력되고,

서버로 보내는 url에도 undefined는 사라지고 카테고리 이름으로 제대로 전송되었다.

 

 

📌 axios에 async / await 사용해보기

 

전날 기술면접 스터디를 진행하면서 내가 담당했던 자바스크립트의 비동기 처리 방법을 적용해보고 싶었다.

 

지금까지는 Promise 객체 기반 비동기 통신 라이브러리인 axios를 사용하면서 .then과 .catch로만 처리하였는데

오늘 마침 통계 데이터를 위한 api 명세가 추가돼서 async / await 도 적용해보았다.

 

/* QuizResult.js */

/* 생략 */

useEffect(() => {
  async function submitQuizScore() {
    try {
      const result = await quizApi.submitScore(category, answerCnt)
    } catch (error) {
      console.log('퀴즈 결과 전송 문제 발생', error.response)
    }
  }
  submitQuizScore()
}, [])

/* 생략 */

 

퀴즈 결과 컴포넌트로 렌더링될 때 한 번만 실행되도록 하기 위해서 useEffect를 함께 사용했다.

 

useEffect에서 비동기 처리를 위해 async / await을 사용할 때는 훅에 바로 사용할 수는 없고,

훅 안에 별도의 함수를 새로 작성한 후 호출해야 한다.

 

그리고 try / catch 문을 사용하지 않고 바로 await을 작성해도 되지만, 

에러처리를 위해 반드시 try / catch 문을 함께 사용하는 것이 좋다.

 

사실 아직까지는 .then / .catch와 큰 차이를 못 느끼겠으나 확실히 코드가 더 간결해지기는 하는 것 같다.