본문 바로가기

전체 글462

리액트 기초 강의 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주정도 들었다. 짧은 시간 내에 빨리 듣고 과제를 해야했기 때문에 마음도 급하고 알고리즘만 풀다 와서 계속 앉아서 인강 들으려니까 속이 터져서 기본 2배속으로 듣고 강의를 진짜 영혼없이 보면서 코드 복붙만 하며 2주를 보낸 것 같다. 그리고 클론 코딩으로 바로 들어갔는데 머리에 남은 게 없어서 그런지 아주 죽을맛이였다. styled-component 귀에 못이 박히도록 들었는데도 클론코딩 복붙하면서 내가 쓰는게 styled-component인줄도 몰랐다..ㅎ 그리고 미니 프로젝트를 위해 어제, 오늘, 내일 기초 강의라도 다시 다 들을 계획인데 지금 기초 강의 3주차인데 왜.. 재밌지? 이제 이해도 잘 되고 몰랐던 퍼즐들이 맞춰지는 느낌이다. 좋긴 한데 내가 2주전에 들은게 .. 2021. 4. 14.
미니프로젝트 1주차/ 항해마켓 상세페이지 만드는 중 클론코딩 때 네비바랑 헤더만 5일동안 만든 게 아직까지도 충격이다. 그리고 위 화면은 어제 오늘 만든 것! 저번주에 맨 땅에 헤딩하듯 울면서 구글링하던거 생각하면 이제 몇시간 안에 큰 틀은 다 만든다. 남들과 비교하면 이제야 좀 평균정도 혹은 평균 아래 하는거겠지만 더 발전해나가면 되니까! 이번주 목표는 리덕스를 진짜 이해해서 백앤드분들과 소통하기?이다. 하다못해 같은 프론트앤드 팀원분의 수준이라도 따라잡고싶다. 암튼 오늘은 맨날 따라치면서 이해하려고 시도도 안했던 페이지 구성?에 대해 한가지는 배웠다. 저렇게 가운데 정렬을 하고 싶을 때 일단 넣고 싶은 아이템?의 width를 먼저 정해준 다음에 스타일로 왼쪽 오른쪽 margin auto를 주면 알아서 가운데 정렬이 된다. 이것도 한번 시간내서 정리하면.. 2021. 4. 13.
퀴즈 화면, 정답 화면 만들기/리액트 기초 2주차 과제 시도하려했으나 fail.. 막힌 부분들: 1. App.js에서 state 받아와서 Quiz.js에서 인덱스 뜨게 하는 것 : console.log에서 확인해보면 잘 받아와는 지는데 퀴즈 화면에 왜 띄우질 못하니.. 일단 유즈스테이트가 너무 헷갈림. 또 다시 유즈스테이트 안에 초기값 넣어주는게 헷갈림. 초기값을 임의로 넣어주지 않고 state에서 받아온 애 중 첫번째를 넣어주고 싶은건데.. 해결: 인덱스는 리스트가 아니라서 쉽게 성공?했는데 리스트가 문제임. 리스트 my_list[0].question 넣어서 해결 ㅎ 2. 뜨게 하면 map 돌려서 ++해주기 인덱스는 애초에 1로 하나만 해줘서 리스트가 아님. 근데 맵을 어떻게 돌리지...?에서 막힘 map 쉬운거말고.. state에서 받아온 리스트들을 맵을.. 2021. 4. 13.

티스토리툴바