2023/08 17

react. too many re-renders. react limits the number of renders to prevent an infinite loop

문제상황 : too many re-renders. react limits the number of renders to prevent an infinite loop 발생 const nextPlease = () => setBack(false); setVisible((prev) => ( prev === 10 ? 10 : prev + 1 ) ); const previousPlease = () => setBack(true); setVisible((prev) => ( prev === 1 ? 1 : prev = 1 ) ); 해결 : 해결방법은 단순했다. 괄호가 안 닫힌 것이 이슈였다. nextPlease와 previousPlease를 모두 {}로 닫아주니 해결되었다. const nextPlease = () => { ..

개발/리액트 2023.08.17

react. state가 immutable해야 하는 이유

🔱 수업 https://nomadcoders.co/react-masterclass/lobby 을 듣다가 6.14, 6.15장 immutability part 를 듣다가 아래 slice 통해서 값을 교체하는 방식으로 진행하는 것을 보고 왜 state가 immutable 해야 하는지 찾아보았다. setToDos((oldTodos) => { const targetIndex = oldTodos.findIndex(toDo => toDo.id === id); const oldTodo = oldTodos[targetIndex]; const newTodo = {text, id, category: name as any}; return [ ...oldTodos.slice(0, targetIndex), newTodo, ....

개발/리액트 2023.08.15

baekjoon. 14890 경사로 [Gold III][python]

https://www.acmicpc.net/problem/14890 14890번: 경사로 첫째 줄에 N (2 ≤ N ≤ 100)과 L (1 ≤ L ≤ N)이 주어진다. 둘째 줄부터 N개의 줄에 지도가 주어진다. 각 칸의 높이는 10보다 작거나 같은 자연수이다. www.acmicpc.net 여기서, 알고리즘 구현할때 참고하면 좋은 부분은 다음과 같다. 1. 높은곳 -> 낮은곳으로 경사로를 세울때, - 경사로의 높이는 낮은곳으로 동일해야 하며 - 낮은곳 바로 다음 블럭의 높이는 낮은곳과 동일해야 한다 2. 낮은곳 -> 높은곳으로 경사로를 세울때, - 경사로의 높이는 낮은곳으로 동일하야 하며, - 낮은곳 바로 전의 블럭은 낮은곳과 동일해야 한다. baekjoon. 14501 # 첫째 줄에 N (2 ≤ N ≤ ..

pseudo class | 개념 및 &:hover 통해서 구현

pseudo class - 요소의 상태에 따라 선택하여 꾸며주는 것을 의미 LESS 전처리기에서, & 통해서 부모 element 접근할 수 있다. (react에서도 동일하게 사용 가능) const Box = styled.div` height: 200px; width: 200px; background-color: tomato; display: flex; justify-content: center; align-items:center; animation: ${rotationAnimation} 1s linear infinite; span { font-size: 36px; &:hover { // span:hover 와 동일 font-size: 100px; } } `; 가상 선택자(가상 클래스) 설명 :hover ..

개발/리액트 2023.08.10

뉴스레터 23'08'08 - 소비자물가지수와 근원물가지수, 주요 시스템 아키텍쳐, JPA Propagation and Isolation

알쏭달쏭 물가지수, 어떻게 봐야 해 ? 1. 소비자물가지수 : 소비자들이 많이 사용하는 물건·서비스의 평균 가격(=물가)을 조사한 거예요. 보통 ‘물가가 올랐다, 내렸다’라고 할 때 이걸 갖고 얘기해요. 2. 근원물가지수 : 가격변동이 심한 물가를 빼고 조사한 물가예요. 예를 들어 농산물 가격은 폭염·폭우 등 날씨에 따라 크게 오르락내리락하잖아요. 국제유가도 기름 뽑는 나라의 결정 등 외부 요인에 따라 변화가 크고요. 이런 것들은 뺀 물가만 따로 보는 거예요. 3. 근원물가를 보는 이유 : 변동이 심한 물가는 빼고, 장기적인 관점에서 물가가 어떤 방향으로 가고 있나 파악하려는 거예요. 산뜻한 출발 1. 저의 경우엔 오늘의 할 일들을 확인하고, 아침의 마음 상태를 적는 모닝페이퍼를 썼어요. 딱 5분만 적자..

뉴스레터 2023.08.08

typescript. ??(nullish-coalescing) unexpected token, you may need an appropriate loader to handle this file type

문제 상황 > - npm start 시 unexpected token 발생 - 노마드코더 강의 듣는 중 발생 https://nomadcoders.co/react-masterclass /src/Circle.tsx 21:30 Module parse failed: Unexpected token (21:30) You may need an appropriate loader to handle this file type. | return /*#__PURE__*/React.createElement(Container, { | bgColor: bgColor, > borderColor: borderColor ?? bgColor, | __self: this, | __source: { 해결 > - react 버전 18 -> 1..

개발/리액트 2023.08.06

jest-worker run build : unexpected token

문제 상황 > - create react app 통해서 설치 후 실행했을때 에러 발생 - 노마드코더 강의 듣는 중 발생 https://nomadcoders.co/react-masterclass /MovieDB/node_modules/jest-worker/build/WorkerPool.js:25 } catch { ^ SyntaxError: Unexpected token { at NativeCompileCache._moduleCompile (/home/donquixote/Desktop/dicoding-submission/MovieDB/node_modules/v8-compile-cache/v8-compile-cache.js:240:18) at Module._compile (/home/donquixote/Des..

개발/리액트 2023.08.03
반응형