자바스크립트 모듈 번들러 (1) - webpack
·
Front-End/Java Script
Webpack 정리노트 1. 개념 2. webpack 간단 사용법3. 설정 파일 사용법4. CSS 사용법 (나중에 다른 파일형식으로 응용가능) 5. ES6 사용법6. 외부 모듈 사용법 7. 다중 output 파일 생성법8. 파일 관리9. asset 파일 관리10. sourcemap 생성11. ES7 .. 더넘어서 1. Webpack 간단 개념 위의 그림으로 부가적으로 설명하자면 여러가지의 의존성을 가진 파일들을 모아 한가지 파일로 만들어주는 역할을 한다.기존 browser 내 자바스크립트에서 모듈기능의 부재로 인해 많은 방법론들과 라이브러리들 탄생했는데 ( requirejs, commonjs, AMD..) 이런 문제를 해결해주는 방법의 하나로 보면 된다. 번들링하는 과정중에 transpiling 을 지원..
ES6 문법 Cheat Sheet
·
Front-End/Java Script
ES6 (ECMA Script 2015) 문법 간단 요약본 링크 :https://github.com/lukehoban/es6features
JavaScript 객체
·
Front-End/Java Script
//단일 객체를 만들때 var obj = { //property, method가 '나올수' 있다 // propery와 method를 표현''ㅎ'ㅏ'ㄹ 때는 // key와 value이 쌍으로 표현 myName: "백두산", "myAddress": "대전", myNumber: "비밀", "my hobby": "아우", myInfo: function() { } }//자주 쓰임 console.log(obj["my hobby"]); // 객체를 찍어내고 싶어요 마치 class로부터 // 찍어내듯이!! // JavaScript는 Class 개념이 없어요!! // 선언적 함수를 이용''해서 객체를 생성할 수 있어요!! // 이런 선언적 함수를 생성자 함수라고 불러요!! function Car(name, price, ..
JavaScript 변수 타입
·
Front-End/Java Script
JavaScript의 데이터 타입// 1. 문자열var variable1 = "홍길동";// 2. 숫자var variable2 = 10;// 3. 논리var variable3 = true;// 4.undefinedvar variable4;// 5. nullvar variable5 = null;// 6. 함수var variable6 = function() {}// 7. 객체var variable7 = {}// 8. 객체(배열)var variable8 = [10, "홍길동", true, {}]; //function// 함수 - 익명함수(람다함수)// 이름이 존재하지 않기 대문에 // 변수에 저장하'거나, 혹은 다른 함수의 인자로// 함수가 사용되요!!// 함수 - 선언적 함수// first-class fun..
javascript 기본 alert
·
Front-End/Java Script
// blocking methodalert("화면에 경고창이 떠요"); alert는 실행화면 중지//consol창에 출력'!! console.log("이건 콘솔창에 출력되요");
브라우저의 HTML 실행 구조
·
Front-End/Java Script
Browser가 특정 URL에 젒ㄱ해서 서버로부터 HTML, CSS, JavaScript를 받는다. HTML을 분석 -> DOM Tree를 생성CSS를 분석 -> Rendering Tree두개의 Tree구조를 합쳐서실제 Browswer 화면에 그림을 그려요!!HTML을 분석할 때 '
Java Script 용도와 실행순서
·
Front-End/Java Script
- 서버 사이드에서 HTML, CSS, Java Script 를 이용해서 클라이언트가 해당 웹페이지를 볼수 있도록 처리 1. 프로젝트 생성 후 소스코드 작성2. 웹서버를 설치(Apache)3. 웹서버에 우리 프로젝트를 configure 시킨다.4. 웹서버를 통해서 우리 프로젝트를 웹에 Deploy 시킨다.5. 웹 클라이언트(브라우져-크롬)를 실행시켜서 해당 URL을 통해 접속 1. JavaScrip의 언어적 특성 => 다른언어와 비교해서 2. 간단한 화면제어
JavaScript/Jquery 개발을 도와주는 IDE
·
Front-End/Java Script
WebStormhttps://www.jetbrains.com/webstorm/