인프런 커뮤니티 질문&답변

안녕하세요!

질문 1) axios 또는 fetch로 데이터를 가져오는 부분을 composables 폴더에 작성하나요?

네, composables 폴더 안에서 작성하는 경우도 있고, 상황에 따라 api 폴더에서 작성한 후 composables에서 가져다 사용하는 경우도 있습니다. 이는 프로젝트의 구조와 요구 사항에 따라 달라질 수 있어요. composables는 재사용 가능한 로직을 관리하는 곳이기 때문에, 데이터를 가져오는 로직을 여기에 두는 것도 괜찮습니다만, 같은 api 통신 로직이 반복되는 경우 api 폴더를 별도로 두고 이를 composables에서 호출하는 방식도 많이 사용됩니다.

질문 2) axios 또는 fetch를 이용할 때 파라미터 값과 리턴 받는 결과 값도 types 폴더 아래 모두 정의하나요?

네, 타입스크립트를 사용하는 경우, API 요청 시 사용되는 파라미터나 리턴되는 값의 타입을 정의하는 것이 좋습니다. 이러한 타입은 types 폴더에 따로 관리할 수 있으며, 이를 통해 코드의 가독성 및 유지보수성을 높일 수 있습니다. 또한, 타입을 명확히 정의함으로써 타입 안전성도 보장할 수 있습니다.

그리고 프론트엔드 개발에서는 일반적으로 백엔드 환경에 크게 의존하지 않습니다. 백엔드가 Java & Spring이든, Node.js이든, 어떤 기술을 사용하든 상관없이 프론트엔드는 프론트엔드만의 규칙과 베스트 프랙티스를 따라 좋은 프로덕트를 만드는 데 집중하시면 됩니다.

이런 식으로 접근하면 더 유연하고 효율적인 개발이 가능할 거예요! 😊

안녕하세요, 인프런 AI 인턴입니다. metaone11님.

백엔드가 스프링부트의 Restful API 서버를 이용한다고 가정했을 때, axios나 fetch를 이용한 데이터 가져오기와 관련된 질문에 대해 답변 드리겠습니다.

질문 1:

axios 또는 fetch로 데이터를 가져오는 부분을 composables 폴더에 작성하나요?
- 네, 보통 Vue 3의 Composition API를 사용할 때, 이러한 비동기 데이터 fetching 로직은 composables 폴더에 작성하는 것이 일반적인 관례입니다. 그렇게 하면 코드의 재사용성과 가독성을 높일 수 있습니다.

질문 2:

axios 또는 fetch를 이용할 때 파라미터 값과 리턴 받는 결과 값도 types 폴더 아래 모두 정의하나요?
- 네, TypeScript를 사용한다면 파라미터 값과 리턴 받는 결과 값을 정의하는 것이 권장됩니다. 이를 통해 타입 안전성을 확보하고 코드의 유지 보수성을 높일 수 있습니다. 보통 types 폴더를 만들어 그 안에 관련 타입들을 정의해 두는 것이 좋습니다.

비슷한 주제에 대해 추가적으로 도움이 될 만한 답변 링크를 드릴게요:

• https://www.inflearn.com/questions/652192: “Micro Front 관련 질문 드립니다.” - 여기서 Vue 3 프로젝트 구성에 대해 다루고 있습니다.
  
• https://www.inflearn.com/questions/1132631: “PostForm.vue 분리 문의 드립니다.” - Composition API와 관련된 질문과 답변입니다.
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.