본문 바로가기

장원익 기술블로그

📺 Front End/- React, Next.js42

[Redux] 리덕스를 배우기 전에 리덕스의 필요성에 대해서 알아보자. 여기 리덕스를 왜 써야하는지 아주 유명한 그림이 있다. 리덕스는 Application의 상태를 Global하게 관리해준다는 State Management Lib이다. 나도 그렇지만 보통 사람들이 리덕스를 처음으로 마주하게될 때는 어떤 한 라이브러리나 프레임워크에서 문제점을 발견하고 그 문제를 해결하기 위한 방법을 모색하다 만나게 된다. 그 문제라고 하면 바로 Local State Local State local state는 이름에서도 알 수 있듯 Global State와 반대되는 말이다. 위의 그림에서 Without Redux에 화살표로 움직이는게 state이고, 이 state들이 앞뒤로 한 칸씩만 움직일 수 있다는 것을 알 수 있다. 이게 바로 Local State이다. 정확히는 이게 Local Sta.. 2020. 12. 1.

[React-Spring 애니메이션] 리액트 스프링으로 3D 카드 만들기 오늘 해볼 것은 위와 같이 움직이는 카드 뷰를 만들어볼 것이다. Index.js import React from 'react' import ReactDOM from 'react-dom' import { useSpring, animated } from 'react-spring' import './styles.css' const calc = (x, y) => [-(y - window.innerHeight / 2) / 20, (x - window.innerWidth / 2) / 20, 1.1] const trans = (x, y, s) => `perspective(600px) rotateX(${x}deg) rotateY(${y}deg) scale(${s})` function Card() { const [pro.. 2020. 11. 4.

[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.

[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 다음

티스토리툴바