nodejs란 javascript runtime 이다. 런타임 ...가 구동되는 환경을 말한다. 즉, javascript를 실행시킬 수 있는 환경이 nodejs다. 

nodejs는 npm이라는 package manager를 사용한다. 예로 npm은 python의 pip과 같다고 생각하면 된다.

이번 프로젝트를 위해 npm을 사용하여 의존 라이브러리들을 설치했다. 
바로 express ejs monogoose shortId nodemon 이다.

여기서 성격이 다른 것이 하나 있다. nodemon 이다. nodemon은 파일이 바뀌면 자동적으로 refresh를 해줘 바로 반영되게하는 라이브러리다. production에만 사용되고 deployment엔 사용 되지 않는다. 

npm의 특징이 여기서 사용된다. npm은 의존 라이브러리를 폴더에서 init(초기화) 하여 처음 사용한다. 
그래서 npm을 사용할 때 다음과 같은 규칙을 따른다. python과 시작이 비슷하다.

1. npm init -y // npm 을 사용하여 init 한다. -y는 yes를 바로 하겠다는 뜻이다. 
2. npm install {library} // library에 mongoose ejs 등이 들어간다. 

2번에 기본값으로 된 가려진 argument가 있는데 --save이다. 

--save는 의존 라이브러리로 인정하겠다는 것이다. 여기서 nodemon의 역할은 개발(production)을 수월하게 해주는 것이다. 즉, 배포(deployment)에는 필요없기 때문에 --save parameter 대신 --save-dev를 넣어주어 개발에만 필요한 dependency를 별도로 표기하게 한다.  

npm은 유연한 개발,배포 관리가 가능하다. 

## express
express는 라이브러리로써 서버 프레임워크이다. python의 flask, django 같은 것이다.

## mongoose 
mongoose를 얘기하기 전에 mongodb와 관계에 대해서 짚고 가야한다.

mongodb는 nosql 데이터 베이스로 고정된 스키마나 join 없이 document 형식으로 매핑하여 저장하는 데이터 베이스다. mongodb는 드라이버 모듈. 즉, 저장할 수 있게 컴퓨터에 원래 깔려있어야하는 어플리케이션 이라고 이해하면 좋다. MySQL 같은 드라이버 모듈이라고 해보자. mongoose는 mongodb를 다룰 수 있는 ODM 라이브러리로 python의 pymysql 이나 pymongo 같은 거라고 생각하면 된다. 

## ejs 
ejs는 javascript가 내장된 html 파일이다. 그래서 html 안에서 javascript 를 쓸 수 있게 해준다.

기본 문법 중 

<% %>은 함수, 변수 다 쓸 수 있고 대신 한줄이 넘어가면 <% %> 계속 붙여줘야한다.
<%= %>은 변수를 사용할 수 있게 한다. 문자열을 하려면 "<% %>" 해야한다.
쉽게 말해 jinja2의 {% %} 같은 것이다.

## javascript와 비동기 

javascript는 웹에서 요소들이 동적인 활동을 하기 위해 사용되는 스크립트 언어다.

이번 프로젝트에서는 http통신을 사용하기 위해 express 라이브러리를 사용했고 비동기 처리 메소드를 위해 await async 문법이 사용됐다. 

여기서 간단하게 동기와 비동기를 짚고간다. 

동기는 동시에 이루어져야한다. 즉, 요청과 처리가 한번에다. 그래서 설계가 쉽지만 요청 후 처리까지 아무것도 못한다. 

비동기는 동시에 이루어지지 않아도 된다. 즉, 요청하고 처리받는 동안 다른 일을 할 수 있다. 설계가 어렵지만 효율적이다. 

await async 코드가 사용될 때는 HTTP 통신을 하는 비동기 처리 메소드와 함께 할 때 사용하면 좋다고 하는데
await 뒤에 붙는 메소드(함수)는 프로미스 객체여야한다고 한다. 프로미스 객체? 모른다.

이번 사이드 프로젝트에 사용됐던 express 앱은 app.get에서 http 통신을 하기 때문에 비동기 처리를 할 수 있어서 await을 썼다. 그러면 비동기에 대한 생각을 할 필요가 없어진다. callback 함수를 쓸 필요도 , .then() 함수를 사용할 필요도 없다는 것이다. 

더 자세한 설명은 구글링 해도 좋을 것 같다. 

참고 : https://joshua1988.github.io/web-development/javascript/js-async-await/

1. root에 margin,padding 0 주고, font, box-sizing:border-box 주고 시작.
2. 열방향 가운데를 맞추고 싶다. left 50%, transform의 translateX(-50%) 행방향 가운데를 맞추고 싶다. top 50%, transform의 translateY(-50%)
3. inline은 글자 취급. 즉 아래에 약간의 공백을 갖기 때문에 inline요소인 img는 display를 block으로 해주면 된다. 크기를 지정하기 위해서 block으로 해줘야한다. 즉, div가 block이기 때문에 크기를 할 수 있는 것이다. 여기서 a는 inline요소로 크기를 못정한다. 만약 소셜아이콘을 링크연결하고 싶어 a 태그로 감싸면 크기 조절이 안되니까 display:inline-block 으로 block화 할 수 있다. 단순히 block으로 해도 문제없다.