TIL53 124. TIL 23.02.07 TIL 📌 오늘 한 일 Redux Toolkit 공부 React-query 공부 리덕스가 익숙해질 때쯤 toolkit과 query를 공부했는데 머릿속이 너무 복잡하다 예전에 장고 시리얼라이저 처음 공부했을 때 느낌이 난다 공부할게 많아지니깐 머릿속에서 너무 복잡해짐 아직 안익숙해서 그런 거 같으니 계속 반복해서 봐야겠음 2023. 2. 7. 123. Web Browser 빈 화면에서 렌더링이 완료되기까지 오래 걸릴 때. TIL 23.02.06 빈 화면에서 렌더링이 완료 되기까지 오래 걸릴경우 해결방법 script 파일을 body 태그 가장 하단에 위치시키거나 script 태그에 async 속성을 부여한다. 또는 네트워크 리소스 블라킹을 통해 불필요한 무거운 파일들을 제한한다. 2023. 2. 6. 122. 리덕스 흐름 TIL 23.02.01 리덕스 흐름 리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있음. 또한, 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있음(전역으로 관리 가능) - Action : State가 변하는 것. - Reducer: 변화를 일으키는, 즉 데이터(state)를 수정하는 함수. - Store : action과 action에 따라 상태를 수정하는 reducer를 저장하는 어플리케이션에 있는 단 하나의 객체. 스토어는 State를 수시로 확인해 View한테 변경된 사항을 알려주는 역할을 함 - Dispatch : 스토어의 내장 함수.. 2023. 2. 1. 121. React return [...item, ] return {...item, } ? TIL 23.01.31 return [...item, ] return {...item, } ?? 리액트를 공부하면서 헷갈렸던 내용을 다루려고 한다. 코드에서 어쩔 땐 return [...item, ] return {...item, } 이런 식으로 사용하길래 [ ],{ } 구글링을 해보며 공부해 봤다. [],{}를 사용한 코드에 내가 이해한 대로 주석을 달아봤다. 2023. 2. 1. 120. TIL 23.01.30 TIL todolist를 안 보고 구현할 수 있을 정도로 익숙해지기 위해서 아침에 일어나자마자 todo강의 시청하고 강의 안 보고 처음부터 끝까지 작성해 봤다 물론 처음이라 안 보고 작성할 수 없었다. 그래서 막힐 때마다 고민하다가 안되면 작성했던 코드들을 봤다. 확실히 안 보고하니깐 어떤식으로 코드가 진행되는지 살짝 알거같다. 이 과정을 이제 안보고 할 수 있을 때까지 반복할 듯하다. todolist 작성을 하고 리덕트에 대해서 공부해 봤는데 저녁 먹고 공부해서 그런지 1도 기억이 안 난다. 내일 한번 더 볼 거 같음. 현재 배우는 게 느리더라도 일단 할 거임. 2023. 1. 30. 119. React Hooks: useRef ? TIL 23.01.27 input태그에 오류 처리를 하던 중 빈칸에 focus를 가게끔 코드를 작성하고 싶었다. 그래서 기존에 사용하던 document.getelementbyid('').focus()를 사용했다. 혹시 몰라서 'React에서 focus를 할때' 구글링을 해보니 useRef를 사용한다고 쓰여있었다. useRef에 대해서 알아보자. UseRef JavaScript를 사용할 때는, 특정 DOM을 선택해야 하는 상황에서 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM을 선택했다. React에서도 DOM을 선택할 상황이 오는데 예로 focus를 해야 하는 상황 이럴 때 리액트에서는 ref를 사용한다. useRef는 저장공간 또는 DOM요소에 접근하기 위해 사용되는.. 2023. 1. 27. 118. Warning: Each child in a list should have a unique "key" prop. TIL 23.01.26 Warning: Each child in a list should have a unique "key" prop. React에서 map 함수를 사용하다가 콘솔에 경고가 떴다. 실행하는데 문제는 없었지만 신경 쓰여서 경고를 해결해 봤다. 원인: 불필요한 리렌더링을 방지하기 위해서는 각 자식 컴포넌트마다 독립적인 key값을 넣어줘야 함. [에러가 발생한 코드] key와 관련된 세팅이 없음 [해결] key={item.id}를 추가해 줌 여기서 key는 형제 사이에서만 유일하면 되고, 전역에서는 유일할 필요는 없음. 2023. 1. 26. 117. Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. TIL 23.01.25 Filed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. fetch 통신한 후 json에 있는 title을 ul태그 아래 li태그에 for문을 돌려서 작성을 하려고 했다. 코드를 작성 후 정상적으로 출력되지 않아 콘솔 창을 봤더니 아래 오류가 뜸 appendChild는 Node 만 추가 할 수 있다는 얘기 문제 코드 fetch('https://jsonplaceholder.typicode.com/todos') .then((response) =>response.json())//통신이 된 후 json값 가져오기 .then((data) => {//json을 처리한 후 가져온 body부분이 data const customULTag =.. 2023. 1. 25. 이전 1 2 3 4 5 6 7 다음 728x90
