본문 바로가기
반응형

전체 글 목록571

[Flutter] bloc을 이용한 상태 관리 1. Bloc이란?*bloc : Business Logic Componentbloc은 비즈니스 로직과 프레젠테이션 영역을 분리하기 위해 도입된 패턴이다. 계층을 분리함으로써 코드의 재사용성을 높이고, 테스트를 더 쉽게 진행할 수 있게 한다.bloc은 UI 이벤트를 받아 State를 변경한다.2. Bloc 패턴 작성과 사용a. bloc 생성이벤트와 bloc을 작성abstract class CounterEvent {}// eventclass CounterIncrementPressed extends CounterEvent {}// blocclass CounterBloc extends Bloc { CounterBloc() : super(0);} 처리하고자 하는 이벤트에 대한 이벤트 핸들러를 등록emit() :.. 2024. 7. 20.
MUI 까다로운 커스텀 모음 tooltipconst StyledTooltip = styled(({ className, ...props }) => )( ({ theme }) => ({ [`& .MuiTooltip-tooltip`]: { backgroundColor: theme.palette.primary.dark, color: theme.palette.text.primary, fontSize: '13px', boxShadow: theme.shadows[4], padding: theme.spacing(2), }, [`& .MuiTooltip-arrow`]: { color: theme.palette.primary.dark, }, }),)scrollconst S.. 2024. 7. 20.
디자인, 이것만 알면 쉬워져요 디자인, 이것만 알면 쉬워져요요네쿠라 아키오, 이쿠타 신이치, 아오야나기 치사토 지음책만, 2024.04~06 크게 세 파트 정도로 주요 내용이 나뉜다.1. 디자인 기본 원칙2. 전문가의 다양한 사례 보기3. 실제 디자인 실습 과정 기본 원칙은 그냥 이런 원칙들이 있구나 정도의 느낌이었다. 그 동안 ui, ux 공부를 하면서 배웠던 원칙들도 많이 겹쳤고 또 새롭게 배우게 된 원칙들도 많이 있었다. 원칙들이 너무 많았지만 그만큼 예시 그림, 포스터도 많아서 보는 맛이 있었다.전문가의 다양한 사례는 실제 사례들을 차례대로 살펴보며 이런 방식도 있구나, 이런 원칙을 지켰구나, 이런 변주를 주는구나하는 느낌들을 얻었다. 근데 딱히 별 생각없이 봤던 파트였던 것 같다.실제 디자인 실습 과정을 들여다보는 것은 예상.. 2024. 6. 23.
[Javacript] 동기와 비동기, 이벤트 루프와 태스크 큐 동기와 비동기동기(Synchronous)작업이 순차적으로 실행이전 작업이 완료되기 전까지는 다음 작업을 시작하지 않음코드의 실행 흐름과 결과가 예측 가능단점: 하나의 작업이 오래 걸리면 전체 프로그램이 멈춤 동기 코드 예시 - 3초 딜레이 주기console.log("Start");function delay() { const start = Date.now(); while (Date.now() - start 출력StartDelay doneEnd 비동기(Asynchronous)작업이 즉시 실행되지 않고, 백그라운드에서 처리됩니다.다른 작업과 동시에 진행될 수 있으며, 작업이 완료되면 콜백 함수가 실행됩니다.이벤트 루프를 통해 처리됩니다. 비동기 코드 예시 - setTimeout 함수console.log(".. 2024. 6. 15.
[Javascript] 클로저 * 클로저 이해를 위해선 '렉시컬 스코프'에 대한 이해가 선행되어야 한다.  클로저와 렉시컬 환경const x = 1;function outer() { const x = 10; const inner = function() { console.log(x) } return inner;}const innerFunc = outer();innerFunc(); outer() 함수를 호출하면 inner를 반환하고 생명주기를 마감, 즉 실행 컨텍스트가 실행 컨텍스트 스택에서 제거된다. 이에 따라 이 outer 함수 내의 지역변수 x도 생명주기가 마감된다. 그런데 innerFunc()를 실행하면 결과로 10이 나온다.이렇게 외부함수보다 중첩 함수가 더 오래 유지되는 경우 중첩함수는 이미 생명주기가 종료된 외부.. 2024. 6. 14.
[Javascript] 실행 컨텍스트와 렉시컬 환경 소스코드의 평가 및 실행모든 소스코드는 실행에 앞서 평가 과정을 거친다. 평가 과정에서는 실행 컨텍스트라는 것을 생성하고 변수, 함수의 선언문만 먼저 실행하여 생성된 변수나 함수 식별자를 실행 컨텍스트에 키로 등록한다. 값은 아직 정해지지 않아 undefined상태이다.이런 평가 과정이 끝나면 실행 단계가 시작된다. 즉 런타임 과정에서 변수나 함수의 값을 채워 넣는다. 이때 실행 컨텍스트에 존재하는 스코프를 참조하여 값을 정하게 된다. var x;x = 1위의 코드에서 평가 과정을 통해 1번 명령줄을 보고 x에 대한 키를 생성하고 실행과정에서 2번 명령줄을 보고 x에 값을 할당한다 실행 컨텍스트의 스택전체 소스코드의 실행은 다음 순서를 가지게 된다1. 전역 소스의 평가2. 전역 소스의 실행3. 전역 소스.. 2024. 6. 13.
반응형

티스토리툴바