axios3 JavaScript - 동기와 비동기의 쉬운 이해 Updated 03/16/23 항상 헷갈렸던 부분을 의식의 흐름에 따라 정리해보려고한다. 요청과 응답 HTTP 통신을 할때는 클라이언트와 서버가 서로 커뮤니케이션을 한다. 통신을 할 때는 순서가 중요하다. 그래서 통신을 할 때 동기적 처리가 필요하게 되었다. 요청 - 클라이언트 → 서버 응답 - 서버 → 클라이언트 동기와 비동기 동기는 하나가 완료하고 차례차례 그 다음 테스크를 처리하는 방식이다. 비동기는 동시에 병렬적으로 핸들링하는 방식이다. 자바스크립트는 싱글쓰레드 언어이다. 싱글쓰레드는 이 말인즉슨 일꾼이 한명이다. 동시 진행이 안된다. 하나의 함수를 실행하고 있으면, 다른 함수는 블로킹(Blocking)이 된다. 멀티쓰레드는 병렬진행이 가능하다. ex) 크롬 창을 보면 알수있다. 한탭에서 에러가 .. 2023. 3. 9. Vue(11) axios 을 통해 API 동적으로 화면에 뿌려주기 api에는 menu 라는 데이터가 있다. 리스트를 받아와서 화면에 동적으로 뿌려주자. 스포일러 api에서 받아온 menu안의 id와 title의 내용(데이터)가 동적으로 몽땅 표시된다. 그럼 추울발! Vue(11) axios 을 통해 API 동적으로 화면에 뿌려주기 axios 설치 먼저 통신을 해야되니까 npm install axios src/api/index.js src 폴더 안에 api 폴더를 만들고, index.js 파일을 만들어준다. (통신전용 공간이랄까. 여튼 이걸 api 구조화 라고 한다.) 통신 전용 메소드를 만들어주고 export 꼭 해주기 ! 그래야 밖에서도 쓸 수 있다. import axios from 'axios'; // axios 임포트해주기 function showMenuApi().. 2021. 7. 31. vue(5) 이미지 업로드 (formData에 담아 axios로 보내기) vue.js 로 이미지업로드 기능을 구현 중이다. 고객들이 올리는 이미지를 formData에 담아 axios 통신으로 백엔드에 보내주려고 한다. 하지만 나는 vue린이 ... 하지만 안될 건 없다. 하다보니 어떻게든 되더라 (시간이 걸려서 그렇지) 컴포넌트 로직 ImageUpload.vue 에서 상담요청 버튼 누름 ↓ UploadConfirm.vue 로 넘어가 작성내용 리뷰 후, 확인버튼 누르면 ↓ index.js 의 통신 로직을 타고 백엔드로 데이터 전송 vue(5) 이미지 업로드 (formData에 담아 axios로 보내기) ImageUpload.vue - 결과 화면 상담 작성란을 모두 작성 후, 마지막으로 다중 파일 선택을 한 뒤 "상담요청" 버튼을 누르면 작성한 데이터와 함께 확인페이지로 넘어간다.. 2021. 5. 18. 이전 1 다음 반응형
