전체 글 207

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

뉴스레터 23'07'30 - 사회생활을 하며 슬기롭게 도움을 요청하는 방법, api 목록

사회생활을 하며 슬기롭게 도움을 요청하는 방법 https://camp.lemonbase.com/weekly58?fbclid=IwAR3k9-FVATg4RSU0eUIFZoEj-2A6MylF-u3XBG-L4NTovYGjtdajQMFuGzU 1. 게다가 어려운 작업에 대해 도움을 요청하면 요청자의 역량을 오히려 더 높게 인식한다는 결과가 있습니다. 2. 그러나 도움을 주는 사람이 얻는 이점도 있습니다. 연구에 따르면, 직장 내 도움을 주는 사람과 받는 사람 모두 의욕과 직무 만족도가 높아지는 등 도움을 주고받는 과정에서 다양한 장점이 있는 것으로 나타났습니다. 3. 웨인 베이커의 에 따르면, '도움 요청을 회피하는 직원은 다른 사람의 실수를 반복하거나 혼자 전문 정보를 찾는 데 시간을 낭비해 조직의 생산성을 떨..

뉴스레터 2023.07.30

[mysql] replica 서버 구축하는 목적, 복제방법 w.바이너리 로그

Replication 이란 ? - 한 서버에서 다른 서버로 데이터를 동기화 > 원본 데이터를 가진 서버를 소스 서버 (= 마스터) > 복제된 데이터를 가진 서버를 레플리카 서버 (= 슬레이브) Replica 서버를 구축하는 목적 - 스케일 아웃 : 갑자기 늘어나는 트래픽을 대응하는데 유연한 구조 - 데이터 백업 : > 레플리카를 안하더라도 백업을 해야 한다 > 백업 과정은 실제 실행중인 쿼리들에 영향을 줄 수 있기 때문에, 레플리카 서버에서 데이터 백업을 실행하여 소스 서버에서 백업 시 발생하는 문제들을 해결한다 - 데이터의 지리적 분산 : > 데이터베이스의 애플리케이션 서버가 멀리 떨어져 있다면 응답을 늦게 받게 된다. > 빠른 응답을 위해 애플리케이션 서버에 가깝게 서비스를 구성하는게 좋다. 복제를 ..

spring. component vs bean 차이점

들어가기전에 - Spring Application Context : Spring이 관리하는 객체(bean이라고도 함)를 들고 있는 곳 > Inversion Of Control Principle (제어의 역전) 에 의해 Spring은 bean 객체를 모아서 필요한 곳에서 bean 객체를 사용한다. > 즉, 객체의 생성과 사용자의 제어권을 스프링에게 넘기는 것 @Component @Component public class Pizza{ ........ }- Spring이 자동적으로 탐지할 수 있는 커스터마이징된 bean > Spring이 자동적으로 @Component로 되어 있는 클래스를 스캔하여 > 객체화한 다음에 특정 의존성을 주입하여 언제든지 사용하게 해준다. - @Controller, @Service,..

개발/자바 2023.07.27
반응형