프레임워크(Framework) 프레임워크는 어떤 완제품이 아닌 반제품으로, 내가 반제품을 이용해서 내가 원하는 애플리케이션을 만들 수 있습니다. 프레임워크는 라이브러리는 기본으로 들어가고 그것들을 돌아가는 환경입니다. 프레임워크의 약속들을 따르면서 개발을 하고, 자원의 소모가 크니 잘 알고 써야합니다. Spring Framework - Enterprise급 애플리케이션을 구축할 수 있는 솔루션. - 원하는 부분만 가져와 사용할 수 있도록 모듈화. - IoC 컨테이너 - 선언적 트랜잭션을 관리할 수 있음 - 완전한 기능을 갖춘 MVC 프레임워크를 제공 - AOP 지원 - 도메인 논리 코드와 쉽게 분리될 수 있는 구조 Framework 모듈 스프링 프레임워크는 20개 정도의 모듈로 구성되어 있습니다 필요한 ..

핵심 HTML Templating? String의 replace() Ajax로 데이터를 서버에서 받아와 화면에 뿌려줄 상황을 생각해봅시다. JSON포맷으로 데이터를 받고 SNS댓글을 여러 사람들이 달면 차곡차곡 댓글이 아래로 쌓입니다. 그런 것들이 html태그를 차곡차곡 쌓아주게 됩니다. 여기에 templating이라는 개념을 도입하면 좋습니다. templating HTML이 반복되는 부분은 template로 만들고, 서버에서 받은 데이터(보통 JSON포맷)을 결합해 화면에 추가하는 작업입니다. HTML과 데이터(JSON)를 섞어서 웹 화면에 어떤 변화를 주는 것. 보통 이런 Templating작업은 Client에서만 하는 게 아니라 서버에서 데이터를 조회 후 그 내용들을 동적으로 HTML을 만들어서 보..

ul > li 로 list를 만들어서 각각의 list에 이벤트를 걸어준다면 어떻게 할까? 아마 처음에 든 생각은 "for문 돌리면 되는 거 아냐?"였습니다. 그런데 list가 100개라 치면, 그 100개 모두 이벤트 핸들러를 바인딩하면...실행 속도도 느려지고 브라우저에 넘길 일이 많아집니다. 만약 일일히 다 작성하면 코드 또한 많아지고 지저분해 질 수 있습니다. 또, 동적으로 list가 추가 된다면 추가되기 전 DOM에는 존재하지 않는 element므로 이벤트 핸들러를 바인딩 할 수 없습니다. -->이런 경우 이벤트 위임(event delegation)을 사용하면 더할 나위 없습니다. delegation.html delegation.js const log = document.querySelector(..

JavaScript의 setTimeout, requestAnimationframe 을 이용해서 JS에서 애니메이션을 주었었는데 사실 CSS로 하면 훨씬 간편하고 간단한 애니메이션을 구현할 수 있습니다. (좋은 성능은 덤:) CSS3에서 traisition을 활용하면 부드러운 UX를 제공합니다. 이 방법이 JavaScript로 구현하는 것보다 더 빠르다고 알려져 있고 특히 모바일 웹에서 큰 힘을 발휘하여 transform을 사용해서 element 조작을 많이 구현합니다. CSS3 애니메이션 관련 속성들 GPU가속을 이용하는 속성을 사용해서 더 빠른 애니메이션 처리를 할 수 있습니다. transform : translateXX(); ex) translate(20px, 30px); - x축으로 20px, y축..

웹 UI에 애미메이션 처리 CSS - transition, transform속성으로 대부분 구현 가능합니다. - JS보다 더 빠른 성능을 자랑합니다. - 모바일 웹에서는 CSS를 사용하는 게 더 빠릅니다. - 간단하고 규칙적인 애니메이션은 CSS로 보통 구현합니다. JavaScript - setTimeout()같은 메소드를 이용해 구현합니다. - 세밀한 조작이 필요할 때는 JS로 구현해야할 필요도 있다. => 성능을 통해서는 대체로 CSS로 변경하는 게 빠르지만 적절하게 선택해서 애니메이션 처리 방을 찾는 과정이 필요할 것 같습니다 FPS (frame per second)? FPS는 초당 화면에 표현할 수 있는 정지화면(frame)입니다. 보통 매끄러운 애니메이션은 60fps입니다. (1초에 60프레임...

Ajax Ajax를 통해서 우리는 비동기적으로 서버와 통신할 수 있습니다. 즉 어떤 액션이 있을 때마다 계속 새로고침(로딩)하지 않고 그 액션의 부분만 갱신할 수 있습니다. 상황을 하나 얘기해보자면, 네이버TV로 웹드라마를 재밌게 보고 있는데 밑에 댓글창에 댓글을 달려고 합니다. 그런데 비동기적으로 통신이 안되면 댓글 작성 후 등록 버튼을 누르면 서버에 요청이가고 그 처리한 후 새로운 데이터를 클라이언트로 전송합니다. 그러면 브라우저는 새로고침이 되고 보던 영상은 끊깁니다. 슬프게도 다시 광고를 봐야할 수도 있습니다. 하지만 Ajax로 댓글 부분만 비동기적으로 갱신하면 댓글 부분만 업데이트 할 수 있게되고 웹페이지 전체를 새로고침 안하고 영상을 볼 수 있습니다. Ajax의 장점 페이지 이동없이 고속으로 ..