[김영운] Sprint10

[YoungUnKim]

요구사항

기본

• [] 상품 등록 페이지 주소는 “/addboard” 입니다.
• [] 게시판 이미지는 최대 한개 업로드가 가능합니다.
• [] 각 input의 placeholder 값을 정확히 입력해주세요.
• [] 이미지를 제외하고 input 에 모든 값을 입력하면 ‘등록' 버튼이 활성화 됩니다.
• [] 회원가입, 로그인 api를 사용하여 받은accessToken을 사용하여 게시물 등록을 합니다.
• [] ‘등록’ 버튼을 누르면 게시물 상세 페이지로 이동합니다.
• [] 상품 상세 페이지 주소는 “/addboard/{id}” 입니다.
• [] 댓글 input 값을 입력하면 ‘등록' 버튼이 활성화 됩니다.
• [] 활성화된 ‘등록' 버튼을 누르면 댓글이 등록됩니다

심화

주요 변경사항

스크린샷

멘토에게

• 아직 만드는 도중이라 생각보다 양이 적네요..
• 일단 급하게 올려두고 주말도 작업들어갈것 같습니다.
• 안 올리는 것보다.. 나은것 같긴한데 너무 적어서..

[kiJu2]

수고 하셨습니다 ! 스프리트 미션 하시느라 정말 수고 많으셨어요.
학습에 도움 되실 수 있게 꼼꼼히 리뷰 하도록 해보겠습니다.

[kiJu2]

아직 만드는 도중이라 생각보다 양이 적네요..

괜찮습니다 !! 꾸준히 올리시는 모습 너무 보기 좋습니다 😊

일단 급하게 올려두고 주말도 작업들어갈것 같습니다.

넵넵 ! 좋습니다 ㅎㅎ

안 올리는 것보다.. 나은것 같긴한데 너무 적어서..

괜찮아요 괜찮아요 !

[kiJu2]

오호 ! 404 페이지를 만들었군요 ! 굳굳

[kiJu2]

예전에 에러 컴포넌트 관련하여 다음과 같이 만들었던 기억이 나네요:

import { HttpStatusCode } from 'axios';
import React from 'react';

interface ErrorProps {
  status: HttpStatusCode;
}

const statusMessages: Record<HttpStatusCode, string> = {
  400: "Bad Request - The server could not understand the request due to invalid syntax.",
  401: "Unauthorized - The client must authenticate itself to get the requested response.",
  403: "Forbidden - The client does not have access rights to the content.",
  404: "Not Found - The server can not find the requested resource.",
  500: "Internal Server Error - The server has encountered a situation it doesn't know how to handle.",
  502: "Bad Gateway - The server was acting as a gateway or proxy and received an invalid response from the upstream server.",
  503: "Service Unavailable - The server is not ready to handle the request.",
  504: "Gateway Timeout - The server is acting as a gateway or proxy and did not get a response in time from the upstream server.",
  //  ...
};

const Error: React.FC<ErrorProps> = ({ status }) => {
  const message = statusMessages[status] || "An unknown error has occurred.";

  return (
    <div className="error-container">
      <h1>Error {status}</h1>
      <p>{message}</p>
    </div>
  );
};

export default Error;

[kiJu2]

리액트 이벤트 타입은 다음과 같이 정의할 수 있습니다 !

Suggested change

	function onChangeValues(key: keyof IBoardValues, value: string) {
	setValues(prevValues => ({ ...prevValues, [key]: value }));
	}
	function onChangeValues(e: React.ChangeEvent<HTMLInputElement>) {
	const input = e.target.value;
	}

이미 리액트에서 제공되는 타입은 새로 정의할 필요 없겠죠? 😊

[kiJu2]

다음과 같이 라벨과 인풋을 연결할 수 있습니다 !

Suggested change

	<label>*제목</label>
	<input type="text" placeholder="제목을 입력해주세요" />
	<label>
	*제목
	<input type="text" placeholder="제목을 입력해주세요" />
	</label>

혹은 다음과 같이:

Suggested change

	<label>*제목</label>
	<input type="text" placeholder="제목을 입력해주세요" />
	<label for="title">*제목</label>
	<input id="title" type="text" placeholder="제목을 입력해주세요" />

[kiJu2]

굳굳 ! 좋은 생각입니다.

프로젝트에서는 API 호출 로직을 별도의 파일로 분리하여 관리하는 것이 일반적이예요. 이렇게 하면 컴포넌트, 페이지, 훅 등 어디든 사용될 수 있겠죠? 😊
코드의 재사용성을 높이고, 유지보수가 쉬워질 수 있습니다 ! API 함수를 모듈화하여 사용하면 코드가 더 깔끔하고 읽기 쉬워집니다. 다음은 프로젝트의 디렉토리 구조와 API 함수 예제입니다:

// src/services/apis/user.api.ts (예시입니다 !)
export const getUserInfo = async () => {
	try {
		const { data } = await axios.get('/sample/user');
		return data;
	} catch(error) {
		throw error;
	}
};

[kiJu2]

수고 하셨습니다 영운님 !!
스프린트 미션 꼭 내기 ! 저희의 약속을 꿋꿋히 지켜주셔서 감사드리지요 ㅎㅎㅎ

꾸준히 내는게 가장 중요하다고 생각합니다 ! 😊