본문 바로가기

내마음대로만들어보자/React58

[완성모습] 우정테스트 사이트 만들기(Feat.리액트) 정말 간단한 우정테스트 사이트를 통해서 리액트 기초를 다져보자!! 메인화면을 통해서 이름을 입력하고 시작하면은 간단한 퀴즈화면이 나온다! 간단한 몇가지 퀴즈를 통해 점수를 매긴다! 캐릭터를 움직여서 O,X 정답을 맞춰볼 수있다. 이건 만드는 기능은 간단하면서도 복잡해서 별도로 정리를 해야될것같다. 그다음 모든 퀴즈를 풀고나면은 거기에 해당하는 점수가 나온다! 점수에따라서 보여지는 문구도 세분화되어있다. 마지막으로 한마디를 적고 퀴즈에 대한 랭킹을 확인할 수 있다! 이렇게 간단한 몇가지 화면만으로도 구성해야되는 부분들이 굉장히 많은것 같다. 이부분들을 차근차근 정리해나가면서 기초를 다지고 어떻게 동작하는지 이해한다면 더 복잡한 리액트앱도 충분히 만들 수 있을거라 생각한다. 더 좋은 아이디어가 구현될 수 있.. 2021. 8. 4.
리덕스에서 FireStore 데이터 적용하기 fireStore에서 비동기통신을 할때에 필요한 미들웨어라는 친구를 설치먼저 해보자. yarn add redux-thunk 1. 미들웨어란? 리덕스에서 데이터를 수정할때 "액션이 디스패치되고 리듀서에서 처리" 를 하는데 이떄, 미들웨어는 미리 사전작업을 할 수 있도록 중간다리 역할을 해준다. "액션이 일어나고 미들웨어가 할일 하고 리듀에서 처리" 이러한 순서로 처리된다고 보면된다. redux-thunk 라는 친구는 액션생성함수는 객체를 반환하는데 이떄, 객체대신 액션생성함수를 작성할 수 있게 해준다. 리덕스는 기본적으로 액션 객체를 디스패치하는데 미들웨어를 통해 함수를 생성하게되면 특정 액션이 발생하기전 조건을 주거나 어떤 행동을 사전에 처리할 수 있다. 2. 미들웨어 redux-thunk 적용 conf.. 2021. 7. 30.
Firebase 1. Firebase 란? 흔히, BaaS 라고하며, (Backend as a Serive) 데이터베이스, 소셜 서비스 연동(로그인), 파일시스템 등을 API형태로 제공해준다. https://firebase.google.com/?hl=ko Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 항상 느끼는거지만, 공식문서는 정말 유용한 정보들이 많지만 아직은 좀 낯설은 것 같다. 이내용들을 활용할 수 있으려면 앞으로 기초적인 흐름에 대해 이해를 좀더 해야될 것 같다. 이중에서, FireStore를 사용해보자. Hosting(서버 없이 웹 서비스를 배포할 수 있도록 도와주는 서비스) 2. F.. 2021. 7. 29.
스크롤바 움직이기(scrollTo) 내가 만든 항목들이 길어지는경우 최상단으로 이동하는 버튼을 만들어보자. button onClick={() => { window.scrollTo({ top: 0, left: 0, behavior: "smooth" }); }}>위로가기 여기에서 알아두면 좋은 부분은, - top , left 로 특정위치로 움직일수도있는것처럼 좌표를 이용하거나 ref를 통해 특정 엘리먼트 위치를 받아서 이동시킬 수 도있다. - behavior : "smooth" : 이 내용을 추가함으로써, 한번에 올라가는게 아니라 한번에 올라가지않고 말그대로 자연스럽게 올라가는 효과를 만들어준다. 2021. 7. 28.

티스토리툴바