본문 바로가기

장원익 기술블로그

📺 Front End71

[React-Spring 공식 문서로 배우기] useSpring 현재 React-Spring에는 5가지 Hook이 있다. useSpring : Data를 a 에서 b로 이동시키는 단일 Spring이다. useSprings : 다중 Spring으로 List와 같이 각각의 Spring이 움직이는 데이터를 다룰 때 사용된다. useTrail : 하나의 데이터셋으로 다중 Springs을 구동시키며, Spring은 그를 따르거나 다른 것들을 이끈다. useTransition : mount/unmount를 다룬다. useChain : 다량의 애니메이션을 함께 동반할 때 사용된다. useSpring 가장 쉬운 것은 useSpring이다. 하지만 다른 것들도 이 useSpring에 기반한 동작을 수행하기 때문에 중요하다. import {useSpring, animated} from.. 2020. 11. 4.

[React-Spring 공식 문서로 배우기] React-Spring 소개 React-Spring은 스프링의 물리에 기반한 애니메이션 라이브러리이다. 대부분의 UI animation에 사용될 수 있고, React-Spring은 당신의 아이디어를 움직이는 인터페이스로 만들 수 있는 충분히 유연한 Tools를 제공한다. 이 라이브러리는 현대의 애니메이션에 접근하는 대표적인 라이브러리아다. 이것은 Christopher Chedau의 animated와 Cheng Lou의 react-motion에 매우 영감을 받았다. 그리고 애니메이션의 강력한 성능과 React-motion의 사용 편의성을 계승한다. 그러나 애니메이션은 대부분 필수적이며 반응 동작은 대부분 선언적이고 반응 스프링 브리지 둘 다 필수적이다. 당신은 당신의 견해를 형성하는 방법에 반드시 영향을 미치지 않는 작고 명시적인 효.. 2020. 11. 4.

[리액트 Hook] useState 로 사용자 입력 값을 이용하여 배열 렌더링 하기. 지난 시간 우리는 useState를 이용하여 함수형 컴포넌트에 상태를 부여하기에 대해서 알아보았다. 하지만 지난 시간 useState에 대해서 맛만 봤기 때문에 아직 실전에서 useState를 사용하기에는 턱없이 부족할 것 같다는 느낌을 받았다. 오늘은 useState에 대해서 확실히 이해해보고 어떻게 사용할 수 있을지 알아보는 시간을 가져보자. 최종 결과물 우리가 이번 시간 최종적으로 만들 것은 사용자 입력에 따라서 배열을 만들고 이를 출력하는 화면을 구성해 볼 것이다. 결과물은 아마 이렇게 나올것이다. 순서 입력(input form) 폼 생성 input 폼의 onChange 메서드 구현 useState를 이용하여 state를 변경 사용자 추가 버튼의 onClick 메서드 구현 배열 렌더링 입력 폼 생.. 2020. 10. 16.

[CSS] 어떤 요소가 앞으로 나올지 z-index 로 수직 위치를 정해보자. 지난 시간 우리는 CSS의 position속성으로 요소를 우리가 원하는 곳에 배치하는 방법에 대해서 배웠다. 그래서 우리는 fixed, absolute, relative, sticky등등을 알아보았고, 그 결과 우리가 원하는대로 HTML Elements를 배치할 수 있게 되었다. 오늘은 지난 시간 배웠던 Position을 토대로 배치를 마쳤을 때 z-index로 어떤 요소가 앞으로 올지를 정해보는 시간을 갖겠다. z-index mdn에서는 z-index를 위와 같이 이야기 한다. z축의 순서를 지정한다. 이 말이 무슨 말일까? 우리는 일반적인 HTML 문서를 눈으로 볼 때는 2D로 보기 때문에 X축과 Y축만 인식할 수 있다. 하지만 이 z-index 를 설정하면 조금 더 입체적으로 배치할 수 있게되고 그.. 2020. 10. 16.

[CSS] 요소를 원하는 곳에 배치하기 position 속성 :: static, relative, absolute, fixed, sticky CSS에서 HTML Elements를 내가 원하는 곳에 배치하는 방법에는 여러가지 방법들이 존재한다. display 속성으로 영역을 나눠서 배치를 할 수도 있고, box-sizing과 같은 방법으로 배치를 할 수도 있다. 하지만 이러한 방법들에는 많은 제약사항들이 존재하며, 우리가 원하는 대로 동작시키기 위해서는 Css의 부모, 자식간의 관계를 파악해줘야 한다. 하지만 position속성을 이용한다면 조금 더 아름답고 간단하게 요소를 우리가 원하는 곳에 배치할 수 있다. 사전 준비 본격적인 이야기에 앞서 우리는 이번 시간에 스크롤이 있는 영역이 필요하므로 다음과 같은 화면을 먼저 구성해 놓고 실습을 진행할 것이다. index.html index.css body { background: #cfd8dc; d.. 2020. 10. 15.

[React axios] React의 axios 기본 :: axios로 GET, POST, PUT, DELETE 요청 보내기 지난 시간에는 왜 우리가 axios를 알아야 할까?에 대해서 알아보았다. [React axios] 리액트 axios란? :: HTTP-API 연동을 위한 모듈 (axios vs Fetch API) 우리가 일반적인 자바스크립트에서 API를 연동하기 위해서는 보통 fetch-Api를 사용하곤 했다. 리액트 또한 자바스크립트 built-in 라이브러리중 하나인 fetch-api또한 훌륭한 api 연동 모듈이다. 하지만 wonit.tistory.com 이번 시간에는 실제로 axios를 사용하기 전에 axios의 기본에 대해서 알아보려 한다. REST API REST API는 우리가 하고싶은 작업에 따라 다른 메서드로 요청할 수 있는 것은 다들 알고 있을 것이다. REST API에는 대표적으로 다음과 같은 HTT.. 2020. 10. 8.

이전 1 2 3 4 5 6 7 8 ··· 12 다음

티스토리툴바