Conversation
| baseURL, | ||
| headers: { | ||
| "Content-Type": "application/json", | ||
| }, |
There was a problem hiding this comment.
createAxiosInstance 함수를 별도로 만들어주셨는데, Content-Type 을 application/json 으로 고정시켜두셨네요. axios 인스턴스를 생성할 때는 Content-Type을 기본값으로 명시하지 않고, 요청 데이터에 따라 자동 설정되도록 두는 것이 가장 권장됩니다. 드물게 서버의 특정 API에서 Content-Type을 요구하는 경우에만 지정해주시는 것이 좋고, json 타입의 경우에는 자동설정으로 두시는 것을 권장합니다.
|
|
||
| const url = this.endPoint; | ||
| const response = await sprintApi.get(url, { params }); | ||
| const result = response.data; |
There was a problem hiding this comment.
try/catch 이용한 에러핸들링 코드가 없습니다. 서버로 보내는 api 요청은 항상 실패의 가능성이 있으니 에러 발생 시 에러를 던져서(throw new Error("에러 내용")) 이 함수를 호출하는 코드 내에서 에러 핸들링을 할 수 있게 하거나 에러발생에 대한 조치(console.log/error 또는 alert)를 바로 적용할 수 있겠습니다. 다른 api 함수들과 마찬가지로 일관성있게 throw 를 이용해서 에러처리는 함수호출하는 코드에서 진행하시는 것을 권장드립니다.
| // 리소스 상세 조회 | ||
| const url = this.endPoint + `/${id}`; | ||
| const response = await sprintApi.get(url); | ||
| const result = response.data; |
There was a problem hiding this comment.
마찬가지로 api 요청 실패 시에 대한 코드가 없습니다. 위와 마찬가지로 try/catch 문으로 에러처리를 위한 코드를 작성해주세요.
| \n3팀 (류제천 멘토님) : 민지영,김희성,신진호,김민희,김승우`, | ||
| image: "img-url-1", | ||
| }); | ||
| console.log("create article: ", article); |
There was a problem hiding this comment.
createArticle 실행 중 에러발생 시에 대한 에러처리가 없습니다. 이또한 try/catch 문으로 처리해서 유효성검사 에러메시지 등에 대해 사용자에게 알림을 줄 필요가 있어보입니다.
| constructor(endPoint) { | ||
| this.endPoint = endPoint; | ||
| } | ||
|
|
There was a problem hiding this comment.
class Service 의 생성자를 보면 endPoint 를 매개변수로 받아서 유효성검사없이 바로 인스턴스를 만들 수 있게 되어있습니다. 이 경우, 동일한 endPoint 를 가지는 Service 인스턴스가 2개 이상 발생할 가능성이 있습니다. 어플리케이션에서 중복되지 않는 endPoint 를 가지는 Service 인스턴스를 갖게하기 위해 기존에 동일한 endPoint 로 인스턴스를 만든적이 없는지 검사하는 유효성검사 로직이 consturctor 안에 있으면 더 좋겠습니다. (싱글톤 패턴 참조)
| return result; | ||
| } catch (error) { | ||
| throw new Error(error.message); | ||
| } |
There was a problem hiding this comment.
api 문서에 따르면 유효성검사 오류를 서버에서 아래와 같이 주고 있습니다. 서버에서 직접 만든 오류메시지는 error.message 가 아니라 error.response.data 로 확인할 수 있습니다. error.message 는 axios 에서 서버 응답을 보고 자체적으로 만들어준 오류메시지입니다.
{
"message": "유효성 검사 오류입니다.",
"errors": [
{
"path": "image",
"message": "Expected a string, but received: 123"
}
]
}
| const fields = REQUIRED_FIELDS[this.endPoint]; // 리소스의 필수 필드 가져오기 | ||
| verifyRequiredFields(fields, data); // 필수 필드 확인 | ||
| verifyData(fields, data); // data 검증 | ||
|
|
There was a problem hiding this comment.
유효성검사를 위한 함수를 두번 호출하고 있습니다. 꼼꼼하게 필드별 타입과 데이터의 empty 여부를 체크하신 점 아주 좋습니다! 다만 유효성검사 함수 요청은 하나로 합쳐서 추상화하는 것이 더 좋을 것 같습니다. checkIsValid 정도의 이름으로 통합 및 추상화된 함수가 어떨까 싶습니다.
|
|
||
| const instance = {}; | ||
| const axiosDefault = (baseURL) => { | ||
| if (!instance[baseURL]) { |
There was a problem hiding this comment.
함수명이면 가급적 동사로 만들어주시는 것이 일반적으로 통용되는 js 컨벤션입니다. getAxiosDefault 정도가 어떨까 싶습니다.
There was a problem hiding this comment.
답변 감사합니다! 알려주신대로 수정해보겠습니다!
|
꼼꼼하게 과제를 잘 수행해주셨습니다. 일부 코멘트가 있습니다만 UI와 API 를 통합해서 꼼꼼하게 테스트하게되면 자연스럽게 고쳐질 부분이라 생각합니다. |
요구사항
공통
'https://sprint-mission-api.vercel.app/articles' API를 이용하여 아래 함수들을 구현해 주세요.
getArticleList() : GET 메서드를 사용해 주세요.
page, pageSize, keyword 쿼리 파라미터를 이용해 주세요.
getArticle() : GET 메서드를 사용해 주세요.
createArticle() : POST 메서드를 사용해 주세요.
request body에 title, content, image 를 포함해 주세요.
patchArticle() : PATCH 메서드를 사용해 주세요.
deleteArticle() : DELETE 메서드를 사용해 주세요.
fetch 혹은 axios 를 이용해 주세요.
응답의 상태 코드가 2XX가 아닐 경우, 에러메시지를 콘솔에 출력해 주세요.
.then() 메서드를 이용하여 비동기 처리를 해주세요.
.catch() 를 이용하여 오류 처리를 해주세요.
'https://sprint-mission-api.vercel.app/products' API를 이용하여 아래 함수들을 구현해 주세요.
getProductList() : GET 메서드를 사용해 주세요.
page, pageSize, keyword 쿼리 파라미터를 이용해 주세요.
getProduct() : GET 메서드를 사용해 주세요.
createProduct() : POST 메서드를 사용해 주세요.
request body에 name, description, price, tags, images 를 포함해 주세요.
patchProduct() : PATCH 메서드를 사용해 주세요.
deleteProduct() : DELETE 메서드를 사용해 주세요.
async/await 을 이용하여 비동기 처리를 해주세요.
try/catch 를 이용하여 오류 처리를 해주세요.
구현한 함수들을 아래와 같이 파일을 분리해 주세요.
export를 활용해 주세요.
ProductService.js 파일 Product API 관련 함수들을 작성해 주세요.
ArticleService.js 파일에 Article API 관련 함수들을 작성해 주세요.
이외의 코드들은 모두 main.js 파일에 작성해 주세요.
import를 활용해 주세요.
각 함수를 실행하는 코드를 작성하고, 제대로 동작하는지 확인해 주세요.
주요 변경사항
멘토에게