일상을 디자인하는 개발자

번들링이란? 프로그래밍을 하다보면 번들링에 대해서 자주 듣게 된다. 사전적 의미의 Bundle은 "묶다. 꾸러미로 만들다" 의 의미를 가지고 있다. 그렇다면 왜 파일을 묶는 작업이 필요할 것인가에 대해 생각해 볼 수 있다. 번들리은 모듈들의 의존성을 관계를 파악 후 묶는 작업 즉 그룹화 해주는 것을 말한다. 모듈이 분리 되었던 이유는 간단하다. 작업의 효율성 문제이다. 스크립트가 커지기 시작하면 하나의 클래스 , 파일로 관리하기가 어렵고 감당이 안된다. 이러한 이유로 전부 떼어내어서 작업을 하기 시작했다. 원래부터 따로 분리 되어 있는 모듈이 아니기 때문에 독립적으로 존재하는 모듈은 아니다. 분리 된 모듈이 잘 작동하기 위해서는 연계성이 있어야한다. 그래서 모듈 내부에서는 import로 호출하고 expo..

1. history 객체는 사용자가 방문한 사이트의 기록을 남기고 이전 방문 사이트와 다음 방문 사이트로 다시 돌아 갈 수 있는 속성과 메소드를 제공합니다. 1-1 history객체의 기본형 history.속성; histroy.메서드(); history.메서드(n); //1 사용자가 방문한 사이트의 기록을 남긴 총 수량 ex) history.length; //2 사용자가 방문한 사이트 중 바로 이전에 방문한 사이트로 이동. ex) history.back(); //3 사용자가 방문한 사이트 중 두단계 이전에 방문한 사이트로 이동 ex) history.back(2); 1-2 history 객체의 속성 종류 종류 explain history.back() 이전 방문 사이트로 이동 history.foward() ..

1. screen 객체는 사용자의 모니터 정보를 제공하는 객체이다. screen.속성; ex) screen.width ; //모니터의 너빗값을 반환 1-1. screen 객체 종류 종류 explain screen.width 화면의 너빗값을 반환 screen.height 화면의 높이값을 반환 screen.availwidth 작업 표시줄을 제외한 화면의 너빗값을 반환 screen.acailheight 작업 표시줄을 제외한 화면의 높이값 반환 screen.colorDepth 사용자 모니터가 표현 가능한 컬러 bit를 반환 2 . location 객체는 사용자 브라우저와 관련된 속성과 메서드를 제공하는 객체 location.속성; location.메서드(); // 사용자 브라우저의 URL경로값을 가져옴 loca..

seInterval() / clearInterval() setInterval()메서드는 코드를 일정 시간 간격으로 반복 실행, clearInterval()은 setInterval()메서드를 취소한다. var 참조변수 = setInterval(function(){코드}, 시간 간격(ms)); var 참조변수 = setInterval("코드", 시간간격 (ms)); // 다음은 3(3,000)초 간격으로 변수 i의 값을 1씩 증가 시킴 var ints = setInterval(function(){i++},3000); var ints = setInterval("i++", 3000); // clearInterval() 메서드의 기본형 clearInterval(참조변수); 예시 ) setTimeout() / cl..

브라우저 객체란??? 브라우저에 내장된 객체를 '브라우저 객체'라고 한다. window는 브라우저 객체의 최상위 객체이며, window 의 하위 객체에는 document, screen, location, history, navigator, body, div, img등등이 있다. window 객체의 매서드 종류 종류 explain open("URL", "새 창 이름", " 새 창 옵션") URL 페이지를 새창으로 나타냄. alert(data) 경고 창을 나타내고 데이터를 보여줌, 방문자가 [확인] 버튼을 누르면 alert() 를 사용하고 다음 코드 수행. prompt("질문", "답변") 질문과 답변으로 질의 응답 창을 나타냄. confirm("질문내용") 질문 내용으로 확인이나 취소창을 나타냄 [확인] ..

문자열 객체 (String Object)는 문자형 데이터를 객체로 취급 , JavaScript에서 많이 사용하는 객체중 하나이다. 기본형 var 참조변수 = new String(문자형데이터) var t = new String("hello world"); //문자열 객체 생성 1. String()메서드 2. 문자형 데이터 // 문자열 객체는 다음고 같이 참조 변수에 문자형 입력해도 객체가 생성 var 참조 변수 = 문자형 데이터 ex) var t = "hello world";// 문자열 객체 생성 1. 참조변수 2. 문자형 데이터 문자열 객체의 메서드 및 속성 종류 설명 charAt(index) 문자열에서 인덱스 번호에 해당하는 문자를 반환 ex) var str = "web he she"; str.char..

배열객체 여러개의 데이터를 하나의 장소에 저장하기 위해서는 배열 객체 (Array Object)를 생성하면된다 . 배열객체의 기본형은 다음과 같다. 1 var 참조 변수 = new Array(); 참조변수[0]=값1; 참조 변수[1]=값2; 참조변수[2]=값3; ... 참조 변수[n-1]=값n; var 참조 변수 = new Array(값1 값2,값3 ...값n); var 참조 변수 = [값1, 값2,값3 ... 값n] 배열 객체를 생성하는 방법은 다음과 같이 3가지가 있고 원하는 방식을 사용하면 됩니다. 방법 1. var d = new Array(); d[0] = 30; d[1] = "하이"; d[2] = true; 방법 2. var d = new Array(30, "하이", true); 방법 3. va..

수학객체 자바스크립트 내장 객체에는 수학과 관련된 기능과 속성을 제공하는 수학객체가 있다. 종류 설명 Math.abs(숫자) 숫자의 절대값을 반환 Math.max(숫자 1, 숫자2, 숫자 3, 숫자 4) 숫자 중 가장 큰 값을 반환 Math.min(숫자1, 숫자2, 숫자3, 숫자4) 숫자 중 가장 작은값을 반환 Math.pow(숫자, 제곱갓) 숫자의 거듭제곱값을 반환 Math.random() 0~1사이의 난수를 반환 Math.round() 소수점 첫째 자리에서 반올림하여 정수를 반환 Math.ceil 소수점 첫째 자리에서 무조건 올림하여 정수를 반환 Math.floor 소수점 첫째 자리에서 무조건 내림하여 정수를 반환 Math.sqrt 숫자의 제곱근값을 반환 Math.Pl 원주율 상수를 반환

내장 객체 생성하기 내장객체를 생성할 때는 new라는 키워드와 함께 생성함수를 사용합니다. 참조변수 (인스턴스 이름) = new 생성함수() 날짜 정보 객체 현재 날짜의 정보를 제공하는 Date 객체는 다음과 같이 생성합니다. 참조 변수 = new Date(); "날짜 관련 메서드 " 날짜 정보를 가져올 때(GET) getFullYear() 연도 정보를 가져옴 getMonth() 월 정보를 가져옴 getDate() 일 정보를 가져옴 getDay() 요일 정보를 가져옴 getHours() 시 정보를 가져옴 getMinutes() 분 정보를 가져옴 getSconds() 초 정보를 가져옴 getMilliseconds() 밀리초 정보를 가져옴 (1/1,000초 단위) getTime() 1970년 1월 1일부터 ..

객체란 ? 자바스크립트는 기본적으로 객체(object)기반의 언어이다. 객체는 기본적으로 "기본" 과 "속성"을 가지고 있다. 자바스크립트에서 다야한 기능은 "메서드" 라고 하며 또한 객체는 속성을 가지고 있습니다. 자바스크립트 객체의 메서드와 속성의 기본형은 다음과 같습니다. 1 객체.메서드(); 2 객체.속성; 또는 3 객체.속성= 값 1 . 객체의 메서드를 실행. 2. 객체의 속성값을 가져옴. 3. 객체의 속성값을 바꿈. 객체의 종류 자바스크립트의 객체의 종류에는 크게 내장객체, 브라우저 객체 모델 (BOM , Browser Object Model), 문서 객체 모델 (DOM , Document Object Model) 로 나눌 수 있다. 내장객체 내장객체는 자바스크립트 엔진에 내장되어 있어 필요한..