Today I Learned. @cheers_hena 치얼스헤나

querySelectorAll element의 자식 요소 중 주어진 CSS 선택자에 대응하는 모든 요소 반환. querySelector(css) 주어진 css선택자에 대응하는 요소 중 첫번째 요소 반환 후 검색 종료. closest element.closest(css) 요소 자신을 포함하여 css 선택자와 일치하는 가장 가까운 조상 요소 검색. 해당 요소부터 시작해 DOM트리를 한 단계씩 거슬러 올라가면서 원하는 요소 반환. 1장 2장

WebSquare Script 코딩 주요 객체 살펴보기 1. 브라우저 Browser에서 제공하는 객체. document, window 등 ex) window.open('http://'); 2. 사용자 정의 개발자가 script블록 또는 js파일에 정의한 변수, 함수, 객체. ex) var userName = "WebSquare"; function getUserName( ){ return userName; } var info = { name : "WebSquare", city : "Seoul" }; var common = { isNumber : function(tmpVal){ return Number(tmpVal); } }; 3. WebSquare WebSquare에서 제공하는 객체. 전역 공간에 정의되기..

WebSquare의 Data Model 영역 1. Data Collection 데이터 컬렉션 데이터 객체 정의 영역 서버통신 위한 request, response 데이터와 화면에서 사용할 데이터 정의 데이터 객체 타입: - DataMap - DataList - LinkedDataList - AliasDataMap - AliasDataList 가 있음 화면) 소스 ) dataList . . 화면 예시) 소스 ) dataMap . . 2. Submission 서브미션 서버 통신을 위한 인터페이스. 통신 비동기/동기 방식 선택 : mode속성의 asynchronous/ synchronous 통신 실행 전/후에 실행할 함수 이벤트를 정의 request 데이터는 reference 속성에 정의된 데이터 객체의 정보..

웹스퀘어 Web Square 란? 웹 표준을 준수한 UI프레임워크로 UI컴포넌트와 Util API, 통합 개발 도구 제공하는 솔루션이라고 한다. 쉽게 말해 프론트 화면 개발 툴이다. 프론트개발을 그켬하는 백엔드 개발자인 나에게는 신세계일 따름... 마치 대딩 때 처음 접했던 자바 스윙 업그레이드 버젼 같기도 하고..; 디자인 탭에서 화면을 미리 볼 수 있는데 PPT에서 개체 추가 해주듯이 만들고자 하는 요소들을 추가하고, 속성에서 ID 지정 등 데이터를 입력한 뒤, Source 탭에 들어가보면 방금 마우스로 끄적거린 작업들이 HTML/JS 소스로 완성되어있다. WOW .... 화면 노가다를 해야하는 수고는 확실히 덜어주기는 하지만 디자인 등이 정형화 되어있고 모든 문법이 websquare에 종속되어 있어..

Vuejs란? 대화형 웹 프론트엔드를 쉽게 구축할 수 있게 하는 Javascript 프레임 워크. UI를 빠르게 개발하기 위해서 만들어진 자바스크립트 프레임워크. MVVC (Model-View-ViewModel) 패턴을 따르며, 어플리케이션 로직과 UI 의 분리를 위해 설계되었다. Angular.js나 React.js보다 많이 알려지지 않았지만 급속도로 확산하고 있다. 뷰 View : 사용자에게 보이는 화면 돔 Dom: HTML 요소(태그, 클래스, 속성 ..) 의 정보를 담고 있는 데이터 트리 돔 리스너 Dom Listener: 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치 모델 Model: 데이터를 담는 용기. 보통은 서버에서 가져온 데이터를 자바스크립트 객체형태로 저장. 데이..