마우스로 창을 움직여보자!
폴더창이나 인터넷 창 등..... 보통 상단부 부분을 마우스로 꾹!누르고 움직이면 창을 이동시킬수 있잖아요? 이렇게요 ↓↓↓ 오늘은 이 기능을 만들어 보도록 하겠습니다.! ^^ 먼저 움직일 객체를 만들기위한 작업을 합니다. 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: ..
인프런 React 강의 듣고 사이트 만들기 _ Front 작업 03. 배터리 만들기(dayjs)
이번 작업은 배터리 만들기입니다. 핸드폰들 보면 몇 % 남았는지 보이는 것있쬬? 기능은 약간 다르지만 흉내내보겠습니다. 제가 원하는 기능은 하루를 기준으로 시, 분을 통해 얼마나 지났는 지를 체크하는 것입니다. 즉 24시가 되면 100%, 오후 12시면 50% 겠죠? 로직을 수정하면 거꾸로도 할 수 있겠죠? (지금 중요한건 이런 기능에 대한 설명은 아니니깐요.) 제로초님 강의에서는 moment를 사용해서 날짜를 구해 사용했는데요, 잠깐 다른 라이브러리에 대해서도 설명해주십니다. 그 중 구글 트렌드를 보시고 요즘 많이 사용한다는 dayjs에 대해 간단한 소개를 해주시는데요. 용량이 가볍기 때문에 많이들 쓴다고 합니다. 저는 dayjs를 통해 만들어보겠습니다. (사실 moment나 dayjs나 문서보면 비슷..
인프런 React 강의 듣고 사이트 만들기 _ Front 작업 01. 기본셋팅
React 강의 듣고 나만의 사이트 만들기 시작!! 먼저 초반부 Front 작업을 진행한다. 쪼랩이라 라이브러리 다운받을때 빼먹는건 진행하면서 차차 고치도록 해야겠다. 친절하게 코드가 다 들어있지않은 이유는 스스로 공부하는 목적이기때문에 사소한 부분이 많이 빠져있다. 1. 내 사이트명의 폴더를 생성한다. OKAYOON 2. Front 와 Back 따로 진행해야하기에 폴더를 두개 생성한다. OKAYOON -front -back // front npm init npm i next@9 react react-dom npm i prop-types npm i eslint eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks -d npm i -D ba..
스코프에 대한 지식이 없다면 먼저 간단히 읽고 오세요. 실행컨텍스트에 대해서 알고 진행해야하기에 실행 컨텍스트 글을 꼭 참고해주세요. 실행 컨텍스트(Execution context) 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체입니다. 자바스크립트는 어떤 실행 컨텍스트가 활성화되는 시점에 선언된 변수를 위로 끌어올리고(호이스팅, hoisting) 외부 okayoon.tistory.com 클로저(Closure) 여러 함수형 프로그래밍 언어에서 등장하는 보편적인 특성입니다. 클로저는 객체지향과 함수형 프로그래밍에서 매우 중요한 개념입니다. 특성 함수가 선언될 당시의 lexical environment(함수 선언당시 실행 컨텍스트 내의 식별자 정보, 외부환경 정보)의 상호관계에 따른 현상입..