[React] Hook이란 무엇인가?
·
React
Hook 이란? Hook은 React 16.8에 새로 추가된 기능입니다. Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있도록 해줍니다. Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다. [react reference] Hook은 class 없이 React 기능들을 사용하는 방법을 제시 → Hook을 통해 function component에서 state와 lifeCycle 사용 가능 Hook 사용 시 장·단점 장점(function component) 단점(class component) 계층의 변화 없이 상태 관련 로직을 재사용할 수 있음 컴포넌트 사이..
[Vanilla JS] Drag & Drop 만들기
·
JavaScript
HTML draggable="true" 속성을 사용해서 드래그를 가능하도록 하고 정해진 div에서 이동이 가능하도록 만들어 보았다. [ HTML ] [ CSS ] body { background-color: rgba(0, 0, 0, 0.3); } .fill { background-image: url("http://source.unsplash.com/random/100x100"); position: relative; height: 100px; width: 100px; top: 5px; left: 5px; cursor: pointer; } .empty { display: inline-block; height: 110px; width: 110px; margin: 10px; border: 3px solid rg..
[Nomad coder/코코아톡 클론코딩 1일차] HTML? CSS? JavaScript?(#1.1 ~ #1.9)
·
Clone Coding/Kakaotalk [HTML + CSS]
작년에 여러 강의를 들어봤는데, Nomad coder - Nicolas 이 분 강의 영상이 나에게 가장 맞는 것 같아서 다시 이분 강의를 시작으로 앞으로 나아갈 예정이다. Why? 를 많이 강조하시는데, 왜 내가 이걸 쓰는지, 이걸 안 쓰면 얼마나 돌아가야 하는지 등등 하나의 코드를 다양한 방법으로 설명을 해주시기 때문에 큰 도움이 되는 수업 중 하나였다. 1. Web site 인터넷 프로토콜 기반의 네트워크에서 도메인 이름이나 IP 주소, 경로만으로 이루어진 일반 URL을 통하여 보이는 웹 페이지(Web Page)들의 의미 있는 묶음이다. Web 쉽게 말하자면 Web은 Text로 이루어져 있다. → Web이 이해할 수 있는 언어로 이루어져 있다 (Text ≒ HTML+CSS+JavaScript) 2. ..