개발새발

2/13

📝 할 일

미니 프로젝트 : 마크업

노마드 코더 리액트 마스터 state management 마무리

✅ 한 일

미니 프로젝트 : 마크업

피그마 디자인이 마무리가 되어서 마크업을 시작했다

백엔드 쪽에서 jwt 구현이 아직 어렵다고 해서 일단 천천히 주요 기능 구현을 하기 전에 할 수 있는 기능을 천천히 구현해놓기로 했다

그래서 아마 이번주 주말까지는 마크업을 하지 않을까 싶다

노마드 코더 리액트 마스터 state management 마무리

드디어 state management 파트를 마무리했다

너무 홀가분하다

https://github.com/Hyeeeein/Nomad_React_recoil-todo-app/commit/a6b3a7324bb4b91f903344e9072a9ccbfff4bb1b

2/14

📝 할 일

미니 프로젝트 : 마크업

✅ 한 일

미니 프로젝트 : 마크업

이번 프로젝트에서는 tailwind 를 쓰기로 했는데 확실히 본격적으로 쓰다보니 단점이 보이기 시작했다

이번에 내가 구현하기로 한 기능은 로그인/회원가입인데 input 들의 유효성 검사를 react-hook-form 라이브러리를 사용해 구현하기로 정했다

라이브러리는 아직 사용하지 않았는데 문제가 된 건 tailwind 에서 checkbox, radio 타입의 스타일이었다

보통 checkbox, radio 는 스타일링을 초기화하고 다른 스타일을 가져오거나 display: none 을 처리하여 span 으로 구현한다

그런데 tailwind 는 해당 라이브러리에서 지정해준 클래스이름으로 className 에 작성하여 스타일링을 하다보니 관계연산자로 위의 방식대로 구현하기가 힘들다

그래서 tailwind 에도 peer 라는 기능이 있는데 클래스이름으로 input 에 'peer/이름' 을 지정해놓고 peer 를 지정해준 input 에 checked 될 때를 스타일을 지정해줄 span 에 클래스이름으로 'peer-checked/이름: 스타일클래스이름' 이렇게 지정해주면 된다고 한다

그런데 해당 기능말고 다른 기능이 있는지 모르겠지만 input 과 형제 요소로 있는 span 이 아니면 적용이 안 된다는 문제가 있었다

나는 이미지 파일로 하지 않고 css 로 그려서 checked 된 상태와 안 된 상태를 처리해주고 싶었다

사실 이미지 파일로 했다면 그냥 input 을 display: none 처리해주고 span 에 checked 된 상태와 안 된 상태를 처리해줬으면 됐지만 나는 css 로 그려서 하려고 했기 때문에 적용하지 못했다

이 문제로 계속 골머리를 앓다가 결국 span 으로 하지 않고 가상선택자인 after 를 활용하여 check 될 때를 설정해주었다

2/15

📝 할 일

미니 프로젝트 : 마크업

✅ 한 일

미니 프로젝트 : 마크업

어제부로 로그인/회원가입 페이지 마크업이 끝나서 회원가입 후 해당 회원의 추천상품에 대한 설문조사를 하기 위한 페이지를 마크업했다

servey 페이지로 하나 정해주고 각 설문 사항에 대해 framer-motion 으로 다음으로 넘어가면 슬라이드 되도록 해주고 싶었다

그런데 저번에 컴포넌트 슬라이드를 했을 때 다음 버튼과 이전 버튼을 각각 눌렀을 때 씹혔던 현상이 나타나서 다른 팀원에게 물어봤더니 display 로 씹히는 현상이 보이지 않게 처리를 해줬다고 하는 것이다

조금 어색하긴 하지만 그냥 이 정도에도 만족하기로 했다

아무래도 framer-motion 이라는 라이브러리도 사람이 만들었기 때문에 오류가 있는 건 어쩔 수 없어서 이런 점이 참 아쉽다

2/18

📝 할 일

미니 프로젝트 : 설문조사 페이지와 회원가입 완료 페이지 마크업, 설문조사 결과 로직 작성

✅ 한 일

미니 프로젝트 : 설문조사 페이지와 회원가입 완료 페이지 마크업, 설문조사 결과 로직 작성

https://github.com/Financial-Instruments-Mini/fe-repo/pull/24

2/19

📝 할 일

미니 프로젝트 : 설문조사 페이지와 회원가입 완료 페이지 마크업, 설문조사 결과 로직 작성

✅ 한 일

미니 프로젝트 : 설문조사 페이지와 회원가입 완료 페이지 마크업, 설문조사 결과 로직 작성

https://github.com/Financial-Instruments-Mini/fe-repo/pull/24

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>
    </>
  );

1/30

📝 할 일

• 리액트 과제 15일차

✅ 한 일

• 리액트 과제 15일차

오늘의 과제는 tailwind : 로그인 페이지 구현하기

tailwind 는 설명만 들어봤지 처음 써보는 거라 다른 기능은 써보지도 못하고 그냥 기본기능만 썼다

처음 알았는데 tailwind 는 자동으로 브레이크 포인트를 설정해줘서 확실히 작은 프로젝트에서는 아주 유용할 것 같다는 생각이 들었다

클래스네임도 따로 지정해주지 않아도 되고 css 파일도 필요없어서 엄청 편했다

근데 공식문서를 보면서 하나하나 tailwind 클래스 이름을 써야 해서 그건 좀 불편했다

1/31

📝 할 일

• 리액트 과제 16일차

✅ 한 일

• 리액트 과제 16일차

오늘의 과제는 tailwind : 상품 목록 페이지 구현하기

2/1

📝 할 일

• 리액트 과제 17일차

✅ 한 일

• 리액트 과제 17일차

오늘의 과제는 tailwind : SNS 구현하기

2/2

📝 할 일

• 리액트 과제 18일차

✅ 한 일

• 리액트 과제 18일차

오늘의 과제는 tailwind : SNS 2 구현하기

오늘은 모달 기능도 추가 됐다

1/23

📝 할 일

• 리액트 과제 9일차
• 리액트 Youtube 토이 프로젝트 : 상세페이지 작업

✅ 한 일

• 리액트 과제 9일차

오늘의 과제는 영화 목록 무한스크롤

useInfiniteQuery 를 이용해서 무한스크롤이 되도록 영화 목록이 계속 나오게 하는 작업이었다

문서도 뒤져보고, 구글링도 해봤지만 사용하는 사람들이 잘 없는지 정보가 그리 많지 않았다

그래서 다른 팀원의 코드를 살짝 참고했다..ㅎ 죄송해요 안 그러면 하루죙일 붙잡고 있을 것 같았어요

사실 나는 인자로 title 도 넣고 pageParam 도 넣어서 해주고 싶었는데 그렇게 하면 계속 똑 같은 것만 나오길래 도저히 풀리지 않아서 볼 수 밖에 없었다

title 을 넣어줘야 할 때는 도대체 어떻게 해야되는지 의문이다

• 리액트 Youtube 토이 프로젝트 : 상세페이지 작업

이제 슬슬 멘토님들이 리뷰도 시작하고 계시고 진짜 나오지 않으면 안될 것 같아서 하루종일 프로젝트만 붙잡고 있었다

없는 정보를 출력하려고 해서 문제인 건가 싶어 해당 정보들이 있을 때 출력해주도록 전부 예외처리를 해주고 중간에 배포 사이트에 등록해놓은 api key 의 할당량이 다 되어서 다른 사람의 api 로 변경하여 배포 페이지를 다시 실행시켜봤다

그랬더니 된다..?

이게 왜 되지? 아니 도대체 뭐가 문제였던 거냐고~~~~~~~

1/24

📝 할 일

• 리액트 과제 10일차

✅ 한 일

• 리액트 과제 10일차

오늘의 과제는 저번에 했던 framer-motion 2 : animation, variants, gestures 구현!

animation 만드는 게 은근 재밌고 결과물도 바로바로 나오니까 뿌듯하고 막 그래서 framer-motion 할 때는 재밌닿ㅎ

저번에 슬라이드가 오작동했던 부분은 아직 고쳐지지 않아서 좀 찝찝하다

1/25

📝 할 일

• 리액트 과제 11일차

✅ 한 일

• 리액트 과제 11일차

오늘의 과제도 framer-motion 3 : drag 1, 2, scroll 구현!

이번 주는 계속 framer-motion 과제를 내주실랑가보다 오히려 좋아 감기에 걸리고 난 뒤로 자꾸 몸이 축축 쳐지고 왠지 집중도 안됐는데 약간 쉬는 시간을 가진 것 같다

니꼬쌤 강의 들으면 어려운 animation 구현도 쌉가능이라구여~

자막 보는 게 쩜 힘들긴 해도 가끔 다른 한국 강의를 볼 때 자막이 필요할 때가 종종있는데 이런 점은 또 메리트가 된다

useMotionValue, useTransform, useScroll 을 사용하여 요소의 움직임을 감지하고, 반환되는 값을 내가 원하는 값으로 변환하여 style 로 적용시켜주며, 스크롤의 값을 반환해준다

여러 프로젝트에서 적용해볼 수 있을 것 같아 기대가 된다

1/26

📝 할 일

• 리액트 과제 12일차
• 노마드 코더 리액트 마스터 state management 실습

✅ 한 일

• 리액트 과제 12일차

오늘의 과제는 framer-motion 4 : 모든 기능 구현 및 복습!

이번엔 니꼬쌤이랑 똑 같은 걸 구현하는 게 아니라 약간 응용하는 거라 오랜만에 머리를 좀 썼다

잊었던 custom 도 다시 사용해보고, layoutId 를 새로 배우고 AnimatePresence 를 다시 사용해봤다

역시 쓰지 않으면 까먹는다더니 몇 일 전에 쓴 것도 죄다 까먹는 것 같다

리마인드, 리팩토링 필수필수!!!

• 노마드 코더 리액트 마스터 state management 실습

crypto tracker 프로젝트가 마지막으로 recoil 을 쓰면서 마무리됐다

요즘 상태 관리 라이브러리로 recoil 을 많이 쓴다던데 확실히 redux 쓰는 거랑 달랐다

기능도 좋고 간단하고 코드도 좀 더 가독성이 있어졌다

mobx 를 배우면서 와 redux 는 천사다 라는 생각을 했었는데 recoil 은 뭐 거의 하사장 수준으로 편했다

저장소도 atom 하나 만들어서 key 와 default 값을 써주면 끝이고 수정도 값을 가져오는 것도 코드 한 줄이면 끝, 수정하는 것도 useState 마냥 쓰면 끝. 이건 혁명이야~~ recoil 안 쓰면 바보...는! 아님 안쓸 수도 있지..

1/27

📝 할 일

• 리액트 과제 13일차

✅ 한 일

• 리액트 과제 13일차

오늘은 라이브러리 없이 form 유효성 검사 구현!

확실히 이때까지 react-hook-form 을 이용해 구현했던 것을 없이 구현하려니까 좀 귀찮고 코드양도 많아지고 가독성이 떨어졌다

그래도 라이브러리 없이 한번씩 구현해보는 것이 언어를 이해하고 배우는 데에 많은 도움이 되는 것 같다

1/28

📝 할 일

• 리액트 과제 14일차
• 노마드 코더 리액트 마스터 state management 실습

✅ 한 일

• 리액트 과제 14일차

오늘은 react-hook-form 이용해서 form 유효성 검사 구현!

게비스콘~ 너무 맘이 편안하고 구현하기 쉬웠다

라이브러리만 왕창 쓰고 싶은 내 마음.. 너무 염치없는 것일까?

• 노마드 코더 리액트 마스터 state management 파트

react-hook-form 을 배웠는데 이전에 4차과제하면서 한번 사용해봐서 수월하게 진행했다

이번 파트가 긴 편이라 하루에 다 듣진 못하고 나눠서 듣고 있는데 이마저도 계속 다른 일에 치여서 진행을 못하고 있다

1/16

📝 할 일

• 리액트 과제 7일차
• 4차 과제 추가 기능 : 그리드 정렬 끝!
• 리액트 Youtube 토이 프로젝트 시작!

✅ 한 일

• 리액트 과제 7일차

오늘의 과제는 타입스크립트 적용!

예시가 너무 잘 되어 있어서 적용하는데 어려움은 없었다

그리고 사실 일반함수 같은 경우 강의도 어느정도 보면서 익숙해졌는데 class 나 hook, api return 값은 아직 어려워서 헤매고 있다

프로젝트를 타입 스크립트로 진행할 때도 타입을 적용하지 않아서 밑줄이 가 있는데 못 본 척 지나갈 때도 있었다...

타입스크립트는 계속 연습을 해봐야 겠다

• 4차 과제 추가 기능 : 그리드 정렬 끝!

그리드 정렬이 마무리가 됐다

일단 리스트뷰와 이미지뷰가 구조 자체가 다르고 이미지뷰를 단독으로 사용하는 부분도 있기 때문에 추후에 전체 수정을 거치기 전까지는 리스트 컴포넌트와 이미지 컴포넌트를 나눠두기로 결정했다

그리고 이미지 컴포넌트 안에서 grid 에 대한 값을 받아서 이미지뷰, 큰이미지뷰, 갤러리뷰를 선택하면 각각 다른 스타일링을 주도록 state 로 관리했다

각 그리드 컴포넌트를 ui 폴더로 넣을지에 대한 고민은 더 해봐야할 것 같아서 일단 전체상품 컴포넌트에 넣어서 관리하고 있다

훅으로 만드는 부분도 일단 추후에 더 많은 로직이 생길 경우 그때 훅을 만들어야 겠다는 생각이 들어 보류하기로 했다

• 리액트 Youtube 토이 프로젝트 시작!

첫 회의를 진행했다

팀원 중 한분이 거의 조장격으로 초기 세팅을 다 해놓으셔서 이러저러 세팅은 빨리 끝났다

css방식, jsx파일명 방식, 변수명, fetch함수 방식, 클래스이름 방식, 폴더 구조, 파일트리구성, 커밋규칙, merge 방식, 폰트 단위, 문서화 방식, 깃헙 issue활용, prettier 등 생각나는 대로 컨벤션을 정했다

사실 이렇게 많이 정했다고 생각해도 나중가면 정할 것이 또 나오고 계속 나오기 때문에 이정도만하고 초기 세팅을 위해 간단하게 마쳤다

그리고 기능 구현 분배를 했는데 나는 영상 썸네일을 클릭하면 나오는 디테일페이지를 맡게 되었다

사실 디테일 페이지를 잘 안해보기도 했고 데이터 가공하는 연습을 해보고 싶었기 때문에 좀 오래 걸릴 것 같았지만 디테일 페이지를 선택했다

1/17

📝 할 일

• 리액트 Youtube 토이 프로젝트 : api 기본 세팅, 상세페이지 작업 시작

✅ 한 일

• 리액트 Youtube 토이 프로젝트 : api 기본 세팅, 상세페이지 작업 시작

git clone 을 하는데 자꾸 master 브랜치는 받아오질 못해서 git flow init 을 할 때 오류가 있었다

그래서 팀원이 git flow init -d 를 하면 강제로 해주는거라 master 브랜치가 생성된다고 해서 해봤더니 제대로 작동했다

axios 로 기본 세팅하는 것은 처음이라 조금 오래 걸렸다

중간에 다른 팀원의 도움을 받으려고 하기도 했는데 한번 내가 끝내보자 하는 마음으로 지금까지 해왔던 프로젝트들을 보면서 작성했다

사실 맨날 fetch 나 async await 만 썼지 axios 에 대한 기본 이해도 거의 없어서 axios 가 어떤 기능을 가지고 있는지 몰랐다

axios 를 불러서 api 키와 기본 url 를 세팅하고 세팅한 axios 파일을 다시 request 파일로 불러서 axios.get 으로 fetch 할 기본 url 뒤를 작성해주면 자동으로 json 이 return 된다는 것에 놀랐다

이렇게 편한 것을 왜 처음본다고 많이 써보지 않았는지 후회될 정도였다

근데 테스트를 너무 많이 했더니 api 요청을 너무 막 써서 일일할당량이 금방 끝났다ㅎㅎ..

일단 하드코딩으로 컴포넌트를 나누지 않고 정보가 잘 나오는지 확인했다

그런데 화면은 잘 나오기는 한데 콘솔에 자꾸 이런 에러가 떠서 뭔지 확인했더니 크롬에 adblock 확장프로그램이 있으면 이런 에러가 난다고 한다 무시해도 된다고 하니 다행이다

리액트 과제는 새로 시작한 토이 프로젝트에 집중하기로 해서 잠깐 중단했다

1/18

📝 할 일

• 리액트 Youtube 토이 프로젝트 : 상세페이지 작업

✅ 한 일

• 리액트 Youtube 토이 프로젝트 : 상세페이지 작업

작업을 빨리 끝내고 4차 과제 추가 기능 구현을 하고 싶었는데 요즘 면역력이 안 좋아진건지 감기가 걸려서 작업을 거의 하지 못했다

하드 코딩으로 먼저 정보들이 잘 들어오는지 확인하고 각 영상 정보, 채널 정보, 댓글 정보, 연관 동영상 정보로 나누어서 컴포넌트를 작업했다

하다가 중간에 useQuery 로 리팩토링을 해보려고 했으나 불러오는 api 가 많다보니 일일할당량이 너무 빨리 닳아서 useEffect 로 localStorage 에 저장해서 사용하기로 했다

확실히 로컬스토리지에 저장하니 코드도 길어지고 로직도 가독성이 떨어져서 이 부분에 대한 고민은 계속 해봐야 할 것 같다

1/19

📝 할 일

• 리액트 Youtube 토이 프로젝트 : 상세페이지 작업

✅ 한 일

• 리액트 Youtube 토이 프로젝트 : 상세페이지 작업

로컬로 저장하는 것을 테스트 하다가 일일할당량이 다 닳아서 그동안 다른 팀원들 오류를 봐주면서 시간을 보낸 뒤 다시 일일 할당량이 초기화되어서 로컬에 저장하는 작업을 계속 했다

근데 연관 동영상을 보여주는 데이터에 영상 길이와 조회수 정보가 없어서 각 영상의 id 로 하나하나 특정 동영상 데이터를 불러와주는 api 로 해야 한다고 하더라..

로컬로 저장하여 화면에 잘 나오는지 확인하고 연관 동영상 정보 컴포넌트의 자식 컴포넌트 안에서 id 를 하나하나 useEffect 로 정보를 추출하는 작업을 했다

1/20

📝 할 일

• 리액트 Youtube 토이 프로젝트 : 상세페이지 작업
• 개발 블로그 정리 & 제출

✅ 한 일

• 리액트 Youtube 토이 프로젝트 마감날 : 상세페이지 작업

새벽 4시까지 작업해서 반응형과 데이터 가공도 끝냈는데 다른 팀원이 에러가 난다고 했다..

그래서 로컬에 저장한 데이터들을 죄다 삭제하고 다시 실행해봤더니 오류가 오조오억ㅡㅡ

알고보니 로컬에 저장하지도 안했는데 꺼내서 화면에 뿌려줄라니까 안된다고 하더라

불러온 데이터들마다 하나씩 loading state 를 세팅해주고 로딩이 끝나야 컴포넌트를 출력해주도록 했다

그랬더니 또 연관 동영상의 자식 컴포넌트에서 api 호출 데이터들이 다 들어오지 않길래 상위 컴포넌트로 빼서 id 를 하나하나 map 으로 돌려서 한 곳에 저장해서 정보들을 props 로 내려서 출력해줬다

근데 다른 팀원의 페이지에서는 나오질 않는댄다 배포 페이지에서만 잘 나오면 돼서 기다리고 있는데 배포가 안된다 왜이러냐 진짜~~~~

제출하는 날인데 난리났다

• 개발 블로그 정리 & 제출

해롱해롱대다가 병원 갔다가 제출 시간이 다 돼서 제출 먼저하고 정리를 했다

오늘 또 일찍 일어나려고 했는데 어제 늦게 일어나서 실패.. 뭐하나 되는게 읍따^^

1/22

📝 할 일

• 리액트 과제 8일차
• 리액트 Youtube 토이 프로젝트 : 상세페이지 작업 디버깅

✅ 한 일

• 리액트 과제 8일차

토이프로젝트가 어느정도 마무리가 되어서 이제 다시 과제를 시작했다

오늘의 과제는 class 로 이동 기록 인스턴스 화면에 출력하기

class 는 아직 익숙치 않아서 엄청 헤맸다.. 앞으로 class 를 자주 쓰다보면 익숙해지겠지? 라고 생각했지만 쓸 기회가 많지 않다!!!!!ㅠㅜ

언제쯤 js 를 자유자재로 쓸 수 있을까 너무나 까마득하다

리셋하는 건 죽어도 안돼서 그냥 제출했더니 clear 는 state 에 남아있는 값들을 비워준거지 인스턴스를 초기화해준 건 아니라서 값은 그대로 남아있댄다

뭔 말이여.. 한글인데 왜 이해가 안되죠 선생님..?

• 리액트 Youtube 토이 프로젝트 : 상세페이지 작업 디버깅

설이라 어제 본가에 내려와서 하루죙일 쉬고 오늘부터 배포페이지에 나오지 않는 상세페이지를 다시 작업했다

왜 자꾸 localStorage 가 undefined 로 저장이 되는지 테스트하기 위해 화면에 출력되는 과정에서 오류가 있는 건가 싶어서 정보를 출력시키는 컴포넌트들을 모두 주석처리도 해보고, 정보가 잘 들어오지 않는 건가 싶어서 로컬 스토리지에 저장하지 않고 useEffect 로 api 를 호출하여 state 에 저장해서 컴포넌트를 출력시켜 보기도 했다

온갖 테스트를 해봐도 잘 되지 않았다

1/9

📝 할 일

• 4차 과제 리팩토링 : 배송비 결제 로직 수정

✅ 한 일

• 4차 과제 리팩토링 : 배송비 결제 로직 수정

추가 기능 선별 회의 후 mutation 이 왜 안되는지 물어 봤다

팀원분들이랑 여러 경우를 실행해보니 3개의 인자를 넣었을 때 첫번째 인자만 콘솔에 출력되고 나머지는 undefined 가 나오는 것을 보고 혹시 인자를 하나만 넣어야 하나? 라고 생각했다

그래서 payload 라는 객체 데이터에 인자 세개를 넣어서 payload 를 인자로 넣어줬더니 제대로 작동을 하는 것을 확인할 수 있었다

근데 이제는 객체에 들어가는 id 값이 여러 개라서 계속 바꿔서 적용시키거나 그 안에서 조절을 해줬어야 했다

그래서 밖에서 id 를 빈 string 으로 지정해준 뒤 상품들을 반복적으로 결제할 때 상품 id 를 매번 지정하는 방식으로 변경했다

1/10

📝 할 일

• 워크샵 자료 제작
• 리액트 과제 1일차
• 4차 과제 리팩토링 : 배송비 결제 로직 수정

✅ 한 일

• 워크샵 자료 제작

목요일에 그룹 워크샵이 있어서 워크샵 자료를 제작했다

귀찮고 발표도 하기 싫었지만 우짜겠나 해야지..

그래도 좀 익숙해졌다고 자료도 후다닥 제작하고 발표도 좀 괜찮아졌다

• 리액트 과제 1일차

팀원 중 거의 강사님처럼 해주시는 분이 있는데 우리가 좀 해이해진 것 같다구 매일매일 리액트 과제를 내주시기로 했다

본인 공부하는 것도 바쁘고 힘드실텐데 우리들 것도 봐주시다니 고맙고 미안할 따름이었다..

첫 과제는 router 제작이었는데 최신 버전의 createBrowserRouter 를 사용해서 숙제를 제출하는 거였다

첫 과제다보니 그렇게 어렵진 않았다

• 4차 과제 리팩토링 : 배송비 결제 로직 수정

이제 for 문이 끝나면 완료 alert 창과 장바구니 내 상품들을 다 삭제해주는 걸 해결하는 과정에서 갑자기 장바구니에 length error 가 나서 못 하게 됐다

장바구니 로직 맡은 분한테 내일 학원가서 물어봐야겠다

1/11

📝 할 일

• 리액트 과제 2일차
• 4차 과제 리팩토링 : 배송비 결제 로직 수정 찐찐마무리

✅ 한 일

• 리액트 과제 2일차

2일차는 state 로 모달창을 띄워주는 작업을 하는 과제였다

예전에 처음에 모달창 작업할 때는 이해도 못하고 그냥 복붙만 했었는데 지금은 나 혼자 복붙도 안하고 척척 만드는 게 너무 신기하고 뿌듯했다

공부도 많이 못하고 성장하는건지 눈에 보이지 않아서 지칠 때가 많은데 이렇게 예전과 달라진 걸 볼 때면 너무 신기한 일이다

• 4차 과제 리팩토링 : 배송비 결제 로직 수정 찐찐마무리

다른 팀원한테도 장바구니 들어가보라고 했는데 length 에러 나서 혹시 firebase 계정을 바꿨는데 그게 문제인가 싶어서 env 파일 고쳐봤는데도 안됐다

server 끈 뒤 다시 켜봤더니 된다 어이없네

결제 로직 : 배송비 상품 수정 & useMutation 리팩토링

for 문이 끝나는 속도와 비동기 함수가 끝나는 속도가 달라 비동기 처리가 다 끝나지 않았는데도 불구하고 결제 완료 alert 창과 장바구니 상품 삭제 코드가 처리되는 문제가 발생했다

뭔 난리를 쳐도 for 문 안에 api 호출이 다 끝나지 않았는데도 결제 안내 alert 창과 장바구니 삭제 로직이 발동되어서 끙끙 앓다가 강사님한테 물어봤다

⬆ 강사님이 해결해주신 코드(뭔가 나의 뒤죽박죽 로직에 맞춰 해결해준거라 쫌 찝찝쓰…)

강사님한테 여쭤보고 해결된 줄 알았더니 집에 와서 보니까 다시 중간에 console.log('끝') 이 찍히더라..

useMutation 파라피터를 한 개만 받아오는 문제에 대해 배열로 받아오니 해결되었다

인자 문제를 해결하니 동시에 각 api 호출에 대해 mutateAsync 로 await 를 해주니 api 호출 문제도 해결되었다

참고 문헌 : https://oyg0420.tistory.com/entry/React-Query-%EC%98%88%EC%A0%9C%EB%A1%9C-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0

https://itchallenger.tistory.com/587

1/12

📝 할 일

• 리액트 과제 3일차
• 백준 단계별 문제 하나라도 풀기
• 노마드 코더 리액트 마스터 crypto tracker 1 실습
• 개발 블로그 정리 & 작성

✅ 한 일

• 리액트 과제 3일차

이번 과제는 기존에 css 로 작업했던 것을 styled-components 로 리팩토링 작업을 해보는 것이었다

요새 리액트 노마드 코더 덕분에 스타일 컴포넌트를 많이 사용해서 어렵진 않았다

그리고 상속이나 확장 등 여러 기능을 쓰지 않았기 때문에 간단했다

attr 속성 안에 넣을 img 방법으로 public 폴더에 있는 image 파일을 import 해서 넣으려다가 갑자기 절대경로로 불러오는 방법이 안되길래 해당 이미지 파일을 src 로 가져왔다가 그것도 안 먹었다

그래서 그냥 attr src 에 '/logo192.png' 를 해줬더니 그냥 바로 해결됐다^^ 어이없다 증말

근데 절대 경로에 있는 이미지 파일을 import 하려면 라이브러리를 설치해야 한다고 하더라 나중에 이런 일이 생기지 않았으면 좋겠다

• 백준 단계별 문제 하나라도 풀기

let filePath = process.platform === "linux" ? 0 : "./input.txt";
let input = require("fs").readFileSync(filePath).toString();
input = Number(input);

let num = input;
let i = 0;

while (true) {
  let sum = Math.floor(num / 10) + (num % 10);
  num = (num % 10) * 10 + (sum % 10);
  i++;
  if (input === num) break;
}

console.log(i);

요새 알고리즘 문제를 하나도 풀지 않아서 좀 불안한 마음에 시간 있을 때 하나라도 풀자라는 심정으로 시작했다

아마 바빠서 일주일에 한 문제 풀까말까 하겠지만 티끌모아 태산이고 안하는 것보단 낫겠지 싶다

근데 오랜만에 푸니까 하나도 모르겠다..

1110번 더하기 사이클 문제인데 머리론 이해했고 어떻게 풀지는 알 것 같은데 로직을 막상 실행해보면 원하는대로 나오지 않아 답답하다

일단 위 답은 구글링해서 푼 문제고요^^..

해설 :

주어진 수에서 십의 자리와 일의 자리수를 구해 더하고

새로운 수의 십의 자리는 주어진 수에서 일의 자리수(일의 자리에 10 곱해서 십의 자리 만들기)

새로운 수의 일의 자리는 주어진 수를 더한 값의 일의 자리

주어진 수가 새로운 수와 같을 때까지 반복

• 노마드 코더 리액트 마스터 crypto tracker 1 실습

이제 차트 라이브러리를 적용하여 코인 시세를 차트 형태로 보이게 하는 것까지 해보려고 하는데 뭔 에러가 저렇게 나요;; 너무 당황했다

오류를 번역도 해보고 구글링도 해보고 몇 시간을 대가리를 싸매며 알아본 걸로는 코인파프리카에서 제공해주는 api 의 무료 플랜은 지난 24시간만 반영해준다고 한다

그래서 시간을 23시간으로 고쳤더니 작동을 하는 것을 확인할 수 있었다

아 왜 갑자기 플랜이 생기냐고요~~~~ 코인 파프리카 요 쪼잔한 넘들…

• 개발 블로그 정리 & 작성

4차과제 하느라 에러가 많이 나서 덕분에 개발 블로그에 정리할 것도 많았다^^

컨텐츠가 많은 건 좋지만 너무 정리하기가 힘들다^^

뭐 이런 것도 나중에 도움이 다 되겠지…ㅎㅎ

1/13

📝 할 일

• 리액트 과제 4일차
• 노마드 코더 리액트 마스터 crypto tracker 2 실습
• 4차과제 추가 기능 구현 시작

✅ 한 일

• 리액트 과제 4일차

오늘은 객체 데이터의 타입을 지정해보고 품절이 아닌 상품들만 출력되도록 만들어줬다

interface 는 지겹도록 만들어줘서 그렇게 어렵진 않았다

• 노마드 코더 리액트 마스터 crypto tracker 2 실습

학원에 나와 해당 강의들을 같이 수강하고 있는 팀원들에게 지난 24시간만 데이터를 불러올 수 있는 문제에 대해 물어봤더니 니꼬쌤이 만든 다른 api 를 부르면 된다고 해서 해결됐다ㅎ..

그리고 data 쪽에 났던 에러들은 타입을 지정해주지 않아 생긴 오류같다

map 으로 돌린 끝에 as any 를 추가해주니 해결됐다

그리고 니꼬쌤이 추가로 내주신 숙제는 price 페이지 정보 보여주기, 캔들스틱 차트로 바꿔보기를 수행했다

• 4차과제 추가 기능 구현 시작(찍먹)

차트 문제 해결하느라 배송지주소 저장 추가 기능에 쓸 드림코딩 firebase 설치 강의 본 것 빼구 암것두 못함ㅎ

1/14

📝 할 일

• 리액트 과제 5일차

✅ 한 일

• 리액트 과제 5일차

평소같았음 토요일은 항상 쉬는데 과제덕분에 공부를 하게 되어서 좀 뿌듯..ㅎ

오늘은 class 를 이용해서 인스턴스로 비슷한 구조의 다른 데이터들을 생성하고 화면에 출력해주는 과제를 수행했다

아무래도 class 부분이 취약해서 드림코딩 강의를 봤는데도 잘 모르겠어서 다른 과제를 푸는 팀원에게 물어봐서 풀었다

class 를 다시 한번 봐야겠다ㅠ

1/15

📝 할 일

• 리액트 과제 6일차
• 4차 과제 추가 기능 : 그리드 정렬 시작!

✅ 한 일

• 리액트 과제 6일차

오늘은 framer-motion 라이브러리로 간단한 슬라이더 만들기 과제를 했다

이번엔 해당 라이브러리 공부를 위해 노마드코더의 강의를 첨부해주셨다

강의를 보고 따라치지 않고 그냥 한번 쭉 본 뒤 혼자 작성해봤다

라이브러리는 복잡한 로직의 기능들을 쉽게 구현할 수 있게 해줘서 좋지만 내가 하드코딩으로 로직을 짜서 만들어보라고 하면 못할 것 같다

뭔가 너무 라이브러리에 의존하는 건지 걱정될 때도 많다

구현하다보니 니꼬쌤과 다르게 이전 버튼 누르다가 다음 버튼을 누르면 현재 박스가 왼쪽으로 가고 다음 박스가 오른쪽에서 오는게 아니라 현재 박스가 오른쪽으로 가는 현상이 발생한다

니꼬쌤 코드와 똑같이 했는데도 고쳐지지가 않았다

그래서 과제를 내주신 분한테도 pr 하면서 물어보고 다른 팀원한테도 물어봤는데 내주신 분도 잘 모르겠다고 하시구 다른 팀원도 똑 같은 문제가 발생해서 뭐때문인지 모르겠다ㅠ

해결하지 못했으니 강사님께 여쭤봐야 할 것 같다

• 4차 과제 추가 기능 : 그리드 정렬 시작!

드디어 리팩토링도 끝나고 문제가 있었던 노마드 코더도 마무리가 되어서 추가 기능 중 가장 쉬운 것부터 시작했다

그리드 정렬은 뭔가 훅도 써야할 것 같고 컴포넌트도 많이 나눠야 할 것 같아서 일단 기능 구현이 되도록 하드코딩으로 스타일링을 제외하고 기능구현을 먼저 완료했다

해당 기능은 내가 구현한 검색 페이지와 다른 분이 구현한 카테고리 페이지에 넣어야 하는 거라 재사용할 수 있도록 신경을 써야 했는데 코드가 3줄밖에 되지 않아 훅으로 만들만 한 부분이 아니라서 이걸 훅으로 만들어야 할지에 대한 고민도 생겼다

그리고 생각해보니 그리드가 스타일링만 바뀌는 게 아니고 구조가 아예 바뀌는 거라 기존에 하나의 상품에 대한 컴포넌트를 쓸 수 있을지에 대해 고민도 많이 생겼다

이 부분에 대해서는 팀원한테 조언을 구해봐야 겠다

1/2

📝 할 일

• 4차과제 코드리뷰 피드백 수정 & 정리

✅ 한 일

• 4차과제 코드리뷰 피드백 수정 & 정리

코드리뷰 대한 질문과 리팩토링 계획이나 기간에 대한 회의 후 피드백 수정을 끝내고 pr 한 뒤 이슈에 정리했다

수정이 어려운 건 없었는데 짜잘하게 귀찮은 게 많아서 수정하는 데도 시간이 걸리고 어떻게 고쳤는지 정리하는 데도 시간이 좀 걸렸다

그리고 수정 도중에 에러가 생겨서 시간이 더 걸린 것도 있었다

로그인 후 처음 구매하기 들어가면 length 에러가 나는 상황이었다

계좌 조회 api 쪽에서 data 를 잘 불러오지 못하는 것 같은데 정확히 원인을 알 수 없었다

fetch 함수를 모듈화로 분리하지 않고 컴포넌트 내부에서 useEffect 로 불러오니 작동이 되는 것을 보니 데이터를 잘못 보내고 있는 것 같진 않았다

// 계좌 조회 api
export const getAccountInfo = async ({ accessToken }) => {
  try {
    const res = await fetch(ACCOUNT_URL, {
      method: 'GET',
      headers: { ...HEADERS_USER, Authorization: accessToken },
    });
    const json = await res.json();
    return json;
  } catch (error) {
    console.error(error.message);
  }
};

다른 팀원과 함께 컴포넌트 내에서, fetch 함수 안에서 console 을 찍어 봤는데 accessToken 이 undefined 로 나오는 것을 보고 컴포넌트 내에서 다시 accessToken 을 받아 인수로 넣어주니 해결되었다

근데 전까지는 accessToken 을 잘 받아오다가 왜 갑자기 못 받아오는지 모르겠다

length 에러를 해결하니 결제 오류가 났다^^

단일과 다중 상품 구매 시 id 이름이 달라 생긴 오류로 로직을 추가하려고 했으나 코드가 길어져 or 연산자 사용하여 해결했다

아래는 수정 사항인데 정리해놓으니 뿌듯하기도 했지만 생각보다 많아서 좀 부끄러웠다

1. Account : accountColor 스타일 부분 인라인에서 외부로 수정

2. Header : search input react-hook-form 도입 → 해당 기능의 장점을 살릴 수 없을 것 같아 사용하지 않으려 했으나 해당 기능을 도입할 때 속도면에서 극적인 차이가 나서 도입하기로 결정

3. SearchItem : onClick 이벤트 핸들링 함수 분리, cur → prev 수정

4. MyBuy : 결제 버튼 onClick 이벤트 핸들링 함수에서 배송지정보 reload 부분 제거

5. Account : onChange 에 전달되는 함수에 인자로 넣는 bankName 제거

6. MyBuy : 수량 데이터 없는 경우 1로 처리하도록 수정

7. Search :  useSearchParams 변수 선언 방식 수정

8. Search : 키워드 구분 로직 부분 수정, else 문은 필요 없어서 삭제

9. Search : API 호출 방식을 로직 분리 x, useQuery 로 수정하여 처리 속도 증가

10. TotalProduct : error, loading 부분 if return 문에서 컴포넌트 return 문 안의 삼항연산자로 처리

11. Product : onClickDetail 함수 삭제

12. MyBuy : productsPrice 로직에서 반복문 안의 if else 는 상세페이지의 구매하기 경우 quantity 데이터가 undefined 되어 처리해준 것으로 else 문 제거하지 않았음, while 문 제거하여 productsPrice 에 누적하는 것으로 수정

13. MyBuy : 배송지정보 form 의 변수명은 추후 기능 구현하면서 수정 예정

14. css : 클래스네임 컨벤션에 맞게 수정. btn_heart → btnHeart

15. MyCart : 장바구니에서 구매하기로 넘겨주는 state 변수명이 동일하도록 수정. buyItem → buyProduct

16. loading : 로딩 시 LoadingModal 활용

1/3

📝 할 일

• 4차과제 리팩토링

✅ 한 일

• 4차과제 리팩토링

  // api 호출
  const {isLoading, data: search, refetch} = useQuery(['search'], () => {
      if (findTitle && tag) return getSearch(findTitle, tag);
      else if (tag) return getSearch('', tag);
      else return getSearch(title);
    },
    {
      onError: () => {
        alert('현재 검색을 이용할 수 없으니 문의 바랍니다.');
      },
    },
  );
  useEffect(() => {
    refetch();
  }, [refetch, title]);

검색 기능에서 useEffect 로 fetch 함수를 불러오던 것을 useQuery 를 이용하여 리팩토링을 했다

확실히 빨라진 게 느껴졌다

근데 자꾸 검색어만 잘 불러오고 가져오는 정보는 업데이트가 되지 않았는데 결국 useEffect 로 refetch 를 해줄 수 밖에 없었다

++ 나중에 다른 팀원이 알려줬는데 fetch 함수로 데이터를 가져올 때 검색어마다 다르기 때문에 다른 정보를 가져올 때마다 query 키로 고유한 값을 줬어야 했는데 계속 search 로 가져오니 문제가 생겼다고 했다 그래서 key 값으로 검색어를 집어넣어줬더니 refetch 도 필요 없었다… useQuery 에 대해 잘 공부도 하지 않고 사용하니 이런 일이 생긴 것 같아 부끄러웠다

react hook form 써서 배송지 정보 기능 구현 완.

검색어 입력 때 한번 써봤는데도 input 이 많아지니까 복잡해져서 강의를 계속 보면서 했다

아무래도 강의를 보면서 실제로 코드를 치고 쓴 게 아니라 잘 이해가 되지 않아 오래 걸렸다

1/4

📝 할 일

• 4차과제 리팩토링 마무리
• 노마드 코더 리액트 마스터 클래스 typescript 파트 실습

✅ 한 일

• 4차과제 리팩토링 마무리

다음 우편번호 api 이용하여 주소 입력 기능 구현? 완.

https://www.npmjs.com/package/react-daum-postcode

나는 새 창에 열어서 다음 주소 검색창이 나타났으면 좋겠는데 다들 모달창으로 나오게 구현해서 위 문헌을 참고해서 구현했다

복붙하면 되는거라 그렇게 어렵진 않았다

확실히 문서를 잘 읽어봐야 겠다는 생각이 들었다

에러 : https://mik-a.com/62

하다가 위 링크 같은 에러가 발생했는데 value 가 다 들어오지 않았을 때 value 에 넣어주려고 해서 그런 것 같았다

그리고 구매 페이지에 결제 로직을 promise.all 로 하고 useQuery 와 useMutation 도입해보려고 했으나 promise.all 찍먹만 하다가 끝이 났다^^..

내일은 찐으로 해야지! 해낸다!

오늘 리액트 수업을 듣다가 firebase 를 github 으로 deploy 하는 과정에서 에러가 났는데

firebase-hosting-merge.yml 파일에서 run: npm install && npm run build 으로 입력해주지 않아서 나는 오류였다

• 노마드 코더 리액트 마스터 클래스 typescript 파트 실습

리팩토링하고 리액트 수업듣느라 새벽 3시까지해서 겨우겨우 완성시켰다

그런데 타입스크립트는 들어도 들어도 잘 모르겠어서 계속 써봐야 겠다는 생각이 계속 들었다

어느 상황에서 타입을 지정해주고 어떻게 입력을 해줘야 하는지 감을 잘 못 잡겠다

interface 를 계속 붙여주긴 하는데 어느 때는 props 에 해주고 어느 때는 useState 에 해주고.. 너무너무 헷갈린다~~!

1/5

📝 할 일

• 4차과제 리팩토링 찐찐마무리
• 개발블로그 정리 & 제출

✅ 한 일

• 4차과제 리팩토링 찐찐마무리

promise.all 로 리팩토링 했으나 해당 기능은 promise all에서 배열에 담긴 promise이행이 하나라도 거부되면 전체 반환을 거부로 반환하긴하지만 이미 시행된 이행이 취소된다는 의미는 아니라고 함

그래서 이 로직을 다시 수정하거나 장바구니에서 품절상품자체를 비활성화하거나 구매 페이지에서 다시 업데이트해서 결제 버튼을 막도록 수정해야 할 것 같음

promise.all(products.map(
      // api 호출
    ))
      .then(배송비 생성,결제,삭제)
      .catch(콘솔에러)

→ 이런 식으로 로직을 수정

• 개발블로그 정리 & 제출

요즘은 하루 일과가 끝나고 바로 쓰는 걸 포기하고 간단하게 어떤 걸 했다고 쓴 뒤에 하루 전 몰아쓰는 걸 반복하고 있다

이래도 되나 싶지만 이렇게 라도 하는 게 어디냐 싶다ㅎㅎ.. 그래도 제출을 못하고 있는 건 아니니까..!

이 교육 과정을 들은지 벌써 3개월 반이 지나버렸다

시간이 어떻게 지나가는지도 모르게 하루하루 일과를 해내는 하루살이처럼 살고 있다

그래도 확실히 3개월 전을 생각해보면 아무것도 모르는 응애다 응애

아직도 배울 게 산더미지만 이만큼 성장한 내가 자랑스럽다!!!

매일매일 비관하며 사는 것보다 이렇게 조금이나마 낙관적으로 생각하며 사는 게 내 정신 건강에는 편한 것 같다..

앞으로 수료까지 3개월 반..! 아좌잣 파이팅!~~!

1/6

📝 할 일

• 4차 과제 리팩토링 : 배송비 결제 로직 수정

✅ 한 일

• 4차 과제 리팩토링 : 배송비 결제 로직 수정

for (let i = 0; i < products.length; i++) {
      let quantity = products[i].quantity || 1;
      while (quantity > 0) {
        if (i === 0 && quantity === 1) {
          const plus = updateProduct(products[i].productId, { price: products[i].price + 3000 });
          plus.then(async (data) => {
            await getBuy(data.id, accountId, accessToken);
            updateProduct(data.id, { price: data.price - 3000 });
          });
          console.log(
            `장바구니 상품+3000 결제 ${products[i].productId || products[i].id} ${products[i].price}`,
            products[i],
          );
          quantity--;
        } else {
          await getBuy(products[i].productId || products[i].id, accountId, accessToken);
          console.log(`장바구니 상품 결제 ${i}번째`, products[i]);
          quantity--;
        }
      }
    }

상품 중 하나에 가격을 3000원(배송비) 를 추가하여 수정한 뒤 해당 값으로 결제를 진행하고 다시 상품의 원래 가격으로 수정하는 로직으로 결제하는 것을 성공했다

그러나 실제 결제 내역에서는 수정한 결과로 결제가 진행되었는지 알 수가 없었다

그 이유는 결제 내역 api 자체에서 결제할 때의 가격을 출력하는 것이 아니라 해당 상품의 id 를 이용해 최종 수정된 이후의 가격을 가져온다

해당 값을 원래 상품의 가격으로 수정하지 않고 결제했을 때는 수정 이전에 결제한 내역들까지 3000원(배송비)이 추가된 가격임을 확인할 수 있었다

결제할 때 배송비 만큼 상품 가격에 추가하여 수정하고 결제 이후 상품 가격을 다시 원래 가격으로 수정하는 로직은 사용하지 못할 것 같다

백엔드를 조절하지 않는 이상 배송비를 자체를 없애고 결제를 하거나 배송비 상품을 추가하는 방식으로 되돌아가야 될 것 같다

++ 팀원들과 중간 회의에서 얘기를 해봤는데 일단 배송비 상품이 결제 내역에 너무 많이 찍혀 불러오는 데 너무 많이 소모하니까 이 로직으로 진행하고 추후에 백엔드가 구축되면 로직을 변경하기로 했다

1/8

📝 할 일

• 4차 과제 리팩토링 : 배송비 결제 로직 수정

✅ 한 일

• 4차 과제 리팩토링 : 배송비 결제 로직 수정

useMutation 으로 리팩토링하려고 했으나 안됨 for 문에서 빼서 단독으로 결제해도 안됨

걍 안됨 왜 안됨?

하루죙일 붙잡고 있었음 나 그냥 지쳐 쓰러짐

계속 _ref 어쩌구랑 undefined 뜸 나 그냥 기절

fetch 함수에서 console 찍으면 그냥 undefined. 무적권 undefined.

그래서 다른 팀원들이 쓴 mutation 배껴봄 응 아니야 안돼

다른 공부 하지도 못하고 스트레스 받아서 배달 오지게 시킴ㅠ.. 내일 회의때 물어봐야지…

12/26

📝 할 일

• 노마드 코더 리액트 마스터 클래스 typescript 파트 수강

✅ 한 일

• 노마드 코더 리액트 마스터 클래스 typescript 파트 수강

4차과제가 끝났으니 앞으로 방향을 어떻게 잡을지 회의를 했다

회의를 조금 오래하다 보니 강의는 조금밖에 듣지 못했다

아무래도 연말이고 하니 금토일 연달아 쉬다보니까 몸이 아직도 정신을 못 차리는지 집중도 못하고 뭘 하는지도 모르겠다

놀다 왔으니 열심히 하겠다 다짐했는데 그 다짐은 고이 접어 나빌레라~~

12/27

📝 할 일

• 4차 과제 다른 팀원 코드 리뷰

✅ 한 일

• 4차 과제 다른 팀원 코드 리뷰

오늘은 어제 회의에서 각자 다른 팀원의 코드를 읽고 리뷰하자는 말이 나와서 코드리뷰를 했다

다른 사람 코드라서 거의 읽고 이해하는 데에 시간을 전부 쓰고 에러 찾는 것 밖에 못했다

좀 더 보고 싶어도 아직 공부가 부족해 어떤 코드가 좋은 코드고 좋지 못한 코드인지 몰라서 리뷰를 제대로 할 수가 없었다