...끄적끄적... var는 더 이상 지양해야한다. let 함수 스코프로 함수 내에서만 유효 유동적인 값 const 한번 선언 후 고정 재할당이 안됨. let을 보완.' 전역 스코프 (global scope) 변수가 함수 바깥이나 중괄호 바깥에 선언되면 전역 스코프로 소스 코드 모든 곳에서 해당 변수를 사용할 수 있습니다. 심지어 함수 내에서도... (전역 변수 == 독약) ( 전역 스코프는 프로그램을 쉽게 만드는 유혹이 있습니다. 프로젝트가 좀만 커지면 전역 변수는 독약!!! 소스코드 모든 부분에서 전역 변수를 건드릴 수 있기 때문에 버그 발생 시 어떤 변수를 건드렸는 지 찾기 힘들어집니다. ) 지역 스코프(local scope) 코드의 특정 부분에서만 사용할 수 있는 변수. JS에서는 함수 스코프/ ..

핵심 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(..

웹 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의 장점 페이지 이동없이 고속으로 ..

for(value in values){ console.log(valuse[value]); } * JS에서 Array로 데이터를 담는 것 외에 이름으로 데이터를 담을 때 Object를 사용하게된다 key / value로 이루어진 자료구조다 Object형태는 {}로 자료를 표현하고, ServerClient 간 데이터 교환 시 Object포맷과 비슷한 방법으로 데이터를 보낸다 (JSON포맷으로 통신을 많이 한다) 데이터의 index 순서대로 저장하고 싶을 때 -> Array 어떠한 key값을 기반으로 동작하는 자료구조 -> Object Object선언 var obj = {name: "Paul", age: 27} console.log(obj.name); // output: Paul consol.log(obj["..