코딩(93)
-
KIS 주식 실시간 데이터 웹소켓 연동 (가격 포맷)
1. 학습 목표 작년 말에 진행한 FLEX 프로젝트에서 구현한 KIS 실시간 데이터를 웹소켓으로 연동해 구현한 과정을 복습하자 KIS 연동해서 데이터 가져오는 과정은 아래 글 참고2024.10.03 - [코딩/Flex프로젝트] - 재테크 블로그 프로젝트 (3) - KIS(한국투자증권) API연동 재테크 블로그 프로젝트 (3) - KIS(한국투자증권) API연동개요 재테크 블로그의 기능 중 랜딩페이지, 모의투자, 주가예측 파트에서 여러 가지 주식 정보를 요하는 기능이 있어 주식정보를 제공하는 open api를 찾던 중 빈번히 사용되는 KIS에서 제공하는 aminkyunoori.tistory.com 2. 핵심 개념 요약 1. 차트 라이브러리와 초기 세팅 일단 난 분봉에 해당 하는 그래프에만 실시간 데이터를 ..
2025.06.12 -
TanStack Query의 데이터 갱신 방식(자동, 수동)
1. 학습 목표 Tanstack Query를 통해 캐싱전략을 얼마나 적절하게 잘짜는 것도 중요한 요소이기에 내부에서 다양한 옵션을 제공한다. 반대로, 이전의 데이터가 아닌 새로운 데이터를 보여줘야 하는 데이터 갱신의 경우도 효율적으로 요청하도록 유연하게 설계되어있다. Tanstackquery에서 제공하는 데이터 갱신 방식들을 이해하고, 각자 어떤 상황에 적합할지 알아보자 2. 핵심 개념 요약 (자동갱신, 수동갱신, etc..) 1. 자동 갱신 (Auto Refetching) 1-1. refetchOnWindowFocus브라우저 탭으로 돌아올 때 자동으로 데이터를 다시 가져오는 옵션으로. 기본값은 true로 설정되어 있다. useQuery(['todos'], fetchTodos, { refetchOnW..
2025.06.11 -
AJAX (Asynchronous JavaScript and XML) 부록: CORS
1. 학습 목표AJAX의 정의를 이해AJAX 구현 방법에 대한 이해AJAX의 예시AJAX를 통한 사용자 경험 향상 사례 2. 핵심 개념 요약 기존의 HTTP 통신 방식에서는 사용자가 특정 요청을 보내면 서버가 전체 HTML 페이지를 다시 보내주기 때문에,단순히 일부 데이터만 갱신하려는 상황에서도 불필요하게 모든 리소스를 다시 받아와야 했다. 예시로, 자동완성을 구현 한다면, 사용자의 입력이 변경될 때마다 새로운 페이지를 렌더링 해 응답하기해 이는 네트워크 트래픽과 서버 부하를 증가시키며, 사용자 경험도 저하시킨다. AJAX는 이런 불편한 상황을 해결한다. AJAX : 서버와 비동기적으로 데이터를 교환할 수 있는 기술 사용자 이벤트 발생 시, 서버로의 요청을 보내고, 응답 데이터로 웹 페이지의 특정 부분만..
2025.06.10 -
콜백지옥과 Promise, async/await
1. 학습 목표콜백 함수의 개념과 사용 목적을 이해한다.콜백 지옥이 무엇이고, 왜 발생하는지 파악한다.Promise와 async/await를 활용해 콜백 지옥을 해결하는 방법을 익힌다.실제 코드에서 비동기 처리를 깔끔하게 작성할 수 있다. 2. 핵심 개념 요약콜백 함수란?콜백 함수는 다른 함수의 인자로 전달되어 실행되는 함수이다. 주로 비동기 처리, 이벤트 처리, 타이머 등에서 사용되며, 특정 작업이 끝난 후에 다음 동작을 실행하는 데 유용하다. function greet(name, callback) { console.log("Hi " + name); callback();}function callMe() { console.log("I am callback function");}greet("Peter..
2025.06.10