Frontend

window.scrollTo() + ref

window.scrollTo() 어떤 페이지에서 위로가기 화살표를 누르면 맨 위로 이동하거나 메뉴에서 어떤 버튼을 누르면 아래로 내려가버리는 버튼을 눌러본 경험이 있을 것이다. window.scrollTo()은 스크롤을 움직여주는 window의 내장 함수이다. window.scrollTo() 사용법 아래처럼 window.scollTo()의 파라미터로 x, y의 좌표를 직접 넣을 수 있고 ... { window.scrollTo(0,0); }}>위로가기 ... 딕셔너리의 형태로 top, left의 위치를 넣어줄 수도 있다. ... { window.scrollTo({top: 0, left: 0}); }}>위로가기 ... 위와 같이 버튼에 이벤트를 달아서 버튼을 클릭했을 때 맨 위로 이동하게 만들어보자. imp..

keyframes

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, key prop

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

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