오늘의 개발.
오늘은 드래그를 이용한 가격설정을 완료했다.
가격을 설정하는 input box는 사용자가 임의대로 바꿀 수 없게 unable로 처리했다.
DB에서 데이터를 불러오는 방식도 바꿨다.
프런트는 fetch를 이용하여 데이터를 받아 비동기적으로 처리했다.
DB 데이터는 가격의 한계가 있기 때문에
기존의 코드는 모든 데이터를 가져온 후 5개를 랜덤으로 뽑아서 나타냈다면
지금의 코드는 DB쿼리에 조건을 줘서 5개만 가져온 후 랜덤으로 나타냈다.
이전 코드의 중요 문제점.
1.프런트가 비동기 방식이 아니다.
2.DB에서 가져오는 데이터가 사용하는 것에 비해 너무 많다.
고친 것
1.프런트가 비동기 방식이 아니다.
이전 방식은 url이동 방식이어서 새로고침이 많이 작용함으로써 너무 비효율적이었다.
그래서 fetch를 사용하여 프런트에서 구현하게 했다.
사실 Ajax를 사용한다면 쉽게 할 수 있었지만 이미 할 수 있었기 때문에 javascript를 이용하여 구현하고 싶었다. template을 만든 후 insertAdjacentHTML를 사용하여 태그를 붙여넣었고 다음 데이터를 받아왔는데 기존의 데이터에 추가가 되어서 html이 깨져서 나왔다.
이를 해결하기 위해 불러오기 전 각 div의 값을 초기화 시켜줬다.
2.DB에서 가져오는 데이터가 사용하는 것에 비해 너무 많다.
사용하는 데이터에 비해 가져오는 데이터가 너무 많아서 비효율 적이고
만약 DB 데이터가 훨씬 많았다면 이는 속도에도 문제가 생길것이라고 판단하여
쿼리를 사용해 원하는 개수만 가져오게 설계했다.
느낀점
항해99를 함으로써 현업 개발자가 되어 프로그래밍 하는 것 같다. 즉 섬세하고 고객의 입장에서
많이 생각하게 된 것이다. 사실 혼자 공부할 때에는 대충 뭐 되겠지.. 돌아가기만 하면 되겠지..
이런 느낌이었다면 현재는 어떻게 하면 서비스 품질을 더 좋게하고 속도가 빠르고 트래픽이 안생길까 라는 생각을 먼저 하게 되는 것 같다.
