주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

폴더창이나 인터넷 창 등..... 보통 상단부 부분을 마우스로 꾹!누르고 움직이면 창을 이동시킬수 있잖아요? 이렇게요 ↓↓↓ 오늘은 이 기능을 만들어 보도록 하겠습니다.! ^^ 먼저 움직일 객체를 만들기위한 작업을 합니다. HTML 이곳을 드래그 하세요. 대충 모양을 꾸며줄게요. CSS .wrap{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 300px; border: 1px solid #ddd; border-radius: 5px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); overflow: hidden; } .header{ padding: ..

모듈 시스템: CommonJS, AMD, UMD, ES6 여러 기능에 관한 코드가 모여있는 하나의 파일 장점 의존성을 줄여주기때문에 유지보수 용이 모듈만의 네임스페이스 화 필요할때마다 재사용 위와 같은 이유로 모듈의 개념이 필요했고, Javascript에서는 여러가지를 시도하였다. CommonJS 서버사이드 및 데스크탑 어플리케이션에서 지원하기 위해 만든 방식으로 Node.js에서 사용 가능하다. require, module.exports를 사용하는 방식이다. 여기서 module.exports의 module은 예약어이며 현재 모듈에 대한 정보를 가지고 있는 객체이다. // search.js const getWord = () => {}; module.exports = { getWord }; // index..

인프런 타입스크립트 기초를 통해 공부중이며 제로초님의 유료강좌입니다. 코드를 통으로 가져오지는 않겠습니다.(내가 글을 쓰면서 복습하는게 목적이기때문에 필요한 부분만) 타입스크립트에 익숙하지않다면 자바스크립트로 먼저 코드를 작성하고 그 후에 타입스크립트로 변환하도록하자. 타입스크립트 (Typescript) 타입스크립트의 모듈 시스템은 자바스크립트의 최신문법을 개승했기 때문에 common.js를 쓰던 노드js의 방식과는 다르다. common.js와 ES2015의 차이를 이해해야한다. export default 자바스크립트에서는 exports와 module.exports가 같기 때문에 exports가 중복되면 값을 덮어쓰게된다. const hello = 'module'; exports.a = 'a'; expo..

강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn 일단 index.html 파일이 필요하다. (webpack.config.js에서 entry에 적었던 파일들을 output으로 출력했을 때, 이 파일을 로드할 index.html!) 프로젝트 루트에 index.html을 생성한다. // react에서 DOM을 생성하여 넣어줄 태그! app.js에서 id값으로 접근하고 있다. // webpack.config.js에서 output에 경로를 작성한 파일 입력 그리고 html에서 처음으로 로드할 app.js 파일이 필요하다. 이 파일은 entry. 프로젝트 루트에 app.js 생성한다. // i..