JArchive 프로그래밍 일기

함수가 비동적으로 동작하는 것이 무엇인가에 대한 이해가 필요하다

3가지 일이 있다. 

빨래 설거지 청소 

동기 : 나 혼자서 한다.

빨래 1시간한다. 끝나고 나서 다음 일을 시작한다.

설거지 1시간, 청소 1시간을 순차적으로 끝낸다.

비동기 : 여럿에게 시킨다.(일들을 나눠준다.)

3명한테 동시에 시킨다.

빨래 시작. 그와 동시에 설거지 시작. 그와 동시에 청소 시작. 

File 읽는 함수를 예시로 동기, 비동기를 비교해보자. 

Node.js Documentation 에 접속한다.

File System 을 찾아서 파일 읽는 함수 원형을 보자. 

https://nodejs.org/dist/latest-v12.x/docs/api/fs.html

Node.js 의 철학은 비동기를 권장한다. 

그래서 readFile 처럼 'Sync'가 안붙은 함수는 기본적으로 비동기로 동작한다. 

근데 특별히 '동기'적으로 동작하고자 하면 함수명 뒤에 'Sync' 를 명시적으로 붙은 것을 쓰면 된다. 

일단, 권장하지 않는 '동기' 방식으로 Sync가 붙어있는 함수 readFileSync() 를 써보자. 

실행해 보면

순차적으로 1이 출력되고 

readFileSync로 읽은 파일 내용이 한줄 출력되고,

2가 출력된다. 

이어서 비동기 readFile() 함수를 console.log('2. async') 밑에 써보자. 

readFile() 함수의 인자에는 마지막에 익명의 콜백함수가 있다.

readFile()도 data.txt 똑같은 파일을 읽어서 출력한다. 

실행 결과를 보자. 

코드를 쓴 순서대로 1, 2, 3, 4 가 아니라 

1, 2, 4, 3 이 찍힌다. 

readFile 함수는 readFileSync 함수와는 달리, 비동기로 동작한다. 

비동기는 다른 애한테 일을 위임하는 것이다.

그 애가 일을 끝나면, function 콜백함수를 실행하여 나에게 "시키신 일 끝났어요." 하고 알려주는 구조다.

콘솔 결과를 보니 남한테 시킨 readFile 함수 작업보다 console.log('4') 가 빨리끝나는 작업인가보다. 

동기 비동기에는 장단점이 있다. 

만약에 readFileSync 가 10분씩 걸리는 일이라면, 1 하고나서 readFileSync 작업이 끝날 때 까지 기다리게 된다.

그러면 10분이 지나고 나서야 파일 내용 출력되고, 그 다음에야 2 가 찍힐 것이다. 

너무 오래걸리는 작업은 비동기로 걸어 두고 나머지 것들을 우선으로 처리하는게 좋다. 

underscore 모듈을 예시로 이용해보자. 

환경은 다음과 같습니다. 

Windows10

Node.js 12.16.1 LTS 

VScode

다른 사람이 만든 모듈을 사용하려고 한다. 

https://www.npmjs.com/package/underscore

1. 나의 패키지 초기화 

나의 프로젝트 디렉토리 자체도 일종의 '패키지' 이므로, (하나의 프로그램)

npm의 패키지로 지정을 해야 한다. 

npm 상에서 현재 디렉토리를 패키지로 지정하는 명령어를 실행해야 한다. 초기화. 

(나의 프로젝트 디렉토리 자체 를 이제 '나의 패키지'라고 한다.)

프로젝트 디렉토리에서 cmd를 켜고 npm init 을 입력한다. 

여러가지를 입력하라고 한다. 

대부분 Enter로 스킵해도 되지만, description은 입력해주는 것이 나중에도 편하다. 

entry point 나의 패키지가 시작하는 지점

git repository 깃에 올라갈 때의 깃 레포지토리 경로 (나중에 npm 홈페이지에 올릴때 이것을 써준다.)

끝나고 디렉토리를 확인해보면, 방금 입력한 내용들이 담긴 package.json 이 생성되어 있다. 

2. 패키지 설치

사용하려는 패키지 underscore 의 홈페이지를 방문해보자.

https://underscorejs.org/

홈페이지에 써있는 설치 명령대로 cmd를 열고 프로젝트 디렉토리의 경로에서 설치해보자.  

프로젝트 디렉토리를 확인해보면, 설치한 underscore 디렉토리를 확인할 수 있다. 

3. [중요] 패키지 의존성 확인

프로젝트 디렉토리에 있는 package.json을 다시 보자. 

(underscore 디렉토리 내의 package.json이 아니다.)

"dependencies" 아래의 내용은 무슨 의미일까?

나의 프로젝트가 underscore 모듈의 버전 1.9.2를 쓰겠다는 것을 명시하는 것이다.

의존성을 명시하는 것! underscore 모듈 쓸때는 꼭 이 버전 쓰겠다는 뜻이다. 

혹시 "dependencies" 가 없다면,

npm 으로 모듈 설치를 할 때 다음과 같이 --save 옵션을 붙여서 다시 설치하면 된다.

4. 모듈 사용해보기 

underscore는 자바스크립트가 제공하지 않는 배열 관련 기능들을 많이 제공한다. 

underscore 홈페이지에서 Arrays 관련 함수를 살펴보자.

배열에서 인덱스 0을 지정하면 첫번째 요소에 접근한다. 

underscore의 함수로 배열의 요소에 접근해보자.

underscore.js 파일을 만들고,  underscore의 객체는 _ 로 이름지었다. 

arr[0]은 _.first(arr) 와 같다. 

직관적인 함수 이름으로 배열 요소에 접근할 수 있는 것이다. 

마지막 요소는 last() 함수를 쓰면 된다. 

배열 인덱스로 접근한 것과 _를 이용한 결과가 똑같음을 확인했다. 

5. 더 알아보기 

npm  관련 설명이 친절하게 포스팅 되어 있다. 

https://poiemaweb.com/nodejs-npm

node.js 개발 시에 npm 활용 비중이 크므로 꾸준히 공부하면서 숙달하도록 하자. 

Ubuntu 환경에서 node.js를 설치해보자. 

sudo apt-get update
sudo apt-get install -y build-essential
sudo apt-get install curl

node.js 12.x 버전 설치를 위해 12라고 명시해준다. 
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -

sudo apt-get install -y nodejs

nodejs -v 명령으로 nodejs 버전을 확인하고
npm -v 명령으로 npm 버전을 확인해본다. 

uglify-js 모듈을 하나 설치해보자. 

https://www.npmjs.com/package/uglify-js

1. 코드 작성  

pretty.js 로 저장

2. npm 으로 uglify-js 설치

-g 옵션 : 패키지를 전역적으로 사용하기 위해, (Stand alone) 독립적인 앱으로 설치한다는 의미이다. 

3. uglify-js 사용해보기 

4. uglify-js  의 옵션 사용해보기

function hello(name) 이었는데, 파라미터명 name 이 l로 변환되었다. 

-m 옵션은 함수의 파라미터명도 짧게 줄여버린다. 

이외에도 기능에 영향이 없고 변경 가능한 것들을 전부 줄인다. 

-o 옵션은 uglifyjs 를 적용한 결과를 다른이름으로 저장한다. 

경로에 ugflified.js 파일을 열어봤다. 

자바스크립트 기본 문법을 기록합니다. 

자바스크립트 란 ?

HTML을 동적으로 제어한다. 

개발 환경 구축

VScode 설치 

SourceTree 설치 

GitHub 가입하고 javascript playground 레포지토리 하나 생성 

Atlassian 계정 만들고 sourceTree에 로그인

VScode의 다양한 확장기능 설치 :)

크롬 켜고, Ctrl + i 눌러서 개발자 모드 켜고 끄기!  Console 과 Source 보면서 조작해보자. 

자료형 

어떤 종류의 데이터인지 컴퓨터에게 알려준다. 

자료형이 같아야 연산이 가능하다. 

Number : 정수와 실수 

String : 문자열 (Immutable 특징을 가진다)  '+' 문자열끼리 이어붙일 수 있다. 

Boolean : true  false를 구분 

Null

Undefined 

Object

Immutable 특징이란? 
변경이 불가능한 객체. 한 번 만들면 상태를 변경할 수 없다.
상수 라고 이해하면 좋다. 변형 하려면, 무조건 객체를 새로 만든다. 

자료형 확인해보기 

변수 

데이터를 담은 메모리 공간

변수를 선언하고 값을 할당한다  '='을 사용한다. 

유의 :  '같다'를 표시하는 것은 연산자 === 을 쓴다. '다르다'를 표시하려면 != 를 쓴다. 

문자열의 길이 

문자열을 대소문자로 변환 하는 함수 

undefined : 값이 정의되지 않았다 

null: 값이 비어있다.

NaN: 값이 아니다 (=== 계산이 불가능 )

alter() 와 prompt() 함수 

프롬프트를 띄워서 질문과 입력을 받아본다. 

입력받은 것은 변수에 저장된다. 

프롬프트에 대답을 입력한다. 

Number() 함수