Javascript28 토이 프로젝트(7) - 입력 날짜 전후 가상자산 시세변동 그래프 추가 https://www.chartjs.org/docs Chart.js | Documentation www.chartjs.org 가상자산 관련하면 역시 차트를 빼먹으면 서운할 것 같아서 어쩔 수 없이 차트를 그리기 위해 chart.js 라이브러리를 활용했다. html파일 상단에 위의 코드 추가(처음 마음먹었던 것이 있어서 양심상(?) 라이브러리 따로 다운받지 않고) 를 html 요소 내에 넣고 아래 코드를 추가했다. 간략한 코드 설명 입력값 가져오기: 버튼 클릭 이벤트 핸들러가 실행될 때, 사용자가 입력한 날짜와 가상자산명을 가져와서 날짜 계산: 사용자가 선택한 날짜에서 7일 전과 7일 후의 날짜를 계산.(그래프에 해당 날짜 전후 7일 동안 시세 변동을 보여주기 위해) API 요청: 계산된 날짜 범위에 해당.. 2024. 3. 18. 토이 프로젝트(6) - 메이저코인들만 출력되는 문제 발생 대장코인인 비트코인은 정상적으로 3월 13일(내 생일)에 10000원을 투자했으면 현재 9300원(투자금액 +수익금액)이라는 것을 화면에 출력해주는데 아래와 같이 API를 통해 가상화폐 목록을 모두 불러왔으니 분명히 존재하는 코인인데 아래와 같이 결과값을 얻을 수 없는 경우가 있다.(코인이 이렇게 많은 줄 처음알았다 10000단위라니..) 해외사이트에서 API로 받아온거라 KRW(원화)로 표시가 안될 것 같아 모두 USD(달러)로 값을 받아와서 계산해 보았는데 불러온 코인이 이번에는 불러온 코인이 USD 속성을 가지지 않는다고 나와서 당혹스러웠다. if / else 문으로 KRW or USD 속성이 있는 경우에만 값을 할당하려고 했는데 if else 안에 값이 들어가니 에럭 나오면서 해당 변수가 정의가 .. 2024. 3. 18. 토이프로젝트(5) - 코인리스트 값을 API를 활용해 등록하기 아래 코드는 암호화폐 목록을 불러와서 요소에 옵션으로 추가하는 기능을 구현한 것 coinlist.js파일을 우선 추가했다. const apiKey = "bd4f605df59891a7e298a7227117404b2215dba9008a7b6e24206b6aadd5b038"; async function fetchCoinList() { try { const response = await fetch( "https://min-api.cryptocompare.com/data/all/coinlist" ); const data = await response.json(); return data.Data; } catch (err) { console.error("Error fetchng coin list:", error); .. 2024. 3. 17. 토이 프로젝트(4) - CryptoCompare API를 사용하여 가상화폐 목록추가 coinlist.js 파일 추가 CryptoCompare API를 사용하여 가상화폐 목록을 가져와서 HTML의 요소에 옵션을 새로 만들고 옵션에 가상화폐 목록을 추가하는 작업을 해보았다.(길이는 임시로 100개로 제한) API 키 및 fetchCoinList 함수: 먼저 API 키를 변수에 할당하고, fetchCoinList 함수 선언. 이 함수는 CryptoCompare API를 사용하여 가상화폐 목록을 가져오는 비동기 함수 가상화폐 목록 가져오기: fetchCoinList 함수는 CryptoCompare API를 사용하여 가상화폐 목록을 가져오고, 이 목록은 JSON 형식으로 반환되며, 함수는 이 데이터에서 "Data" 속성을 반환합니다.(Data 속성 안에 코인과 관련된 정보가 있음.) 가상화폐 목.. 2024. 3. 16. 토이프로젝트(3) - 기존 fetch함수를 async/await로 수정 문제점 분석 fetch 호출에서 오류 처리가 이루어지지 않았다. 네트워크 요청은 실패할 수 있으므로 오류 처리를 추가해야 함 비트코인 가격을 처리하는 두 번째 fetch 호출은 첫 번째 fetch 호출이 완료된 후에 이루어져야 한다. 현재 코드에서는 이 작업이 동시에 이루어질 가능성이 있다. 기존코드 //btn클릭 시 date 날짜를 timestamp로 변환 let timestamp = 0; const res = document.getElementById("authors"); let day = document.getElementById("date"); document.getElementById("btn").addEventListener("click", (e) => { timestamp = parseInt.. 2024. 3. 16. HTML 내의 script 태그 삽입 위치에 따른 차이 내에 스크립트 페이지가 로드될 때 스크립트가 먼저 다운로드되고 실행. 이는 사용자가 페이지의 콘텐츠를 볼 때까지 스크립트 실행을 차단할 수 있으므로 페이지 로딩 속도에 영향을 줄 수 있다. 내에 스크립트 페이지 콘텐츠가 로드된 후 스크립트가 다운로드되고 실행. 이는 페이지 로딩이 더 빠르게 진행되지만 스크립트가 필요한 부분에서 실행될 때까지 기다려야 할 수 있다. async 속성 활용 async 속성이 있는 태그는 HTML 파싱을 차단하지 않고 비동기적으로 로드. 이는 스크립트를 병렬로 다운로드하고 다운로드가 완료되면 즉시 실행. 다중 스크립트가 있을 때, 실행 순서는 다운로드 완료 순서와 일치하지 않을 수 있다. defer 속성 활용 defer 속성이 있는 태그는 HTML 파싱을 차단하지 않고 비동기적.. 2024. 3. 12. 이전 1 2 3 4 5 다음
