20230326 프로젝트 데일리 로그

오늘 정리할 내용

- git fetch / git merge / git pull ( fetch + pull)

-> pull 실행 시, 원격 저장소의 내용을 가져와 자동으로 merge 작업을 실행함. 단순히 원격 저장소의 내용을 확인만 하고 로컬 데이터와 merge 하고 싶지 않은 경우에는 fetch 명령어를 사용하면 된다. 

 

-> fetch 실행 시, 원격 저장소의 최신 이력을 확인할 수 있다. 이때 가져온 최신 커밋 이력은 이름 없는 브랜치로 로컬에 가져오게 된다. 

 

- Recoil 사용법

-> 거래 내역 GET 요청의 URL에 로그인 된 멤버의 memberId가 필요했다. 따라서, 로그인할 때 Recoil로 전역상태 관리를 해주는 userInfo에서 해당 memberId를 가져오려고 한다.

 

- Atoms 

1. 생성: atom() 함수 - key, default
2. 읽기: useRecoilValue(key)
3. 수정: useRecoilState(key) 

// atom 생성하기

const todoListState = atom({
	key: 'todoListState',
    default: [],
    })
    
// atom 읽기 (컴포넌트 내에서) // 읽기 전용 

const todoList = useRecoilValue(todoListState);

// atom 내의 state 업데이트 하기
// const [todoList, setTodoList] = useSetRecoildState(todoListState)도 가능함!

const setTodoList = useSetRecoilState(todoListState);

const addItem = () => { 
	setTodoList((oldTodoList) => [
    ...oldTodoList,
    {
    	id:getId(),
        text: inputValue,
        isComplete:false,
    },
    ]);
    setInputValue('');
    };

 

- 네트워크 요청 404 에러

HTTP 404 NOT FOUND 에러의 경우, 

1. 경로가 존재하지 않음

2. 자원이 존재하지 않음

 

이 두가지 경우가 있다.

 

해당 에러는 POST 요청 전송한 결과로 나온 에러이므로, (자원을 받아오는 경우가 아닌) 자원을 보내는 경우이므로 2번 에러는 아니므로 1번에 해당한다. 따라서 request 주소를 다시 확인해보아야 함!

 

(확인해보니 endpoint는 맞았는데, 백엔드 코드상 POST 요청 시 데이터 값 중 하나가 사전에 생성되어 있어야 하는...것이었음. 그게 생성되어 있지 않아서 404에러가 뜬 것으로 유추됨)

 

- 네트워크 요청 500 에러

-> 서버에서 발생한 (정해지지 않은) 에러를 통틀어서 이야기함. 

-> 백엔드에서 에러 로그를 500외의 다른 구체적인 에러 코드를 보내주는게 좋음... 

 

- Modal 컴포넌트에서의 네트워크 요청 구현 방식에 대한 고민

- 거래내역 클릭 시, 해당 거래내역의 상세 조회 데이터를 모달로 띄운다. 이때, 메모와 카테고리를 수정할 수 있다. 수정된 메모와 카테고리를 PATCH 요청을 해야 하는데, 둘 중 하나만 수정하는 경우도 있으니 이를 분리할지 합쳐서 요청을 보내야할지를 고민했다.

 

고민 결과, 우선 메모는 사용자가 수정할 때마다 PATCH요청을 보내는 경우 과도한 네트워크 요청이 발생하므로 debounce를 적용시켜보기로 했고, 카테고리 PATCH 요청은 드롭다운으로 구현할 예정이므로 분리하여 드롭다운 선택한 옵션이 변할 때 요청을 보내는 방식으로 구현하기로 했다. 

 

피드백

블로그에 정리하며 구현하는게 공부에 훨씬 도움이 되는게 느껴진다. 

앞으로도 프로젝트 구현하면서 매일 로그 작성해야겠다! 

 

해결해야 할 문제

- usersetting 페이지에서 기존 정보를 보여주는 페이지 없이 바로 수정하는 페이지가 뜨도록 구현되어있었다. 이 상태에서 각 input에 기존에 입력된 정보가 있는 경우 해당 정보를 보여주기 위해 value={username} 이런식으로 작성했다. 그러다보니, read-only라서 수정할 수 없게 됨... 

 

해결방법

1. 기존 정보를 보여주는 페이지를 따로 구현하기

2. value={username} 대신 input 란에 수정 가능하도록 기존 정보를 보여주는 방식 고민해보기