4-2. Firebase - 웹의 동작 방식은? : 웹은 요청과 응답으로 굴러감. 클라이언트가 서버에게 요청, 서버가 클라이언트에게 응답. - 서버가 하는 일 : 서버가 하는 일은 엄청 많음. 데이터 관리, 분산처리, 웹 어플리케이션 돌리기 등... - 서버리스란 무엇인가? : 서버리스는 서버가 없다는 것이 아니라, 서버를 신경쓸 필요가 없다는 것을 의미. 그냥 우리에게 필요한 서버를 필요한 만큼만 빌려쓰면 됨. 이미 누군가가 구축해둔 서버의 일부분을 빌려서 사용할 수 있음. => 우리가 직접 인프라를 구축하고, 서버 스펙을 고민할 필요 없다는 얘기. - BaaS는 무엇을 빌려오는 것인가? : BaaS는 Backend as a Service의 약자. => 우리가 흔히 백엔드 하면 떠올리는 것들을 빌려오는..

4-1. Keyframes keyframes는 styled-components 안에 이미 들어있음. 웹에서 애니메이션을 구현할 때는 transition과 animation이라는 스타일 속성을 많이 사용. - transition : 1. 단순한 앨리먼트 상태변화에 쓰기 좋음. 2. 효과가 일정한 시간(duration)에 걸쳐 일어남. 3. 스스로 작동할 수 없기 때문에 onClick 함수나 hover와 함께 쓰임. - animation : 1. 다이나믹한 효과를 주는데 쓰기 좋음.(transition에 비해 훨씬 구현할 수 있는 요소가 다양함.) 2. 이벤트 없이 스스로 시작, 정지, 반복을 제어할 수 있음. 3. @keyframes로 이루어져 있음.(keyframes는 animation에서 사용하는 속성..

- Quiz_버킷리스트 상세 페이지 만들고 이동시키기 ✍버킷리스트 상세페이지를 만들고 리스트 항목을 누르면 이동시키자! 💡 버킷리스트 항목이 나오는 부분만 route로 이동시켜주세요 🙂 - 예시 답안(메인페이지 / 상세페이지) - 내가 만든 버킷리스트 퀴즈(메인페이지 / 상세페이지) bucket 리스트 항목이 나오는 부분만 라우터로 이동시키라고 했으니 내가 만들어둔 component BucketList를 Router 안으로 넣어줄 것이다. 1. 그러기 위해서 src 폴더 안에 share 폴더를 만든 후 그 안에 Router component를 만들어준다. 2. 그리고 Router component가 라우터 기능을 할 수 있도록 react-router-dom을 설치해준다. react-router-dom 설..

3-1. Event Listener - 이벤트 리스너 : 사용자가 어떤 행동(=이벤트)을 하는 지 아닌 지 지켜보다가 알려주는 것. ( 대표적 : 마우스 클릭, 터치, 마우스 오버, 키보드 누름 등 ) 이벤트 리스너는 에서처럼 엘리먼트에 직접 넣어줄 수도 있지만, 이번에는 addEventListener를 통해 추가해볼 거임. 동그라미 안에 텍스트를 한 줄 넣고 텍스트를 넣어줄 건데 동그라미에 마우스를 올렸을 때 동그라미의 색이 변하고, 텍스트에 마우스를 올렸을 때 텍스의 색이 변하도록 할 거임. - App.js import React from "react"; import styled from "styled-components"; import Text from "./Text"; const Wrap = st..

아래 기획서를 보고, 퀴즈 시작하기 화면을 만들어보세요! 아래에 라는 자식 컴포넌트를 만들어서 해봅시다! → 숙제할 때는 꼭꼭 클래스형 컴포넌트를 쓸 필요 없어요! (해설 코드는 함수형 컴포넌트로 나갑니다.)우리가 배운 내용으로 위 페이지를 만들어봅시다. 이미지도 넣어보고, 내 친구가 이름을 넣을 텍스트 입력 인풋과 시작하기 버튼을 만들어요. [나는 {} 에 대해서...]부분에 {}는 state에 넣고 prop로 넘겨서 해보세요! - 기획서(레이아웃) 보기 - 내 과제물 다 하고나서 생각해보니까 난 prop으로 넘기지 않았다 ㅋ ㅋ ㅋ ㅋ ㅋ ㅋ... App.js에서 useState를 만들어두고 prop하는게 인상적이지만 그냥 Start component에서 모든걸 해결했다...:) 근데 과제 리뷰를 보..

2-1. 라이프 사이클 공부 후 업데이트 2-2. Ref Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공함. - 주로 Ref를 사용할 때 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때. 애니메이션을 직접적으로 실행시킬 때. 서드 파티 DOM 라이브러리를 React와 같이 사용할 때. - Ref 생성하기 Ref는 React.createRef()를 통해 생성되고 ref 어트리뷰트를 통해 React 엘리먼트에 부착됨. 보통, 컴포넌트의 인스턴스가 생성될 때 Ref를 프로퍼티로서 추가하고, 그럼으로서 컴포넌트의 인스턴스의 어느 곳에서도 Ref에 접근할 수 있게 함. class MyComponent extends React.Component { cons..