210323_TIL (First Project - Day9)

🍎오늘 한 일

URL 파싱 기능 추가
URL 을 입력하면 해당 URL html의 <title> 부분을 가져오는 함수를 작성했다. axios로 해당 url의 html을 긁어온 후 title 부분만 매칭시키는 정규식을 적용해 서버의 controller에 추가했다. 클라이언트에서는 사용자가 url 이름을 입력하지 않으면 자동으로 요청을 보내 title을 가져오도록 구현해두었다. 원래 클라이언트에서 바로 요청을 보내게 하려고 했는데, 리액트 서버에서 바로 요청을 보내려면 프록시 설정을 따로 해줘야한다고해서, 우리 서버를 한번 거쳐 요청을 보내도록 계획을 수정했다.

CSS 개선
뼈대만 있는 상태인 서핀 모달창의 레이아웃과 색상, 효과 등을 수정했다. 총 네가지 상태에서 같은 모달창을 이용하는데, 이 상태에 따라 형태가 변하게 만들어야해서 이 컴포넌트를 가장 효율적으로 사용할 수 있도록 구조를 계속해서 수정했던 것 같다. 이제야 제대로 구현이 된 것 같아서 색상도 입히고 여러 효과들도 추가해둘 수 있었다.

오류 개선
생각하지 못했던 경우에서 자잘한 오류들이 너무 많이 나왔다. 검색 결과 리스트를 한번에 모두 보여주는게 아니라, 페이지 아래 스크롤이 닿을 때마다 한번씩 요청을 보내는 식으로 무한스크롤을 구현해뒀는데, 요청하는 횟수를 제한하지 않아서 모든 리스트가 로딩된 후에도 계속 요청이 가고, 보내줄 응답이 없는 서버는 계속해서 500 상태코드를 주어 콘솔창이 빨갛게 변해있었다.. 이 부분은 최초 렌더링 때 총 검색 개수를 미리 서버로부터 받아와 한번에 띄우는 리스트 개수로 나누는 식으로 요청 가능 횟수를 제한시켰다. 이 외에도 뒤로가기 버튼을 눌렀을 때 의도치 않은 페이지로 가는 것 등 확인해볼수록 문제가 계속 발견되어서 하나하나 잡으며 하루를 보냈던 것 같다.

 

🍎 교훈

✔️ 시간은 생각보다 빨리간다. 4주 계획은 3주 내에 완성하는걸로 목표를 잡아야겠다.

 

🍎 더 해야할 일

✔️css 마무리