[220206-220212] 오늘은 지각 안했다 미니 프로젝트 시작!

 

 

2/6

📝 할 일

• 리액트 과제 19일차

 

✅ 한 일

• 리액트 과제 19일차

오늘의 과제는 체크박스 전체선택 기능 구현하기

 

1. 전체선택 체크시 모든 자식 체크박스가 체킹됩니다.
2. 모든 자식 체크박스가 체킹시 전체 선택 박스가 체킹됩니다.
3. 자식 체크박스가 하나라도 체킹되지 않은게 있다면, 전체 체크박스의 체크도 풀립니다.

위의 세 개의 요구사항을 구현하면 됐다

좀 복잡해서 구글링을 참고해서 만들었다

 

 

 

 

 

 

 

2/7

📝 할 일

• 리액트 과제 20일차

 

✅ 한 일

• 리액트 과제 20일차

오늘의 과제는 `useCustomMutation` 훅과 `useCustomQuery` 훅으로 todolist 구현하기

 

1. 투두리스트를 랜더링해야 합니다.
2. 투두리스트에 새로운 todo 를 **추가**할 수 있어야 합니다.
3. 투두리스트의 todo를 **삭제**할 수 있어야 합니다.
4. 추가 또는 삭제를 할 때마다 `refetch`를 하여 **수정사항이 자동으로 반영**되어야 합니다.

위의 네개의 기능을 구현하는 것이었다

useCustomQuery 는 따로 신경 쓸 게 없어서 어렵진 않았는데 useCustomMutation 는 수정, 삭제, 추가를 해주는 훅이라서 들어올 input 을 관리해줬어야 했다

다른 팀원한테 물어봐서 해결했는데 과제의 의도대로 풀지 못한 것 같아 조금 찝찝했다

interface IUseCustomMutationReturn {
  addLoading: boolean;
  setAddLoading: Dispatch<SetStateAction<boolean>>;
  mutate: (input: string) => Promise<any>;
}

const useCustomMutation = (
  mutationFn: (input: string) => Promise<any>
): IUseCustomMutationReturn => {
  const [addLoading, setAddLoading] = useState(false);
  const mutate = (input: string) => {
    if (mutationFn === postTodos) {
      setAddLoading(true);
      return postTodos(input);
    } else return deleteTodos(input);
  };
  return { addLoading, setAddLoading, mutate };
};

 

 

 

 

 

 

 

2/8

📝 할 일

• 리액트 과제 20일차 - 수정

 

✅ 한 일

• 리액트 과제 20일차 - 수정

과제를 확인해주는 팀원분이 어제 푼 과제에 대해 찜찜했던 부분은 아니나 다를까 찝어주셨다

다른 팀원의 과제를 참고해서 하다보니 그 부분도 지적을 받았다

 

const useCustomMutation = (mutationFn: (input: string) => Promise<any>) => {
  const [data, setData] = useState<any>();
  const [isLoading, setIsLoading] = useState(false);

  // then X async await O
  const mutate = async (input: string) => {
    setIsLoading(true);
    const res = await mutationFn(input);
    setData(res);
    setIsLoading(false);
    return res;
  };
  return { data, isLoading, mutate };
};

문제가 있었던 mutation 부분을 해결하게 되었는데 기존의 isLoading 를 쓰지 못했던 것을 true 로 바꿨다가 완료되면 false 로 바꿔서 해결했고 then 이 아닌 async await 로 처리하여 해결해줬다

 

 

 

 

 

 

 

2/9

📝 할 일

• 그룹스터디 워크샵 발표 자료 정리하기

 

✅ 한 일

• 그룹스터디 워크샵 발표 자료 정리하기

오늘은 그룹스터디 워크샵 발표 자료를 정리하고 미니프로젝트를 다음주부터 시작하게 되어서 회의를 했다

미니프로젝트는 특별한 건 없고 패캠의 백엔드 팀과 같이 협업을 하는 프로젝트다

처음으로 백엔드팀과 프로젝트를 하게 되어서 두근두근 설렜다

백엔드팀은 자바 스프링 언어를 배웠다고 했다

자바를 잘은 모르지만 알고리즘 문제를 풀 때 가끔 정답을 보느라 코드를 본 적이 있었다

확실히 js 보다는 나은 언어라고 생각하지만 백엔드니까 막연히 어렵겠지라는 생각을 가지고 있었다

이번 미니 프로젝트에서 제대로 된 사이트를 만들 수 있을 것 같아 설렌 마음이 컸다

어제는 미니 프로젝트 안내를 줌으로 듣고 프론트엔드 사람들과 함께 간단히 초기세팅 회의를 했다

어떤 css 라이브러리를 쓰고, 코드 작성 방식은 어떻게 할 건지 등등 간단하게 정했다

그리고 오늘은 백엔드팀과의 만남을 오프라인으로 가졌다

확실히 서로가 어떻게 개발을 하는지 두루뭉술하게 알다보니까 조금 조심스러운 면도 있고 진행이 원활하지 않는 부분이 있었다

그래도 백엔 프엔 각 조장이 조율을 잘 해주셔서 너무 편하게 회의를 진행할 수 있었다

미니 프로젝트 주제는 금융상품 쇼핑몰이었는데 대형 프로젝트도 아니라 백엔드도 구현할 수 있는 데 한계가 있어서 공공 오픈 api 를 활용하여 db 에 저장하여 api 를 제작해주는 방식으로 진행하기로 했다

그리고 회원 정보는 db 에 저장하여 jwt 방식으로 토큰을 보내주는 방식으로 진행하기로 결정했다

 

 

 

 

 

 

 

2/10

📝 할 일

• 미니 프로젝트 : 피그마 작업

 

✅ 한 일

• 미니 프로젝트 : 피그마 작업

어제의 회의 이후 참고할 디자인 레퍼런스도 찾고 어떤 주제로 진행할지, 레이아웃은 어떻게 잡을지 어느정도 가닥이 잡혀서 피그마로 ui 디자인 작업을 했다

오랜만에 피그마를 쓰려니 조금 헤맸지만 그리 어려운 기능은 없어서 쓰다보니 나름 적응을 했다

디자인 작업은 주말까지 마치기로 했다

 

 

 

 

 

 

 

2/12

📝 할 일

• 리액트 과제 21일차, 22일차

 

✅ 한 일

• 리액트 과제 21일차, 22일차

미니 프로젝트를 진행하느라 밀린 21, 22 일차를 한 번에 풀었다

 

 

21일차는 react-query로 youtube 검색기능 구현하기였다

 

1. `react-query` 를 사용해서 youtube 검색 기능 구현하기
2. **이미 검색했던 `keyword` 에 대해서는, 캐시 데이터를 활용해서 랜더링 하기 (네트워크 요청 아끼기)**
3. 만약 네트워크 요청 **할당량을 초과**해서 에러가 나는 경우 목업데이터를 랜더링하기 (예외상황 대비하기)
4. 빈 문자열 `""` 로 검색하면, 목업데이터를 랜더링 하기

위의 4개의 기능을 구현하는 과제였다

 

  const { data, isLoading } = useQuery<ISearchedResult>(
    ["keyword", keyword],
    () => search(keyword)
  );

위의 코드로 간단하게 구현해줬는데 너무 간단해서 이게 맞나 싶을 정도였다

아니나 다를까 과제를 확인해주시는 분이 해당 부분에 대해 오류가 있다고 알려주셨다

캐싱이 되지 않는다고 했다

바뀌는 키워드를 키값으로 지정해주면 해당 키값을 캐싱하고 동일한 키값일 경우 캐싱된 데이터를 활용한다고 알고 있었는데 뭔가 잘못 알고 있었나보다 수정해야겠다

 

 

 

22일차는 Redux toolkit 을 이용해서 todolist 를 구현하는 것이었다

 

1. todo list 가 랜더링 돼야합니다.
2. todo 를 추가하기 기능을 구현해주세요
3. todo 를 삭제하는 기능을 구현해주세요

위 세개의 기능을 구현하면 됐다

 

최근 recoil 만 썼다고 redux 는 죄다 까먹어서 리액트 수업 때 배웠던 redux 수업 자료를 참고하여 구현했다

 

store.ts

interface TodoState {
  todos: string[];
}

const initialState: TodoState = {
  todos: [],
};

export const todoSlice = createSlice({
  name: "todo",
  initialState,
  reducers: {
    createTodo: (state, action: PayloadAction<string>) => {
      state.todos.push(action.payload);
    },
    deleteTodo: (state, action: PayloadAction<number>) => {
      state.todos.splice(action.payload, 1);
    },
  },
});

export const { createTodo, deleteTodo } = todoSlice.actions;

export default configureStore({
  reducer: {
    todo: todoSlice.reducer,
  },
});

 

app.tsx

 const todo = useSelector((state: any) => state.todo.todos);
  const dispatch = useDispatch();
  const [value, setValue] = useState("");

  const onSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    if (value !== "") {
      dispatch(createTodo(value));
      setValue("");
    }
  };

  const onChange = (event: ChangeEvent<HTMLInputElement>) => {
    setValue(event.target.value);
  };

  const onBtnClick = (id: number) => {
    dispatch(deleteTodo(id));
  };

  return (
    <>
      <h1>To Do List</h1>
      <form onSubmit={onSubmit}>
        <input value={value} type="text" onChange={onChange} />
        <button type="submit">Add</button>
      </form>
      <ul>
        {todo.map((todo: string, index: number) => (
          <ToDo key={index} onBtnClick={onBtnClick} text={todo} id={index} />
        ))}
      </ul>
    </>
  );