벨로그 이사하며 몇 개 없는 글 정리!
html과 클론코딩만 아주 조금 다뤄보았기에, 종강 이후 부트캠프 개강 전까지 혼자 자바 스크립트 공부를 해야 수업을 따라갈 수 있을 것 같다는 생각이 들었다.
비전공자이자 초심자 입장에서 사실 어떤 것으로 공부를 해야할지도 감이 안 잡혀 무작정 딥다이브를 주문했다.
개인적으로 어려운 한 권을 여러번 제대로 독파하는 '수학의 정석'식 공부를 좋아하고 딥다이브 시리즈는 표지가 너무너무 설레게 생겼다!!
책을 사는 것만으로 심장이 쿵쾅쿵쾅하는 느낌
속도를 신경쓰지 말고 차근차근 밟아가는 공부를 하자 그러다보면 속도는 붙게 되어있다
1장 프로그래밍
- 프로그래밍은 컴퓨터와의 소통 과정
- 문제(요구사항)을 이해하고 / 문제해결능력을 통해 / 문제 해결방안을 정의
- 컴퓨터 =/= 인간의 언어
컴퓨터가 사용하는 언어로 상세하게 요구사항을 설명해는데, 그 작업의 결과물이 코드 - 이때 필요한 것이 컴퓨팅사고
- 프로그래밍 언어(인간이 사용) -> 컴파일러, 인터프리터(번역기) -> 기계어(컴퓨터가 이해)
2장 자바스크립트란?
1) 자바스크립트의 탄생
- 브렌던 아이크가 웹페이지의 보조적 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍언어를 만든 것이 지금의 자바스크립트가 됨
2) 자바스크립트의 표준화
- 크로스 브라우징 이슈가 발생했고 표준화된 자바스크립트의 필요성이 대두
- 표준화된 자바스크립트의 이름은 ECMAScript
3) 자바스크립트 성장의 역사
- 초창기에는 웹페이지의 보조적인 기능 정도를 수행하는 역할
(서버로부터 전달받은 HTMl, CSS 단순 렌더링 정도)
Ajax
- Ajax는 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능
- 이전에는 html태그로 시작해서 끝나는 완전한 코드를 전송받아 웹페이지 전체를 렌더링했으나, Ajax의 등장 이후에는 서버로부터 필요한 데이터만 전송받아 변경해야하는 부분만 한정적으로 렌더링
비동기방식: 병렬적으로 일을 처리, 하나의 요청이 들어왔을 때 그것을 처리하는 것이 아니라, 계속 요청을 받고 작업이 끝났다는 이벤트가 오면 해당 요청을 처리.
jQuery
- DOM을 더욱 쉽게 제어할 수 있고 크로스 브라우징 이슈 어느정도 해결
- 이로 인해 자바스크립트보다 직관적인 jQuery를 선호하는 개발자가 양산되기도 했음
DOM(Document Object Model): 웹 페이지에 대한 인터페이스
(1)뷰 포트에 무엇을 렌더링 할지 결정하기 위해 사용되며, 페이지의 콘텐츠 및 구조, 스타일이 자바스크립트 프로그램에 의해 수정되기 위해 사용됨
V8 자바스크립트 엔진
- V8 자바스크립트 엔진의 등장으로 자바스크립트는 데스크톱 애플리케이션과 유사한 UX를 제공할 수 있는 웹 애플리케이션 프로그래밍 언어가 됨
Node.js
- 구글 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경
- 자바스크립트를 브라우저 이외의 환경에서도 동작할 수 있도록, 자바스크립트 엔진을 브라우저에서 독립시킨 자바스크립트 실행 환경
SPA 프레임워크
- 모던 웹 애플리케이션은 개발 규모와 복잡도가 상승하며, 프레임워크가 등장
- 이러한 요구로 CBD방법론을 기반으로 하는 SPA가 대중화되며 Angulat, React, Vue.js, Svelte 등 다양한 SPA 프레임워크/라이브러리가 사용되고 있음
4) 자바스크립트와 ECMAScript
- ECMAScript는 자바스크립트의 표준 사양인 ECMA - 262
- 핵심 문법을 규정(프로그래밍 언어의 값, 타입, 객체와 프로퍼티, 함수, 표준 빌트인 객체 등)
5) 자바스크립트의 특징
- 웹 브라우저에서 동작하는 유일한 프로그래밍 언어
- 인터프리터 언어(개발자가 별도의 컴파일 작업을 수행할 필요 없음)
- 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어
3장 자바스크립트 개발 환경과 실행 방법
1) 자바스크립트 실행 환경
- 모든 브라우저/Node.js에서 가능
- 주의할 점은 둘의 용도가 다르다는 것
브라우저의 목적은 웹페이지를 브라우저 화면에 렌더링하는 것
Node.js의 목적은 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것
2) 웹 브라우저
개발자도구
- Mac용 단축키 command + option + I
- 상세기능
element - 로딩된 웹페이지의 DOM과 CSS를 편집해서 렌더링된 뷰 확인가능
console - 로딩된 웹페이지의 에러 확인 or 소스코드에 작성한 console.log메서드의 실행 결과 확인
sources - 로딩된 웹페이지의 자바스크립트 코드 디버깅 가능
Network - 로딩된 웹페이지에 관련된 네트워크 요청 정보와 성능 알 수 있음
Applicaion - 웹 스토리지, 세션, 쿠키를 확인하고 관리할 수 있음
3) Node.js
- 프로젝트 규모가 커질 때 Node.js 혹은 npm 필요함
- Node.js: 자바스크립트 런타임 환경, 자바스크립트를 브라우저 이외의 환경에서 동작시킬 때 필요
npm: 자바스크립트 패키지 매니, Node.js에서 사용할 수 있는 모듈들을 패키지화해서 모아둔 저장소 역할, 패키지 설치 및 관리를 위한 CLI 제공
4) 비주얼 스튜디오 코드
- 코드에디터
- 내장 스튜디오 여는 Mac용 단축키 control + `(벡터)
code runner 확장 플러그인
- 클라이언트 사이드 Web API는 Node.js환경에서 실행할 수 없음
노트북이 좋아