1. express 시작하기 / .gitignore 설정방법 / 깃허브 커밋하기

npm을 설치해주자 npm init

이렇게하면 node_modules과 함께 package-lock.json, package.json이 설치된다.

그리고 npm install express 를 입력하여 익스프레스를 설치하면

package.json파일의 dependency에 express가 설치된 것을 확인할 수 있다. dependency란 이 프로젝트가 실행되려면 필요한 것을 나타냄

이제 깃헙에 올려보자

먼저

세번째 연결고리 아이콘을 클릭하면

다음과 같은 창이 나타나는데 우측 상단의 버튼을 눌러주면 검색창 같은것이 상단에 나타나면서 깃 저장소를 초기화 할 폴더를 선택할 수 있다. 이 때 현재 폴더를 선택해주어 초기화를 진행한다.

해당폴더안에는 다음처럼 2가지만 있기에 2가지만 나타난것. npm install *을 해주지 않았기에 node폴더 및 package-lock.json이 없는것

깃헙에 올리기 전, 모든 node_modules폴더 안의 파일이 들어가면 무거워지기 때문에 package.json파일과 동일한 패쓰에 .gitignore파일을 만들어주고 그 파일안에 node_modules폴더 안의 파일들을 쓰면된다.
모든 파일들은 이 URL로 들어가면 확인할 수 있고, 이 내용을 복사해서 붙여넣으면 된다. 

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage
*.lcov

# nyc test coverage
.nyc_output

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# TypeScript v1 declaration files
typings/

# TypeScript cache
*.tsbuildinfo

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env
.env.test

# parcel-bundler cache (https://parceljs.org/)
.cache

# next.js build output
.next

# nuxt.js build output
.nuxt

# gatsby files
.cache/
public

# vuepress build output
.vuepress/dist

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

# TernJS port file
.tern-port

package-lock.json 

그리고 마지막으로 package-lock.json도 써주도록 하는데 왜냐면 package에 대한 security와 관련되어있기 때문.

위와같이 해주면 3개만 깃허브로 관리된다.

이제 깃허브와 연동을 시켜주자
터미널창에 git remote add http://내깃헙저장소 를 입력해준다.
그리고 다음과 같이 입력을 진행한다.

git remote add origin 내깃헙URL입력
git add .
git commit -m "Initial Commit"
git push origin master

만약 다음과 같은 에러가 발생한다면?
fatal: 'origin' does not appear to be a git repository
원격 저장소 연결을 못했기 때문이다. 아무래도 앞서 설정할 때, git remote add origin에서 origin을 잘못입력한듯하다. 
git remote -v 를 입력하여 원격으로 명명된 'origin'이 목록에 있는지 확인
예를들어 만약 Yoman 이란 목록이 나타난다면, 그 목록을 삭제해줘야 한다.
삭제하려면 git remote remove Yoman 을입력해준다.
다시 연결하려면
git remote add origin 내깃헙URL입력

이제 express 서버를 만들기 위해 express 깃헙에 있는 코드를 복붙해주자

const express = require('express')
const app = express()

app.get('/', function (req, res) {  
   res.send('Hello World')
})
app.listen(3000)

여기서 require('express')는 현 위치의 폴더 중 express폴더를 찾아보고 없으면 node_modules폴더 안의 express폴더를 찾아 호출한다는 의미이다. 

const express = require('express')
const app = express()
app.listen(3000)

위 코드를 실행(node index.js)하면 브라우저에서 Cannor GET / 이라고 나타나는데 이는 접속은 됐으나 서버로 부터 에러를 받은 것. 서버가 listen하고 있었으나 root(/)에 아무것도 표시할 게 없다는 의미이다. 서버에 홈페이지로 보여줄게 없지만 서버는 있다는 것. 

지금까지는 index.js를 실행주려면 터미널창에 node index.js 를 입력했지만
package.json파일에 다음과 같이 입력해주면 쓸 필요가 없어진다.

이제 터미널창에 npm start 만 입력해줘도 된다.

이제 콜백함수를 한 번 만들어보자

다음과 같이 바꾼 뒤 실행시켜주면 http://localhost:3000 에 접속할 경우 터미널창에는 Listening on : http://localhost:3000라고 나타난다.