본문 바로가기

전체 글475

리액트 기초 강의 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.
리액트 기초 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.

티스토리툴바