Skip to content

Conversation

@paengdal
Copy link
Collaborator

@paengdal paengdal commented Nov 12, 2024

요구사항

기본 요구사항

공통

  • Github에 스프린트 미션 PR을 만들어 주세요.
  • '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를 활용해 주세요.
    • 각 함수를 실행하는 코드를 작성하고, 제대로 동작하는지 확인해 주세요.

주요 변경사항

스크린샷

멘토에게

  • async await과 then 형식, fetch와 axios..어떤 것이 더 많이 쓰이나요? 🤔 역시 다 알고 잘 써야할까요? 😅

@paengdal paengdal requested a review from jhaemin November 12, 2024 02:21
@paengdal paengdal self-assigned this Nov 12, 2024
@paengdal paengdal added 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. 최종 제출 스프린트미션 최종 제출본입니다. labels Nov 12, 2024
@paengdal paengdal requested review from seobew and removed request for jhaemin November 26, 2024 05:10
Copy link

@seobew seobew left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

형민님 이번 스프린트 고생하셨습니다!
작성해주신 코드와 커밋들을 보니 경험도 많으시고 개발을 잘 하시는 것 같아요

커밋도 깔끔하게 적기 힘든데, 더군다나 컨벤셔널 커밋들까지
BREAK CHANGE를 여기서 처음보는것 같아요 ㅎㅎ

고칠것은 사실 거의 없고 공통 로직 따로 빼는것 정도 코멘트 남겨놨습니다!
나중에 한번 확인해주세요~
수고하셨습니다!

import axios from "axios";

const instance = axios.create({
baseURL: "https://sprint-mission-api.vercel.app/",
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

axios 로 작성하셨다니 좋습니다~ 다만 baseUrl 에 마지막에 슬래시는 없어도 될것 같습니다!
아래쪽에 인스턴스에서 get 등을 호출할때 "/articles" 이런식으로 호출되다보니

https://sprint-mission-api.vercel.app//articles 이런식으로 들어갑니다. 동작은 하지만 그래도 슬래시 하나 빼주는게 더 좋을것 같아요!

baseURL: https://sprint-mission-api.vercel.app 요런식으로요

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

넵! 명심하겠습니다. 안 그래도 다음 미션할 때 base url에 / 했다가..계속 에러가 나서 한참을 헤맸었습니다 ㅠㅠ

);
}

/* fetch로 구현 연습 */
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오.. fetch로도 따로 구현하시고, axios로 작업하셧군요!

.delete(`/articles/${id}`)
.then((res) => console.log(res.data))
.catch((e) =>
console.log(
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

다 같은 에러 로깅을 하고 있는 것 같은데 요런것을 따로 함수로 빼면 더 간단해질듯 합니다.

function logError(e) {
  console.log(`status: ${e.response.status}\nmessage: ${e.response.data.message}`)
}
//
instance.get(`/articles/${id}`)
.then((res) => console.log(res.ata))
.catch(logError);

요렇게 빼면 모든 catch문을 저렇게 변경할수 있습니다!

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

우왓..이걸로도 엄청 깔끔해지네요.

@@ -0,0 +1,61 @@
import axios from "axios";

const instance = axios.create({
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

axios.create로 인스턴스까지 만드실줄 아신다면, 저는 axios 관련 js 를 만들어서 ArticleSerice, ProductService에서 같은 인스턴스로 빼볼듯 합니다! 중복된 코드 제거는 언제나 좋습니다 ㅎㅎ

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

당장은 무슨 뜻인지 잘 모르겠지만 잘 생각해보겠습니닷! 😳


export async function getProductList(params = {}) {
try {
const res = await instance.get("/products", { params });
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오 여기는 async await 을 하셨군요 try catch로 잘 처리 된것 같습니다!

@seobew
Copy link

seobew commented Nov 26, 2024

async await과 then 형식, fetch와 axios..어떤 것이 더 많이 쓰이나요? 🤔 역시 다 알고 잘 써야할까요? 😅

저는 개인적으로 async await + axios 를 많이 씁니다만 상황에따라 then도 많이 씁니다. fetch는 잘 안쓰는것 같네요 ㅎㅎ 다만 axios안쓰고 fetch만 쓰는곳들도 있다고 들었습니다. 고로 역시 다 알고 잘 써야하긴 해요! 그래도 axios, async await 를 좀더 추천드립니다.

@seobew
Copy link

seobew commented Dec 2, 2024

@paengdal 님 이거 conflict 들 해결해주시겠어요?? 머지하려고 합니다!

@paengdal
Copy link
Collaborator Author

paengdal commented Dec 2, 2024

@paengdal 님 이거 conflict 들 해결해주시겠어요?? 머지하려고 합니다!

아 제가 conflict를 배우긴 했지만 한번도 해본적이 없어서 ㅠㅠ
지금 sprint4로 브랜치 전환을 했더니 vscode나 탐색기 상에서 저 파일들은 안 보이더라구요. (저 파일들은 sprint3에 사용했던 파일들입니다.)
이런 경우 혹시 어떻게 해야할까요? ㅠㅠ

@paengdal
Copy link
Collaborator Author

paengdal commented Dec 2, 2024

@paengdal 님 이거 conflict 들 해결해주시겠어요?? 머지하려고 합니다!

아 저 아래 파일들이 아니군요! conflict를 확인할 수 있는 방법만 좀 부탁드립니다!
저도 찾아보겠습니다.

@paengdal
Copy link
Collaborator Author

paengdal commented Dec 2, 2024

@paengdal 님 이거 conflict 들 해결해주시겠어요?? 머지하려고 합니다!

뭣 때문에 충돌이 나는지, 어디서 내용을 보는지도 잘 모르겠네요. ㅠㅠ
일단 upstream의 basic-조형민 내용을 로컬에 pull을 다시 했습니다. (sprint3까지의 내용)
그런데 sprint4의 내용에는 저 충돌난 파일들이 없는데…어떻게 어디서 충돌이 나는건지를 모르겠어요. ㅠㅠ

@paengdal paengdal requested a review from seobew December 2, 2024 02:46
@paengdal
Copy link
Collaborator Author

paengdal commented Dec 2, 2024

@paengdal 님 이거 conflict 들 해결해주시겠어요?? 머지하려고 합니다!

죄송한데 검색해서 이것저것 입력해보고는 있으나 잘 모르겠습니다.

@paengdal paengdal closed this Dec 2, 2024
@paengdal paengdal reopened this Dec 2, 2024
@paengdal paengdal closed this Dec 2, 2024
@paengdal paengdal reopened this Dec 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. 최종 제출 스프린트미션 최종 제출본입니다.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants