본문 바로가기

JavaScript6

[Drag&Drop] 드래그 앤 드롭으로 Element 움직이기 0. 서론 최근에 HTML, CSS, Vanilla Javascript를 이용하여 메모장을 만들었다. 생성된 메모들을 화면에 보여줄 때 단순하게 나열만 해주다니 심심하게 느껴졌다. 그래서, Windows의 Sticky Notes처럼 드래그앤드롭으로 위치를 자유롭게 설정할 수 있도록 기능을 추가해보았는데, 다른데서도 유용하게 사용할 수 있을것 같아서 정리를 해보려고한다. 그럼 예제를 통해 드래그 앤 드롭 기능을 구현해보도록 하자. 1. 프로젝트 준비 1-1. Chrome Browser 1) IE와 같은 구형브라우저에서는 ES를 적용하려면 BABEL을 이용해야하기 때문에 Chrome Browser를 사용. 2) 다운로드 - https://www.google.com/intl/ko/chrome/ 1-2. 프로젝.. 2020. 3. 2.
[REACT] 무작정 시작하기 (1) - 프로젝트 준비 웹 프로그래밍을 배울때만 해도 jQuery를 이용해서 동적 웹페이지를 만들었었는데, 이제는 Angular, Vue, React 등 다양한 프론트앤드 프레임워크들이 등장하면서 대세를 이루고 있는 추세이다. 이번 무장적 시장하기 시리즈에서는 이 중 React를 다루어보려고 한다. React는 프로젝트를 구성할 때, 패키지들을 설치하다보면 간혹 버전의 호환성에서 문제가 발생하는 경우가 종종있다. React를 처음 입문하는 사람이라면 멘붕에 빠질 수 밖에 없을 것이다. 하지만 걱정하지 마시라 [ create-react-app ] 이라는 툴을 사용하면 쉽고 빠르게 React 프로젝트를 구성할 수 있다. 하지만, 이번 포스트에서는 이 툴을 사용하지않고 한땀한땀 프로젝트를 구성해나갈 계획이다. https://ko.r.. 2019. 11. 23.