싱글벙글 개발일기

오늘은 브라우저 개발자 도구 Console 에 대해서 알아보는 시간이다. F12 를 누른 뒤에 Console 탭을 클릭하거나, Ctrl + Shift + J 단축키를 사용하여 콘솔창을 열 수 있다. Console 창에서 가장 먼저 쉽게 할 수 있는 부분의 하단의 Console창에서 JavaScript 코드를 입력하고 실행할 수 있다. 변수를 선언하거나, document 객체를 통해서 웹 페이지의 DOM에 접근하여 조작하거나, $0, $1, $2, $3, $4, $_, $(), $$() 등을 이용해서 DOM 요소를 선택할 수도 있다! $0 ~ $4 : 마지막으로 불러왔던 요소를 가져올 수 있다. (Elements 에서 선택한 요소도 포함한다.) $() 와 $$() : CSS선택자를 사용하여 요소를 선택할 ..

Elements DOM 요소 파해치기 - 로딩된 웹페이지의 DOM과 CSS를 편집해서 렌더링된 뷰를 확인할 수 있다. 웹 요소에서 우클릭을 누른 후 검사 메뉴를 클릭해도 해당 요소의 DOM 노드를 확인할 수 있다. - 찾고싶은 DOM 요소를 찾기 위해서 검색 기능을 사용할 수 있다. (Ctrl + F 혹은 Command + F) - 돔 요소를 수정해볼 수 있습니다. 수정된 내용은 브라우저에서 수정된 대로 렌더링 됩니다. (내용 뿐만 아니라, 속성, 노드 타입 또한 수정이 가능함) - 특정 노드의 상태를 강제할 수 있습니다. (상태를 변경할 노드를 우클릭한 뒤 Force State를 통해 설정 가능하다, 이 기능을 이용해서 hover 등의 상태일 때를 마우스를 올리지 않고도 확인할 수 있다) - 이건 나도..

자바스크립트 실행 환경 모든 브라우저는 자바스크립트를 해석, 실행할 수 있는 자바스크립트 엔진이 있다. Node.js 또한 자바스크립트 엔진을 내장하고 있다. 브라우저의 목표는 HTML, CSS, Javascript를 실행하여 화면을 렌더링하는 것. Node.js 는 브라우저 환경이 아닌 곳에서 Javascript 개발 환경을 제공하는것이 목적이라, 브라우저의 Javascript와는 다르게 DOM Api를 제공하지 않는다. 대신 파일을 생성하고 수정할 수 있는 파일 시스템을 제공한다. 브라우저는 이러한 파일 시스템을 제공하지 않는다. 제공하면 브라우저의 Javascript가 사용자의 컴퓨터에 있는 파일들을 삭제하거나 수정하게 될 수 있으니까. 웹 브라우저 다양한 웹 브라우저들이 있다. 구글 크롬, 파이어..

자바스크립트의 탄생과 표준화: 브랜던 아이크(Brendan Eich)가 1995년 넷스케이프 브라우저에 처음 구현한 스크립트 언어로, ECMAScript 표준으로 정의되어 널리 사용됨. 자바스크립트의 성장과 역사: Ajax 기술의 등장으로 웹 애플리케이션 개발 환경이 확장되었으며 (비동기 통신), jQuery 라이브러리가 도입되어 DOM 조작이 용이해지며, V8 JavaScript 엔진의 등장으로 성능이 크게 향상됨. Node.js와 SPA 프레임워크(혹은 라이브러리): Node.js는 자바스크립트를 서버 사이드에서 사용할 수 있게 해주는 환경으로 대규모 웹 애플리케이션 개발에 기여함. SPA 프레임워크(혹은 라이브러리)는 단일 페이지 애플리케이션을 구축하는데 도움을 주는 기술. 자바스크립트와 ECMA스..

프로그래밍이란 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션. 요구사항을 분석하고 적절하게 문제 해결 방안을 정의하는것이 중요하다. 문제 해결을 위하여 필요한것은 Computational thinking(컴퓨팅 사고)이다. 프로그래밍이란 복잡하며 명확하지 않을 수 있는 문제(요구 사항)을 정확히 이해하고 복잡한 것을 단순한 것으로 분해하고, 자료를 정리하고 구분하며, 순서에 맞게 행위를 나열하는 것이다. 이를 위해서 우리는 변수와 값, 키워드, 연산자, 표현식, 표현문, 조건문, 반복문, 흐름제어, 함수, 객체, 배열 등을 사용하여 프로그램을 만든다. 그리고 우리들은, JavaScript를 사용하여 프로그램을 짜게 되는데, 이에 관련된 내용은 2장에서 작성하도록 하겠습니다.