유이로운 개발일지

기본적으로 로컬스토리지에는 문자열로 저장되기 때문에 object, object로 저장된다 ex) localStorage.setItem("상품명", {name: "멋있는 티셔츠", 가격: 10000}) -> Object, object 따라서 setItem을 할 때 JSON.stringify를 이용해 로컬 스토리지에 저장한다. ex) localStorage.setItem("상품명", JSON.stringify({name: "멋있는 티셔츠", 가격: 10000})) 이렇게 해서 getItem으로 데이터를 불러와 보면 문자열 속에 갇혀있는 객체로 데이터가 저장된다. ex) localStorage.getItem("상품명") -> '{"name":"멋있는 티셔츠","가격":10000}' 따라서 문자열 속성을 삭제하..

화살표 함수를 사용 경우 함수 내 다른 것 없이 'return 문'만! 존재하면 return과 중괄호 함께 생략 가능함! 예를 들어 function arrowFunction() => { return 이러쿵저러쿵 } 위처럼 화살표 함수 내 return문만 딱! 홀로 외로이 존재할 경우 function arrowFunction() => 이러쿵저러쿵 이렇게 return문과 {} 를 함께 생략하여 깔끔하게 한 줄로 만들 수 있다! 오늘도 잘 해냈다!

특징: 변수는 랜더링 될 때마다 초기화 된다. 그래서 변경된 값을 저장하기 위해 아래 두 가지의 hook이 필요하다. useState : 변경값이 필요할 때 사용, 값이 변경될 때마다 랜더링이 일어나게 한다. useRef: 값 자체는 변경이 된 상태로 저장이 되지만, 랜더링이 일어나기 전까지 이가 표면적으로 보이진 않는다(값을 저장하기 위해 주로 사용) useEffect: 특정 상황에서만 랜더링이 일어나게 한다. 의존성배열이 적용 되는데, 이가 빈값 [ ]으로 설정될 경우 단 한 번만 랜더링이 일어난다. 특정값을 설정할 경우에는, 해당 경우에만 랜더링이 일어난다. useContext: props를 최하위로 내려 주기 위해 props drilling현상이 일어날 때가 있는데, 이가 필요 없도록 전체를 기준..

현재 이전 터미널 기록이 조회되지 않아 오류명을 그대로 긁어올 수는 없는 상황이지만, yarn create react-app 을 실행하면 지속적으로 에러가 발생하는 상황이었다. unexpected error. please report it as a bug: error: spawn unknown errno: -4094 등의 에러였다. 검색해 보니 거의 동일한 오류를 겪은 사람이 없고, 비슷한 경우의 해결방안을 찾아도 해결이 되지 않아서 정말 답답했는데 아래 블로그를 통해 백신의 문제일 가능성일 수도 있음을 깨달았다 https://young-taek.tistory.com/83 Antiviurse 오류해결 어느 순간, React 프로젝트를 만들려고 했는데, 아래와 같은 에러가 발생했다. 지인들한테 물어봐도 모..

To do List를 만드는 과정에서 완료, 취소 버튼을 누르면 각각 Working에 있던 것은 Done으로, Done에 있던 것은 Working으로 향하는 기능을 구현해야 했다. 그런데 state를 활용해 변형을 시켜보아도 랜더링이 제대로 되지 않는지, console.log에는 제대로 된 값이 직혀 나오지만 화면에 변화가 없었다. 그리고 input에 값을 입력하면 그제서야 바뀐 값에 맞는 위치로 들어가는 현상이 보이기도 했다. 결론적으로 말하자면, 이는 JS 고유의 불변성과 관련 있는 것으로 state를 변경하였으나 메모리의 주소값은 변경되지 않은 것으로 인지해 렌더링이 일어나지 않았던 것이었던 듯하다. 따라서 기존 value 값을 변경한 뒤, 기존에 있던 객체를 새로운 객체로 복사해 주고, 새로운 객..