Formik? React로 웹을 만들다보면 우리는 사용자에게 다양한 인풋을 받게 된다. 이때 모든 인풋을 각각의 state로 관리하면 코드가 매우 지저분해질 수도 있다. Formik을 사용하면 이러한 form에 대한 state관리가 굉장히 편해진다! (나는 리덕스로 dynamic form을 만드려고 삽질을 했었다..) Formik은 리액트 폼의 세가지 어려운 부분을 쉽게 처리할 수 있도록 도와준다! form 상태의 안밖에서 값 가져오기 유효성 검증 및 에러 메시지 폼 제출 조작 우선, 아래 명령어를 이용하여 formik을 설치하자. // npm npm install formik --save // yarn yarn add formik https://formik.org/ Formik React hooks a..

React에서 마우스 이벤트를 사용해서 Swiper 만들기. mousedown, mousemove, mouseup 이벤트 사용! clicked란 부울 변수를 사용해서 clicked가 true일 때(드래그 중)만 mousemove 이벤트가 발생해서 swiper가 이동하게 한다! swiper의 postion을 relative로 주고 드래그로 이동한 좌표와 드래그를 시작한 좌표의 차만큼 top, left 속성을 줘서 mousemove 이벤트에서 swiper가 화면에서 움직이게 한다! 기능 좌우로 일정이상 드래그하지 않은 후 마우스를 때면 제자리로 돌아간다. 오른쪽으로 일정이상 드래그한 후 마우스를 때면 서서히 오른쪽으로 서서히 사라진다. 왼쪽으로 일정이상 드래그한 후 마우스를 때면 서서히 오른쪽으로 서서히 사..

웹의 동작방식 웹은 요청과 응답으로 굴러간다 클라이언트가 서버에 요청, 서버가 클라이언트에게 응답하면서 돌아간다! 서버가 하는일 서버가 하는 일은 우리가 알고 있듯이 데이터 관리, 분산 처리, 웹 어플리케이션 동작시키기 등 굉장히 많다. 서버가 할일이 많다는 것은 우리가 전부 관리해줘야 한다는 이야기이도 하다. 이를 해결하기 위해 서버리스의 힘을 빌린다. 서버리스란? 서버리스는 "서버가 없다"라는 의미가 아니라 "서버를 신경쓸 필요가 없다"라는 의미이다. 이미 누군가가 구축해 둔 서버의 일부분을 빌려쓸 수 있다. 우리가 인프라를 구축해서 서버스펙을 고민할 필요가 없다는 의미이다. 우리는 단지, 우리에게 필요한 서버를 필요한만큼만 빌려 쓰면 된다!

window.scrollTo() 어떤 페이지에서 위로가기 화살표를 누르면 맨 위로 이동하거나 메뉴에서 어떤 버튼을 누르면 아래로 내려가버리는 버튼을 눌러본 경험이 있을 것이다. window.scrollTo()은 스크롤을 움직여주는 window의 내장 함수이다. window.scrollTo() 사용법 아래처럼 window.scollTo()의 파라미터로 x, y의 좌표를 직접 넣을 수 있고 ... { window.scrollTo(0,0); }}>위로가기 ... 딕셔너리의 형태로 top, left의 위치를 넣어줄 수도 있다. ... { window.scrollTo({top: 0, left: 0}); }}>위로가기 ... 위와 같이 버튼에 이벤트를 달아서 버튼을 클릭했을 때 맨 위로 이동하게 만들어보자. imp..