개발 66

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 = () => { ..

개발/react 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, ....

개발/react 2023.08.15

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 ..

개발/react 2023.08.10

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..

개발/react 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..

개발/react 2023.08.03

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,..

개발/java 2023.07.27

strong consistency vs eventual consistency

https://www.acodersjourney.com/eventual-consistency/ System Design Interview Concepts – Eventual Consistency Everything you need to know about Eventual Consistency for your next system design interview.Includes examples of systems implementing eventual consistency. www.acodersjourney.com strong consistency (=immediate consistency, strict consistency) - 클라이언트가 write 작업이 일어나면, 모든 replica 서버에 업데이트 ..

개발 2023.06.18

bootstrap. modal 부모창 -> 모달 데이터 전달 필요시

자바스크립트 · 부트스트랩 Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater bootstrapk.com 부모창 -> 모달 데이터 전달 필요시 $('#exampleModal').on('show.bs.modal', function (event) { var button = $(event.relatedTarg..

[번역] 엔터프라이즈 어플리케이션에서 파사드 디자인 패턴의 3가지 유스케이스

원문 링크 : 3 Main Use Cases of the Facade Design Pattern in Enterprise Applications Tackling the code complexity elegantly levelup.gitconnected.com 파사드 디자인 패턴은 하나 이상의 컴포넌트(클래스, 모듈, 서비스)등을 하나의 인터페이스를 통해 노출시키는 것이다. 파사드 디자인 패턴은 엔터프라이즈 어플리케이션에서 많이 사용되는데 복잡한 것을 처리하기 쉽고 도입하기 쉽기 때문이다. 나는 엔터프라이즈 어플리케이션에서 파사트 패턴을 사용하는 것을 많이 받고 3가지 예시로 설명할 수 있다. 1. 라이브러리로부터 어플리케이션 디커플링하기 써드파티 라이브러리는 재사용가능한 기능을 제공하는 클래스들의 모음이..

개발 2023.06.04
반응형