Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
pers0n4
approved these changes
Nov 6, 2024
Comment on lines
+1
to
+2
| export const DATABASE_URL = | ||
| "mongodb+srv://jungi010202:[email protected]/pandaDB?retryWrites=true&w=majority&appName=Cluster0"; |
There was a problem hiding this comment.
환경 변수(?)에 DB host와 password 정보가 전부 노출되어 있는 것 같은데, 이런 값들은 git에 포함되면 안 됩니다.
이런 credential 정보가 노출되면 GitHub 자체에서 차단을 해주는 걸로 알고 있긴 한데, 이런 보안 정보가 노출되면 서비스의 보안 위협뿐만 아니라 클라우드의 경우 의도치 않은 비용 과금도 발생할 수 있으니 기존 정보는 꼭 폐기하시길 바랍니다.
| app.delete("/product/:id", async (req, res) => { | ||
| const id = req.params.id; | ||
| const product = await Product.findByIdAndDelete(id); | ||
| if (task) { |
There was a problem hiding this comment.
해당 스코프에 task라는 변수는 존재하지 않는 걸로 보이는데, 혹시 이 코드 실행해보셨을까요?
Comment on lines
+14
to
+18
| app.get("/product/:id", async (req, res) => { | ||
| const id = req.params.id; | ||
| const product = await Product.findById(id); | ||
| res.send(product); | ||
| }); |
There was a problem hiding this comment.
상품을 하나만 가져오는 API 경로도 아래 전체 가져오기처럼 base url은 복수형을 유지해주면 API 경로를 일관성 있게 보여줄 수 있을 것 같네요.
- products
- products/:id
Comment on lines
+33
to
+36
| app.post("/product/register", async (req, res) => { | ||
| const newProduct = await Product.create(req.body); | ||
| res.status(201).send(newProduct); | ||
| }); |
There was a problem hiding this comment.
등록하기도 HTTP method만으로 충분히 행위를 표현할 수 있기 때문에 register 같은 경로 표현은 빼도 좋아 보입니디.
Comment on lines
+32
to
+99
| {/* <!-- 인기상품 div --> */} | ||
| <section className="popularItems"> | ||
| <div className="popularItemsBox"> | ||
| <div className="popItemLeftContentImgBox"> | ||
| <img | ||
| className="popularItemsImg" | ||
| src={hotItemsImg} | ||
| alt="popularImg" | ||
| /> | ||
| </div> | ||
| <div className="popItemRightContentText"> | ||
| <div className="hotItem">Hot item </div> | ||
| <div className="hotItemText1"> | ||
| 인기상품을 <br /> | ||
| 확인해 보세요 | ||
| </div> | ||
| <div className="hotItemText2"> | ||
| 가장 HOT한 중고거래 물품을 | ||
| <br /> | ||
| 판다 마켓에서 확인해 보세요 | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| {/* <!-- 상품검색 div --> */} | ||
| <section className="search"> | ||
| <div className="searchBox"> | ||
| <div className="searchLeftContentTextBox"> | ||
| <div className="searchText">Search </div> | ||
| <div className="searchText1"> | ||
| 구매를 원하는 <br /> | ||
| 상품을 검색하세요 | ||
| </div> | ||
| <div className="searchText2"> | ||
| 구매하고 싶은 물품은 검색해서 | ||
| <br /> | ||
| 쉽게 찾아보세요 | ||
| </div> | ||
| </div> | ||
| <div className="searchRightImgBox"> | ||
| <img className="searchImg" src={searchItemsImg} alt="searchImg" /> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| {/* <!-- 상품등록 div --> */} | ||
| <section className="register"> | ||
| <div className="registerBox"> | ||
| <div className="registerLeftContentImgBox"> | ||
| <img | ||
| className="registerImg" | ||
| src={registerItemsImg} | ||
| alt="registerImg" | ||
| /> | ||
| </div> | ||
| <div className="registerRightContentText"> | ||
| <div className="registerText">Register </div> | ||
| <div className="registerText1"> | ||
| 판매를 원하는 <br /> | ||
| 상품을 등록하세요 | ||
| </div> | ||
| <div className="registerText2"> | ||
| 어떤 물건이든 판매하고 싶은 상품을 | ||
| <br /> | ||
| 쉽게 등록하세요 | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> |
There was a problem hiding this comment.
비슷한 패턴의 코드가 반복되고 있는 것 같은데, 이 부분을 컴포넌트로 분해해보면 어떨까요?
| ) { | ||
| try { | ||
| const response = await fetch( | ||
| `https://panda-market-api.vercel.app/products?page=${page}&pageSize=${pageSize}&orderBy=${order}&keyword=${keyword}`, |
There was a problem hiding this comment.
중복되는 api 호스트도 환경 변수나 상수로 분리하면 좋을 것 같네요.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
요구사항
공통
Github에 스프린트 미션 PR을 만들어 주세요.
React, Express를 사용해 진행합니다.
프론트엔드 구현 요구사항
랜딩 페이지
HTML과 CSS로 구현한 랜딩페이지를 React로 마이그레이션하세요.
랜딩 페이지 url path는 "/"로 설정하세요.
중고마켓 페이지
중고마켓 페이지 url path를 "/items"으로 설정하세요.
페이지 주소가 "/items" 일 때 상단내비게이션바의 "중고마켓" 버튼의 색상은 "3692FF"입니다.
중고마켓 페이지 판매 중인 상품은 본인이 만든 GET 메서드를 사용해 주세요.
다만 좋아요 순 정렬 기능은 제외해 주세요.
사진은 디폴트 이미지로 프론트엔드에서 처리해주세요.
베스트 상품 목록 조회는 구현하지 않습니다.
'상품 등록하기' 버튼을 누르면 "/registration" 로 이동합니다. ( 빈 페이지 )
상품 등록 페이지
PC, Tablet, Mobile 디자인에 해당하는 상품 등록 페이지를 만들어 주세요.
상품 등록 url path는 "/registration"입니다.
상품 등록은 본인이 만든 POST 메서드를 사용해 주세요.
등록 성공 시, 해당 상품 상세 페이지로 이동합니다. (빈페이지)
백엔드 구현 요구사항
중고마켓
Product 스키마를 작성해 주세요.
id, name, description, price, tags, createdAt, updatedAt필드를 가집니다.
필요한 필드가 있다면 자유롭게 추가해 주세요.
상품 등록 API를 만들어 주세요.
name, description, price, tags를 입력하여 상품을 등록합니다.
상품 상세 조회 API를 만들어 주세요.
id, name, description, price, tags, createdAt를 조회합니다.
상품 수정 API를 만들어 주세요.
PATCH 메서드를 사용해 주세요.
상품 삭제 API를 만들어 주세요.
상품 목록 조회 API를 만들어 주세요.
id, name, price, createdAt를 조회합니다.
offset 방식의 페이지네이션 기능을 포함해 주세요.
최신순(recent)으로 정렬할 수 있습니다.
name, description에 포함된 단어로 검색할 수 있습니다.
각 API에 적절한 에러 처리를 해 주세요.
각 API 응답에 적절한 상태 코드를 리턴하도록 해 주세요.
. env 파일에 환경 변수를 설정해 주세요.
CORS를 설정해 주세요.
render.com로 배포해 주세요.
MongoDB를 활용해 주세요.
심화 요구사항
프론트엔드 구현 요구사항
상품 등록 페이지
유효한 조건
상품명: 1자 이상, 10자 이내
상품 소개: 10자 이상, 100자 이내
판매 가격: 1자 이상, 숫자
태그: 5글자 이내
주요 변경사항
-router를 이용해서 페이지들을 만들어 나눴습니다
-App.js에 topNav와 footer.js 를 넣어서 컴포넌트로 활용하고 Main.js를 만들어 라우터를 이용해서 페이지들을 연결했습니다
-apis 폴더의 productService.js 파일에 새로운 상품 생성 api를 하나 만들었습니다 나머지 api들은 내일 더 만들겠습니다..
-Register.js 페이지를 추가했습니다
-server폴더를 만들어서 거기에 백엔드 작업을 했습니다
스크린샷
멘토에게
-react와 express가 상호작용하는 것에 조금씩 익숙해져가는 것 같습니다
-아직 다 완성하지 못해서 더 만들겠습니다