title | view |
---|---|
createTodo | |
display detail | |
delete todo | |
updateTodo | |
signup | |
login | |
refresh but steady |
commit | Detail |
---|---|
48fdafe | layout signup, signin, add login validate,토큰 여부에 따른 route 처리 추가 |
3095ef7 | api주소 관리용 파일 추가, 토큰 유효하지않다면 로그인페이지로 리다이렉트 추가 |
d5baa95 | 특정 todo를 선택하면, 상세내역 출력 |
5216eca | label태그 삭제, 체크박스에 체크 되야 detail이 보이던 방식에서 todo 클릭 하면 보이는것으로 수정, detail 닫기 버튼 추가 ,title의길이가 특정 index이상 되면 ... 으로 collapse되게 view 수정, input scale transition 삭제 |
34eecbf | create todo 기능 추가 |
5229454 | delete 버튼을 누르면 todo 삭제 되는 기능 추가 ,delete 버튼을 누르고 삭제되면 re-render되도록 setState 구성 ,createTodo 하면re-render 되도록setState수정, update 용도 modal 구현중 |
853ce94 | todo update 기능 추가 |
859ae90 | 새로고침해도 유지되도록 기능 추가 |
e76c6a5 | axios로 전환, 불필요 state 삭제, detail 여부에 따라 조건부 렌더링으로 변경 |
e04b37d | service code 분리, 로그인 여부에 따른 privateRouter 설정, axios interceptors추가로 instance request 전 header에 Authorization token update |
- /auth 경로에 로그인 / 회원가입 기능을 개발합니다
- 로그인, 회원가입을 별도의 경로로 분리해도 무방합니다
- 최소한 이메일, 비밀번호 input, 제출 button을 갖도록 구성해주세요
- 이메일과 비밀번호의 유효성을 확인합니다
- 이메일 조건 : 최소
@
,.
포함 - 비밀번호 조건 : 8자 이상 입력
- 이메일과 비밀번호가 모두 입력되어 있고, 조건을 만족해야 제출 버튼이 활성화 되도록 해주세요
- 이메일 조건 : 최소
- 로그인 API를 호출하고, 올바른 응답을 받았을 때 루트 경로로 이동시켜주세요
- 응답으로 받은 토큰은 로컬 스토리지에 저장해주세요
- 다음 번에 로그인 시 토큰이 존재한다면 루트 경로로 리다이렉트 시켜주세요
- 어떤 경우든 토큰이 유효하지 않다면 사용자에게 알리고 로그인 페이지로 리다이렉트 시켜주세요
-
Todo List API를 호출하여 Todo List CRUD 기능을 구현해주세요
- 목록 / 상세 영역으로 나누어 구현해주세요
- Todo 목록을 볼 수 있습니다.
- Todo 추가 버튼을 클릭하면 할 일이 추가 됩니다.
- Todo 수정 버튼을 클릭하면 수정 모드를 활성화하고, 수정 내용을 제출하거나 취소할 수 있습니다.
- Todo 삭제 버튼을 클릭하면 해당 Todo를 삭제할 수 있습니다.
-
한 화면 내에서 Todo List와 개별 Todo의 상세를 확인할 수 있도록 해주세요.
- 새로고침을 했을 때 현재 상태가 유지되어야 합니다.
- 개별 Todo를 조회 순서에 따라 페이지 뒤로가기를 통하여 조회할 수 있도록 해주세요.
-
한 페이지 내에서 새로고침 없이 데이터가 정합성을 갖추도록 구현해주세요
- 수정되는 Todo의 내용이 목록에서도 실시간으로 반영되어야 합니다
- create와 delete때 어떻게 re-render시킬까에 대한 고민이 많았는데, 차근차근 해결.
- delete할때 navigate로 넘기고 params로 받아오면 이전 id가 url에 남아있어서 2번 클릭해야 삭제되는 버그가 있었는데 선택한 element의 id를 받아와서 api로 보내주는 방식으로 수정.
- detail을 열어놓은상태로 목록의 todo를 다 지워도 delete가 그대로 남아있어서 useEffect로 todoList의 length가 0 이면 false되도록 일단 땜질.
- update 용도로 만드는 modal을 portal로 쓸지, absolute로 띄울지 여러 시도해보는중.
- 그러다가 배경색 opacity를 적용하는데서 꽤나 시간을 잡아먹었고, 정말 어이없이 간단하게도 background-color의 rgba 부분의 값을 부여하면 해결되는 문제였음. -update 감이 잘 안잡혔는데, 해결했다. CRUD 는 끝났고, 정합성, 다른 기능들을 좀 써보고 리팩토링도 필요하다. fetch 코드 반복이 많은데 그것부터 해봐야겟다.
- axios 처음써봤는데, 반복되는 옵션들을 instance 생성해서 쓸 수 있는게 굉장히 편한 것 같다. JSON파싱도 해줘서 비동기함수로 편하게 쓸 수 있는게 장점같다. 왜 진즉 써볼 생각을 안했을까.. 너무 좋다
- 이전까지는 특정페이지에 접근했을 때 로그인 여부를 판단해서 일단 useEffect가 돌기 전에 렌더부터된 화면이 노출됐었는데, PrivateRouter로 경로 설정하는걸 알게되서, 애시당초 로그인 여부를 Router에서 판단해 진입조차 안되도록 수정.
- 로그아웃된상태에서 로그인을하면 리스트로 보내지도록 구성했는데, 리스트로와서 꼭 새로고침 한번을 해야 했다. 원인은 localstorage에 값이 초기엔 null이라 unAuthorization 인것. 그래서 리스트 컴포넌트가 마운트되고-> JSX render->get 요청에서 get요청이 안됐던것. 해결은, axios에 interceptors라는 방법으로 해결. interceptors가 하는일은 api request 하기전, response 받기 전에 특정 동작을 수행할 수 있는데, list페이지로 넘어와서 get 요청하기전에 interceptors가 낚아채서 headers에 있는 Authorization 값을 null에서 JWT로 갈아끼우고 api call 하는 순서로 진행되어 이상없이 list에 todoList 렌더..
- 다른 api call은 다 잘됐는데, 유난히 signup할때만 안되더라. 그래서 인스턴스에 config를 봤더니, baseUrl로 되어있던것...ㅠㅠㅠㅠㅠ4시간날림...
baseURL
이다.. - update할 때 findIndex로 배열의 index를 찾아서 값을 갈아끼우는 방식이었는데, 조건이 이중부정으로 어색했음.
const updateElement = (updatedTodo) => {
setTodoList((prevTodoList) => {
const editedIndex = prevTodoList.findIndex(({ id }) => id === updatedTodo.id);
if (editedIndex !== -1)//이중부정 {
const updatedTodoList = [...prevTodoList];
updatedTodoList[editedIndex] = updatedTodo;
return updatedTodoList;
} else {
return prevTodoList;
}
});
};
- find메서드로 해당 요소를 직접찾아 원본배열과 선택된 배열의 id를 비교해서 같으면 업데이트한 요소로, 아니면 원본 요소로 반환하도록 수정.
const updateElement = (updatedTodo) => {
setTodoList((prevTodoList) => {
const matchedTodo = prevTodoList.find((todo) => todo.id === updatedTodo.id);
if (matchedTodo) {
const updatedTodoList = prevTodoList.map((todo) =>
todo.id === updatedTodo.id ? updatedTodo : todo
);
return updatedTodoList;
} else {
return prevTodoList;
}
});
};