NOW OR NEVER

View Containers scrollView 상하 혹은 좌우로 스크롤 할 수 있게 해준다. 화면을 구성하는 요소가 화면을 벗어나야 한다. 상하좌우 하는 법 : ScrollView 구성 후 그 안에 HorizontalScrollView 구성(혹은 그 반대도 가능) 후 linear layout vertical 안에 horizontal 구성(혹은 그 반대) scroll View는 상하(y)로만 움직일 수 있고 horizontal은 좌우(x)로만 움직일 수 있다. 함수 scrollX : scroll view의 X좌표를 가져온다 scrollY : scroll view의 y좌표를 가져온다 scrollTo(x좌표, y좌표) : 해당 좌표로 이동 smoothScrollTo(x좌표, y좌표) : 코드를 통해서 어딘가..

CSS CSS 꽃 : Flex box 참고 사이트 : https://css-tricks.com/snippets/css/a-guide-to-flexbox/ box와 item들을 행 또는 열로 자유자재로 배치시켜줄 수 있는 유연한 것이다. 박스가 커졌을 때 각각의 item들이 어떤식으로 커지면서 박스의 공간을 메꾸어야 할지, 박스가 작아졌을 때 item들이 어떻게 작아져서 유연하게 박스 안에서 배치되어야 되는지를 자유롭게 정의할 수 있고 쉽게 가능하게 해준다. 웹사이트 레이아웃을 쉽게 제어할 수 있게 된다. container level : 박스에 적용되는 속성들, container를 꾸며주는 속성들 display flex flex-direction flex-wrap flex-flow : flex-direct..

리액트 Redux 상태 조회 hook: useSelector const { number, diff } =useSelector(state => ({})) 여기서 state는 store.getState()로 조회한 값으로 리덕스의 현재 상태이다. 액션 디스패치 할 경우 useDispatch Hook 사용 디스배치 함수 사용 가능 프리젠테이셔널 컴포넌트와 컨네이너 컴포넌트 컨테이너와 프레젠테이셔널 컴포넌트를 따로 분리해서 작성하게 되면 프리젠테이셔널 컴포넌트의 재사용율도 높여줄 수 있고 관심사를 분리할 수 있어서 굉장히 유용한 패턴이다. 리덕스 사용시 이런 형태로 개발하는 것 정석이긴 하지만 무조건 답은 아니다 복잡한 상태 로직을 분리시키기 위함이지만 꼭 이렇게 분리해서 작업하지 않아도 된다. 디렉토리 상에서..

Grid 2차원(행이라는 차원과 열이라는 차원 제공)의 레이아웃 시스템 제공 flexible box: 1차원의 레이아웃을 위하며 grid보다 쉽고 빠르게 제공 가능하지만 다차원의 레이아웃 잡는데는 무리가 있다. 그래서 복잡한 레이아웃을 위해 grid 사용 예전부터 핵(hack)이라고 불리는 다양한 레이아웃 대체 방식 해결 위해 만들어진 특별한 css 모듈(예전에 레이아웃을 잡기 위해서는 table 코딩, float 이용한 정렬방식, position 방식, flexible box를 많이 사용했었는데 그것들을 다 대체할 수 있게 완벽히 해결할 수 있는 레이아웃 잡는방식이 grid이다.) grid를 통해 고차원적으로 레이아웃 완성 가능 대치의 개념과 정렬의 개념을 동시에 가지고 있다. 파이어 폭스 브라우저 사..

애니메이션 animation 요소에 애니메이션을 설정/제어 애니메이션은 기본적으로 프레임으로 이루어져 있다. 이 속성을 통해 실질적인 애니메이션 프레임을 만들어내는 것이 아니라 만들어낸 프레임을 제어하는 데 사용 애니메이션을 직접적으로 만들어주는 것이 아니라 keyframes규칙에 설정된 애니메이션의 정의를 설정하고 개별 속성들을 통해 제어하는 개념 실질적으로 애니메이션을 선언하는 것은 keyframes 규칙이다. 다양하고 풍부한 내용들을 움직이게 만들 수 있다. See the Pen Animation by ssoyuni (@sssoyuni) on CodePen. 1. 단축 속성 animation : 애니메이션이름(keyframes 규칙으로 만들어져 있는 이름) 지속시간 [타이밍함수 대기시간 반복횟수 반..