💭 서론
교육 13일차
오전은 창업 설명회 느낌의.. 창업 관련 강의를 들어서 딱히 기록할 건 없다. 오후엔 드디어 노드를 배우는군!!! 했지만.. 촉박한 시간 때문에 정말 찍먹만 했다. 사용법 익히기 느낌 ㅋㅋㅠ 교육 기간이 짧다보니 수업 내용을 온전히 내껄로 만들기 위해선 스스로 공부하는 시간이 필요할 것 같다. 추후 서버 수업할 때 다시 다뤄주신다고 했으니 공부하면서 기다려봐야지!
✔️ node.js
- 웹 브라우저를 거치지 않고 자바스크립트를 실행 시킨다.
- 노드의 탄생으로 자바스크립트가 더 확장됨
- 노드 js가 이해하는 자바스크립트는 일반(?) 자바스크립트와 다름!
1. Node.js 설치
앞으로 자바스크립트를 node로 실행시킨다!
노드 홈페이지에서 18.16.0 버전(LTS)을 설치했다.
💡 노드 버전 확인하는 명령어: node --version
위 명령어를 입력했을 때 사진처럼 버전이 찍혀 나온다면 node.js가 정상적으로 설치 된 것이다.
* cmd 창 정리 명령어: cls
2. package.json
노드는 npm 명령어로 패키지를 관리한다.
노드 프로젝트?는 package.json 파일에 기록(폴더명, 파일명 등..)이 남겨진다.
💡 package.json 만드는 명령어: npm init -y
위 명령어를 입력하면 package.json 파일이 만들어진다.
노드 최신 버전은 package.json 파일을 자동으로 만들어 준다는데 그래도 만드는 습관을 들이는 것이 좋을 듯한..
package.json 파일을 열어보면 사진과 같이 object 같은 형태이다.
"scripts" 처럼 왼쪽 키(key)들은 cmd에서 명령어로 사용할 수 있다.
그 예로, cmd 창에 npm test를 입력하면 우측 문자열이 출력되는 것을 확인할 수 있다.
3. 노드 실행하기
단순히 로그를 찍는 app.js라는 파일을 생성했다.
💡 노드 실행 명령어: node 실행시킬파일.js
app.js를 실행 시키려면 node app.js를 입력한다. 사진과 같이 로그가 찍힌 것을 확인할 수 있다. (파일이 실행됨)
👀 package.json 이용하기
package.json 파일의 scripts(왼쪽 키)를 cmd 창에서 명령어로 사용할 수 있다고 했는데 위처럼 명령어를 등록해주면,
node app.js 즉, app.js를 실행시키는 명령어였으므로 사진과 같이 로그가 동일하게 찍히는 것을 확인할 수 있다.
4. 라이브러리 다운로드
💡 라이브러리 다운로드 명령어: npm install 라이브러리명
npm install 명령어를 사용하여 'express' 라이브러리를 다운로드 했다.
라이브러리가 다운로드 되면 node_modules라는 폴더가 자동으로 생성된다.
폴더를 살펴보면 사진엔 담기지 않았지만 express 폴더도 있다.
다른 폴더들은 express 라이브러리를 사용하기 위해 타고 타고 올라가서(?) 필요한 라이브러리들이다.
라이브러리 다운로드가 완료되고, package.json 파일을 열어보면 "dependencies"에 다운 받은 라이브러리들이 기록된다.
따라서! package.json 만으로 환경세팅을 할 수 있다.
"dependencies"에 다운 받은 라이브러리들이 기록되어 있기 때문에 다운받은 라이브러리들이 있는 node_modules 폴더를 삭제하고 cmd 창에 npm install만 입력해보면 express 라이브러리가 다운된다. 즉, install 뒤에 라이브러리 명을 입력하지 않아도 dependencies에 기록되어 있는 라이브러리들이 다운로드 된다.
5. 서버 실행하기
노드에서 서버를 실행하는 방법은 너무나 간단해서 신기했다!
// require(): 라이브러리 가져오는 메서드
require('ejs')
const express = require('express')
//express 라이브러리 실행하는걸 인스턴스에 전달
const app = express()
var bodyParser = require('body-parser');
// view engine setup
app.set('views', path.join(__dirname, '/views'));
app.set('view engine', 'ejs');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));우선 app.js 파일에 위 코드를 추가하고 views 라는 폴더를 생성 후 그 안에 index.ejs 라는 파일을 생성했다. 파일만 생성하고 아무 내용도 작성하지 않았다.
require() 메서드를 이용하면 라이브러리를 가져올 수 있다. 위와 같이 괄호 안에 따옴표로 감싸준 라이브러리명을 써주면 된다.
첫 번째처럼 require('ejs')만 입력해 라이브러리를 가져올 수 있지만 노드는 객체 지향 언어이므로 인스턴스에 전달하여 사용하는 것을 권장한다. 따라서 변하지 않는 상수 예약어인 const를 이용해 전달했다.
그리고 express 라이브러리를 가져온 상수를 다시 app이라는 상수에 전달했다.
그리고 아래 내용들은 수업에선 설명해주시지 않으셨다.. 오늘은 패스하심
간단하게 views라는 폴더의 ejs 파일을 view engine으로 설정한 것...이라 이해했다.
//서버 실행
const port = 3000
app.listen(port, function(){
console.log(`server is runing at http://localhost:${port}`)
}) //add.listen(포트 번호, 콜백함수)
그리고 아래에 위 코드를 입력한다.
포트 번호를 받는 상수를 하나 선언해두고 express 라이브러리의 listen 메소드를 이용해 서버를 생성(?)한다.
listen 메서드의 매개변수로는 포트번호와 콜백함수가 필요한데 위에선 간단히 로그만 찍어줬다.
💡 백틱(`)을 사용하면 문자열과 변수(${ })를 같이 쓸 수 있다. (맥은 option + ₩)
app.js에 서버 생성 메서드를 작성했으므로 cmd에서 app.js를 실행하는 명령어를 입력하면 서버가 실행된다.
💡 서버를 멈추는 명령어는 컨트롤 + C
6. GET/POST 요청 테스트
5-1. GET 방식
//get 방식 요청, get('경로', 콜백함수) { }
app.get('/test', function(request, response) {
response.send('Hello World!!');
})get, post 방식을 이용하는 방법은 express 라이브러리의 get/post 메서드를 사용하면 된다. 메서드의 매개변수로는 경로와 콜백함수를 입력한다.
콜백함수에는 request와 response에 대한 매개변수가 들어간다.
response.send() 메서드를 사용하면 문자열을 출력할 수 있다.
위 코드에선 경로를 '/test'로 지정해줬기 때문에 /test로 호출해야한다.
response.send('<h3>노드입니당당</h3>')response.send() 메서드로 html을 출력할 수도 있다.
위와 같이 메서드 안에 html 태그를 이용한 내용을 입력해주면 html이 출력되는 것을 볼 수 있다.
💡 브라우저 새로고침 하기 전!! js 파일이 수정되었을 때는 꼭 컨트롤+C로 서버를 멈춘 후 재시작 해주어야 정상 적용되어 작동한다.
또한 response.send() 메서드는 한 번만 동작한다.
중복하여 작성할 수 없다는 뜻인데, 중복하여 작성한다면 가장 위에 있는 send() 메서드만 작동하게 된다.
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40"
stroke="green" stroke-width="4" fill="yellow" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>▲ index.ejs
app.get('/test2', function(request, response) {
response.render('index')
})▲ app.js
위에서 작성해둔 view engine 설정을 써먹는 get 방식 테스트를 위해 파일 생성만 해둔 index.ejs에 html 코드를 작성했고 app.js에도 get 메서드를 추가했다.
render() 메서드는 쉽게 말해 괄호 안에 있는 파일을 html로 렌더링을 해준다. ejs로 데이터를 전송하는 역할을 하는 함수라고 한다.
찾아보니 view 엔진 설정은 render 메서드를 사용하기 위함이었다.
/test2 경로를 요청하면 위와 같이 html로 렌더링된 화면이 나오는 것을 확인할 수 있다.
5-2. POST 방식
get 방식은 쉽게 말해 URL 창에 입력하고 엔터를 눌러 '직접' 요청하는 방식이지만 post 방식은 그렇지 않다.
post 방식은 body 영역에 데이터를 실어 보내 방식이다.
post 방식의 대표적인 예인 form 제출로 예제를 진행했다.
<form method="post" action="/test3">
<input type="text" name="post" id="">
<input type="submit" value="보내기">
</form>index.ejs에 위 코드를 추가해 form을 만들어줬다. method="post"와 action 속성의 경로 중요!
app.post('/test3', (req, res)=>{
return res.send('Hello POST!!')
})app.js에 위 post 함수를 추가했다.
post 방식도 get 방식과 함수 구조(?)는 동일하게 작성하면 되는데, 이번엔 화살표 함수를 사용했으며 request, response 변수명도 줄여서 작성했다.
post 메서드는 'Hello POST!!' 라는 문자열을 리턴해준다.
/test2 경로에서 input에 내용을 작성하고 보내기 버튼을 누르면 사진과 같이 /test3로 이동하고, 화면에 Hello POST!!가 찍힌걸 확인할 수 있다.
여기까지 노드 js를 살짝 찍먹🌭했다.
노드로 프로젝트 하기.. 재밌을 것 같아!!
✔️ Docker 도커
- 가상환경을 만들어 준다.
- 컨테이너에 이미지를 넣어놓고 컨테이너를 실행시킨다.
- 수업이 너무 빨리빨리 정신없이 지나가고 명령어 따라 쳐보기만 해서... 참고하면 좋을 글 ..
1. 도커 다운로드
도커 홈페이지에서 도커를 다운로드 해준다.
다운로드가 완료 되었을 때 update 어쩌고 하면서 오류가 떴었는데 그냥 업데이트 해주니 정상 실행되었다!
2. 명령어 실습
docker container run diamol/ch02-hello-diamol
가장 처음으로 입력해본 명령어이다.
우선 실행 명령어는 docker container run [ 옵션들 ... ] 이다. 옆에 있는 diamol은 계정 이름, ch02-hello-diamol은 '이미지'이다.
처음엔 이미지를 가지고 있지 않아 'Unable to find ~~~' 문구가 뜨지만 자동으로 이미지를 다운로드 해준다.
docker container run --name webserver -d -p 80:80 nginx
두 번째로 입력해본 명령어이다.
- --name 은 컨테이너에 이름을 지정한다. 위 명령어는 webserver라고 이름을 지어준 것이다.
- -d: 'detach'. 백그라운드에서 실행..
- -p: 'port'. 컨테이너에서 사용하는 포트와 호스트의 포트를 연결해 호스트를 통해 컨테이너에 접속 할 수 있도록 함. [host port : container port] 로 옵션을 설정하면 host의 IP를 통해서 컨테이너에 접속 할 수 있다.
- nginx 는 이미지 이름인데 이름 앞에 슬래시(/)가 안 붙어있으면 공식 이미지.. 라는 것 같다...
URL에 localhost만 입력하고 들어가면 위와 같은 화면을 볼 수 있다.
webserver라는 이름으로 컨테이너도 만들어짐
docker container ps : 실행중인 컨테이너 보기
docker container ps -a : 전체 컨테이너 보기
docker container run --it diamol/base
- -it : --interactive와 --tty 를 동시에 사용한 것으로 터미널 입력을 위한 옵션
위 명령어를 입력하니 diamol/base로 접속을 한 것 같고... 왜 입력해서 실행 했지?
exit를 입력하면 빠져나갈 수 있다. 아무것도 안 하고 exit 쳐서 나갔다...
'etc > 블록체인 뉴딜일자리사업' 카테고리의 다른 글
| 솔리디티 기초: 예외처리, 상속, 오버라이드 (0) | 2023.05.23 |
|---|---|
| 솔리디티 기초: 자료형, 변수, 함수, 모디파이어 (0) | 2023.05.22 |
| 블록체인 기반 서비스, 디파이, 소셜그래프 (0) | 2023.05.18 |
| 스마트 컨트랙트 찍먹 (0) | 2023.05.17 |
| 자바스크립트 노드 다루기, 이벤트 핸들러 (0) | 2023.05.16 |
댓글