본문 바로가기

메모 log (간단메모)/frontend3

javascript 소수점을 표현하는 방법 서비스를 개발하다보면 아래와 같이 평점과 같이 평균 점수를 낸 다음에 결과값을 숫자 그대로 보여줘야할 때가 많습니다. 수치값을 그래프로 보여준다면 상관없지만 소수점을 생각하지 못했다면 아래와 같이 예상하지 못한 결과가 발생합니다. 3.6666..... 이 문제를 해결하기 위해서 아래와 같이 소수점을 어디까지 나타낼 것인지 생각한 다음에 toFixed(나타낼 자릿수)나 Math를 활용해주면 됩니다. 소수점 1자리 까지 표현하고 싶다면 아래와 같이 toFixed(1)을 사용하거나 Math.round와 / 나누기를 이용하여 동일하게 표현해줄 수 있습니다. homeTotal = homeTotal / count obj.homeTotal = homeTotal.toFixed(1) //toFiexd 활용 obj.hom.. 2024. 2. 14.
SSR과 CSR 기본편 SSR, Server-Side Rendering 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식 (ex. JSP/Servlet) 모든 데이터가 매핑된 서비스 페이지를 사용자에게 제공 Search Engine Optimization(SEO)을 쉽게 구성 CSR, Client-Side Rendering SSR보다 초기 전송되는 페이지의 속도가 빠르고 바로 사용자에게 페이지를 보여주는 방식 필요 데이터를 서버에 요청하여 화면을 재구성해하므로 전체적인 페이지는 SSR보다 느리게 사용자에게 제공 Frontend 영역 CSR View (Javascript) JQuery에서 react, vue, angular2로 변화 추가로 Webpack, rollup, TypeScript, Ba.. 2022. 8. 16.
chart.js 라이브러리 사용시 발생가능한 문제 동일한 canvas에 기존 차트 객체를 정상 종료하지 않고 재생성하는 경우, Uncaught Error: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused. 종합점수 해당 canvas에 기존 차트 객체를 종료하고 다시 생성해주면 됩니다. 저는 아래와 같이 코드를 작성하였습니다. //객체 생성 전에 기존 객체가 배열에 있으면 종료, 배열 초기화 charts.forEach(obj =>{ obj.destroy() }) charts = []; //차트 객체 생성, 배열로 객체 관리 let chart = new Chart($("#overallChart"), config) charts.push(ch.. 2022. 5. 18.