Basic 윤이준 sprint3#57
Hidden character warning
Conversation
|
이번 스프린트 미션 ３는 제 기준에서 많이 어렵고 구조도 잡기 어려워 ＡＩ의 힘을 많이 빌렸던 거 같습니다。자바스크립트를 들어갈 때부터 많이 어려움을 느끼고 있는데 최대한 자바와 ＲＥＡＣＴ에 익숙해지고 싶습니다。 |
yoonleejun
added
미완성
greatelv
left a comment
greatelv
left a comment
There was a problem hiding this comment.
안녕하세요! PR 변경 사항을 잘 확인했습니다.
전반적으로 파일 분리와 구조를 잘 잡아주셨어요! 꼼꼼히 리뷰 후 도움이 될 만한 코멘트들을 라인별로 함께 남겨두었으니 확인해 보시면 좋겠습니다. 수고하셨습니다! 🥳
| @@ -0,0 +1,111 @@ | |||
| <!doctype html> | |||
There was a problem hiding this comment.
[P0] 전체적인 파일 구조와 마크업을 요구사항에 맞게 잘 구성해주셨습니다! 특히 <nav>, <header>, <main>, <footer> 등 시맨틱 태그를 적절히 활용하여 문서 구조를 명확히 표현하신 점이 아주 훌륭합니다.
| </div> | ||
| `</nav> | ||
| <header class="head"> | ||
| <div class="head_container"> |
There was a problem hiding this comment.
[P5] <nav> 태그를 닫는 부분 앞에 백틱(`)이 포함되어 있습니다. 화면에 불필요한 문자가 노출되거나 문법 오류로 인식될 수 있으니 오타를 수정하시는 것을 권장합니다.
| </div> | ||
| <div class="password"> | ||
| <div class="password_top">바밀번호</div> | ||
| <input |
There was a problem hiding this comment.
[P5] '바밀번호'라는 오타가 포함되어 있습니다. '비밀번호'로 텍스트를 수정해 주시는 것을 권장드립니다.
| @@ -0,0 +1,113 @@ | |||
| const BASE_URL = "https://panda-market-api-crud.vercel.app"; | |||
|
|
|||
| export function getArticleList(page = 1, pageSize = 10, keyword = "") { | |||
There was a problem hiding this comment.
[P5] ProductService.js에서는 async/await을 사용하셨는데, 여기서는 .then() 패턴을 사용하셨네요. 프로젝트 전체적인 코드의 일관성을 위해 하나의 비동기 처리 관리 패턴(예: async/await)으로 통일하여 관리하는 것을 권장합니다.
| return fetch(url) | ||
| .then(function (response) { | ||
| if (!response.ok) { | ||
| console.error("목록 조회 실패!"); |
There was a problem hiding this comment.
[P4] 에러가 발생했을 때(!response.ok) console.error만 호출하고 방어 로직 없이 그대로 return response.json();을 실행하고 계십니다. 만약 정상적인 JSON 포맷 응답이 아니라면 후속 체이닝에서 에러가 발생할 수 있습니다. throw new Error(...) 형태를 활용해 에러를 던져주어 catch 구문 등에서 안전하게 예외 처리하도록 개선하는 것을 추천합니다.
| @@ -0,0 +1,108 @@ | |||
| const BASE_URL = "https://panda-market-api-crud.vercel.app"; | |||
There was a problem hiding this comment.
[P0] async/await 문법을 활용해 비동기 API 요청 처리를 깔끔하고 가독성 좋게 작성하신 부분 좋습니다! 앞으로도 이런 패턴을 적극적으로 활용하시면 좋을 것 같습니다.
| @@ -0,0 +1,108 @@ | |||
| const BASE_URL = "https://panda-market-api-crud.vercel.app"; | |||
|
|
|||
| export async function getProductList(page = 1, pagesize = 10, keyword = "") { | |||
There was a problem hiding this comment.
[P5] 자바스크립트 변수명 네이밍 컨벤션을 지키기 위해 pagesize 매개변수를 pageSize처럼 카멜 케이스(Camel Case)로 맞춰 작성해 주시면 좋을 것 같습니다.
| const data = await response.json(); | ||
| return data; | ||
| } catch (error) { | ||
| console.error("오류"); |
There was a problem hiding this comment.
[P5] 모든 catch 블록에서 동일하게 "오류"라고만 로깅하고 있는데, console.error("목록 조회 중 에러:", error);처럼 어떤 영역에서 발생한 에러인지 구체적인 에러 메시지와 객체를 남겨주시면 추후 디버깅을 하실 때 훨씬 편리해집니다.
| @@ -0,0 +1,171 @@ | |||
| .total { | |||
There was a problem hiding this comment.
[P4] login.css와 signup.css 파일에 완전히 동일하게 사용되는 클래스와 스타일 속성들이 많습니다. (예: .total, .email, .easy_login 등) 공통적으로 쓰이는 UI 요소에 대한 CSS는 별도의 파일(예: common.css)로 분리하면 중복 코드를 줄이고 이후 유지보수하기 훨씬 수월해질 것입니다.
| deleteProduct, | ||
| } from "./ProductService.js"; | ||
|
|
||
| getArticleList(1, 5).then(function (data) { |
There was a problem hiding this comment.
[P5] 서비스 함수 기능들이 잘 동작하는지 확인하기 위해 개인적으로 작성해주신 테스트 코드인 것 같습니다! 실제 프로덕션 동작 환경이나 최종 제출 시에는 불필요한 콘솔 로그가 남지 않도록 모두 제거하거나 주석 처리 후 커밋하는 습관을 들이는 것이 좋습니다.
2 participants
요구사항
기본 요구사항
공통
[X] Github에 스프린트 미션 PR을 만들어 주세요.
[X] 'https://panda-market-api-crud.vercel.app/docs/#/Article' API를 이용하여 아래 함수들을 구현해 주세요.
[X] getArticleList() : GET 메서드를 사용해 주세요.
[X] page, pageSize, keyword 쿼리 파라미터를 이용해 주세요.
[X] getArticle() : GET 메서드를 사용해 주세요.
[X] createArticle() : POST 메서드를 사용해 주세요.
[X] request body에 title, content, image 를 포함해 주세요.
[X] patchArticle() : PATCH 메서드를 사용해 주세요.
[X] deleteArticle() : DELETE 메서드를 사용해 주세요.
[X] fetch 혹은 axios 를 이용해 주세요.
[X] 응답의 상태 코드가 2XX가 아닐 경우, 에러메시지를 콘솔에 출력해 주세요.
[X] .then() 메서드를 이용하여 비동기 처리를 해주세요.
[X] .catch() 를 이용하여 오류 처리를 해주세요.
[X] 'https://panda-market-api-crud.vercel.app/docs/#/Product' API를 이용하여 아래 함수들을 구현해 주세요.
[X] getProductList() : GET 메서드를 사용해 주세요.
[X] page, pageSize, keyword 쿼리 파라미터를 이용해 주세요.
[X] getProduct() : GET 메서드를 사용해 주세요.
[X] createProduct() : POST 메서드를 사용해 주세요.
[X] request body에 name, description, price, tags, images 를 포함해 주세요.
[X] patchProduct() : PATCH 메서드를 사용해 주세요.
[X] deleteProduct() : DELETE 메서드를 사용해 주세요.
[X] async/await 을 이용하여 비동기 처리를 해주세요.
[X] try/catch 를 이용하여 오류 처리를 해주세요.
[X] 구현한 함수들을 아래와 같이 파일을 분리해 주세요.
[X] export를 활용해 주세요.
[X] ProductService.js 파일 Product API 관련 함수들을 작성해 주세요.
[X] ArticleService.js 파일에 Article API 관련 함수들을 작성해 주세요.
[X] 이외의 코드들은 모두 main.js 파일에 작성해 주세요.
[X] import를 활용해 주세요.
[X] 각 함수를 실행하는 코드를 작성하고, 제대로 동작하는지 확인해 주세요.