본문 바로가기

Font-end12

[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] 무작정 시작하기 (3) - props 와 state 2019/11/23 - [Font-end/React] - [REACT] 무작정 시작하기 (1) - 프로젝트 준비 2019/11/24 - [Font-end/React] - [REACT] 무작정 시작하기 (2) - Component 지난 포스트에서 Counter Component를 만들어 보았다. 만들면서 간략하게 설명하고 넘어갔던 props와 state에 대해서 알아보도록 하겠다. React에서 변수를 사용하려면 반드시 알고 있어야하는 키워드이므로 잘 숙지하길 바란다. 1. props란? 1-1. 부모로부터 상속받아서 사용하는 데이터로 값을 절대 변경할 수 없음. 1-2. 최하위 자식 Component에서 최상위 Component의 Props를 사용하려면 계속해서 넘겨줘야하며 depth가 깊어질수록 복잡해.. 2019. 11. 25.
[REACT] 무작정 시작하기 (2) - Component 2019/11/23 - [Font-end/React] - [REACT] 무작정 시작하기 (1) - 프로젝트 준비 이전 포스트에서는 React 프로젝트를 설정하고 간단하게 Hello, World를 출력하는 Component를 생성하여 보았다. 이번 포스트에서는 이벤트가 발생하는 Component를 처리해보면서 전반적인 기능들에 대해서 알아보도록 하겠다. 하나의 Component에 많은 기능들을 함축시켜 설명하려다보니 다소 복잡할 수도 있지만, 최대한 간단하게 정리하도록 해보겠다. 1. 프로젝트 구조. 1-1. 폴더 및 파일 추가. - [ ./components/utils ] 폴더가 추가되었으며, [ Counter.js, index.js ] 파일을 추가하였음. 2. Component 생성. 2-1. Coun.. 2019. 11. 24.
[REACT] 무작정 시작하기 (1) - 프로젝트 준비 웹 프로그래밍을 배울때만 해도 jQuery를 이용해서 동적 웹페이지를 만들었었는데, 이제는 Angular, Vue, React 등 다양한 프론트앤드 프레임워크들이 등장하면서 대세를 이루고 있는 추세이다. 이번 무장적 시장하기 시리즈에서는 이 중 React를 다루어보려고 한다. React는 프로젝트를 구성할 때, 패키지들을 설치하다보면 간혹 버전의 호환성에서 문제가 발생하는 경우가 종종있다. React를 처음 입문하는 사람이라면 멘붕에 빠질 수 밖에 없을 것이다. 하지만 걱정하지 마시라 [ create-react-app ] 이라는 툴을 사용하면 쉽고 빠르게 React 프로젝트를 구성할 수 있다. 하지만, 이번 포스트에서는 이 툴을 사용하지않고 한땀한땀 프로젝트를 구성해나갈 계획이다. https://ko.r.. 2019. 11. 23.