[FE] 3주차 중간 PR (Daisy & Goody)

[damilog]

진행사항

• 마일스톤 페이지 뷰 구성
• 마일스톤 데이터 CRUD
• 라벨 페이지 뷰 구성
• 마일스톤 데이터 CRD

참고

PR 반영 오류(?)

• PR을 보낸 Origin의 FE-review 브랜치에는 아래 common/Button가 있었으나 이 PR 내에서 확인해보니 해당 파일을 포함하지 않고있습니다.
  
• 3번 질문에 대해서는 아래 Origin 링크에서 확인 부탁드려요!
• https://github.com/pbg0205/issue-tracker/blob/FE-review/frontend/src/components/common/Button/BlueButtons.jsx

들여쓰기

• VS code 내에서는 이렇게 들여쓰기 간격이 깊지 않은데 깃헙에서는 상당히 깊게 보입니다.. 이부분 참고 부탁드려요..!

질문

1. useFetch 커스텀 훅 관련 질문

fetch 메소드로 GET 뿐만 아니라 POST, PUT 요청 등을 할 수 있는 커스텀 훅 useFetch를 만들었습니다.
근데 POST나 PUT 의 경우 fetch 가 특정 이벤트 발생(클릭 etc) 후에 실행되어야 하기 때문에,
fetchData라는 메소드를 커스텀 훅 내부로부터 리턴받는 방법을 사용했습니다.
그래서 제가 궁금한 건, 이렇게 커스텀 훅 내부의 fetch를 주관하는 메소드인 fetchData를 리턴시켜서
컴포넌트에서 가져다 쓰는 방법이 맞는지 궁금합니다.

    
const useFetch = (url, method, callback, reqData = null) => {
	const [status, setStatus] = useState("대기 중");
	const [error, setError] = useState(null);

	const option =
		method === "GET"
        ? {
            headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${localStorage.getItem("accessToken")}`,
            },
        }
            : {
		method: method,
		headers: {
		"Content-Type": "application/json",
		Authorization: `Bearer ${localStorage.getItem("accessToken")}`,
        },
        body: JSON.stringify(reqData),
        };

	const fetchData = async () => {
		console.log("fetchData func initiated");
		try {
			setStatus(`fetch start from ${url}`);
			const res = await fetch(url, option);
			const resData = await res.json();
			if (!res.ok) throw new Error(res.status);
			else {
				console.log("in useFetch:", resData);
				callback(resData);
				setStatus(`fetch complete from ${url}`);
				return { resData, status };
			}
		} catch (error) {
			setStatus(`fetch failed from ${url} due to ${error}`);
			setError(error);
		}
	};

	useEffect(() => {
		fetchData();
	}, [url]);

	return { status, fetchData };
};

export default useFetch;

2. 하드 코딩이 필요한 텍스트 관리 질문

하드 코딩이 필요한 텍스트를 이런식으로 따로 관리했는데 괜찮은 방법인지, 현업에서는 어떻게 관리하는지 궁금합니다~!

• 아래는 data.js 중 labelData 입니다.

export const labelData = {
	creatorTitle: "새로운 레이블 추가",
	editorTitle: "레이블 편집",
	nameTitle: "레이블 이름",
	descriptionTitle: "설명(선택)",
	backgroundColorTitle: "배경 색상",
	textColorTitles: "텍스트 색상",
	buttons: {
		cancel: "취소",
		submit: "완료",
		radio: [
			{ value: "#FEFEFE", text: "밝은 색" },
			{ value: "#000000", text: "어두운 색" },
		],
	},
};

3. common/Button/BlueButton, WhiteButton 질문

• UI 내 중복되는 버튼 스타일 + 아이콘 조합이 많아서 재사용 가능한 버튼 컴포넌트를 만들어봤는데요. 사실 styled Component로만 지정해줘도 되지만 그렇게 되면 그 스타일을 쓰는 곳마다 아이콘을 따로 import 해주고 해당 버튼 색상에 맞게 svg icon storke색상도 변경해야하는 번거로움이 있었습니다. 그래서 버튼 색상이 whiteButton, BlueButton으로 구분해서 그 버튼 스타일에 필요한 icon만 import해서 사용하고 버튼 스타일을 props로 받아 쓸 수 있도록 만들었는데요.(다른 컴포넌트에 버튼을 import해서 쓸 땐 컴포넌트 내 용도에 맞게 버튼 컴포넌트 이름을 변경해서 사용합니다! e.g.import CancelButton from "....BlueButton" )
• 괜찮은 방법인지 궁금하고, Blue와 white버튼에서 사용하는 icon, background color, border, color 등이 달라도 용도가 같으니 두 버튼을 하나의 컴포넌트로 합치는게 좋을지 궁금합니다!

[crongro]

fetch 메소드로 GET 뿐만 아니라 POST, PUT 요청 등을 할 수 있는 커스텀 훅 useFetch를 만들었습니다.
근데 POST나 PUT 의 경우 fetch 가 특정 이벤트 발생(클릭 etc) 후에 실행되어야 하기 때문에,
fetchData라는 메소드를 커스텀 훅 내부로부터 리턴받는 방법을 사용했습니다.
그래서 제가 궁금한 건, 이렇게 커스텀 훅 내부의 fetch를 주관하는 메소드인 fetchData를 리턴시켜서
컴포넌트에서 가져다 쓰는 방법이 맞는지 궁금합니다.

하다보면 그런 생각이 나올법하네요.
딱히 문제가 보이진 않지만 유틸리티와 커스텀훅이 결합된 모습이라 바람직해보이진 않네요.

커스텀훅에서 어떤 상태를 만들어서, 그 상태가 변경되면 커스텀 훅이 실행되어서, 그안에 useEffect가 실행되도록 하는게 좋을것 같아요.
커스텀훅의 useFetch 에서는 상태변경 메서드를 반환하고, 이벤트 리스너에서는 그 메서드를 통해서 상태를 변경시켜서 커스텀 훅이 실행되도록~
그런 방향이 좋은데 이경우 그게 잘 될지 모르겠네요.

필요하면 post용 커스텀훅을 따로 만들어야 할 수도..

[crongro]

xport const labelData = {
creatorTitle: "새로운 레이블 추가",
editorTitle: "레이블 편집",
nameTitle: "레이블 이름",
descriptionTitle: "설명(선택)",
backgroundColorTitle: "배경 색상",
textColorTitles: "텍스트 색상",
buttons: {
cancel: "취소",
submit: "완료",
radio: [
{ value: "#FEFEFE", text: "밝은 색" },
{ value: "#000000", text: "어두운 색" },
],
},
};

네 좋은 방법입니다. 네임스페이스를 체계적으로 잘 그룹지어서 관리해야겠죠.

[crongro]

• UI 내 중복되는 버튼 스타일 + 아이콘 조합이 많아서 재사용 가능한 버튼 컴포넌트를 만들어봤는데요. 사실 styled Component로만 지정해줘도 되지만 그렇게 되면 그 스타일을 쓰는 곳마다 아이콘을 따로 import 해주고 해당 버튼 색상에 맞게 svg icon storke색상도 변경해야하는 번거로움이 있었습니다. 그래서 버튼 색상이 whiteButton, BlueButton으로 구분해서 그 버튼 스타일에 필요한 icon만 import해서 사용하고 버튼 스타일을 props로 받아 쓸 수 있도록 만들었는데요.(다른 컴포넌트에 버튼을 import해서 쓸 땐 컴포넌트 내 용도에 맞게 버튼 컴포넌트 이름을 변경해서 사용합니다! e.g.import CancelButton from "....BlueButton" )
• 괜찮은 방법인지 궁금하고, Blue와 white버튼에서 사용하는 icon, background color, border, color 등이 달라도 용도가 같으니 두 버튼을 하나의 컴포넌트로 합치는게 좋을지 궁금합니다!

제가 이건 답을 못하겠네요. 안하고 싶고요.
먼저 이런 고민이 너무 좋고요. 이런 걸 개발자의 삶을 살면서 계속 하시게 될거에요.
정답이 없는데 그때그때 상황에서 최선의 선택을 하는 것이죠.
버튼이 다양하게 활용될지, 버튼이 어떤 고정된 패턴이 있는지 , 버튼의 갯수가 한정적인지 더 늘어날지 등등 을 고려해야 하는데요.
프로젝트 현재 상황에서 그걸 고려해서 결정하는 것이죠.
여기서 중요한게 '상황을 파악하고 예상을 하는 것' 그것에 대비하는 최적의 코드를 찾는것이겠죠.

어쩌면 예상하기 어려우니, 현재 상황에 최선을 적용하고 시간이 흐르면서 상황에 적용하도록 코드를 리팩토링 해야할거 같습니다.