Inversion of Control / Dependency Injection Dependency Injection은 Inversion of Control 원칙을 구현하기 위한 방법. (IoC=DI) 컨테이너가 코드 대신 오브젝트의 제어권을 갖고 있어 IoC(제어의 역전)이라 한다. 개발자가 만든 어떤 클래스나 메소드를 다른 프로그램이 대신 실행해주는 개념. 누군가가 Bean을 넣어주면 사용자는 활용만 할 뿐 그것이 무엇인지 모른다. POJO와 설정(Configuration Metadata)을 등록하고 IoC/DI Container에 주입시키면 Bean을 생성(인스턴스화)한다. 이 과정을 Dependency Injection 혹은 Inversion of Control이라 할 수 있다. Spring에서 제..
방법1 - applicationContext.xml에서 등록하는 방법 maven 프로젝트 구조에서 src/main/resources/applicationContext.xml 파일을 생성하여 bean을 등록 및 관리할 수 있다. ㄴsrc ㄴmain ㄴjava : 자바 패키지 폴더와 소스 코드가 위치함. ㄴresources : *.properties, *.xml 등 설정파일들이 위치함. ㄴwebapp : WEB-INF와 웹 관련 리소스(html, jsp)들이 위치함. ㄴtest ㄴjava : 테스트와 관련된 자바 패키지와 소스코드가 위치함. ㄴresources : 테스트와 관련된 설정파일이 위치함. ㄴtarget : 컴파일, 패키징된 결과물이 위치함. ㄴpom.xml : Maven 설정 파일 public c..
프레임워크 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..
버블링(Bubbling)과 Event delegation
버블링이란? 클릭한 지점이 하위 엘리먼트라고 하여도, 그것을 감싸고 있는 상위 엘리먼트까지 올라가면서 이벤트 리스너가 있는지 찾는 과정 설명 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..
구조 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..
