Front-End, CS 스터디/항해99 - React 스터디11 [리액트 React] 기초반 강의 4주차 정리 ✅ keyframes 1️⃣ keyframes 사용하기 keyframes는 styled-components 안에 이미 들어있다. 웹에서 애니메이션을 구현할 때는 transition과 animation이라는 스타일 속성을 많이 사용한다. 🔹 transition : 단순한 엘리먼트 상태변화에 쓰기 좋다. 🔹 animation : 다이나믹한 효과를 주는데 쓰기 좋다. keyframes는 animation에서 사용하는 속성 중 하나이다. 👌 네모 박스를 동그라미로 바꾸고 위 아래로 움직이는 것 만들어 보기 ▶️ 새 프로젝트에 styled-components 설치해주어야 한다. ▶️ 네모박스 만들기 import React from 'react'; import './App.css'; // styled와 keyfra.. 2022. 7. 28. [리액트 React] 기초반 강의 3주차 정리 ✅ Event Listener 1️⃣ 이벤트 리스너란? 사용자가 어떤 행동(=이벤트)을 하는 지 아닌 지 지켜보다가 알려주는 것 ex) 마우스 클릭, 터치, 마우스 오버, 키보드 누름 등 이벤트 리스터는 에서처럼 엘리먼트에 직접 넣어줄 수도 있고 addEventListener를 통해 추가해볼 수도 있다. 👌 클래스형 컴포넌트에서 event listener 구독하기 🔹 이벤트 리스너의 위치 클릭을 하건, 마우스를 올리건 DOM 요소가 있어야 이벤트가 발생하는 지 지켜볼 수 있다. 즉, componentDidMount()에 넣어주면 된다. ▶️ 어떤 행동(= 이벤트 발생) 뒤에 실행할 함수 먼저 만들기 hoverEvent = (e) => { // 콘솔로 이 이벤트가 누구에게서 일어났는 지 확인할 수 있다. .. 2022. 7. 27. [리액트 React] 3주차 입문 주차 팀 과제 정리 1️⃣ 자바스크립트에서 유사배열과 배열의 차이는 무엇일까요? 유사배열의 각 요소를 수정하고 싶다면 어떤 과정을 거쳐야할까요? 👌 유사배열 배열은 여러 개의 값을 순차적으로 나열한 순회 가능한 자료구조 유사 배열은 배열처럼 length가 있고, index로 프로퍼티 값에 접근할 수 있는 객체 (EX. NodeList) 유사 배열은 배열 메서드를 사용할 수 없다. 유사 배열을 수정하려면 Array.from 메서드를 사용해서 진짜 배열로 변경하고 배열 메서드를 사용하여 수정한다. 2️⃣ 부모 컴포넌트 A와 자식 컴포넌트 B가 있습니다. 컴포넌트 A는 state로 {name: "르탄이"}를 가지고 있고, 자식인 컴포넌트 B에게 name 값을 넘겨주었습니다. 컴포넌트 B는 받아온 name을 화면에 뿌려주고 있습니.. 2022. 7. 24. [리액트 React] 기초반 강의 2주차 정리 ✅ 라이프 사이클이란? 1️⃣ 가상돔이란? - DOM 트리 중 하나가 수정될 때마다 모든 DOM을 뒤지고 수정한 걸 찾고 싹 수정을 한다면, 필요없는 연산이 너무 많이 일어난다. 그래서 등장한 게 가상돔이다. - 가상돔은 메모리 상에서 돌아가는 가짜 DOM이다. - 가상돔의 동작 방식 : 기존 DOM과 어떤 행동 후 새로 그린 DOM(가상 돔에 올라갔다고 표현한다)을 비교해서 정말 바뀐 부분만 갈아끼워 준다. 돔 업데이트 처리가 정말 간결해진다. 2️⃣ 라이프 사이클이란? 컴포넌트의 라이트 사이클(컴포넌트의 생명주기)은 정말 중요한 개념. 👌 라이프 사이클 컴포넌트가 렌더링을 준비하는 순간부터, 페이지가 사라질 때까지 - 컴포넌트는 생성(Mount)되고 수정(업데이트)되고 사라진다(Unmount). - .. 2022. 7. 24. [리액트 React] 기초반 강의 1주차 정리 ✅ 프로트엔드 기초 지식 1️⃣ 서버와 클라이언트 복습 👌 웹의 동작 개념 - HTML을 받는 경우 우리가 보는 웹페이지는 모두 서버에서 미리 준비해두었던 것을 "받아서", "그려주는"것이다. 🔹 브라우저가 하는 일 1) 요청을 보낸다. // 어디에 요청을 보낼까 ? : 서버가 만들어 놓은 "API"라는 창구에 미리 정해진 약속대로 요청을 보내는 것. EX) https://naver.com/ → 이것은 "naver.com"이라는 이름의 서버에 있는, "/"창구에 요청을 보낸 것이다. 2) 받은 HTML 파일을 그려준다. 👌 웹의 동작 개념 - 데이터만 받는 경우 항상 위 처럼 HTML만 내려주는 것이 아닌, 데이터만 내려 줄 때가 더 많다. 사실 HTML도 줄글로 쓰면 이게 다 데이터인 것! 만약, 공연.. 2022. 7. 22. 이전 1 2 다음
