본문 바로가기

React24

리액트 기초 강의 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.
리액트 기초 3강 정리 라우팅이란 -SPA? Single Page Application! 말 그대로 서버에서 주는 html이 1개 뿐인 어플리케이션이에요. 전통적인 웹사이트는 페이지를 이동할 때마다 서버에서 html, css, js(=정적자원들)을 내려준다면, SPA는 딱 한번만 정적자원을 받아옵니다. SPA는 주소를 어떻게 옮길 수 있을까? html은 딱 하나를 가지고 있지만, SPA도 브라우저 주소창대로 다른 페이지를 보여줄 수 있어요. 이렇게 브라우저 주소에 따라 다른 페이지를 보여주는 걸 라우팅이라고 부릅니다. 어떻게 구현? 라우팅 라이브러리를 쓰자! 라우팅 처리하기 -react-route-dom 패키지 설치하기 yarn add react-router-dom React Router: Declarative Routing .. 2021. 4. 16.
퀴즈 화면, 정답 화면 만들기/리액트 기초 2주차 과제 시도하려했으나 fail.. 막힌 부분들: 1. App.js에서 state 받아와서 Quiz.js에서 인덱스 뜨게 하는 것 : console.log에서 확인해보면 잘 받아와는 지는데 퀴즈 화면에 왜 띄우질 못하니.. 일단 유즈스테이트가 너무 헷갈림. 또 다시 유즈스테이트 안에 초기값 넣어주는게 헷갈림. 초기값을 임의로 넣어주지 않고 state에서 받아온 애 중 첫번째를 넣어주고 싶은건데.. 해결: 인덱스는 리스트가 아니라서 쉽게 성공?했는데 리스트가 문제임. 리스트 my_list[0].question 넣어서 해결 ㅎ 2. 뜨게 하면 map 돌려서 ++해주기 인덱스는 애초에 1로 하나만 해줘서 리스트가 아님. 근데 맵을 어떻게 돌리지...?에서 막힘 map 쉬운거말고.. state에서 받아온 리스트들을 맵을.. 2021. 4. 13.
리액트 기초 2강 정리 화면을 예쁘게! - SCSS 패키지 설치 해야함 yarn add node-sass@4.14.1 open-color sass-loader classnames 화면을 예쁘게! - styled-components 패키지 설치 yarn add styled-components import React from 'react'; // 패키지에서 styled를 불러올게요! import styled from 'styled-components'; function App() { return ( {/* props로 bgColor를 줘볼까요! */} hello React! ); } // scss처럼 자기 자신을 지칭할 때 &를 쓸 수 있습니다! // props 주는 방법! 이제 알고 있죠? const MyStyled = styl.. 2021. 4. 10.
리액트 기초 1강 정리 기초체력 1 : 서버와 클라이언트, 서버리스, DOM 웹의 동작 방식: 서버와 클라이언트 웹이 어떻게 우리한테 보이게 될까? 웹은 두가지로 이루어짐. 요청과 응답! 요청은 우리가 웹사이트를 볼 수 있게 해주는 클라이언트. 클라이언트는 노트북, 핸드폰, PC가 될 수 있음. 클라이언트가 서버에게 요청을 보냄. 이 때 서버는 html, JS, CSS같은 정적 자원들 혹은 데이터라고 부르는 친구들을 전달해줌. 이걸 응답한다고 얘기함. 그럼 웹의 동작 방식은? 1. 클라이언트가 서버에게 요청을 보낸다. 2. 서버는 응답을 해준다. 서버리스: 서버가 없다는게 아니라 서버를 내가 만들 필요가 없다는 뜻! DOM: DOM은 트리구조다. 기초체력 2: ES6 - 클래스, let, const, SCope, == ===,.. 2021. 4. 9.

티스토리툴바