Today I Learned

프레임워크 vs 라이브러리 공통점 : 남이 짜놓은 코드를 가져다 쓴다. 차이점 : 라이브러리가 각각 개별적인 기능들이라면 프레임워크는 각 라이브러리들이 모여서 기본 제품 골격을 갖춘 상태에 덧붙여서 만드는 것을 프레임워크라 한다. 차이점2 : 프레임워크로 일을 할 때는 프레임워크의 규칙을 따라야 한다. 언어별 프레임워크 Java : Spring PHP : Laravel, CodeIgniter, Symfony Python : Django Ruby : Ruby on Rails Scala : Play C# : .NET Core 참조 https://www.youtube.com/watch?v=AERY1ZGoYc8&t=8s https://www.youtube.com/watch?v=t9ccIykXTCM&list=TL..

버블링이란? 클릭한 지점이 하위 엘리먼트라고 하여도, 그것을 감싸고 있는 상위 엘리먼트까지 올라가면서 이벤트 리스너가 있는지 찾는 과정 설명 html div1 div2 div3 css #div1 { width: 150px; height: 150px; border: 1px solid blue; } #div2 { width: 100px; height: 100px; border: 1px solid blue; position: absolute; top: 30px; left: 30px; } #div3 { width: 50px; height: 50px; border: 1px solid blue; position: absolute; top: 25px; left: 25px; } javascript let div = d..

DOMContentLoaded 와 Load 차이 DOM Tree 분석이 끝나면 DOMContentLoaded 이벤트 발생 모든 자원이 다 받아져서 브라우저에 화면 표시까지 다 끝나는 시점에 Load 발생 DOMContecLoaded 이후에 동작하도록 구현하는 것이 성능에 유리하다. DOMContentLoaded 이벤트를 사용하는 이유 a a 위와 같은 이유 때문에 script문을 body 태그를 닫기 전에 삽입한다. DOMContentLoaded 이벤트 이후에 동작하도록 구현 function init(){ ... } document.addEventListener("DOMContentLoaded", () => { let div = document.querySelector("div"); init(); });..

객체 선언 let obj = {name:"seogineer", age:20}; console.log(obj.name); //seogineer console.log(obj["name"]); //seogineer 객체 추가/삭제 obj["name"] = "seo"; console.log(obj); // { name: 'seo', age: 20 } obj.job = "developer" console.log(obj); // { name: 'seo', age: 20, job: 'developer' } 객체 탐색 //value값이 숫자인 key만 출력 const data = { "debug": "on", "window": { "title": "Sample Konfabul..

cmd 창을 관리자 권한으로 실행한다. 시작 net start mariadb종료 net stop mariadb

구조 WAS ㄴWeb Server ㄴWeb Container Web Server 웹브라우저로부터 HTTP 요청을 받아 정적인 컨텐츠를 제공 ex)html, jpg, css, js 정적인 컨텐츠는 WAS를 거치지 않고 바로 제공 동적인 컨텐츠는 요청(Request)을 WAS에 전달하고, WAS가 처리한 결과를 웹브라우저에게 응답(Response)한다. 예) Apache Server, Nginx, IIS WAS; Web Application Server Web Application Server = Web Server + Web Container 동적인 컨텐츠를 제공하기 위해 만들어진 Application Server. 예) 로직 처리, DB 접근 WAS는 Web Container 혹은 Servlet Cont..

배열 선언 //배열 선언 let arr = [1, 2, 3, "hello", null, true, []]; 배열 길이 //배열의 길이 arr.length; //결과:7 원소 추가 //배열 원소 추가 arr[2] = 99; //[ 1, 2, 99, 'hello', null, true, [] ] arr.push(3); //[ 1, 2, 99, 'hello', null, true, [], 3 ] 배열과 관련된 함수들 //indexOf(): 배열에 특정 값이 있는지 확인 arr.indexOf(99); //2 //join(): 배열을 문자열로 반환 arr.join(); //1,2,99,hello,,true,,3 arr.join(''); //1299hellotrue3 ar..

appendChild(노드) 자식 노드의 뒤에 노드가 삽입됨. 소스코드 let el = document.getElementById('form'); let input = document.getElementById('param1'); el.appendChild(input); 결과 insertBefore(노드, 기준 노드) 기준 노드의 앞에 노드가 삽입됨. 소스코드 let el = document.getElementById('form'); let input = document.getElementById('param1'); el.insertBefore(input, el.childNodes[4]); // el.childNodes[4] 앞에 input이 삽입..

parentElement 부모 element를 가져온다. parentNode 부모 element를 가져온다. 소스코드 button let el = document.getElementById('param1').parentElement; console.log(el); let el2 = document.getElementById('param1').parentNode; console.log(el2); 결과 차이점 parentElement: 부모 element 노드를 반환. 부모 element 노드가 더이상 없을 경우 null 반환한다. parentNode: 종류에 상관없이 부모 노드를 반환. parentElement는 까지 거슬러 올라가고, document까지 가고 싶지 않을 때 사..

querySelector('.클래스명') HTML에서 해당 클래스명를 사용하는 첫번째 요소를 찾음. getElementById('id') HTML에서 해당 id를 가지고 있는 요소를 찾음 소스코드 button let el = document.getElementById('param1'); let el2 = document.querySelector('.param'); console.log("document.getElementById('param1') : ", el); console.log("document.querySelector('param') : ", el2); 결과 참조 https://www.w3schools.com/..