Each child in a list should have a unique key prop. 처음엔 todoList를 리스트렌더링할 때 idx값을 key값으로 넘겨줬었다. 근데 배열의 원소 순서가 바뀌면 index값도 바뀌고 컴포넌트마다 고유해야 하는 key값도 바뀌기 때문에 지양해야 한다고 한다. 그래서 나는 idx 부분을 todo.id로 바꿨고 저런 오류가 발생했다. [초기 코드] {todoList.map((todo, idx) => ( ))} [수정 코드] {todoList.map((todo) => ( ))} 코드를 수정했을때 id값을 찾지 못하는 것 같았다. 이거때문에 3일이라는 시간이 소요됨.... 에러를 해결하는 방법을 엄청나게 찾아봤는데 해결방법이 2개가 있었다. 1. Key값을 정확하게 넣을..
개발 중에 만난 axios 401 에러.. 처음에는 서버가 잘못된건지 뭐가 잘못된건지 계속 헤맸다. 한 두시간 넘게 계속 헤맸다가 정말 어이없게 해결했다. 이 오류 해결에 도움을 준 내 친구에게 영광을 돌린다. 사실 이 문제는 같이 오류해결을 하려고 했던 친구가 먼저 이 오류를 마주했다. 함께 찾아보다 결국 해결하지 못했는데 이 친구는 선언했던 변수명과 응답해야하는 변수명이 달라서 오류를 뱉어낸 것이었다. (내가 준 코드 때문에 변수명이 달랐음) 그래서 나도 변수명이 문제인가했지만 그럴리가 없었다. 왜냐면 나는 계속 똑같은 코드를 써왔기 때문에.. 투두리스트를 만들고 axios를 이용해서 통신을 하는데 계속 오류가 발생했다. 나는 headers도 잘 넣었는데 왜 안될까..를 고민하던 와중 데이터를 보내는..
📖 서두 로그인 기능을 구현하려던 와중 회원가입 → 로그인을 하면 계속 로그인 상태를 유지하고 만약 token 값을 가지고 있지 않다면 다른 기능을 사용하지 못하도록 설정을 해야했다. 한 번 로그인을 했다면 계속 유지를 시켜야하므로(즉 로그인을 했다는 정보를 가지고 있어야 한다.) localStorage를 이용해서 로그인 정보를 유지할 수 있도록 token값을 저장해줘야 했다. 📝 localStorage localStorage는 자바스크립트의 Web Storage를 이용한 것이다. 웹 스토리지에는 localStorage와 sessionStorage 2종류가 있다. 두 가지의 차이점을 간단히 설명하자면, 데이터 저장이 어떤 범위로 계속 보존되어 있는지에 달려있다. localStorage는 어떤 세션에 들어..
axios로 통신을 하던 와중 headers에 왜 이것을 써주어야 하는지 궁금했다! axios 요청할 때 header에 이런 것을 넣어준다. 'Content-Type' : 'application/json', 이것의 의미는 json 형태로 응답해주세요. 라는 뜻이다. 백엔드와 프론트엔드 사이에 전달을 요즘 다 json형태로 하는 추세라고 한다. request랑 response 형태가 어떤 형태로 들어가고 나오는지 확인 후 헤더를 정한다. 예를들어 로그인을 했을 때(백엔드에서 POST로 signin을 한다면) 어떤 것을 줄까?를 물어본다면 그것은 응답이다. 응답 : json토큰 (jwt) { "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI..
