개발/프로그래머스 데브코스

프로그래머스 데브코스 58일차 with. TS 웹 풀스택

눌지 2024. 6. 26. 01:06

📚요약

지난 시간에 이어 프로젝트 구현을 진행하겠습니다.

 

📖리액트 - 업무 관리 프로젝트

오늘은 지난 시간에 이어 EditModal과 LoggerModal을 구현했습니다. 기존에 진행했던 구현에서 살짝씩만 바꿔서 구현했기 때문에 새로운 내용은 보이지 않았습니다.

 

📄스타일 수정

스타일을 적용하는 도중 강사님의 화면과 결과가 다른 경우 약간의 스타일 수정을 했습니다.

 

📑DropDownForm

글씨 크기가 버튼의 너비에 맞지 않아 글씨가 내려가는 부분이 있습니다.

더보기
fontSizing.T3
// DropDownForm.css.ts

export const button = style({
  width: 150,
  color: vars.color.brightText,
  padding: vars.spacing.medium,
  // fontSize: vars.fontSizing.T3, // 문제의 부분
  fontSize: vars.fontSizing.T4, // 한 사이즈 작은 크기로 변경
  backgroundColor: vars.color.mainDarker,
  border: "none",
  cursor: "pointer",
  ":hover": {
    backgroundColor: vars.color.mainFaded,
  },
});
fontSizing.T4

 

📑EditModal

input의 사이즈가 너무 커져서 스크롤이 생겼습니다.

더보기 
export const input = style({
  width: "100%",
  minHeight: "30px",
  border: "none",
  borderRadius: 5,
  marginBottom: vars.spacing.big2,
  padding: vars.spacing.medium,
  fontSize: vars.fontSizing.T4,
  boxShadow: vars.shadow.basic,
  boxSizing: "border-box", // input의 사이즈를 맞추기 위해서 사용
});

하단의 여백이 너무 많은 것 같아 여백을 지웠습니다.

더보기 
export const buttons = style({
  display: "flex",
  justifyContent: "space-around",
  // marginBottom: 50,
});

 

📑BoardList

기존에 상단에서 게시판을 이동할 때 선택된 게시판이 회색이었습니다. 개인적으로 회색은 off 된 상태라는 생각이 들어서 Acitve 된 게시판과 안 된 게시판의 색깔을 바꿨습니다.

더보기 
export const boardItem = style({
  color: vars.color.brightText,
  fontSize: vars.fontSizing.T3,
  backgroundColor: vars.color.selectedTab,
  // backgroundColor: vars.color.mainFaded,
  padding: vars.spacing.medium,
  borderRadius: 10,
  cursor: "pointer",
  marginRight: vars.spacing.big1,
  ":hover": {
    opacity: 0.8,
    transform: "scale(1.03)",
  },
});
export const boardItemActive = style({
  color: vars.color.brightText,
  fontSize: vars.fontSizing.T3,
  backgroundColor: vars.color.mainFaded,
  // backgroundColor: vars.color.selectedTab,
  padding: vars.spacing.medium,
  borderRadius: 10,
  cursor: "pointer",
  marginRight: vars.spacing.big1,
});

 

❔▪❓

중간중간 의문이 들었던 강사님의 코드를 살펴보겠습니다. 물론 강사님이 어느 정도 설명으로 이해시켜 주셨기 때문에 이해했던 부분도 같이 보겠습니다.

 

Q. EditModal에서 왜 selector를 통해 store에서 가져온 데이터를 state에 다시 저장해서 사용했나?

const editingState = useTypedSelector((state) => state.modal);
const [data, setData] = useState(editingState);

A. store에 저장된 값을 변경하기 위해서는 dispatch를 이용해야 하고, 화면상에서 바로 변하는 데이터가 아니기 때문이다. state를 이용해 값을 받아와 변하는 모습을 보여주고 최종적으로 수정이 완료되면 dispatch를 통해 store의 데이터를 수정한다.

 

Q. EditModal에서 input의 onChange 함수를 하나하나 작성했는데 왜 그랬는가? 가독성(onChange를 보았을 때 어떤 함수인지 한 번에 알아보기 위함) 때문인가?

더보기 
const editingState = useTypedSelector((state) => state.modal);
const [data, setData] = useState(editingState);

// 내가 생각하는 하나의 함수
// HTML input 태그의 name 속성을 이용한다.
const handleEditInput = (e: ChangeEvent<HTMLInputElement>) => {
  const taskName = e.target.name === "title" ? e.target.value : data.task.taskName;
  const taskDescription = e.target.name === "description"
    ? e.target.value
    : data.task.taskDescription;
  const taskOwner = e.target.name === "author" ? e.target.value : data.task.taskOwner;

  setData({
    ...data,
    task: {
      ...data.task,
      taskName,
      taskDescription,
      taskOwner,
    },
  });
};

// 강사님의 세 개의 함수
const handleNameChange = (e: ChangeEvent<HTMLInputElement>) => {
  setData({
    ...data,
    task: {
      ...data.task,
      taskName: e.target.value,
    },
  });
};

const handleDescriptionChange = (e: ChangeEvent<HTMLInputElement>) => {
  setData({
    ...data,
    task: {
     ...data.task,
      taskDescription: e.target.value,
    },
  });
};

const handleAuthorChange = (e: ChangeEvent<HTMLInputElement>) => {
  setData({
    ...data,
    task: {
      ...data.task,
      taskOwner: e.target.value,
    },
  });
};

Q. boardsSlice에서 addBoard 할 때 push를 사용했는데 이 때는 immer의 push가 사용돼서 불변성이 지켜진다고 했는데 말은 이해를 했는데 push에만 적용이 되는 것인가?

 

다음 시간에 계속...

 

출처 & 참고

John Ahn 강사님의 강의