자바스크립트 개발자 포럼제이쿼리는 실무에서 사용하는데요 ㅠ vue.js 가 좀 어려워서 질문남깁니다…
ajax 처럼 쓰면 될줄알았는데여
.then 이것은 post 나 get 을 뜻하는것인가요?
추가적으로 왜 액션함수로 빼서 axios를 다시 쓰는지에 대한 구조가 너무 이해가 안갑니다 ㅠㅠ
왜그런지에대한 이해도는 있으나…책으로만 읽다보니 이해가 전혀 가지를 않아서요…
구조에대해 설명해주실 고수분들 계신가요??
먼저 자바스크립트 Promise API를 선행학습 하시면 .then() .catch() 메소드의 존재 이유를 알 수 있을 것입니다.
비동기 메소드가 성공적으로 동작했을때 실행할 Callback Function을 .then(response => {
/* do something */
})
형태로 작성 하실 수 있습니다.
레퍼런스 :
아 제 질문이 좀 헷갈리게 적어두었네요…
vue.js에서는 비동기메소드를 굳이 나눠서 액션,마운트,getter, 등등으로 나눠쓰잔아요?
액션에서 커밋으로 마운트 부분을 불러와서 쓰는이유 그상세한 이야기가 궁굼합니다… 자바스크립트의 프로미스 개념은 이해했는데요
porp을 좀더 간결하게 쓰기위하여 저런식으로 나눠서 쓰는지 궁굼해서 남긴 질문이였습니다…
음 질문이 좀 많이 어색한데요 일단 제가 이해한 바로는
왜 vuex (store) 상태 관리를 할때 비동기 메소드는 action에서 처리해야만 하는가에 대한 질문 같아요
간단히 말씀하자면 vue devtools에서 상태 관찰하기 편해서 입니다 즉, 디버깅하기 쉬워집니다.
mvc 패턴같은 하나의 패턴으로 이해하시면 좋을거같아요
아아아! ㅋㅋ제가 질문을 요상하게했저 이제 왜쓰는지 감이 잡혔어요 감사합니당!ㅎㅎㅎ
제가 이해한 질문에 대해 추가해 봅니다…
vue나 react나 기타 앱등의 프론트부분들은 비슷한 구조입니다…
문제는 화면에 렌더링 때문 입니다…
처음 렌더링시에야 모두 값을 반영 하겠지만 …실시간으로 변화하는 값이나 입력하고 있는 것들을 화면에 동기화 하기 위해서는 사용자화면에(브라우져나 앱화면들) 값을 전달 해야 합니다…
그래서 마운트를 하네 마네가 여기서 나옵니다…
즉, 마운트 되면 > 렌더링 > 화면(브라우져나 기타 앱들) 동기
**** 마운트 준비(변수, 함수바인딩, …기타등등) ****
**** 마운트 시작
마운트 됨
**** 마운트 종료(화면에 뿌려 주었으니 전달될때 사용된것들 초기화(가변메모리))****
**** 여기에서 나누어 주는게 말씀하신 부분…그니까 백엔드랑 프론트앤드가 있듯이 생각하면…****
react는 아시다시피 함수구문으로 처리 할 수 있어서 그렇게 보이지 않을 뿐입니다…예전에는 vue처럼 좀 코딩하기 불편했음…요즘은 vue 라이프싸이클(렌더링할때)은 어떻게 하고 있는지 확인필요…전 모름
그래서 아래와 같이 비동기 구문을…초보적인 내용이지만 가지고온 then 처리후 값을
화면에 뿌려주려면 해당 값들로 마운트 해주여야 사용자가 볼 수 있을 것입니다…
갤러리(스크롤할때 일정간격주고 데이터 처리), 차트등을 실시간으로 보여주려면…
then 말그대로 그런후, 후에,… 시킨거 다하거나 그말이 맞다면 뭘할거냐 입니다…
보통 비동기 처리시 사용됩니다…그러니까 음…속도를 맞출수 없어서. 늦게 도착하는 애들 처리하려고…
다른언어들도 마찬가지로 사용되는 구문입니다…
axios : 얘가 값을 받도로 편리를 봐주는 라이브러리 입니다…
get : 가지고오라 > 시간걸림 > then 가지고왔는데 뭐시키게 뭐냐 없으면 없는데로… 있다면 가지고 온거 쓰면됨
post : 보내라 > 시간걸린 > then 보냈는데 뭐를 주더라 이것으로 뭐 할거냐 없으면 없는데로… 있다면 가지고 온거 쓰면됨, 아래는 보통의 코딩으로
함수나 클래스 마다 비동기, 동기 각각의 조건을 코딩시 반영…props, 매개될 변수등등…
리액트 기준코드 … vue도 비슷하게 마찬가지입니다.
const [data, setData] = useState({}); //마운트할 변수 vue 에서는 정의방법이 다름
const source = axios.CancelToken.source();
const async 함수명 = () => {
try {
await 함수(axios 이던 아니던).get(접속할 주소, { //post도 마찬가지…
cancelToken: source.token
}).then(리턴된 결과 변수명 => {
setData(JSON.parse(res.request.response));
//or
return {state: true, datas:JSON.parse(리턴된 결과 변수명.request.response), message:‘OK’};
}).catch(err => {
console.log(err);
return {state: false, datas:{}, message:err}
});
} catch (err) {
return {state: false, datas:{}, message:err}
}
}
//…중간생략
if(data.state) {
//보여주고자하는 정상적인 화면 렌더링.
} else {
//대기화면이나 기타 렌더링할것들(로딩되는 엘리먼트 또는 기타등등 동그라미…)
}
//setData가 값을 변경시키면 자바스크립트엔진이 해당되는 문서의 엘리먼트를 화면에 무조건 다시 렌더링…
리턴이 있는 함수를 실행후 리턴받은 것들로 그냥 화면에 찍는 코드…너무 짧아서 죄송,…
오…제가 원했던 답변이였어요 ㅠㅠ 너무 감사해요 기본적인게 잘이해가 안가다보니깐 지금은 어는정도 문법적인부분이 읽고 나니깐 확실하게 개념이 박혓어요 감사합니다 ㅎㅎㅎㅎ!좋은하루되세요!