[황승찬] Sprint10#148
Hidden character warning
Conversation
Irelander
left a comment
Irelander
left a comment
There was a problem hiding this comment.
백엔드 코드를 작성할땐, 클라이언트의 데이터는 신뢰할수 없다를 전재로 작성하는게 좋아요! 넘어오는 데이터를 바이패스로 이용하면 편리하지만, 실제 프로젝트에서는 위험성이 존재합니다.
finally 블럭의 처리나, response가 두번 되지는 않는지 디테일한 부분을 조금만 더 신경 써주면 좋을것 같습니다 :)
이번 스프린트도 고생하셨습니다. :)
| const article = await prisma.article.create({ | ||
| data: { | ||
| ...req.body, | ||
| userName: user.name, | ||
| user: { connect: { id: user.id } }, | ||
| }, | ||
| }); |
There was a problem hiding this comment.
클라이언트에서 넘어오는 모든 body 데이터를 스프레드 연산자로 사용하면 위험할수 있어요 ㅎㅎ
필요한 값들만 사용될수 있도록 처리하는게 좋습니다 !
| if (!authHeader && !authHeader.startsWith('Bearer ')) { | ||
| const error = new Error('token 양식 오류.'); | ||
| error.code = 401; | ||
| throw error; | ||
| } |
There was a problem hiding this comment.
authHeader가 falsy한 값이라하면 이미 undefined/null이기때문에 .startsWith가 호출된다면 에러가 발생할꺼 같아요 ㅎㅎ AND 연산이 아닌 OR 연산으로 처리해야 될것 같네요!
| } | ||
|
|
||
| export async function updateUser(userId, data) { | ||
| const user = repo.update(userId, data); |
There was a problem hiding this comment.
getProductCommentList와 getArticleCommentList가 거의 동일 (productId vs articleId만 다름 ) 해서 공통함수로 만들어 사용하면 더 좋을꺼 같아요 ㅎㅎ
| const products = await prisma.product.findMany({ | ||
| where: { | ||
| // 검색 쿼리 | ||
| OR: [{ name: { contains: keyword } }, { description: { contains: keyword } }], |
There was a problem hiding this comment.
키워드가 빈값일때는 or연산에서 제거되는게 좋을꺼 같아요 ㅎㅎ 불필요하게 or연산이 발생합니다 !
| try { | ||
| const { id } = req.params; | ||
| const userId = req.auth?.userId; | ||
| const product = await prisma.product.findUnique({ | ||
| where: { id }, | ||
| }); | ||
| if (product.userId !== userId) { | ||
| const error = new Error('user is not owner'); | ||
| error.code = 403; | ||
| throw error; | ||
| } | ||
| } catch (err) { | ||
| next(err); | ||
| } finally { | ||
| next(); | ||
| } |
There was a problem hiding this comment.
파이널리 블럭은 트라이&캐치 블럭과 상관없이 항상 실행되는 블럭이라 캐치에서 next를 실행하게 되면 다시 파이널리 블럭에서도 넥스트가 실행되서 중복호출이 발생합니다 !
| router.use('/', commentsRouter); | ||
| router.use('/', uploadsRouter); |
There was a problem hiding this comment.
프리픽스가 같아서, 신경쓰지 않는다면 경로가 충돌될수 있을꺼 같아요 ㅎㅎ 구분지어 주는게 좋을꺼 같습니다.
| @@ -0,0 +1,16 @@ | |||
| export default function errorHandler(error, req, res, next) { | |||
| if (error.name === "UnauthorizedError") { | |||
| res.status(401).send("invalid token..."); | |||
There was a problem hiding this comment.
해당 분기에서 이미 response를 보내고 있는데 함수는 계속 실행 ( 리턴하지 않아 ) 되기에 응답이 두번 전송될수 있어요 ! ㅎㅎ
|
하나하나 답변 달아주셔서 감사합니다ㅠ 지금은 잘 이해가 되지 않고, |
2 participants
요구사항
기본 요구사항
공통
Github에 위클리 미션 PR을 만들어 주세요.
React.js 혹은 Next.js를 사용해 진행합니다.
RESTful를 설계하고 백엔드 코드를 변경하세요.
(풀스택) 설계한 백엔드 코드에 맞게 프론트엔드 코드를 변경해 주세요.
https://panda-market-api.vercel.app의 API를 사용한 코드를 본인의 백엔드 API 코드로 변경하세요.
(백엔드) 프론트엔드 코드에 맞게 백엔드 코드를 변경해 주세요.
백엔드 코드에 swagger를 추가해 API 명세 문서를 생성해 주세요.
프론트엔드 구현 요구사항
중고마켓 페이지
디폴트 이미지로 처리한 이미지를 실제 Product Get API에서 가져온 이미지로 변경해 주세요.
좋아요 순 정렬 기능을 붙여주세요.
베스트 상품 기능을 추가해 주세요. 베스트 상품은 가장 많이 좋아요를 받은 순으로 PC 기준 최대 4개까지 조회 가능합니다.
상품 등록하기 페이지
상품 이미지 등록 기능을 구현합니다. 파일을 선택해 이미지를 업로드하고, preview를 볼 수 있도록 구현합니다. 이미지는 최대 3개까지만 등록 가능하도록 구현해 주세요.
동일하게 상품 이미지 수정 기능도 추가합니다.
상품 등록 성공 시 중고마켓 페이지로 이동해 주세요.
백엔드 구현 요구사항
상품 등록
"상품 등록하기" 버튼 클릭 시, 상품 정보 등록 API 엔드포인트에 요청을 보내 상품을 등록합니다.
상품 등록 시 필요한 필드(이름, 설명, 가격 등)의 유효성을 검증하는 미들웨어를 구현합니다.
multer 미들웨어를 사용하여 이미지 업로드 API를 구현해 주세요.
업로드된 이미지는 서버에 저장하고, 해당 이미지의 경로를 response 객체에 포함해 반환합니다.
상품 상세
좋아요 기능
에러 처리
모든 예외 상황을 처리할 수 있는 에러 핸들러 미들웨어를 구현합니다.
서버 오류(500), 사용자 입력 오류(400 시리즈), 리소스 찾을 수 없음(404) 등 상황에 맞는 상태값을 반환합니다.
라우트 중복 제거
중복되는 라우트 경로(예: /users에 대한 get 및 post 요청)를 app.route()로 통합해 중복을 제거합니다.
express.Router()를 활용하여 중고마켓/자유게시판 관련 라우트를 별도의 모듈로 구분합니다.
인증
User 스키마를 작성해 주세요.
id, email, nickname, image, encryptedPassword, createdAt, updatedAt 필드를 가집니다.
회원가입 API를 만들어 주세요.
email, nickname, password 를 입력하여 회원가입을 진행합니다.
password는 해싱해 저장합니다.
로그인 API를 만들어 주세요.
사용자의 신원을 확인하고, 성공적인 인증 후에는 액세스 토큰을 발급해 response 객체에 포함해 반환합니다.
상품 기능 인가
게시글 기능 인가
댓글 기능 인가
심화 요구사항
상태코드 (웹 API 관련)
인증
OAuth를 활용한 인증
프로젝트 구조 변경
프로젝트의 구조와 복잡성을 관리하기 위해 MVC 패턴이나 Layered Architecture와 같은 설계 방식을 적용해 보세요.
(생략 가능) 자유게시판 게시물 등록
프론트엔드를 Next.js로 Migration 했을 경우에만 진행해 주세요.
게시물 등록 시 이미지 등록 기능을 구현합니다. 파일을 선택해 이미지를 업로드하고, preview를 볼 수 있도록 구현합니다. 이미지는 최대 3개까지만 등록 가능하도록 구현해 주세요.
게시물 등록 시 필요한 필드(제목, 내용 등)의 유효성 검증하는 미들웨어를 구현합니다.
multer 미들웨어를 사용하여 이미지 업로드 API를 구현해 주세요.
업로드된 이미지는 서버에 저장하고, 해당 이미지의 경로를 response 객체에 포함해 반환합니다.
주요 변경사항
구현
이전 스프린트9에서 못 구현한 백엔드 로그인/회원가입(인증/인가)를 구현했습니다.
(주요 기술 스택: express 미들웨어, jwt, passport, zutand, cookie)
multer를 사용하여 상품 이미지 업로드 기능을 구현했습니다.
(주요 기술 스택: formData 타입 파일 업로드( + 이미지 파일 검증), DB에서는 저장 위치 url만 관리, express.static)
로그인한 사용자만, "상품, 게시글, 댓글"의 "등록"이 가능하도록 api를 수정했습니다.
상품 상세 페이지 좋아요 버튼 클릭시 카운트가 올라가는 단순한 api를 구현했습니다.
미구현
스크린샷
멘토에게