728x90
반응형
- [ 프로젝트/[개인] Auto Packing List Manager ][개인] 카스 전자 저울 연동 Packing List 자동 생성 프로그램 #9 | FileReader 클래스의 비동기 방식을 동기 처리하여 엑셀 파일 읽어오기2022-05-31 18:00:26| 이슈 엑셀 파일의 데이터를 읽어오고자 할 때 [그림 1]과 같이 처음에는 빈 객체만 출력되었다가 한번 더 실행하면 비로소 배열 값이 출력되는 문제가 있었다. 이런 현상 때문에 엑셀 파일을 불러온 직후에는 화면에 그리드가 렌더링 되지 않고 조회 버튼을 눌러야만 렌더링 되었다. 원하는 것은 엑셀 파일을 불러오면 자동으로 화면에 그리트를 렌더링 하는 것이다. 문제의 원인은 엑셀 파일을 불러오기 위해 사용한 FileReader 클래스가 비동기 방식으로 데이터를 읽어오기 때문이었다. 그래서 엑셀 파일의 데이터를 읽어오기 위해 생성한 readFile() 메서드에 Promise를 적용하여 비동기 방식을 동기 방식으로 처리되게 하였고, 그 결과 원하는 결과를 얻을 수 있었다. 엑셀 파일을 불러오는 메서드 readF..
- [ 영광의 시대!/2022 개발자의 품격 부트캠프 1기 ][개발자의품격][부트캠프][1기][10차시] JavaScript 주요 포인트 #12 | 고급 문법 - XMLHttpRequest, Fetch API, Promise, Async/Await2022-02-09 22:12:57JavaScript 주요 포인트 #12 자바스크립트는 AJAX(Asynchronous JavaScript and XML) 이전과 이후로 나뉜다. AJAX로 인해 비동기 통신 및 웹페이지의 특정 일부분만 랜더링 하는 것이 가능해졌다. 이로 인해 웹이 급속도록 발전하게 되었다. AJAX는 동적인 웹 페이지를 만들기 위해 사용한다. 여기에서 다루게 될 내용은 XMLHttpRequest, Fetch API, Promise, Async/Await로서 자바스크립트 전체 문법을 통틀어 매우 중요한 부분이다. 이번 실습은 테스트 서버가 필요하다. 따라서 JSON Server를 실행한다. JSON Server 실행 json-server --watch db.json XMLHttpRequest XMLHttpRequest(X..
728x90
반응형