Yeong Jin

return을 사용하는 것은 선택 사항입니다. return을 사용하면 다음과 같은 이점이 있습니다: 호출한 곳에서 Promise를 처리할 수 있습니다. 이렇게 하면 호출한 곳에서 비동기 작업이 완료되었음을 확인하고 이를 기반으로 추가 작업을 수행할 수 있습니다. 테스트 코드를 작성할 때 return이 있는 경우, 비동기 작업이 완료되었음을 확인하고 테스트를 수행할 수 있습니다. 하지만 반드시 필요한 것은 아닙니다. 액션 내에서 모든 비동기 처리를 완료하고 호출한 곳에서 Promise를 기다릴 필요가 없는 경우에는 return을 사용하지 않아도 됩니다. return을 추가하려면 다음과 같이 작성할 수 있습니다: 이렇게 하면 호출하는 곳에서 await 또는 then()을 사용하여 Promise가 완료되었음을..

Vue.js 애플리케이션에서 API 호출을 다루는 데는 여러 가지 방법이 있습니다. created() 라이프사이클 훅에 직접 axios 코드를 넣는 것이 가장 간단한 방법이지만, 규모가 크거나 복잡한 애플리케이션에서는 유지 관리가 어려워질 수 있습니다. Vue.js 애플리케이션의 상태 관리를 위해 Vuex를 사용한다면, actions로 빼서 사용하는 것이 좋습니다. 이렇게 하면 다음과 같은 이점이 있습니다: 코드의 구조화: API 호출을 Vuex의 actions에 정리하면 코드의 구조가 더 명확해지고, 관리하기 쉬워집니다. 재사용성: API 호출을 중앙 집중식으로 관리하면, 다른 컴포넌트에서도 쉽게 호출할 수 있어 재사용성이 높아집니다. 디버깅 용이성: Vuex를 사용하면 개발 도구를 통해 상태 변화를 ..

mounted() 라이프 사이클 훅에서도 같은 작업을 수행할 수 있습니다. created()와 mounted()의 차이는 DOM이 준비되었는지 여부입니다. created()는 컴포넌트가 생성되고 데이터와 이벤트가 초기화되지만, DOM이 아직 준비되지 않은 시점입니다. 반면 mounted()는 컴포넌트가 생성되고 데이터와 이벤트가 초기화된 후 DOM이 준비된 시점입니다. DOM 요소에 직접 액세스하지 않은경우 created()대신 mounted()를 사용해도 문제가 없습니다.

async 키워드는 함수가 비동기(Asynchronous)로 동작하도록 지정합니다. 비동기 함수는 항상 Promise 객체를 반환합니다. 이 경우, axiosInst.post() 메서드가 HTTP 요청을 수행하며, 이는 일반적으로 비동기 작업입니다. async 키워드를 사용하면, 함수 내에서 await 키워드를 사용하여 비동기 작업이 완료될 때까지 기다릴 수 있습니다. 이를 통해 코드를 동기식 방식으로 작성할 수 있습니다. 이렇게 하면, 비동기 작업의 결과를 쉽게 처리하고 에러 처리를 개선할 수 있습니다. 이 함수에서 axiosInst.post() 메서드를 사용하고 있기 때문에, 이 작업은 비동기로 처리되어야 합니다. 따라서 async 키워드를 사용하여 이 함수를 비동기로 지정합니다. 예를 들어, 다른 ..

위 코드에서 @/store/mutation-types는 실제 mutation-types.js 파일의 경로로 대체해야 합니다. this.$store.commit() 메소드를 사용하여 COMMIT_IS_AUTHENTICATED mutation을 호출하면, isAuthenticated 상태가 변경됩니다. 이렇게 하면 이미 정의된 mutation을 사용하여 상태를 변경할 수 있습니다.

axios.post()는 Promise를 반환하기 때문에, 비동기로 처리해야 합니다. async/await를 사용하여 해결할 수 있습니다. 먼저, action 함수에 async를 추가해 주세요:

actions에서 메서드명({},payload) 이렇게 되어있을텐데 {} 를 빼먹으면 이런에러가 난다.