모던 자바스크립트 1장~4장

리액트를 살짝, 앵귤러를 많이 접하고나서 느낀점은 '기본기의 부족' 이였다. 성격상 모든걸 완벽하게 마치고 다음 단계로 나아가고 싶지만 js, html, css를 완벽하게 깨우치고 웹 프레임워크를 배운다는건 말도 안되는 얘기라는 것도 깨달았다. 두번 째는 기억력의 한계이다. 내 뇌용량은 한계가 있고 개발자의 세계는 너무나도 깊다는 것을 깨닳았다. 분명 기초적인 css, js지식임에도 구글링을 해야하고 이제는 내 머리를 믿지 않고 내 몸이 기억해야한다. 손이 기억하고 나중에 한번 더 보고 눈이 기억하도록... 

간단한 문법서(?)지만 바이블이라는 얘기도 들었고 명칭은 정확히 기억나지 않지만 다른 주니어 개발자분이 매주 블로그에 책을 읽고 정리해 놓는것이 기억나서 이렇게 시작해본다. 여태껏 딱딱한 말투로 정보만 적어두고 말았는데 이렇게 퇴근 후 생각을 정리하면서 글을 적는 것도 나름 유익할 것 같았다.

 

1장 프로그래밍이란?

사실 이 부분은 어떤 책을 읽어도 비슷했을 것이다. 다행히도? 내가 여러 책을 끝까지 안본 덕분에 초반부는 쉽게 쉽게 이해하고 넘어간다. 프로그래밍은 정확하고 상세하게 요구사항을 설명하는 작업이며 기계어로 직접 명령을 전달하는 것을 대신하는 것이 '프로그래밍 언어' 이며 이것을 기계어로 번역해주는 것이 '컴파일러'이다.

 

마지막으로 프로그래밍의 목적은 '문제 해결'이라는 것을 기억하자.

나는 요즘 문제해결이 아니라 문법외우기에 집중하는 것 같기도 한데 본질을 잘 깨우치고 있어야겠다.

문제 ---문제 해결능력---> 해결방안 ---문법/의미---> 코드

 

 

 

2장 자바스크립트

 

Ajax 

자바스크립트를 이용해 서버와 브라우저가 비동기(asynchronous)방식으로 데이터를 교환할 수 있는 통신 기능이다.

이는 전체를 렌더링하는 방식에서 필요한 부분만 한정적으로 렌더링 하는 방식을 가능하게 했다.

 

JQuery는 넘어가야겠고..

 

SPA프레임워크

Single Page Application의 약자로 유연하면서 확장하기 쉬운 애플리케이션을 구현하기위해 등장.

CBD(Component Based Development)방법론을 기반으로 한다.

여기선 설명이 적어서 아래는 더 공부해서 추가한 내용이다.

웹사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것이 SPA이다. 최소환의 요소 변경이 일어나며 페이지 변경이 일어나는 것 또한 최초 로드된 자바스크립트를 통해 미리 브라우저에 올라간 템플릿만 교체되는 것이다.

 

3장 자바스크립트 개발환경과 실행 방법

 

개발자 도구

 

Elements : 로딩된 웹 페이지의 DOM과 CSS를 편집해서 렌더링된 뷰를 확인해볼 수 있다. 웹페이지가 의도된 대로 렌더링 되지 않았다면 힌트를 얻을 수 있다 (HTML과 CSS확인가능)

Console : 말그대로 console.log 메서드의 실행결과를 확인할 수 있으며 에러 확인이 가능

Source : 로딩된 웹페이즈이 자바스크립트 코드를 디버깅할 수 있다. 

Network: 로딩된 웹 페이지에 관련된 네트워크 요청(request)정보와 성능을 알 수 있다. 발생한 api를 확인할 수 있다.

Application : 웹스토리지, 세션, 쿠키를 확인하고 관리할 수 있다.

 

Node.js

라이브러리나 프레임워크를 도입하거나 Bable, Webpack등 여러가지 도구를 사용하기 위해 사용

npm은 node package manager로 Node.js에서 사용할 수 있는 모듈들을 패키지화해서 모아둔 저장소 역할과 패키지 설치 관리를 위한 CLI를 제공한다. 

 

https://poiemaweb.com/nodejs-npm 

이 주소를 들어가보니 내가 알고 싶은 부분을 더 자세하게 설명해준다. 

 

모듈이란? 

애플리케이션을 구성하는 개별적 요소를 말한다. 일반적으로 파일단위로 기능별로 분리되어 있으며 필요에 따라 애플리케이션은 명시적으로 모듈을 로드한다. 

npm install [package name]  
//Node.js에서 사용할 수 있는 모듈인 패키지를 설치할 때 사용

npm init
//package.json을 생성해주는 명령어  
//package.json은 npm을 통해 설치된 패키지 목록을 관리하고
//프로젝트의 정보 및 기타 실행 스크립트를 작성하는 파일이다.

 npm install
 //package.json의 모든 패키지 설치

(이 두가지는 매일 같이쓰면서도 이번에 공부하면서 알았다는게 쪽팔리고.. 반성하게 된다 하지만! 이렇게 반성해나가며 이 책을 1회독 했을 때 이 글을 보면 굉장히 뿌듯할 것 같다.)

 

전역설치와 지역설치 

npm install 명령어에는 지역설치와 전역설치 옵션이 있다. 프로젝트 루트 디렉터리에 node_modules 디렉토리가 자동 생성되고 그 안에 패키지가 설치된다. 지역으로 설치된 패기지는 해당 프로젝트 내에서만 사용할 수 있다.

 

전역으로 설치하려면 npm install -g [package] 명령어를 사용한다. 전역으로 설치된 패키지는 전역에서 참조할 수 있다. 모든 프로젝트가 공통 사용하는 패키지는 지역으로 설치하지 않고 전역에 설치한다.

 

package.json

 - dependencies 항목에는 해당 프로젝트가 의존하는 패키지들의 이름과 버전을 명시한다. 여기서 의존하는 패키지란 해당 프로젝트에서 참조하는 모듈을 의미한다.

 

 - devDependencies 에는 개발시에만 사용하는 개발용 의존 패키지를 명시한다. 예를 들어 TypeScript와 같은 트랜스 파일러는 개발단계에서만 필요하고 배포할 필요 없으므로 이곳에 포함시킨다. 

 

4장 변수

 

변수 선언의 실행 시점과 변수 호이스팅

console.log(score); //undefined
var score;

위 코드는 참조오류가 날 것 같지만 undefined가 출력된다. 그 이유는 변수 선언이 소스코드가 한줄 씩 순차적으로 실행되는 시점, 즉 런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문이다. 

 

자바스크립트 엔진은 소스코드를 실행하기 앞서 평가 과정을 거치면서 준비하는데 이때 변수 선언을 포함한 모든 선언문을 먼저 실행하므로 변수선언이 소스코드의 어디에 있든 상관없이 다른 코드보다 먼저 실행한다.

 

이런 자바스크립트 고유의 특징을 변수 호이스팅이라고 한다.

 

값의 할당

var score; //변수선언
score=80; //값 할당

변수 선언과 값의 할당의 실행 시점이 다르다.

변수 선언은 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 먼저 실행되지만

값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행된다.

: 변수에 값을 할당할 때 이전 값 undefined가 저장되어 있던 메모리 공간을 지우고 메모리 공간에 할당 값 80을 새로 저장하는 것이 아니라 새로운 메모리 공간을 확보하고 그곳에 할당값 80을 저장한다. 이는 score값을 한번 더 재할당할 때도 마찬가지로 작동한다.

 

위에 불필요한 값들은 가비지 콜렉터에 의해 메모리에서 자동 해제되지만 온제 해제될지는 예측 불가능하다.

<자바스크립트는 가비지 콜렉터를 내장하고 있는 매니지드 언어로서 가비지 콜렉터를 이용해 메모리 누수를 방지한다.>

 

 

 

.

.

.

.

이 게시글은 모던 자바스크립트 Deep Dive를 참고하여 제작하였습니다.