본문 바로가기

전체 글

(41)
destructuring 구조 분해 할당(비구조화 할당) 1. 간단한 array 할당 const arr = [1,2,3]; const [a,b,c] = [...arr]; // a:1, b:2, c:3 2. 파라미터에 할당하는데, 빈자리 끼워맞추기식 const object = { a: 1 }; function print({ a, b = 2 }) { console.log(a,b); } print(object); // a:1 b:2 3. react에서 state 사용시 const {value, setValue} = useState(0); -> useState는 [state, setState]를 반환한다. 따라서 비구조화할당으로 함수형 컴포넌트에서 class컴포넌트에서의 setState를 구현함 *실수했던 내용 const obj = { name : 'taewan', ..
Git ... 그놈의 깃.. 매번 나를 고생시키는 깃... 이번 기회에 정복하기 위해 설정하는 방법부터 명령어까지 정리해본다.. 1. Git 설치 아래 사이트에서 설치하면 npm과 git 모두 깔린다. (설치 후 폴더 우클릭시 GIT Bash가 깔려있다면 설치완료) git-scm.com/ Git git-scm.com 2. Git 명령어 정리 - cd /디렉터리 : 해당 프로젝트의 디렉터리로 이동 (change directory) - git clone "깃주소" : 깃헙의 리모트 레파지토리를 해당 위치로 클론 - git init : 해당 디렉터리에 로컬 레파지토리를 생성 (.git 폴더가 생긴다.) - git pull : 깃 풀받기 /* 브랜치부분은 더 공부해보자 */ - git checkout "브랜치이름" : 브랜치 선택하기 - ..
정규표현식 정규표현식 리터럴 var pattern = /a/; 정규표현식 객체 var pattern = new RegExp('a'); RegExp.exec('string'); pattern.exec('abcd') // ['a'] pattern.exec('bcde') // null RegExp.test('string'); pattern.exec('abcd') // true pattern.exec('bcde') // flase String String.match() var str = 'abcdef' str.match(pattern) // ['a'] String.replace() str.replace(pattern, 'A') // 'Abcdef' 정규표현식 옵션 i,g var pattern = /a/; var patte..
Module 및 Webpack 설정방법 모듈 디렉터리구조 - index.html - index.js (번들되기전 최종취합본) - a.js (모듈A) - b.js (모듈B) - webpack.config.js (웹팩설정파일) - node_modules / 생략 - dist / bundle.js (최종적으로 html에 연결 할 번들js파일) 모듈구조 //index.js import {aBox, aColor, aName } from './a.js' import * as B from './b.js' console.log(aBox, aColor, aName); console.log(B.bBox, B.bColor, B.bName); //a.js let aBox = 'aBOX', aColor = '#0000ff', aName = 'aaa' ; export..
2. 객체 객체란, 여러가지 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터타입이다. (key, value, pair) 객체 선언 var user = { name : "kim tae wan", age : 28, phone : 01080095439 };
1. 배열 배열의 생성 var array = [1,2,3]; //배열 리터럴 var arrayObj = Array(1,2,3); //Array객체생성 var arrayNewObj = new Array(1,2,3); //new 연산자를 이용한 객체생성 배열 요소추가 arrayObj.push(4); //push메소드 이용 array[array.lengh] = 4; //lengh프라퍼티 이용 array[3] = 4; //특정 인덱스 배열연산 - push() : 배열 '끝 '에 요소 '추가' - pop() : 배열 '끝' 에서부터 항목 '제거' - unshift() : 배열 '앞' 에 항목 '추가' - shift() : 배열 '앞' 에서부터 항목 '제거' - indexOf() : 배열안의 항목찾기 - splice( a, ..
2. Touch Events 터치이벤트 예제 캔버스 생성 Your browser does not support canvas element. Log: 이벤트 핸들러 설정 //html 캔버스 생성 . . . function startup() { var el = document.getElementById("canvas"); el.addEventListener("touchstart", handleStart, false); el.addEventListener("touchend", handleEnd, false); el.addEventListener("touchcancel", handleCancel, false); el.addEventListener("touchmove", handleMove, false); } document.addEvent..
1. Camera API - Camera API를 사용하면 디바이스의 카메라로 사진을 찍어 현재 웹페이지에 업로드 가능함. HTML Camera API A demo of the Camera API, currently implemented in Firefox and Google Chrome on Android. Choose to take a picture with your device's camera and a preview will be shown through createObjectURL or a FileReader object (choosing local files supported too). Preview: All the code is available in the Camera API repository on GitHub...