react57 [리액트 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] 기초반 강의 1주차 정리 ✅ 프로트엔드 기초 지식 1️⃣ 서버와 클라이언트 복습 👌 웹의 동작 개념 - HTML을 받는 경우 우리가 보는 웹페이지는 모두 서버에서 미리 준비해두었던 것을 "받아서", "그려주는"것이다. 🔹 브라우저가 하는 일 1) 요청을 보낸다. // 어디에 요청을 보낼까 ? : 서버가 만들어 놓은 "API"라는 창구에 미리 정해진 약속대로 요청을 보내는 것. EX) https://naver.com/ → 이것은 "naver.com"이라는 이름의 서버에 있는, "/"창구에 요청을 보낸 것이다. 2) 받은 HTML 파일을 그려준다. 👌 웹의 동작 개념 - 데이터만 받는 경우 항상 위 처럼 HTML만 내려주는 것이 아닌, 데이터만 내려 줄 때가 더 많다. 사실 HTML도 줄글로 쓰면 이게 다 데이터인 것! 만약, 공연.. 2022. 7. 22. [자바스크립트 javascript] 실행 컨텍스트와 콜 스택 ✅ 실행 컨텍스트와 콜 스택 1️⃣ 실행 컨텍스트(Execution context) 자바스크립트 코드가 실행되는 환경을 의미한다. 자바스크립트에는 대표적으로 두 가지 타입의 실행 컨텍스트(Execution context)가 있다. 실행할 코드에 제공할 환경 정보들을 모아놓은 객체들로 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념이다. 👌 Global Execution context 자바스크립트 엔진이 처음 코드를 실행할 때 Global Execution Context가 생성된다. 생성 과정에서 전역 객체인 Window Object(Node는 Global)를 생성하고 this가 Window 객체를 가리키도록 한다. 👌 Function Execution context 자바스크립트 엔진은.. 2022. 7. 20. [자바스크립트 javascript] 불변 객체를 만드는 방법 ✅ 불변 객체를 만드는 방법 불변이란? 변하지 않는 것 불변 객체란? 변하지 않는 객체, 즉 이미 할당된 객체가 변하지 않는다는 뜻 자바스크립트에서 불변 객체를 만드는 방법 : const, Object.freeze() 1️⃣ const ES6 문법부터 let과 const 를 지원한다. 변수를 상수로 선언할 수 있다. 일반적으로 상수로 선언된 변수는 값을 바꾸지 못하는 것으로 알려져 있다. ES6에서의 const는 할당된 값이 상수가 되는 것이 아닌, 바인딩 된 값이 상수가 되는, 즉, test변수가 상수가 되기 때문에 const 키워드로 선언된 test 변수에는 객체 재할당은 불가능하지만 객체의 속성은 변경 가능하다. const test = {}; test.name = "mingyo"; console.l.. 2022. 7. 19. 이전 1 ··· 6 7 8 9 10 다음
