하루 하루

https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video?hl=ko 이미지 및 동영상의 지연 로딩 | Web Fundamentals | Google Developers 사이트에 수많은 이미지와 동영상이 있지만 이를 줄이고 싶지 않다면, 지연 로딩이 초기 페이지 로드 시간을 향상하고 페이지당 페이로드를 낮추는 데 가장 적합한 기술일 수 있습니다. developers.google.com Lazy Loading은 간단히 페이지 로드 시간에 중요하지 않은 리소스의 로딩을 늦추는 기술이라고 할 수 있습니다. 지연 로딩은 사용자에게 보여지지않는 이미지나 동영상을 로딩하면서 낭비되는 데이터, 처리 시..

모듈은 어떠한 기능을 수행하는 코드를 묶은 것입니다. 모듈은 독립적인 구조를 가지고 있어, 추가 및 삭제가 가능합니다. [ 모듈 장점 ] 모듈이 JS 에 주는 장점에는 1. 깔끔한 전역 범위, 2. 코드를 파일로 패키징하기, 3. 재사용 이 있습니다. 1. 깔끔한 전역범위 프로젝트가 일정 규모이상 커지게 되면, 이미 정의되어 있는 속성을 재정의하는 위험이 존재하게 됩니다. // 개발자 1의 코드 - a.js var num = 1; // 개발자 2의 코드 - b.js var num = 2; 이와 같이 '개발자2' 가 변수 값을 재정의하게 되면 '개발자1'의 코드는 제대로 동작하지 않게 되고 오류가 발생하게 됩니다. 모듈은 독립적으로 변수를 사용하면서 재정의를 방지합니다. 2. 코드를 파일로 패키징하기 애플..

[ Types of Execution Context ] excution context는 자바스크립트 코드가 평가되고 실행되는 환경입니다. 즉, 자바스크립트 코드는 excution context 내에서 실행됩니다. Global Execution Context default 실행 컨텍스트로 함수 안에 없는 코드의 경우 해당 excution context에서 실행됩니다. 여기서는 두 가지의 작업이 실행되는데, 첫번째는 전역 개체( window object )를 만들고, 이 값을 전역 개체와 동일하게 설정합니다. 프로그램에는 하나의 전역 실행 컨텍스트만 존재합니다. Functional Execution Context 함수가 호출될 때마다, 해당 함수에 대한 새로운 excution context이 만들어집니다. ..

https://repl.it/~ Log In Repl.it is a simple yet powerful online IDE, Editor, Compiler, Interpreter, and REPL. Code, compile, run, and host in 50+ programming languages: Clojure, Haskell, Kotlin (beta), QBasic, Forth, LOLCODE, BrainF, Emoticon, Bloop, Unlambda, JavaScript, CoffeeS repl.it

3-7 Making a To Do List part Three const toDoForm = document.querySelector(".js-toDoForm"), toDoInput = toDoForm.querySelector("input"), toDoList = document.querySelector(".js-toDoList"); const TODOS_LS='toDos'; let toDos =[]; function deleteToDo(event){ const btn = event.target ; const li = btn.parentNode; toDoList.removeChild(li); const cleanToDos = toDos.filter(function(todo){ return todo.id ..

3-6 Making a To Do List part Two www.youtu.be/JEbOaI_0phc const toDoForm = document.querySelector(".js-toDoForm"), toDoInput = toDoForm.querySelector("input"), toDoList = document.querySelector(".js-toDoList"); const TODOS_LS='toDos'; const toDos =[]; function saveToDos(){ localStorage.setItem(TODOS_LS,JSON.stringify(toDos)); } function paintToDo(text){ const li = document.createElement("li"); c..

3-5 Making a To Do List part One www.youtu.be/YD1yDErhMa4 const toDoForm = document.querySelector(".js-toDoForm"), toDoInput = toDoForm.querySelector("input"), toDoList = document.querySelector(".js-toDoList"); const TODOS_LS='toDos'; function paintToDo(text){ console.log(text); const li = document.createElement("li"); /*delete 버튼 생성 */ const delBtn = document.createElement("button"); delBtn.inn..

본 내용은 https://programmers.co.kr/learn/courses/10 강의의 내용들을 한 번에 볼 수 있도록 한 것으로 자세한 내용은 본 강의를 참고하시길 바랍니다. Part5. Extra 1. script 위치에 따른 실행 • 브라우저는 HTML 문서를 읽으면서 script tag를 실행함 - HTML 문서 Element 파싱 보다 스크립트가 먼저 실행되면 접근되지 않음 - 페이지의 상단의 script 에서 이후 파싱될 Element에 접근하고 싶다면 onload 등의 eventhandler로 실행되도록 해야 함 • async, defer 속성을 이용하면 스크립트의 실행과 문서의 로딩을 동시에 진행할 수 있음(비 동기적) 2. Chrome 디버거 활용 [ 프로그램 오류의 종류 ] - ..

본 내용은 https://programmers.co.kr/learn/courses/10 강의의 내용들을 한 번에 볼 수 있도록 한 것으로 자세한 내용은 본 강의를 참고하시길 바랍니다. Part4. Networking 1. AJAX - Request 보내기 [ AJAX : Asynchronous Javascript and XML ] -> 더 나은 사요영험 브라우저에서 페이지를 이동하지 않고 자바스크립트를 통해 HTTP Request를 보내고 받아 JS에서 처리할 수 있음 1. var req = new XMLHttpRequest(); - AJAX를 위한 객체 생성 : HTTP 요청을 만들 수 있는 새로운 객체를 생성하는 명령 2. req.open("GET", "./data.txt"); - 요청의 방식과 UR..

본 내용은 https://programmers.co.kr/learn/courses/10 강의의 내용들을 한 번에 볼 수 있도록 한 것으로 자세한 내용은 본 강의를 참고하시길 바랍니다. Part3. Event + JS 1. Callback function 조건을 등록해 두고 그 조건을 만족한 경우, 나중에 호출되는 함수 [ 시간을 기반으로 콜백함수를 호출하는 명령 ] • setTimeout( function, time ) : time 시간이 지난 경우 function 함수를 콜백하는 함수 ( 1/1000초 단위 / timerId를 반환 ) • clearTimeout( timerId ) : timerId를 인자로 받아 function호출을 취소 ( 이미 호출시 해당 x ) • setInterval( func..

본 내용은 https://programmers.co.kr/learn/courses/10 강의의 내용들을 한 번에 볼 수 있도록 한 것으로 자세한 내용은 본 강의를 참고하시길 바랍니다. Part2. DOM + JS 1. DOM 소개 및 탐색 [ DOM, Document Object Model ] • 컴퓨터가 문서를 잘 처리할 수 있도록 문서의 구조를 약속한 것 ( Tree 형태 ) • document object - javascript에서 document로 접근 가능 - children에는 문서의 최상위 엘리먼트인 html이 존재 [ Element API ] • 자식, 부모 엘리먼트에 접근하는 방법 - .children : 해당 object의 자식 노드에 대한 배열 - .parentNode : 부모 노드 ..

3-1 Making a JS Clock part One www.youtu.be/f0nBj0YMBUI const clockContainer = document.querySelector(".js-clock"), clockTitle = clockContainer.querySelector("h1"); function getTime(){ const date = new Date(); const minutes = date.getMinutes(); const hours = date.getHours(); clockTitle.innerText = `${hours}:${minutes}`; } function init(){ getTime(); } init(); 3-2 Making a JS Clock part Two www.y..

2-4 Events and event handlers www.youtu.be/LnuLDGO5848 * 브라우저 객체 모델(BOM: browser object model ) JS 로 브라우저의 정보에 접근하거나 기능을 제어할 때 사용하는 객체 모델 -> Window 객체 function handleResize () { console.log( " I have been resized"); } window.addEventListener ( "resize" , handleResize ); window 창이 resize 되면 handleResize 함수가 호출된다. 주의할 점은 window.addEventListener ( "resize" , handleResize() ); 와 같이 함수와 같이 ( )를 쓰게 되면..

2-2 JS DOM Functions www.youtu.be/VBmQUMUGznU Document 관련한 추가 정보 사이트 http://tcpschool.com/javascript/js_dom_document 코딩교육 티씨피스쿨 4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등 tcpschool.com 2-3 Modifying the DOM with JS www.youtu.be/JscDdICRvgo

2-1 너의 첫번째 함수! (Your first JS Function) www.youtu.be/Q0S6l_gkpeU 2.1.1 More Function Fun www.youtu.be/mLTUtMARkqc function sayHello (name, age ){ console.log(` Hello ${name} you are ${age} years old`); } sayHello("Nicolas", 14 ) const calculator = { plus: function( a,b){ return a+b; } } const plus = calculator.plus(5,5); console.log(plus); // 5

1-8 Data Types on JS 1-9 Organizing Data with Arrays const dayOfWeek = ["M","T","W","T","F","S","S",45,true]; 1-10 Organizing Data with Objects const nicoInfo = { name:"Nico", age : 33, gender:"Male", favMovie = ["Intern","Oldboy"], favFood = [ { name : "Kimchi", fatty : false; }, { name : "Cheese burger", fatty : true; } ] }; console.log( nicoInfo.gender );

1-6 Your first JS Variable(변수!) 1-7 let, const, var const a = 221; let b = a -5 ; var c = 3; c = 5; b = 5 ; a = 4 ; // error 발생

1-5 Hello World with Javascript 1-5-1 What are we learning

1-4 VanillaJS

1-1 Why JS? : JS for Beginners 1-2 Super Powers of JS 1-3 ES5, ES6 ES....WTF !?!?!

www.youtu.be/wUHncG3VwPw www.youtu.be/wUHncG3VwPw

본 내용은 https://programmers.co.kr/learn/courses/10 강의의 내용들을 한 번에 볼 수 있도록 한 것으로 자세한 내용은 본 강의를 참고하시길 바랍니다. 자바스크립트와 웹 프론트엔드 Part1. Javascript와 web 1. Javascript, HTML, CSS HTML : 웹 페이지의 구조를 나타냄 CSS : 웹 페이지 안에 존재하는 요소들의 스타일을 나타냄 JS : JS로직을 통해 문서의 구조와 스타일에 변화를 줄 수 있음 브라우저에서는 Javascript에서 HTML, CSS에 접근할 수 있는 API를 제공함 2. window object 브라우저에서는 window object를 제공해주고, javascipt에서는 해당 객체를 통해 html, css를 접근하고, ..