React22 FlexBox 이해하기 css-tricks.com/snippets/css/a-guide-to-flexbox/ A Complete Guide to Flexbox | CSS-Tricks Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes hi css-tricks.com flexbox? flexbox가 나타나기 전에는 position, .. 2021. 5. 8. 리액트 5주차 과제 (완성본 s3 버킷에 올리고 도메인 공유) 1. 프로젝트에 리덕스청크랑 파이어베이스 깔기 yarn add redux-thunk yarn add firebase 2. src 밑에 firebase.js 만들어주고 키 추가(리덕스 4주차 정리-2) import firebase from "firebase/app"; import "firebase/firestore"; const firebaseConfig = { apiKey: "AIzaSyBDtHaPvSQex04mX9CduMBuoAHxZ_g-WKc", authDomain: "friend-test2.firebaseapp.com", projectId: "friend-test2", storageBucket: "friend-test2.appspot.com", messagingSenderId: "2598364742.. 2021. 4. 27. 리액트 기초 5주차 강의 정리 리덕스에서 FireStore 데이터 가지고 놀기 1) firestore 데이터를 리덕스 스토어에 넣으려면? (미들웨어 설치!) 우리가 firestore에서 데이터를 가져올 때 비동기 통신을 한다고 했죠! 비동기 통신이 뭐라고? 보통 코드를 읽어올 때는 위에서부터 하나 하나 처리하면서 읽어오는데(동기 통신), 비동기 통신이란걸 하면 1번 작업을 하다가 이게 조금 오래걸릴 것 같으면 얘를 빼놓고서 2, 3, 4번 하다가 1번이 끝나면 1번의 후속 작업을 하고 이런식으로 바꿔줄 수 있음. 조금 더 효율적으로 얘가 끝날 때까지(1번이 다 끝날때까지 2번이 대기할 필요가 없음) 효율적으로 처리할 수 있는데 리덕스에서 비동기 통신을 할 때 필요한 미들웨어라는 친구를 사용함. yarn add redux-thunk 미.. 2021. 4. 27. 리액트 기초 강의 4주차 정리 -2 서버와 서버리스 -웹의 동작 방식 -서버가 하는 일 서버가 하는 일은 엄청 많아요. 우리가 알고 있는 것처럼 데이터도 관리하고, 분산처리도 하고, 웹 어플리케이션도 돌려야 하고... 서버가 할 일이 많다는 건, 서버가 하는 일을 우리가 전부 관리해줘야한다는 이야기이기도 해요. 😢 -서버리스가 뭔데? 서버리스는 서버가 없다가 아니라, 서버를 신경쓸 필요 없다입니다. 이미 누군가가 구축해둔 서버의 일부분을 빌려서 쓸 수 있어요. 우리가 인프라를 구축하고, 서버 스펙을 고민할 필요 없다는 소리죠! 우린 그냥, 우리한테 필요한 서버를 필요한만큼만 빌려 쓰면 되니까요. Firebase란? -BaaS BaaS는 Backend as a Service의 약자입니다. → 우리가 흔히 백엔드 하면 떠올리는 것들을 빌려오는.. 2021. 4. 25. 리액트 기초 강의 4주차 정리 -1 keyframes -keyframes는 styled-components안에 이미 들어있음 -웹에서 애니메이션을 구현할때는 transition과 animation이라는 스타일 속성을 많이 사용한다. -transition은 단순한 엘리먼트 상태변화에 쓰기 좋고, animation은 다이나믹한 효과를 주는데 쓰기 좋음! Keyframes은 animation에서 사용하는 속성 중 하나! * keyframes 써보기 * 1. 새 프로젝트에 styled-components 설치 2. 코드 import React from 'react'; import styled, { keyframes } from "styled-components"; const Animation =(props)=>{ return ( ); } cons.. 2021. 4. 24. 점수 화면, 랭킹 화면을 그리고 링크 연결하기(리액트 기초 3주차 숙제) 1. Message, Ranking 페이지 만들기 2. 각 화면 라우팅, 데이터는 리덕스에 넣기 -라우팅 만들어주기 -리덕스 모듈, 스토어 만들어주기 3. 스토어 연결해주기 -index.js 가서 Provider사용 -App.js 가서 커넥트해주기 ->리덕스 연결 끝! 4. 스토어에 있는 '값'을 각각 가지고 오게 연결해주기 -start.js부터 메꿔보기 1)리덕스에서 빈칸 name 받아오기 2) Dispatch 써서 input칸에 이름 적고 리덕스에 넣어보기! 5. Start 페이지에서 이름 입력하면 리덕스에 저장하기 + 다른것들 채워주고..(3주차 강의자료 마지막에 정답 코드 복붙) +마지막에 한마디하고 랭킹보러가기 버튼 누르면 '한마디 하기'텍스트랑, 이름, score 세개를 합쳐서 쏴주기. 2. .. 2021. 4. 17. 이전 1 2 3 4 다음
