전체 글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. 자바스크립트로 이해해보는 전략패턴 (Strategy Pattern) In 행위패턴 전략이란? -> 특정한 목표를 수행하기 위한 행동 계획 객체가 할수 있는 행위들 각각을 전략으로 만들어두고 동적으로 전략수정이 가능하도록 구현한 패턴이다. 전략패턴에 적용된 객체지향 이론 구현보다는 추상화 또는 인터페이스에 의존해서 코딩해라. 상속보다는 구성(합성 or 위임); Composition 활용해라. “A는 B이다(is-A)” 보다 “A에는 B가 있다”가 더 좋을 수 있다. 예시를 들어보자 우리는 다양한 로봇을 만든다고 가정해보자. 걷는로봇, 뛰는로봇, 날으는 로봇... 로봇들이 다양하게 존재한다. class WalkingRobot { display() { console.log("걷는 로봇"); } move() { console.log("걸어서 다녀요"); } } class RunningRobo.. 2024. 2. 17. [Android] Compose를 이용해 Swipe 기능 만들기 https://medium.com/@tellingme/android-compose%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%B4-swipe-%EA%B8%B0%EB%8A%A5-%EB%A7%8C%EB%93%A4%EA%B8%B0-cf088bb3c861 [Android] Compose를 이용해 Swipe 기능 만들기 안녕하세요. 텔링어스팀의 Frontend / Android 개발자 Siegfried(지크프리트) 줄여서 Sieg입니다. medium.com 제가 활동하고 있는 팀 블로그에 작성한 포스팅과 동일한 내용입니다. 앵커 스와이프 축을 따라 화면에 존재하는 고정된 위치를 의미합니다. 두 앵커 사이의 한 지점은 임계점(Threshold)으로 선언됩니다. 스와이프 모션이 임계점에 도달하기 전.. 2024. 2. 9. [Android][Compose] 부모요소의 높이를 최대높이로 지정하기, 동적 높이 계산하기 컴포즈의 규칙 중 하나는 하위 요소를 한번만 측정해야 한다는 것 두 번 측정하면 런타임 예외가 발생한다. 그러나 '내장기능' 을 사용하면 하위 요소가 실제로 측정되기 전에 하위 요소를 쿼리할수 있다. (min|max)IntrinsicWidth // 이 높이에서 콘텐츠를 적절하게 그릴 수 있는 최소/최대 너비 (min|max)IntrinsicHeight // 이 너비에서 콘텐츠를 적절하게 그릴 수 있는 최소/최대 높이 위의 내장 기능을 사용하면 컴포저블에게 최대/최소 width, height를 가져올 수있게 된다. 이 기능을 사용해 동적 너비/높이에 의존하는 레이아웃이 있는 경우 컨텐츠가 설정 된 후에 너비/높이의 값을 얻을 수 있게된다. 예시 #1 Column 컴포즈안에 Hello World라는 텍스트가.. 2024. 2. 9. 2023 Goodbye 작년에 내가 적은 2023 버킷리스트 1. 이직 2. 1가지 이상의 언어 습득 - List 1) Rust 2) Swift 3) Flutter 4) Kotlin 5) Python ... 3. 개발 블로그 활성화 4. 사이드 프로젝트 5. 회사 개발문화 개선 기여 이중에서 내가 한해동안 이룬것들을 정리 1. 이직 기존회사와는 계약이 종료되고 파견나와 근무하던 개발사와 계약을 했었다. 여기는 프론트엔드 개발자분들이 약20명정도 되는것 같다. 개발자들이 많다는 점이 제법 마음에 들었다. 열정적이시고 잘하시는분들도 많기때문에 한해동안 열심히 보고 듣고 배우기도 했지만 주도적으로 성장하기 위해서 노력도 했던것 같다. 2. 1가지 이상의 언어 습득 우선 2023한해에는 Nest.js를 이용해 사내에서 사이드프로젝트를.. 2024. 2. 2. 2024 새해목표 0. 꾸준한 블로그 포스팅 1. 텔링미 서비스 출시/운영개발 - Android / Kotlin 개발숙달 2. 정보처리기사 실기 취득 3. 대외활동 조인 - 웹개발 / 프론트엔드 개발자로서 역량 강화 4. 연애 2024. 2. 2. 이전 1 2 3 4 ··· 7 다음
