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

엘리먼트에 직접 이벤트를 넣을 때 주의사항! 만약 이벤트가 발생했을 때 실행되는 함수에 ()를 붙이면 무한루프에 빠진다. ()는 함수를 호출하기 때문에 ()를 붙이면 요소가 렌더링됨과 동시에 함수 호출이 일어나서 무한으로 렌더링이 일어난다. onClick={add_count()} 아래처럼 ()를 떼어서 함수를 참조하거나 onClick={add_count} 단순히 이벤트가 발생했을 때 실행되는 함수를 선언해서 해결할 수 있다. onClick={()=>{add_count()}}

React & Firebase 연동 데이터를 추가, 삭제하기 전에 아래를 참고해서 Firebase와 Firestore를 연동하자. https://duckgugong.tistory.com/206 Firebase/Firestore 설정하기 Firebase? Firebase는 서버리스 서비스 중에 하나이다. Baas 중에 하나라고 표현할 수 있다. Baas는 는 Backend as a Service의 약자이다. → 우리가 흔히 백엔드 하면 떠올리는 것들을 빌려오는 것이다. Firebase duckgugong.tistory.com Firestore 데이터 수정하기 (set/add/update/delete) 여기를 클릭해서 공식문서를 확인해보자! 아래처럼 데이터를 넣어놨다고 가정하자. 문서 추가하기 (set) s..

Firebase / Firestore 설정 https://duckgugong.tistory.com/206 Firebase/Firestore 설정하기 Firebase? Firebase는 서버리스 서비스 중에 하나이다. Baas 중에 하나라고 표현할 수 있다. Baas는 는 Backend as a Service의 약자이다. → 우리가 흔히 백엔드 하면 떠올리는 것들을 빌려오는 것이다. Firebase duckgugong.tistory.com 위 링크에 들어가서 Firebase / Firestore를 설정한 후에 Firestore에 원하는 데이터를 추가하자. 나는 Firebase 프로젝트의 이름을 duckgugong-react, collection의 이름을 bucket, document의 이름을 bucket_..

Firebase? Firebase는 서버리스 서비스 중에 하나이다. Baas 중에 하나라고 표현할 수 있다. Baas는 는 Backend as a Service의 약자이다. → 우리가 흔히 백엔드 하면 떠올리는 것들을 빌려오는 것이다. Firebase는 realtime-database인 firestore와 Hosting(서버 없이 웹 서비스를 배포할 수 있도록 도와주는 서비스)을 제공하는데 이 둘을 사용해보자. 또한, 데이터 베이스, 소셜 서비스 연동(소셜 로그인 등), 파일 시스템 등을 API 형태로 제공해준다! 여기를 클릭해서 Firebase 사이트를 구경해보자! Firebase 설정하기 여기를 클릭해서 firebase 홈페이지에 접속 후 시작하기 버튼을 클릭한다. 프로젝트 만들기 클릭. 프로젝트의 ..

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