본문 바로가기

분류 전체보기72

[React] 리액트란 리액트란? 프론트엔드 라이브러리, 프레임워크 단순히 웹 페이지가 아니라 웹 애플리케이션입니다. 브라우저 상으로도 자연스러운 흐름으로 매우 많은 것을 할 수 있습니다. 어떤 인터페이스를 동적으로 움직이게 하려면 수많은 상태를 관리해주어야 합니다. Counter 0 + 버튼을 눌러서 숫자 0 값을 바꿔주려면 각 DOM 엘리먼트에 대한 레퍼런스 프로젝트가 규모가 커지고, 정말 다양한 유저 인터페이스와 인터렉션을 제공한다면, 그 많은 DOM 요소들을 직접 관리하고 코드 정리하는 건 힘들어집니다. 컨벤션을 가지고, 여러 규칙을 세워서 진행한다면, 불가능한 일은 아니지만 번거롭다는 단점이 생깁니다. 웹 개발 시, DOM 관리와 상태 값 업데이트 관리를 최소화하고, 오직 기능 개발, 사용자 인터페이스를 구현하는 것에.. 2020. 5. 12.
[Vanilla JS] Animation Mouse cursor (Covid-19) JavaScript를 공부하면서 코딩 실력을 키우기 위해 작업하였습니다. 오늘은 코로나 19 사태를 위하는 마음으로 애니메이션을 이용한 간단한 코딩 작업을 하겠습니다. body를 viewport 잡고 mousemove시, eyeball값을 이벤트 처리합니다. function eyeball()이라는 함수를 만듭니다. 변수 eye에 forEach 함수를 사용하여 x, y값을 지정합니다. Element.getBoundingClientRect() 메서드는 요소의 크기와 뷰포트를 기준으로 한 위치를 반환합니다. event.pageX or event.pageY의 값들을 변수 x, y을 빼주어 마지막으로 style에 transform: rotate를 주어 mouse move 할 때마다 eye가 따라가는 style을 .. 2020. 5. 8.
[JS] 스택 배열의 원하는 위치에 원소를 넣고 뺄 수 있음. 단지 원소를 추가/삭제하는 것 이상의 제어를 할 수 있는 형태의 자료 구조가 필요한 경우가 있는데, 바로 배열과 유사한 자료 구조인 스택과 큐가 있다. 1. 스택 (LIFO-Last In First Out) - 스택의 자료는 항상 동일한 종단점에서 추가/삭제된다. - 스택에서 종단점은 꼭대기와 바닥입니다. - 프로그래밍 언어의 컴파일러에서도 사용하는 자료 구조로서, 변수나 메소드 호출을 컴퓨터 메모르에 저장할 때 쓰인다. 2. 스택 만들기 function Stack() { // 프로퍼티와 메소드는 여기에 기술 } let items = [] // 스택의 원소를 담아둘 자료 구조 - push (원소) : 스택 꼭대기에 새 원소를 추가한다. - pop(): 스택.. 2020. 5. 8.
[JS] Button style animation 2020. 5. 7.

티스토리툴바