Javascipt

1. 프로그래밍이란?

 

프로그래밍이란 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다. 프로그래밍에 앞서 문제를 명확히 이해한 후 적절한 문제 해결 방안의 정의가 필요하다.

이때 요구되는 것이 문제 해결 능력이다. 왜냐하면 대부분의 문제는 복잡하며 명확하지 않을 수도 있다. 따라서 문제를 명확히 이해하는 것이 우선되어야 하며 복잡함을 단순하게 분해하고 자료를 정리하고 구분해야 하며 순서에 맞게 행위를 배열해야 한다.

프로그래밍은 0과 1밖에 알지 못하는 기계가 실행할 수 있는 정도로 정확하고 상세하게 요구사항을 설명하는 작업이며 그 결과물이 바로 코드이다.

문제 해결 방안을 고려할 때 컴퓨터의 입장에서 문제를 바라보아야 한다. Computational thinking

 

2. 프로그래밍 언어

명령을 수행할 주체는 컴퓨터이기 때문에 인간이 이해할 수 있는 자연어가 아닌 컴퓨터가 이해할 수 있는 기계어로 명령을 전달해야한다.

기계어로 명령을 전달하는 것을 대신하여 인간이 이해할 수 있는 약속된 구문(Syntax,문법)으로 구성된 '프로그래밍 언어'를 사용하여 프로그램을 작성한 후 , 그것을 컴퓨터가 이해할 수 있는 기계어로 변환하여 주는 일종의 번역기(Compiler 혹은 Interpreter)를 이용하는 것이다.

 

3. Syntax & Semantics

프로그래밍 학습은 일반적으로 프로그래밍 언어의 문법을 배우는 것부터 시작한다.

문법적으로 맞지만 의미를 가지고 있지 않는 문장은 언어의 역할을 충실히 수행할 수 없다.

프로그래밍의 목적

4. 기본 개념과 동작 원리 이해의 중요성

기본 개념과 동작 원리를 이해하지 못한 상태에서 Copy & Paste 로 단순히 동작만 하는 코드를 만들고 그것에 만족한다면 구현한 코드는 언제 무너져도 이상할 것이 없는 사상누각일 뿐이다. (기초 튼튼)

기본 개념은 문맥에 맞는 정확한 용어를 사용할 수 있게 돕는다. 문맥에 맞는 정확한 용어의 사용은 명확한 의사 소통을 가능케 한다. 이는 협업의 기본이며 필수 요소이다.

동작 원리의 이해는 코드의 동작을 예측할 수 있게 돕는다. 자신이 구현하려는 코드의 동작을 예측 할 수 있어야하고 에러를 발생기키는 코드를 만나면 에러가 발생하는 원인을 이해해야 디버깅이 가능하다.

 

모든 브라우저는 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장하고 있다. Node.js도 자바스크립트 엔진을 내장하고 있다.

브라우저 - 웹 서버에서 이동하며 쌍방향으로 통신하고 HTML 문서나 파일을 출력하는 그래픽 사용자 인터페이스 기반의 응용 소프트웨어

Node.js - 확장성 있는 네트워크 어플리케이션 개발에 사용되는 소프트웨어 플랫폼

 

웹 브라우저(크롬)

1. 개발자 도구

크롬 브라우저가 제공하는 개발자 도구(DevTools)는 자바스크립트 개발에 필수적인 강력한 도구이다.

개발자 도구의 기능

2. 콘솔

console 패널은 자바스크립트 코드에서 에러가 발생하여 어플리케이션이 정상적으로 동작하지 않을 때 가장 우선적으로 살펴보아야 할 곳이다.

또한 콘솔창에 직접 코드를 작성하여 결과를 확인 할 수 있다.

에러가 발생하면 콘솔창에 에러발생 알림 및 정보, 발생 위치를 알 수 있다.

 

3. 디버깅

source 패널을 이동하면 에러가 발생한 위치에 빨간 밑줄이 표시되고 그 위에 마우스를 올려 보면  에러 정보가 표시된다.

에러 코드를 확인하여 디버깅을 하면 된다.

 

Node.js

클라이언트 사이드 / 프로젝트의 규모가 커짐에 따라 React, jQuery와 같은 외부 라이브러리를 도입하거나 Babel,Webpack,Eslint 등 여러 가지 도구를 사용해야 할 필요가 있다. 이때 Node.js 와 npm이 필요하다.

 

1. Node.js & npm

Node.js는 Chrome V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경이다. 브라우저에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서 동작시킬 수 있는 자바스크립트 실행 환경이다.

주로 서버 사이트 어플리케이션 개발에 사용되며 이에 필요한 모듈, 파일 시스템, HTTP 등 빌트인 API를 제공한다. Node.js는 데이터를 실시간 처리하여 빈번한 I/O (input/output) 가 발생하는 SPA(Single Page Application)에 적합하다.

npm(node package manager)은 자바스크립트 패키지 매니저이다. Node.js에서 사용할 수 있는 모듈들을 패키지화하여 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI(Command line interface)를 제공한다.

 

브라우저의 핵심기능은 앞에서 정리한 내용대로 요청, 응답을 받아 브라우저에 표시하는 것이다. 브라우저는 서버로부터 HTML, CSS, Javascript, 이미지 파일 등을 응답받는다. HTML, CSS파일은 렌더링 엔진의 HTML 파서와 CSS파서에 의해 파싱되어 DOM,CSSOM트리로 변환되고 렌더 트리로 결합된다. 렌더트리 기반으로 브라우저는 웹페이지를 표시한다.

 

자바스크립트는 렌더링 엔진이 아닌 자바스크립트 엔진이 처리한다. HTML 파서는 SCRIPT 태그를 만나면 자바스크립트 코드를 실행하기 위해 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 제어 권한을 넘긴다. JS 엔진은 SCRIPT 태그 내의 JS코드 또는 SCRIPT 태그의 src 어트리뷰트에 정의된 자바스크립트 파일을 로드하고 파싱하여 실행한다. 자바스크립트 실행이 완료되면 다시 html 파서로 제어 권한을 넘겨서 브라우저가 중지했던 시점부터 dom 생성을 재개한다.

 

브라우저는 동기(Synchronous)적으로 HTML, CSS, JS 를 처리한다.

 

body 요소의 가장 아래에 js를 위치시키는 것은 좋은 아이디어이다.

-. HTML 요소들이 스크립트 로딩 지연으로 인해 렌더링에 지장 받는 일이 발생하지 않아 페이지 로딩 시간이 단축된다.

-. DOM이 완성되지 않은 상태에서 js가 DOM을 조작한다면 에러가 발생한다.

 

 

---

주절주절 길지만... 화이팅입니다.

 

출처 - https://poiemaweb.com/coding