AJAX (Asynchronous JavaScript and XML) 부록: CORS

1. 학습 목표AJAX의 정의를 이해AJAX 구현 방법에 대한 이해AJAX의 예시AJAX를 통한 사용자 경험 향상 사례 2. 핵심 개념 요약 기존의 HTTP 통신 방식에서는 사용자가 특정 요청을 보내면 서버가 전체 HTML 페이지를 다시 보내주기 때문에,단순히 일부 데이터만 갱신하려는 상황에서도 불필요하게 모든 리소스를 다시 받아와야 했다. 예시로, 자동완성을 구현 한다면, 사용자의 입력이 변경될 때마다 새로운 페이지를 렌더링 해 응답하기해 이는 네트워크 트래픽과 서버 부하를 증가시키며, 사용자 경험도 저하시킨다. AJAX는 이런 불편한 상황을 해결한다. AJAX : 서버와 비동기적으로 데이터를 교환할 수 있는 기술 사용자 이벤트 발생 시, 서버로의 요청을 보내고, 응답 데이터로 웹 페이지의 특정 부분만..

콜백지옥과 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..

디바운싱과 쓰로틀링

1. 학습 목표 디바운싱과 쓰로틀링의 개념을 이해하고, 차이점과 적절한 사용방법에 대해서 배워보자 검색의 자동완성을 구현할 때, 어떻게 구현하면 좋을까? 입력값을 state로 관리하며 onChange로 입력을 감지한다면 사용자의 입력마다 /search api를 보내 응답을 받아 사용자에게 보여주면 된다. const [inputValue, setInputValue] = useState(''); const handleChange = async (e: React.ChangeEvent) => { const value = e.target.value; setInputValue(value); if (value.length > 0) { fetchQuiry(value) // 검색 api 함수 ..

❌ 개요 및 문제 졸업 전 마지막 프로젝트로 Vue를 진행했을 때 상세조회에서 상태, 담당자 변경 후 해당 목록에서 갱신되지 않는 이슈가 존재했다. 위 사진을 보면 상태를 진행중 -> 완료로 변경 후에 브라우저 콘솔을 통해 받아온 응답은 정상적으로 COMPLETED 즉, 완료 상태로 된 새로운 데이터를 잘 받아왔으나 아래처럼 테이블의 경우 갱신된 데이터를 UI상 보여주지 않았다. 시도해본 것으론, 기존 refetch로 강제로 새로운 데이터를 받아오는 방식의 변화를 주고자 상세조회 모달의 update 메소드와 invalidate를 연결해서 시도했다. 결과적으로는 똑같았고, 맘에 안들지만, 강제 리렌더링을 시키고자 여러 방법을 사용중에 다음에 힌트를 얻었다. key가 같아도 내부 데이터가 다른경우 리액트랑..