canvas로 그림을 그리려면 canvas객체의 getContext('2d')를 사용해야 함. +) canvas는 태그에 직접 width, height를 해주는 것과 css에 width, height 값을 주는 것이 다른 태그와는 다르게 작동한다. 예를들어, canvas태그에 w=1000을 주고 css에 w=500을 준 경우와 canvas태그와 css 모두 w=500을 준 경우 전자에 그림이 더 작게 표현된다. 너비가 1000픽셀인 그림의 너비를 500px인 해상도에 기존의 비율을 유지해서 그리기 때문임 이 방법을 사용하면 고해상도의 디바이스에 그림을 뿌려줘야하는 경우 선명하게 그림을 뿌릴 수 있다. (예시 - 디바이스 크기의 2배로 캔버스의 크기를 주고, css에는 너비와 높이를 100%로 줌)

학교에서 JAVA 수업시간에 클래스, 객체지향 처음 배울 때 자동차 예시 다음으로 가장 많이 들었던, 붕어빵 예시가 생각났다. 클래스는 만들고자 하는 객체의 설계도인데, 만들려는 객체가 가져야할 속성과 기능을 명시한다. 자바스크립트엔 class가 없었기 때문에 생성자 함수로 인스턴스를 만들었다고 한다. 생성자 함수를 정의 할 때는 '이건 생성자 함수야' 라는걸 표시하기 위해 함수 이름 첫글자를 대문자로 쓴다. 그리고 클래스 즉, 생성자 함수(붕어빵 틀)는 인스턴스 생성 시 전달 받은 인자로 속성을 초기화 한다. 1.생성자 함수 function 붕어빵( 앙꼬 , 반죽 ){ this.앙꼬 = 앙꼬; this.반죽 = 반죽; this.붕어빵굽기 = function(){ console.log(`${this.앙꼬..

달력을 직접 짜면서 징그랍게 써본 Date객체 //오늘(요일 월 일 년 시간)포멧으로 반환 결과: Tue Mar 17 2020 14:55:00 GMT+0900 (대한민국 표준시) const today = new Date(); //today라는 이름의 Date 객체 생성 //특정 날짜 정보를 담은 객체를 만들고 싶다면 //인자로 날짜 정보 넘겨줄 때 형식을 잘 지켜줘야 한다 안그럼 값 이상하게 나옴 const anniversary = new Date('1993-08-26'); const day = today.getDay(); //요일을 숫자로 반환 일요일:0 ~ 토요일:6 결과:2( 현재 화요일) const month = today.getMonth(); // 현재달-1 반환 결과: 2 (현재 3월) con..

Flex 속성은 컨테이너에 적용해야하는 속성과, 컨테이너 안의 아이템에 적용해야하는 속성으로 나뉘어 진다. display: flex // 컨테이너는 블록 형태로 있지만, 그 안의 아이템들이 inline 처럼 배치된다. See the Pen rNVLezQ by volt-nuna (@ddonni0426) on CodePen. flex-direction 정렬 방향 //row가 디폴트 row, colum (reverse도 가능) flex-wrap:(nowrap, wrap, wrap-reverse) //브라우저가 컨텐츠 크기보다 줄었을 때 어떻게 할 건지를 결정 align-content: // 2줄 이상일 때,아이템을 어떻게 정렬할 것인지 (wrap 설정이 된 상태에서 사용) => 축약형 flex-flow: di..

Nuxt 설치 -> 프로젝트 생성 -> 관련 라이브러리 설치 -> 프로젝트 구동 >$ npx //설치 확인 명령어 뜨면 설치된 거임. >$ npx create-nuxt-app //넉스트 프로젝트를 생성하면 그 후 수많은 질문들이 나오는데, 나는 연습해보는 거라 거의 놉으로 설정하고 넘겼다. 이 과정에서 나오는 각 설정에 대한 질문은 공식문서에 잘 설명되어있다. 아래 링크 참고. https://ko.nuxtjs.org/guide/installation/ 설치 Nuxt.js는 시작하기 정말 쉽습니다. 간단한 프로젝트는 딱 `nuxt` 디펜던시만 있으면 됩니다. ko.nuxtjs.org 설치 끝나면 이렇게 앱으로 이동해서 실행하라고 알려준다. 프로젝트 생성이 완료된다. 폴더 구조가 뷰랑은 다르다는게 눈에 들어..

이벤트의 전파 단계 위의 그림처럼 HTML요소는 자식이 부모 위에 겹쳐진 형태로 표시된다. 따라서 자식에서 이벤트가 발생해도 컴퓨터는 자식요소를 클릭한 건지 부모를 클릭한 건지 구분하지 못하기 때문에 전체 요소를 검사하며 발생한 이벤트에 반응하는 리스너가 있는지 찾는다. 윈도우 객체 -> document -> Html -> body -> #outer -> #inner1 -> #inner2 순서로 검사가 진행된다. 1) 캡쳐링 단계 윈도우 객체에서 #inner2 즉, 타겟요소에 도달하기까지 이밴트 리스너를 찾는 단계를 캡쳐링 단계라고 한다. 이 과정에서 타겟요소에 도달하기 전에 해당 이벤트에 반응하도록 등록된 리스너가 있다면, 그 리스너가 해당 이벤트를 빼돌린다.(캡처한다) 이렇게 되면 타겟 요소는 이벤트..