Progamming/BoostCourse80 Spring IoC/DI 컨테이너 들어가기 전에이번 시간에는 스프링 프레임워크의 핵심 개념 중의 하나인 IoC와 DI에 대해 학습하도록 하겠다. 학습 목표1. 컨테이너에 대한 개념을 이해한다.2. IoC에 대한 개념을 이해한다.3. DI에 대한 개념을 이해한다. 핵심 개념- Container- IoC (Inversion of Control)- DI (Dependency Injection) 컨테이너(Container)- 컨테이너는 인스턴스의 생명주기를 관리하며, 생성된 인스턴스에게 추가적인 기능을 제공한다. · 인스턴스를 직접 생성해서 실행하고, 소멸되는 작업들을 직접 하지않고 누군가 대신 해주는 것· 예를 들어, Servlet을 실행해주는 WAS(Tomcat)는 Servlet 컨테이너를 가지고 있다고 한다. WAS는 웹 브라우저로부터 서.. 2019. 3. 13. Spring이란? 들어가기 전에이번 시간에는 Spring Framework가 무엇인지, 그리고 Spring Framework를 구성하고 있는 모듈에는 어떠한 것들이 있는지 알아보도록 하자 학습 목표1. Spring Framework가 무엇인지 이해한다.2. Spring Framework에는 어떤 모듈들이 있는지 이해한다. 핵심 개념- Spring Framework- Spring Framework Modules Framework- 이미 만들어져 있는 반제품 역할- 프로그래밍에서 이미 중요한 부분, 어려운 부분, 복잡한 부분 이런 것들은 미리 구현되어있음 Spring Framework- 엔터프라이즈 급(굉장히 큰) 어플리케이션을 구축할 수 있는 가벼운 솔루션이자, 원스-스탑-숍(One-Stop-Shop)· One-Stop-S.. 2019. 3. 13. Tap UI에 생명 불어넣기 들어가기 전에Tab이 실제로 동작하는 데 필요한 JavaScript 코드는 어떤 것일까? 지금까지 배운 내용을 가지고 간단하게 실습을 한번 해보자. 학습 목표1. Tab UI가 동작하도록 JavaScript 코딩을 할 수 있다. 핵심 개념- Tab UI Component Tab UI에 필요한 기능- Tab 메뉴를 누르면 Ajax를 통해 데이터를 가져온 후, 그 내용이 화면에 노출- 다른 Tab 메뉴를 누르면 역시 동일하게 Ajax를 통해서 데이터를 가져온 후, 그 내용이 화면에 노출- 화면에 노출하기 위해서는 HTML 코드를 가져오고, 서버에서 받은 HTML Templating 작업을 해야한다.- 화면에 추가하기 위해서 DOM API를 사용한다. 실습 코드- https://gist.github.com/n.. 2019. 2. 12. Tab UI를 만들기 위한 HTML과 CSS 구조 전략 들어가기 전에Tab은 자주 사용되는 UI 중 하나이다. 많은 컨텐츠를 효과적으로 보여줄 수 있기 때문이다. 이를 어떻게 구현할 수 있는지 먼저 고민해보고 시작하면 좋겠다. 학습 목표1. Tab UI의 구조와 스타일을 결정할 수 있다. 핵심 개념- Tab UI Component 간단한 Tab UI 실습코드- https://jsbin.com/niweqikipi/1/edit?html,css,output 2019. 2. 12. HTML templating 실습 들어가기 전에HTML Templating 작업을 하기 위해서는 Ajax로 데이터를 가져오는 방법도 필요하고, 또 한가지 template를 어딘가 보관해야 할 것이다. 몇 가지 방법이 있겠지만, 간단한 방법을 알아보자. 학습 목표1. HTML Templating 처리 작업을 할 수 있다. 핵심 개념- HTML Templating 작업의 이해 HTML Template의 보관- 아래와 같은 html 문자열을 어딘가 보관해야 한다. JavaScript 코드 안에서 이런 정적인 데이터를 보관하는 것은 좋지 않기 때문이다.var html = "{title}{content}{price}";cs· 서버에서 file로 보관하고 Ajax로 요청해서 받아온다.· HTML 코드 안에 숨겨둔다- 간단한 것이라면 HTML 안에 .. 2019. 2. 12. HTML templationg 들어가기 전에서버로부터 받은 데이터를 화면에 반영해야하는 경우가 많이 있다. 그런데 HTML 형태는 그대로이고, 데이터만 변경되는 경우가 있을텐데, 그럴 경우에는 어떻게 처리하는게 효율적일지 알아보자. 학습 목표1. HTML Templating이 무엇이고, 어떻게 구현해야 하는지 이해한다. 핵심 개념- HTML Templating이란?- String의 replace HTML Templating- 비슷한 내용의 리스트들을 templating이라는 개념을 도입하여 표현하는 것이 효율적- HTML과 데이터를 섞어서 웹 화면에 어떤 변경을 주는 것- 포맷, 어떤 양식 HTML Templating 작업이란?반복적인 HTML 부분을 template로 만들어두고, 서버에서 온 데이터(주로 JSON)을 결합해서 화면에.. 2019. 2. 12. Event delegation 들어가기 전에list(어떤 목록)가 여러 개인 UI에 각각 비슷한 이벤트를 걸어서 처리해야 한다면 어떻게 해야할까? for문으로 addEventListener를 사용해야 할까? 학습 목표1. Event delegation을 이해하고, 효율적인 이벤트 등록을 구현할 수 있다. 핵심 개념- Event delegation- Bubbling- Capturing Bubbling- 클릭한 지점이 하위 엘리먼트라고 하여도, 그것을 감싸고있는 상위 엘리먼트까지 올라가면서 이벤트 리스너가 있는지 찾는 과정 Event delegation- 하위 태그에 발생해야 될 이벤트를 상위 부모에 위임 2019. 2. 12. DOMContentLoaded 이벤트 들어가기 전에로딩 이후에 자바스크립트 동작이 이루어지는 것이 일반적이다. 자바스크립트가 실행되어야할 가장 적절한 타이밍은 언제일까? 학습 목표1. DOMContentLoaded 이벤트를 이해한다.2. Load와의 차이점을 이해한다. 핵심 개념- DOMContentLoaded load와 DOMContentLoaded의 차이 확인크롬 개발자도구의 Netwrok panel을 열어서 하단의 DOMContentLoaded, load를 확인해보자. DOM Tree 분석이 끝나면 DOMContentLoaded 이벤트가 발생하며, 그 외 모든 자원이 다 받아져 브라우저에 렌더링(화면 표시)까지 다 끝난 시점에는 Load가 발생한다. 이를 이해하고 필요한 시점에 두 개의 이벤트를 사용해서 자바스크립트 실행을 할 수 있다.. 2019. 2. 12. 서비스 개발을 위한 디렉토리 구성 들어가기 전에서비스를 개발할 때 JavaScript 코드가 많아지면 어떻게 보관하고 관리해야 하는지 잘 모를 때가 있다. 소스코드상에서도 많아진 JavaScript 코드를 어떻게 표현해야할지도 고민이다. 학습 목표1. 웹 브라우저 렌더링에 필요한 JavaScript와 CSS파일의 구성방법을 이해한다. 핵심 개념- 개발환경 구성- 브라우저에서 동작가능하도록 JavaScript와 CSS 소스코드 위치시키기 디렉토리 구성(환경 설정)- 예를 들어 HTML, CSS, JavaScript 파일을 여러개 만들고, 그것들을 서로 HTML 기반으로 CSS와 JavaScript를 불러 동작되게 함 CSS- 보통 HTML 상단의 head 태그 안에 위치- DOM을 렌더링하기 위해 미리 CSS 파일을 로딩해야되기 때문 Ja.. 2019. 2. 12. 이전 1 2 3 4 5 ··· 9 다음
