본문 바로가기

분류 전체보기56

SolidJS 살펴보기-1 Solid란 무엇인가?JavaScript 프레임워크로서 Solid는 반응성과 세분화된 업데이트를 수용합니다.프로그래밍에서 반응성이란 애플리케이션이 데이터의 변경이나 사용자 상호작용에 대응하는 능력을 말합니다. 일반적으로 변경 사항이 발생하면 업데이트된 정보를 표시하려면 전체 웹 페이지를 다시 로드해야 합니다. 반면, 세분화된 반응형 시스템을 사용하는 경우 페이지에서 업데이트가 필요한 부분에만 업데이트가 적용됩니다. Solid는 세분화된 반응성이라는 개념을 채택하여 애플리케이션이 의존하는 데이터가 변경될 때만 업데이트합니다. 이를 통해 작업이 줄어 들고 로드 시간이 빨라지고 전반적으로 사용자 경험이 더 원활해질 수 있습니다.Solid를 사용하는 장점성능(Performant) : 세분화된 반응성을 통해 So.. 2024. 7. 4.
[리액트] 모듈상태 / 구독패턴을 활용한 상태관리 모듈상태란? 모듈 상태의 엄격한 정의는 ES 모듈 스코프에 정의된 상수 또는 변수다. 여기서는 단순하게 모듈 상태는 전역적 이거나 파일의 스코프 내에서 정의된 변수라고 가정한다. 모듈상태의 예시코드이다. 리액트와는 관련이 없는 코드이다. export const createStore = (initialState) => { let state = initialState; const getState = () => state; const setState = (nextState) => { state = typeof === 'function' ? nextState(state) : nextState; } return { getState, setState }; }; const { getState, setState } =.. 2024. 4. 19.
ContextAPI 사용자 정의 훅이 있는 팩토리패턴 createStateContext를 구현 초기값을 받아 상태를 반환하는 useValue 사용자 정의 훅 사용 useState를 사용하여 state와 setState함수 튜플을 할당 Provider, 사용자 정의 훅을 튜플로 반환 반복적인 코드를 줄이면서 위의 방법과 동일한 기능을 제공 // createStateContext const createStateContext = (useValue: (init? : Value) => State) => { const StateContext = createContext(null); // 공급자 const StateProvider = ({ initialValue, children } : { initialValue?: Value; children?: ReactNode; .. 2024. 4. 10.
창, 탭, 프레임, iframe 간의 통신 / Broadcast Channel API window.opener를 이용하여 자신을 호출했던 창(부모창)을 조작할수 있다. 그러나 간혹 사용성에 제한적인 경우가 있다. React에서 사용할때는 자식창에서 부모창의 페이지이동 용도로 많이 사용했었다. 자식창에서 부모창으로 데이터를 전송할 경우 사용하기에는 적절하지 못했다. https://developer.mozilla.org/ko/docs/Web/API/Window/opener Window.opener - Web API | MDN Window 인터페이스의 opener 속성은 open() (en-US)을 사용해 현재 창을 열었던 창의 참조를 반환합니다. developer.mozilla.org Broadcast Channel API를 사용하면 부모와 자식간의 통신을 효율적으로 사용할수 있다. 창, 탭.. 2024. 3. 16.

티스토리툴바