keyframes? 웹에서 애니메이션을 구현할 때 trasition과 animation이라는 스타일 속성을 많이 사용한다. transition은 단순한 엘리먼트의 상태변화에 사용하기 좋고, animation은 다이나믹한 효과를 주는데 쓰기 좋다. Keyframes는 animation에서 사용하는 속성 중 하나이다! animation 속성 animation은 8가지 속성을가지고 있다. css에서 animation의 예시는 아래와 같다. div { animation-name: example; animation-duration: 2s; animation-delay: 1s; animation-iteration-count: infinite; animation-timing-function: ease-out; ani..

map 리액트에서 동적인 배열을 렌더링 할 때는 내장함수 map()을 사용한다. 배열이 고정적이지 않고 배열의 인덱스를 하나씩 조회하면서 렌더링하는 동적인 방법에 map()을 사용한다는 의미이다. 리액트에서 동적인 배열을 렌더링해야 할 때는 map을 사용하여 일반 데이터 배열을 리액트 엘리먼트 요소로로 이루어진 배열로 변환해서 리턴해주면 된다. import logo from './logo.svg'; import './App.css'; function App() { const list = [1, 2, 3, 4, 5]; return ( {list.map((item) => { return( div 태그 ); })} ); } export default App; 하지만 콘솔에 아래처럼 key라는 props가 없다..

DOM? 문서 객체 모델(The Document Object Model, DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. 마크업 형태의 HTML 문서를 오브젝트 모델의 형태로 바꿔놓은 것 DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다. HTML태그를 JS에서 이용할수 있는 객체로 만드는 것이다. 즉 HTML문서의 객체 기반 표현 방식이다. DOM은 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하..

HTTP (Hypertext Transfer Protocol) HTTP는 서버와 클라이언트가 인터넷상에서 데이터를 주고받기 위한 프로토콜(Protocol)이다 HTTP는 HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜이다. 프로토콜은 컴퓨터 내부에서, 또는 컴퓨터 사이에서 데이터의 교환 방식을 정의하는 규칙 체계이다. HTTP는 웹에서 이루어지는 모든 데이터 교환의 기초이며, 서버-클라이언트 프로토콜이기도 하다. 서버-클라이언트 프로토콜이란 (보통 웹브라우저인) 수신자 측에 의해 요청이 초기화되는 프로토콜을 의미한다. HTTP 특징 1. 클라이언트-서버 구조 클라이언트가 서버에 요청을 보내면 서버는 그에 대한 응답을 보내는 클라이언트-서버 구조로 이루어져 있다. Request/Respo..