231129_모듈, 내장모듈, Json-server

남교수님의 조례. 자기소개서 스토리텔링 하기, 

지난 시간엔 json이라고 해서 언어를 배웠고 오늘은 클라이언트에서 요청이 오면 응답을 받는, 그걸 할 예정, 서버가 요청을 하고 요청의 결과를 받는건 다음 시간에 할 예정. 이 전체가 웹 서비스. 만약 jsp에서 하면 node.js가 빠지고 스프링부트(servlet)가 들어옴. 구조는 똑같다. 단지 누가 질문하고 어떤 서버 언어가 대답할 것인지, (node.js 가 대답할건지 스프링부트가 대답할건지) 그리고 어떻게 데이터베이스를 요청할건지. 바뀌는건 없음, 오로지 바뀌는건 역할을 담당하는 어플리케이션 뿐.

클라이언트 서비스를 열어주는 도구는 파이어폭스, 엣지 등. 바뀌더라도 나오는 구조는 비슷하다. 요청하는건 주로 get, post, get 과 post에 의해 요청이 들어오고 서버에서 응답한다. 뭔가 요청이 들어왓으면 응답을 해야하는대 get형식으로 요청이 들어오면 get으로 하고 post로 들어오면 post로 응답. 

시작해도 되나요? 
우리 매번 그리던 구성도를 한 번 더 그릴게요. 
클라이언트는 모바일이든 PC든 안에 서비스를 받을 겁니다. 
얘는 어떤 프로그램에 의해서 어떤 도구에 의해서 서비스를 받을까요? 
인터넷 도구 익스플로어 이런 거겠죠. 
그런 거 가지고 클라이언트는 서비스를 받을 겁니다. 
그다음에 우리는 이렇게 해서 여기에 뭐가 존재할까요? 
뒤쪽으로는 데이터베이스가 존재할 거고요. 
이 앞에 얘는 뭘 말하는 걸까요? 서버. 
서버는 어떤 개념이죠? 
-(혁준) 클라이언트로부터 뭐 받아서 돌려주는 역할. 
-(조승철 교수님) 서버는 하드웨어라고 보시면 돼요. 
그냥 서비스하는 기계, 통신, 하드웨어라고 보시면. 
이 위에 뭐가 올라가느냐. 
언어가 뭐가 올라가죠? 
노드 그다음에 스프링, JSP, 스프링부트, 점점점. 
여러분이 제가 나눠드렸던 서버들 그것들을 하드웨어적으로는 서버. 
걔들이 서버가 완료가 되면 그 위에 여러분은 언어를 올릴 겁니다. 
이 언어 중에서 우리가 Node.js는 여기에 Node.js가 올라가면 얘는 어떤 일을 하냐 하면 제일 처음에 클라이언트에서 요청이 오면 대답을 해 줄 거예요. 그렇죠? 
얘가 요청을 하면 http 어쩌고저쩌고 주소 땡땡 포트 해버리면 얘가 그거를 받아서 그거에 대해서 응답을 해 주겠죠. 
이 역할을 해 주는 게 Node.js의 언어라고 보시면 돼요. 
그러면 얘는 이 일만 하느냐. 아니죠. 
얘는 어떤 일을 하죠? 또? 
데이터베이스에서 데이터를 날리고 데이터를 받아오겠죠. 
어떤 거를 갖고 와라, 달라, 주고받을 거예요. 
그래서 서버 언어는 클라이언트에서 받는 얘와 데이터베이스에서 받는 요청하는 얘와 이 사이 안에서 서비스를 하는 애라고 보시면 됩니다. 
그래서 우리는 지금 여기 있는 애를 공부할 거란 얘기예요. 
이해 가시나요? 
저번 시간에 우리가 뭘 했죠? 
수업이 끝나면 모두 다 잊어먹으면 안 돼요. 
저번 시간에. 
json 어쩌고저쩌고 땡땡땡 하면서 언어라는 뭔가를 했죠. 
오늘은 뭘 할 거라고 예상이 돼요? 
읽어 오라고 얘기를 했죠? 읽어 오셨죠? 
우리는 여기에서 어떤 거를 하냐 하면 데이터베이스 쪽은 안 할 거예요. 
다음 시간에 할 거고. 
클라이언트에서 요청이 오면 응답받아서, 여기를 할 거예요. 
다음 시간에는 여기 부분을 할 거예요. 
서버가 요청을 하고요. 
그다음에 그 요청의 결과를 받을 거란 얘기예요. 
이걸 다음 시간에 할 거라는 얘기예요. 
그다음 시간에는 뭘 할 것 같아요? 
여기 전체를 하겠죠. 
여기서 받아서 결과 받아서 다시 전달해 주는 이걸 할 거예요. 
이 전체가 여러분 웹서비스라고 보시면 돼요. 
기본적인 웹서비스라고 보시면 되고, 이 동작하는 과정을 만약에 다음에 JSP에서 하면 Node.js가 빠지고 뭐가 들어오죠? 여기에. 
안 배우신 거 아니죠? 스프링부트 아닌가요? 
Servlet? 
여기에 Node.js를 빼고 스프링부트가 들어온다고 생각하시면 돼요. 
구조는 똑같다고 보시면 돼요. 
얘가 질문하고 어떤 서버 Language가 대답을 할 것인지, Node.js가 대답할 거냐 스프링부트가 대답할 거냐. 
그리고 어떻게 데이터베이스를 요청할 거냐. 
이 구조는 바뀌지 않아요. 
바뀌는 건 이 역할을 담당하는 애플리케이션만 바뀔 거란 얘기예요. 
여기서도 마찬가지로 이걸 담당하는 애들 몇 개 있죠? 
클라이언트를 서비스를 열어 주는 도구들. 
파이어폭스, 엣지 이런 애들 있죠. 
그런 애들이 클라이언트에 대해서 도와줄 거라는 얘기고 이거를 응답을 받는 애들은 얘네들일 거고. 
그러면 여기서 또 하나의 질문은 Node.js하고 그다음에 스프링, 얘랑 똑같은 역할을 하는 스프링부트하고 구조가 아니면 프로그램이 비슷할까요? 
전체적인 흐름이, 똑같아야겠죠? 
얘가 바뀌더라도 여기서 나온 구조는 비슷하다는 얘기예요. 
여기서 들어가야 하는 부분은 뭐가 있을까요? 
요청하는 거. 
get 있죠. 
그다음에 post, 그다음에 get과 post에 의해서 여기서 요청이 들어올 거예요. 
응답은 뭐로 하죠? 
서버에서 응답. 
뭔가 요청이 들어왔으면 응답을 해야 되죠. 
어떤 형태대로 응답을 하죠? 
get으로 요청이 들어오면 get으로 응답할 거고 post로 들어오면 post로 응답할 거예요. 
get 하시고 응답을 하든 출력을 하든 똑같이 그거에 대해서 해답하라는 얘기예요. 
조금 있다가 코드에서 볼 거고요. 
아무튼 get으로 들어오면 get으로 응답할 거고 post로 들어오면 post로 응답할 거예요. 
get으로 들어오면 1번, post로 들어오면 2번으로 동작하라고 우리가 구분지어야 돼요. 
get으로 들어오면 1번, post로 들어오면 2번으로 동작하라고 이렇게 구분지어야 되고요. 
구분짓는 구분자들은 어떤 거로 진행을 할까요? 
우선 get이 들어오겠죠. 
get 하고 구조 들어온 다음에 포트번호 들어오고 그다음에 위치 들어오겠죠? 
어느 위치에 get이 이런 위치가 들어오면 이게 어떻게 동작해라, 동작 실행 이렇게 들어오고 여기가 판별이죠. 
get에서, get도 여러 가지가 있겠죠. 
1, 2, 3번 get 있겠죠. 
그런 애들이 어떤 방식으로 들어올 것인가 여기다가 결정을 하고 그거에 따라서 응답을 어떻게 할 것인가. 
지금 어려워도 상관없어요. 
어차피 코드로 다 할 겁니다. 
그래서 우리가 get이라는 거는, 
아, 이거 하나 또 질문할게요. 
get이 여러 개 있어요. 
get이 여러 개 있는데 이 get이 왜 여러 개 있을까요? 
post 왜 여러 개 있을까요? 
그렇죠. 웹페이지 하나를 보시면 여기에 우리가 체크박스라고 이야기를 하면 체크박스에 뭐가 있죠? 
id하고 보내는 형식 나오죠? 
보내는 형식이 post면 post 방식으로 어떤 id, id cho면 cho에 포스트 들어오면 얘는 어떤 형태대로, 이렇게 체크박스가 많게 되면 서버에서 응답받아야 될, 대응해야 될 애들이 여러 개가 있어야 된다고 보시면 됩니다. 이해 가시나요?
그래서 우리가 여기에 id, id를 잘 확인하시고 이 id는 어디에 또 나올까요? 
이 id, 우리가 제이쿼리에서 이 id 나오죠? 
HTML에서 id라는 건 그냥 얘를 구분하는 id라고 봐도 되지만 서버 입장에서는 얘가 어떤 체크박스의 데이터가 들어오는구나, 판별짓는 구분자라고 보시면 돼요. 
그래서 여기서도 마찬가지로 지금은 post가 실습에서는 하나밖에 없지만 여러 개가 존재할 경우에는 id로 나눠서 구분지어야 된다고 보시면 되고, 이 원리는 어디에서 적용되느냐. 
제이쿼리에서도 동일하게 적용된다. 맞죠? 
맞죠? 잘못 얘기했나요? 
맞을 거예요. 그래서 지금 이게 전체적인 흐름에 대한 이야기고 오늘은 이거를 딱 잘라서 이 앞부분만 진행을 할 거란 얘기예요. 
그래서 데이터베이스는 없어요. 
얘가 응답을 하게 되면, get이든 post든 응답을 해 주면 나는 정해진 값에 의해서 값을 보내겠다는 거예요. 
get이면 한글 조승철, post면 영어 조승철을 보내겠다는 거예요. 
이 동작값만 확인하겠다는 얘기입니다. 
이해 가시나요? 
그전에 그 서버에 관한 이야기는 나중에 하고요. 
내장 모듈과 객체입니다. 
내장 모듈과 객체를 진행하고 뒤에 이야기를 진행할게요. 
내장 모듈은 뭘까요? 라고 물어보면 이제는 알겠죠. 
아시죠? 강요하는 건 아니에요. 
내장 모듈은 Node.js에서 안에 포함된 모듈이라고 보시면 되고요. 
얘가 기본적으로 포함되고 있는 애가 있고요. 
그다음에 NF... 뭐죠? 거기에서 받아오는 거. 
N... NMF인가? 뭐죠? 
NMP에서 우리가 갖고 오는 게 있습니다. 
그래서 내가 갖고 있는 거를 내장 모듈이라고 하고요. 
외부에서 갖고 오는 걸 또 다른 모듈이라고 보시면 됩니다. 
그리고 또 하나가 있죠. 
어떤 모듈이 있죠? 
내가 만들어놓은, 만드는 모듈이 있고요. 
이렇게 해서 여러분은 모듈을 만들 줄 아셔야 합니다. 

 

---

04. Node.js 시작하기

자바스크립트는 Node.js 를 통해 브라우저 밖에서도 실행 할 수 있다. 아래와 같이 코드를 작성하고 터미널에서 node (파일이름).js 명렁어를 통해 실행할 수 있으며, 이런 식으로 Node.js 를 실행할 예정이다.

function myFunction(){
    console.log('hello world');
}
myFunction();

 

모듈이란 함수와 변수의 집합이다. 즉, 분리된 각각의 자바스크립스 파일이고 이런 식으로 모듈을 분리한건 이유는 재사용을 하기 위해서다. 웹프런트에서 자바스크립트 함수를 별도의 자바스크립트 파일로 만들어 <script>태그를 삽입해 사용했던 맥락과 같다. 

아래 파일은 모듈 파일이다. 파일 자체가 모듈인 것, 메서드로 예시를 들자면 메서드 안에 작성한 함수 부분.

모듈을 만들 줄 아시나요? 안 배웠나요?
모듈의 이름은 뭐와 같을까요? 
파일 이름하고 똑같아요. 
파일을 불러서 그 안에 함수를 끄집어낸다는 개념은 함수의 이름, cho.js를 불러서 그 안에 있는 함수들을 내가 불러오는데 cho. 뒤에 점점, 안으로 들어간다는 얘기예요. 
그다음에 상수 이름, 그렇게 들어가시면 되는데 그걸 안 했다면. 
모듈 만드는 거 안 했나요? 
안 했나요? 
모듈 쓰는 법은 배우셨나요? 아까 말고 여기에서 모듈 쓰는 거. 
-(태진) 책에 있는 거 읽어만 봤어요. 
-(조승철 교수님) 알겠습니다. 어려운 거는 아니고요. 
혹시 함수 만드는 거는 배우셨나요? 
-(태진) 네. 펑션 만드는 거는... 
-(조승철 교수님) 그렇죠, 화살표 함수. 
72페이지 봅시다. 
펑션하고 얘네 뭘 만들고 있죠? 
함수 만들고 있죠? 
펑션하고 함수1, 2, 3. 
여기서부터 다시 한번 설명할게요. 
함수 선언이에요. 
함수명 쓰고 그다음에 괄호는 어떤 거를 말하는 거죠? 
저기 위에 있는 거. 
-매개변수. 
-(조승철 교수님) 매개변수 값이 들어가면 이게 우리가 함수 안에서 적용시키자는 얘기예요. 
A면 A가 여기서 받아서 들어오라는 얘기고. 
함수의 기본 형태라고 보시면 돼요. 
함수 선언하고 함수명하고 괄호, 매개변수 쓰시고 그다음에 이게 뭐죠? 
대괄호인가요, 중괄호인가요? 
뭔가 표시를 하고 그 안에 있는 게 그 함수의 실행문이죠. 
얘의 실행문은 뭘 얘기하고 있는 거죠? 출력하라는 얘기죠. 
밑에 얘는 뭘 의미할까요? 호출하겠다는 얘기예요. 
정확하게 함수를 쓰는 것과 호출법만 아시면 돼요. 
어떻게 호출하냐, 함수명 하시고 괄호 해서 하시면 괄호 안에 함수에 들어가는 매개변수 값들을 집어넣으시면 그 값에 여기로 들어와서 실행된 결과물을 받겠다는 얘기예요. 
이거는 이해가 가시나요? 
이해가 가시면 우리 한번 해 봅시다. 
죄송해요. 
이거 한 번만 해 볼게요. 그리고 결과 한 번만 볼게요. 
우리 함수 쓰는 거 한 번만 더 짚고 넘어가겠습니다. 
HelloWorld 함수 작성하시고 호출하시고 실행까지 해 보겠습니다. 
함수의 호출법은 자바스크립트뿐만 아니라 모든 언어가 동일하게 호출합니다. 
함수 선언하고 함수명하고 매개변수 속성으로 C든 자바든 동일하게 호출한다는 거 알고 가세요. 

 

여러분 죄송한데 예외 처리는 꼭 봐주세요. 예외 처리. 
여기서도 항상 나오고요. 
다른 데서도 항상 나오는 겁니다. 
그리고 항상 여러분이 코드를 짜시든 뭘 짜시든 간에 Node.js에서는 예외, 에러라는 걸 잘 생각하시고 얘가 하나의 시스템이에요. 
시스템이 도는데 작동하는데 원하는 게 나오지 않았다고 이게 멈추면 안 돼요, 그렇죠? 
그렇기 때문에 여러분이 예외 처리, 에러에 대해서 어떻게 처리하라는 게 있어야 됩니다, 꼭. 
그걸 염두에 두시고 코드를 작성하셔야 돼요. 

 

const defaultNum = 1;

function add(num1, num2) { return num1 + num2; }
function minus(num1, num2) { return num1 - num2; }
function mul(num1, num2) { return num1 * num2; }
function divide(num1, num2) { return num1 / num2; }

module.exports = {
    defaultNum, add, minus, mul, divide
}

아래는 실행 파일이다. 모듈을 작성해도 실행 파일을 작성하지 않으면 모듈 파일은 실행될 수 없다.

const {add, minus, mul, divide, defaultNum} = require('./231129_02.js');

이 부분이 모듈 파일을 불러와서 그 모듈 파일 안에 있는 add, min, mul, divide, defaultNum을 사용하겠다고 하는 것. 비유하자면 메서드를 실행하기 위해 불러오는 부분이다. 그리고 아래 console.log 는 모듈 파일을 불러와서 결과를 출력을 하기 위한 부분, 이 곳에 변수가 들어간다.

const {add, minus, mul, divide, defaultNum} = require('./231129_02.js');

console.log(add(7,2));
console.log(minus(7,2));
console.log(mul(7,2));
console.log(minus(6,3));
console.log(defaultNum);

 

터미널에서 모듈 파일의 실행은 'node 실행파일 이름'으로 실행한다.

위 실행파일의 이름은 내가 날짜로 해 놨기 때문에 모듈 파일 이름은 231129_02, 실행파일 이름은 231129_03으로 되어있다.

 

따라서 모듈파일을 불러오는 실행 파일에는 './231129_02.js'로 모듈을 불러오고, 터미널에서 불러온 실행파일을 출력 하는건 'node 231129_03' 으로 한다. 파일 확장자 명은 생략이 가능하며, 실행 결과 위와 같이 9, 5, 14, 2, 1 이 출력된다.

모듈입니다. 
모듈 설명할게요. 
모듈은 의미가 뭐죠? 
-(태진) 만들어놓은 거의 집합을 가져오는 거. 
-(조승철 교수님) 그렇기는 한데 집합이죠. 
어떤 집합? 함수들의 집합이에요. 
우리가 조금 전에 만든 건 함수 한 개를 만들었어요. 
걔가 규모가 커져서 10개, 100개가 되면 우리가 일일이 함수명을 쳐서 쓰는 게 아니라 우리가 모듈명을 치고 그다음에 함수로 들어가는, 이런 식으로 들어가는 게 모듈입니다. 
함수들의 집합이라고 보시면 되고요. 
이 함수들은 내가 연관성이 있는 함수들이라고 보시면 돼요. 
내장 모듈이든 외장이든 여러분이 사용해서 만드는 모듈이든 아무거나 다 있어요. 
서버에 관한 연관성 아니면 애플리케이션 연관성에 의해서 우리가 함수들을 만들고 정리해서 집어넣으셔야 합니다. 
그러면 모듈의 사용법은 뭐만 알면 될까요? 
함수 만드는 건 알았어요. 
그러면 함수를 우리가 여러 개 만들 거예요. 
이건 하실 수 있겠죠? 
그러면 우리가 모듈을 만드는 방법을 알아야겠죠. 
모듈을 만드는 방법은 여기에 보시면 함수들이 몇 개 있죠? 
4개 있죠? 
이 함수들을 만들고 모듈을 만드는 거는 어렵지 않아요. 
그냥 저장하면 됩니다. 
파일을 저장하시면 돼요. 
-파일 자체가 모듈인 거예요? 
-(조승철 교수님) 그렇죠. 
그 파일을 불러서 그 안에 이 함수를 끄집어내겠다는 거예요. 
또는 얘를 해서 끄집어내겠다는 거예요. 
그래서 얘 같은 경우에는 이 모듈, 어디 갔냐. 
이 자체가 모듈 이름이에요. 
이 자체가 모듈 이름이에요. 
모듈. 그 안에 뭐죠? 함수명 그리고 괄호 해 주시고 10, 15면 여기에 10, 15가 이렇게 들어가겠다는 얘기예요. 
모듈을 찾아서 그 밑에 함수 안에 값을 집어넣겠다는 얘기예요. 
이게 자바일 거예요. 
-저기 .js는 생략이 되나요? 
-(조승철 교수님) 네. 생략입니다. 
확장자명은 생략입니다. 
자바도 마찬가지로 모듈을 만드실 때는 이렇게 저장하시고 그다음에 이렇게 불러오시면 됩니다. 
그러면 여기서 조금만 확장을 하면 내가 외부에 있는 모듈을 불러와서 쓰고 싶어요. 
그러면 어떻게 불러와서 써야 되죠? 
모듈을 다운로드 받아서 거기에서 써야 되죠? 
다운로드를 못 받으면 그 모듈을 못 쓰겠다는 거예요. 
모듈을 쓸 때는 항상 다운로드를 받습니다. 
그래서 우리가 책에 보면 모듈 다운로드 받죠. 
그렇게 모듈을 다운로드 받아서 그걸 써야 한다는 게 하나 플러스한 거고 두 번째는 여러분이 얘를 여기서 써야 한다는 거예요. 
모듈에서 함수를 호출하면 이 문제는 다 끝나죠? 맞죠? 아닌가요? 
-(태진) 모듈.익스퍼트, 저 부분이 그거를 해야 이게... 
그냥쓰면 되는 거라고 하셨는데 저거는 무슨 역할을 하는지. 
-(조승철 교수님) 조금 있다가 설명할 건데 얘도 모듈이에요. 
보시면 add라고 쓰여 있는 얘도 모듈이에요. 
저거는 서버에 관한 모듈이에요. 
서버를 생성하고 서버에 응답받고 대답해 주고 이 모듈이에요. 
애플리케이션 모듈은 웹이 돌아가면서 생성되는 그런 애플리케이션의 모듈이에요. 
거기 있는 함수를 쓰겠다는 거예요. 
여기 보시면 이렇게 해서 모듈이 적용됩니다, 해서 쭉 나오는데 얘를 불러와서 쓸 거죠. 
그러면 위에 거는 해도 될까요? 
안 해도 상관없어요. 
여기서 모듈 js 이렇게 작성을 하고 파일은 다른 파일일까요? 
아까 작성하던 거 밑에다가 연결해서 써야 될까요? 
우리가 모듈, 이 파일하고 이 코드하고 위의 코드하고 이 두 개의 코드는 파일이 하나일까요, 두 개일까요? 
두 개예요. 
하나는 실행 파일, 하나는 모듈 파일이라고 보시면 돼요. 
그래서 펑션들이 모여 있는, 함수들이 모여 있는 모듈이라고 보시고요. 
그 모듈을 불러서 내가 쓰겠다고 하면 밑에서 모듈. 이 파일을 새로 만드시고 코드를 짜는데 여기 이건 무슨 얘기일까요? 
얘는 뭘까요? 
-(태진) 모듈을 추가를 하겠다. 
-(조승철 교수님) 얘는 뭘까요? 얘. 
이거 많이 보셨죠? 
어떤 동작을 하겠다는 얘기죠? 
모듈 불러서 쓰겠다는 거죠. 
-경로 지정하는 거 아닌가요? 
-(조승철 교수님) 모듈을 불러와서 쓰는 거. 
경로 지정, 얘네가 어떤 거냐 하면 이렇게 해버리면 우리가 의존성에 대한 이야기가 나오죠. 패키지 어쩌고. 
거기에 얘를 써요. 어떤 모듈이 적용된다고. 
거기에 쓰이는 거고 얘가 경로가 아니라 이 모듈을 쓸 건데 어떻게 쓸 거냐 하면 점슬래시, 얘는 뭐를 말하는 걸까요? 
점슬래시, 실행, 그 위치에서 실행하겠다는 거예요, 얘를. 
점슬래시, 그냥 슬래시는 경로라는 얘기고, 절대경로고. 
점슬래시는 실행하겠다는 거예요. 
그 파일에 있는 거 실행하겠다는 얘기예요. 
얘를 실행해서 그 안에서 얘를 만들, 갖고와서 결과를 보겠다는 얘기입니다. 
얘도 js 파일이기 때문에 위에서 불러올 애도 실행을 시켜 줘야 돼요. 
어떤 모듈이든 실행을 시켜 줘야 됩니다. 
그래서 우리가 모듈 이름을 쓰게 되면 얘를 실행하겠다고 보시면 돼요. 
실행하는 동시에 우리가, 뭐죠? 의존성 들어가 있는 거. 
넘어갑시다. 
거기에 이름들이 저장될 거예요. 
조금 있다가 확인할 거고요. 
아무튼 불러와서 쓸 거고 그다음에 얘네가 이거, 이거, 이거. 
결과가 나오겠죠. 
얘네는 다 어디에 있던 애들이에요? 
위에 있던 애들이죠? 
걔네들을 함수를 불러서 얘, 얘 값을 넣고 결과를 출력해요. 이거 함수를 불러서 넣고 출력해요. 
얘 값을 출력해요. 이 이야기입니다. 
여기까지 되시나요? 
-(태진) 여러 가지 중에 세 가지만 불러오는 거예요? 
-(조승철 교수님) 그렇죠. 
그래서 위의 모듈을 지정하시고 모듈을 불러와서 결과를 보실 줄 알아야 이따가 여러분이 외부에서 들어오는 인터넷에 있는 모듈을 불러와서 쓸 거라는 얘기예요. 
-(상협) 자바 import 개념이랑 비슷한 건가요? 
-(조승철 교수님) 네. 같은 폴더 안에 들어가 있어야 돼요. 
경로 지정해 주시면 돼요. 
-(태진) 그런데 중괄호 형태는 자료구조가, 저 자료구조가 어떤. 
앞에 const 중괄호, add... 이거요. 
-(조승철 교수님) 이건 뭘까요? 
원래 보통 얘 말고 뭘 쓰죠? 이름 쓰죠. 
그러니까 이 모듈에 대한 변수로 받을 이름. 

-(상협) 그러면 스타 쓸 때는 똑같이 중간에 쓰는 거예요? 
-(조승철 교수님) 여기요? 여기 없을 거예요. 
아니면 변수만 바뀌든지, A라는 변수 받아서 이렇게. 
-(태진) A라는 변수를 받으면 실행할 때 A.add 하고 해야 되는 건가요? 
-(조승철 교수님) 아니요. 이렇게 쓰는 건 분명히 이 안에 있는 거 불러다 쓰는 게 맞고 여기에... 
117페이지 책 보세요. 
여러분 보시면 117페이지에 처리 예시 하면서 위에 나오는 거 보시면 여기에 뭐가 들어가 있어요? 
변수명을 쓰시면 돼요. 
변수명을 쓰면 얘가 포함돼 있던 모든 걸 여기다가 상속받아서 모든 걸 다 받아서 쓰겠다는 얘기고 제가 볼 때 얘는 일부만 쓰겠다는 얘기고 이런 형태를 쓸 거고 전체 받겠다는 거는 쓰겠다. 
cho를 얘가 받으면 나중에 밑에 있는 함수 cho. 이런 형태로 되겠죠. 

이거 말고 우리 모듈 불러와서 쓰는 것부터 시작합시다. 
여기는 이해 가시나요? 
저쪽에서 이야기했던 것들. 
불러와서 쓰는 거, 저거 이해하시면 되고. 

다 하신 분들은 이거 한번, 조금 전에 그거 바꿔 보세요. 
이거 줄이고 이거 없애고 얘 되는지 확인해 보시고 얘 의미를 찾아보시면 좋을 것 같아요. 
그리고 여기도 한번 지워보고. 
점의 의미가 뭔지, 계속 만지작거려서 에러를 내 봐야 알아요. 

이쪽도 마찬가지로 이 의미가 뭔지를 옆에서 물어봤거든요. 
이 옆의 의미가 뭘까요? 
-(혁준) 메서드를 가져오겠다. 
-(조승철 교수님) 메서드를 가져오겠다, 함수 가져오겠다는 얘기죠. 
그게 정말 맞는지 얘네 지워 보고 얘네 나오는지 확인해 보시고 점슬래시, 얘 의미가 뭔지 모르죠. 
이거 하나는 경로라는 얘기고 점슬래시가 제가 알기로는 실행일 거예요. 
실행이 되는지 점 지워 보시고 이렇게 하셔서 걔가 오류가 나는지 확인해 보시면 될 것 같아요. 
정확히 동작하는 거 보고 오류를 내 보세요. 

동기와 비동기식 이해를 위한 js 파일

const timeout = setTimeout(() => {
    console.log('1초 후에 실행됩니다.');
}, 1000);

const interval = setInterval(() => {
    console.log('1초마다 실행됩니다.');
}, 1000);

const immediate = setImmediate(() => {
    console.log('setImmediate() 함수 호출 뒤에 오는 모든 코드를 먼저 실행하고 바로 다음에 실행합니다.')
});

console.log('setImmediate보다 먼저 실행됩니다.');

setTimeout(() => {
    clearInterval(interval);
    //변수명이 interval인 1초마다 콘솔창에 출력하기 위해 정의한 setInterval() 함수를 종료합니다.
}, 3000);

 

const fs = require('fs');

const data = fs.readFileSync('./jsy.txt');
const string = data.toString();
console.log('sync work01');
console.log(string);

 

const fs = require('fs');

fs.readFile('./jsy.txt', (err, data) => {
    if (err) throw err;
    let contents = data.toString();
    contents = 'replaced';
    fs.writeFile('./jsy.txt', contents)
});

//실행 안 됨

const fs = require('fs');

const data = fs.readFileSync('./jsy.txt');
const string = data.toString();
console.log('sync work01');
console.log(string);

 

const {nextTick} = require('process');

console.log('start');

setTimeout(() => {
    console.log('tomeout callback');
}, 0);

nextTick(() => {
    console.log('nextTick callback');
});
console.log('end');

 

-(조승철 교수님) 여기에서 애플리케이션에서 여러분이 지우는 거, 콜백 함수 나오고 그다음에 쓰는 법이 나옵니다. 
그리고 여기서 찾아가 보시면서 이게 책보다 정확하게 나와 있는 내용이에요. 
그래서 여러분이 모듈 안에 이런 함수들이 있으니까 내가 여기서 갖고 와서 쓰겠다, 읽어가 보시면서 적용하시면 됩니다. 
쓰는 법 다 나와 있고요. 
여기서 여러분이 찾으셔서 쓰시면 됩니다. 
여기도 마찬가지로 여러분 이 홈페이지가 우리가 모듈들 이야기 나오고요. 
옆에 모듈들 이야기를, 여러분이 이런 모듈이 무슨 이야기인지 옆에 읽어 보시면 되고요. 
그다음에 쭉 내려가 보시면 얘를 어떻게 쓰는지 그 이야기들이 나옵니다. 
그래서 우리가 책에 있는 거는 일부라고 보시면 돼요. 
여기 있는 게 거의 전체라고 보시면 됩니다. 
그래서 여러분이 여기를 읽어가 보시면서 내가 적용할 부분이 어디 있는지 적용하시면 되고 여기서 정리를 하면. 
여러분이 Node.js는 코드를 짜는 건 그렇게 많이는 없을 거예요. 
이 함수를 몇 번 돌려라 아니면 어떻게 해라, 라는 게 있고 모듈을 갖고 와서 그 함수를 붙여서 우리가 원하는 페이지를 또는 원하는 코드를 만드는 거라고 보시면 됩니다. 
이해 가시나요?
그래서 이 모듈들을 다 읽어 보시고 내가 필요한 거, 거의 다 있을 거예요. 
그래서 이 모듈을 불러서 하나의 동작하는 웹페이지, 동작하는 서버를 구성한다고 보시면 좋을 것 같습니다. 
그래서 우리가 레고에서 레고 블록 갖고 와서 뭐 하나 모양을 만들듯이 이게 레고 블록이라고 보시면 되고 그걸 갖고 와서 여러분이 원하는 웹페이지든 웹서버든 만든다고 개념을 잡고 가시면 좋을 것 같아요. 
계속해도 되나요? 
console입니다. 
여러분 세 가지가 있어요, 대표적으로. 
첫 번째 거 뭘까요? 
console.log? 
-(태진) 출력. 
-(조승철 교수님) 그리고 뭔가 명령어를 치든 안 치든 뭔가 여기 안에 로그 파일이 있을 겁니다. 
두 번째 error, 뭐죠? console의 에러 메시지들이 들어가 있는 거를 내가 볼 때 사용하는 거예요. 
그다음에 이건 뭐죠? 
경고, 여기에서 뭔가 프로그램이 돌다 보면 경고 메시지들이 들어오면 여기에 다 쌓이겠다는 얘기예요. 
로그 파일이면 얘가 어떻게 동작하고 있나, 우리가 HTML, HTML 아니고 메모장 형태대로 다 저장이 될 거예요. 
거기에서 몇 개를 읽어올 거냐, 로그, 에러, 경고처럼 저장된 경로를 어떻게 불러올 거냐는 의미고요. 
console은 이런 동작을 할 거라고 보시면 될 것 같아요. 
이해 가시나요?
그래서 여러분 console. 하고 나면 log가 있는데 console이 뭘까요? 



됐나요? 
console입니다. 
console은 내장, 뭘까요? 
내장 모듈 또는 내장 클래스라고 이야기합니다. 
내장 클래스 또는 내장 모듈은 그 안에 함수 또는 메서드가 포함되어 있습니다. 
얘도 내장 클래스기 때문에 얘 안에 얘네들이 내장되어 있고요. 
이것도 마찬가지로 사용법이 인터넷에 정식 문서로 올라가 있습니다. 
그래서 여러분이 이런 console 같은 경우에는 로그 파일을 만들어서 지금 상태가 어떻고, 누가 들어오고 또는 에러 파일이 있어서 그 에러가 어떤 게 들어왔는지를 실시간으로 모으는 거라고 보시면 되고요. 
이거 한 번만 해 볼까요? 
console은 하지 맙시다. 그냥 이해하고 넘어가시고 타임도 마찬가지로 클래스고요. 
내장 모듈입니다. 내장 클래스고요. 
얘 같은 경우에도 사용법을 알아두시면 되는데 타임은 왜 필요할까요? 
console도 마찬가지로 중요한 거지만 타임도 중요해요. 
-시간... 
-(조승철 교수님) 우리가 서버에서 뭔가 시간 안에 메시지가 들어온다든가 아니면 메시지가 안 들어왔다든가 아니면 이걸 반복한다든가 이럴 때 우리가 타임이라는 함수를 사용합니다. 
타임 모듈이라는 걸 쓰고 이 타임 안에는 여러 가지가 있을 거예요. 
그중 대표적으로 여기 나오는 거는 세 가지 나와 있습니다. 
맨 처음은 timeout이에요. 얘는 뭘까요? 
2초다 그러면 2초 지나고 끝나는 거죠. 
그리고 두 번째 거는 뭐죠? 
-(태진) 시간 단위로 반복하는. 
-(조승철 교수님) 2초면 2초 반복, 반복, 반복이에요. 
타임이라는 게 동작이 조금씩 달라요. 
그다음에 밑의 거는 뭐죠? 
끝나고 실행하는 함수예요. 
한 번 돌고 실행하고 다시 한번 돌든. 
이 세 가지가 뭐냐 하면 콜백 함수예요. 
다시 정리할게요. 콜백 함수 뭐죠? 
-(태진) 매개변수로 사용되는... 
-(조승철 교수님) 뭘 위해서 콜백 함수를 하죠? 
-(혁준) 프로그램 종류? 
-(조승철 교수님) 아니에요. 
콜백 함수가 있어서 우리가 뭐와 뭐로 나눠지죠? 
동기식, 비동기식으로 나눠져요. 
동기식은 얘가 계속적으로, 
이벤트가 발생할 때 적용시키는 게 비동기입니다. 
콜백 함수가 왜 중요하냐 하면 비동기할 때 콜백 함수를 보내 줘요. 
그러면 서버가 콜백 함수를 받았을 때 그거를 처리한다는 거예요. 
콜백 함수가 계속 클라이언트를 모니터링하는 게 아니라. 
그래서 우리는 Node.js는 비동기화라고 보시면 돼요. 
그런데 얘가 무조건 다 비동기화는 아니고요. 
어떤 거는 비동기화고 어떤 거는 아닐 수도 있어요. 
그런데 콜백 함수에서 동작하는 건 이렇게 시간 단위로 동작할 수도 있습니다. 
아니면 이벤트가 발생했을 때 동작할 수 있어요. 
그래서 콜백 함수는 무조건 서버한테 알려주는 것이라고 보면 되고요. 
콜백 함수 안에는 데이터들이 들어갑니다. 
그래서 그중에서 시간에서 콜백은 여러분 타임아웃, 얘, 얘 세 가지가 있다는 거 보시고 이거 한번 해 볼게요. 
얘 실행하고 얘 실행하고 아무튼 밑으로 내려오면서 여러분 코드 한번 잘 분석해 보시고 모르는 거 있으면 물어보시고. 

항상 이야기하지만 모를 때는 직접 해 보시는 게 빨라요. 
결과 보신 분? 
결과 다 보셨나요? 
보셨으면 초보자를 위한 200제, 이거 볼게요. 
여기 중에서 우리가 봐야 될 게 비동기와 동기식을 봐야 되는데 다시 한번 짚을게요. 
비동기식 뭐죠? 콜백 함수 들어오면 어디에 쌓이냐 하면 여러분 자료구조 큐 안에다가 쌓입니다. 
큐는 먼저 들어온 게 먼저 나가는 거죠. 
큐 두 번째 들어온 애는 어디에 저장하죠? 
1번 자리에 콜백함수 들어왔으면 2번 자리 콜백함수 들어가겠죠? 
만약에 큐 5개라고 하면 여기, 여기 이렇게 들어오겠죠. 
그런데 여기 있는 애가 스택으로 들어와서 처리를 할 거예요. 
그러면 어디로 들어오죠? 
맨 아래 들어오죠, 여기. 
그래서 이렇게 나오죠. 
그런데 우리가 비동기화는 여기서 처리를 해야 될 A가 처리를 해야 되는데 중간에 급하게 다시 들어오는 애가 있어요. 
빨리 처리해야 되는 애. 
얘가 처리하고 있는 도중에 기다리는 건 동기식이고, 기다리지 않고 또다시 동작하게 만드는 게 비동기화예요. 
그래서 동기화 들어왔어요. 
그러면 어디에 들어오죠? 
두 번째 콜백함수가 먼저 처리해야 되니까 스택으로 들어와서 지금 처리하는 건 밀어넣고 여기 쌓이죠, B에. 
B, A면 누가 먼저 나오죠? 
그래서 먼저 처리하겠다는 얘기예요. 
그래서 쌓이는 거는 큐에 쌓이고 처리할 때는 스택으로 처리해서 스택에서는 얘가 두 번째 들어오는 애가 빨리 처리해야 된다고 했을 때 그때 스택을 처리해요. 이해 가시나요? 
-(태진) 교수님, 
-(조승철 교수님) 큐, 스택 두 가지. 
-(태진) 힙... 
-(조승철 교수님) 힙도 있어요. 
그거는 아예 처리, 여기가 힙이고. 
여기는 아예 처리하는 곳이고. 
콜백함수로 처리하기 전에는 이 단계, 들어가면서 큐에 쌓여요. 
큐에 쌓이고 맨 처음에 스택에 넣고 다시 빼겠다는 거예요. 
두 가지 의미는 달라요. 
얘는 하나 들어오면 여기 쌓이고 두 번째 여기, 세 번째는 여기인데 여기는 A가 처리하고 있으면 대기하고 있어야 돼요. 
B가 급하게 들어왔다고 하면 B 처리해야 되죠. 
그런데 큐를 집어넣으면, 이 큐를 집어넣으면 A가 처리하고 있는 상태에서 B가 들어왔는데 B가 먼저 처리해야 되죠. 
B를 A보다 먼저 처리해서 밖으로 빼내고 싶다는 얘기예요. 
이해 가시나요? 
잠시만요. 뒤쪽이 큐예요. 
이 뒤가 큐고. 
콜백함수가 1, 2, 3, 4가 들어오면 1, 2, 3, 4가 들어와요. 
여기서 동기식은 1 들어가서 여기 1 처리해요. 
1 처리하면 1 처리하는 순간 여기 들어오는 순간 2를 보내지 못한다는 얘기예요. 
얘가 들어와서 메모리 처리할 때까지 기다려야 돼요. 
그런데 비동기는 들어와서 처리하고 있는 순간에 얘를 멈추고 두 번째 거를 넣어서 처리를 하겠다는 얘기예요. 
이거를 하기 위해서는 큐와 큐가 아니라 큐와 스택의 구조로 가지고 가야 돼요. 
얘가 처리해서 처리하고 있는 순간에 이걸 먼저 처리하려면 스택에 집어넣으면 1, 2가 되면서 누구를 빼냐 하면 2를 빼기 때문에 1을 처리하고 있다가 스톱시키고 2를 처리하겠다는 거예요, 먼저. 
그럴 때는 이 구조예요. 
큐스택 구조로. 
큐큐 구조면 어떻게 해야 되죠? 
-(민지) 동기식으로, 
-(조승철 교수님) 그렇죠. 1 들어가서 1 들어가서 1 해야죠. 
2 들어가서 2 들어가서 2. 
큐스택에 따라서 동작하는 구조가 다르다는 거예요. 
이게 자료구조라는. 
동기식, 비동기 할 건데 233페이지 볼게요. 
여기에서 여러분 이 코드 한번 실행하겠습니다. 
코드에서는 동기화시킬 때는 이렇게 동기화 써서 동기화를 한다는 거 한 번씩 읽어 보시고 해 보세요. 
여러분 저거 만약에 이거 실행하려면 이렇게 실행하면 될까요? 
어떻게 해야 되죠? 
-(민지) 메시지라는 텍스트... 
-(태진) 메모장이 있어야... 
-(조승철 교수님) 얘가 txt 파일, 메모장이에요. 
같은 폴더 안에 메모장 집어넣고 얘를 실행하겠다는 거예요. 
읽어들여오는 방식을 동기식 방식으로 읽어들이겠다는 얘기예요. 
이걸 잘 보시라는 얘기예요. 
동기식으로 할 건지, 비동기식으로 할 건지 코드에서 보면 여기에서 표시를 그렇게 하냐에 따라서 동작이 바뀌는데 여러분이 동기식과 비동기식을 이해하시고 하셔도 되고 그냥 코드에서 보고 하셔도 되고 아무튼 동기식과 비동기식은. 
또 하나 코드 보시면, 얘 지금 뭐 하는 거죠? 
모듈 불러와서 쓰겠다는 얘기죠? 
무슨 모듈이죠? 
이 입출력 파일 얘를 불러와서 쓰겠다는 얘기예요. 
그래서 여러분이 이 표현 잘 알아두셔야 돼요. 
모듈 불러올 때는 이렇게 불러온다는 거. 
모듈 불러와서 저장하고 들어 있는 함수 중에서 이 함수를 갖고와서 쓰겠다는 얘기예요. 
이해 가시나요? 여기까지. 
데이터를 여러분이 출력할 건지 출력을 동기식으로 할 건지 비동기으로 할 건지 나타낼 거라고 보시면 돼요. 

여러분 이거 메모장에 있는 거 불러온다고 생각하시면 됩니다. 
여러분 메모장에 여러분 이름 쓰시고 출력한다고 보시면 돼요. 

지금 여러분 하시는 건 동기식이에요. 아시겠죠? 
동기식 방식이라는 얘기예요. 
여러분, 저거를 비동기식으로 바꾸려면 어떻게 바꾸죠? 
기본이 비동기식이에요. 
여기 봤나요? 
안 되시는 분? 
다 하신 분들은 236페이지. 
비동기식 방식 해 볼게요, 236페이지. 
-(태진) 교수님, 236페이지가 예외 처리인가요? 
-(조승철 교수님) 비동기식 예외 처리입니다. 
자바에서 배우셨죠? 
예외 처리라는 건 뭐냐 하면 어떤 일을 하다가 그 문법에 안 맞고 아무것도 없을 때 그때 예외 처리를 하는 거예요. 
여기도 마찬가지로 에러가 뭐 발생을 했을 때 그 발생한 거 어떻게 처리해라. 
오류가 발생했을 때는 어떻게 처리해라, 라는 게 목적이고요. 
여기서 마찬가지로 얘가 발생하면 얘가 실행이 될 거고 얘가 실행이 안 되면 밑에 있는 애들이 실행될 거라는 게 기본 개념이고요. 
그거 밑에 거 읽어 보시면서 적용해 보세요. 
그리고 앞에서 했던 거랑 얘랑 차이는 어떤 거죠? 
여기가 뭔가 안 붙었죠? 
그 차이도 한번 보시면서 작업을 해 보세요. 
여러분이 코드를 보시면 예외 처리를 할 겁니다. 
얘가 읽어지면 그 결과를 무조건 내놓을 거예요. 
그런데 우리가 웹인데 웹에서 에러가 나면 그걸 시스템을 멈출 수는 없죠. 
멈출 수 없기 때문에 걔를 어떻게 한다? 
다른 방식으로 처리하라는 설명서들이 붙어 있어요. 
그걸 예외 처리라고 이야기하고요. 
여기에서는 뭐라고 이야기하죠? 
이렇게 처리하겠다는 얘기예요. 

 

맨 처음에 얘가 실행이 되고요. 
얘 실행되고요. 
그다음에 얘 실행, 되나요? 실행되죠? 
그다음에 누가 실행이 되죠? 
얘 실행되고 얘 실행됐어요. 
그런데 결과는 이렇게 나왔어요. 왜 그렇게 나온 거죠? 
얘를 A, 콜백이고 얘가 B 콜백이면 제일 처음에 A 콜백이 스타트, 큐에 있다가 들어온 거예요. 
얘는 10초 후에 나갈 거예요. 시간이, 뒤에. 
그런데 뒤에서 빨리 즉시 실행인 B 콜백이 들어왔어요. 
그러면 얘는 10초를 기다리는 게 아니라 바로 처리해서 나오겠다는 얘기예요. 
그래서 얘 찍힌 거예요. 
그리고 10초 있다가 나와서 얘 찍힌 거예요. 
그리고 얘네는 대기할 필요 없이 즉시 실행이니까 바로 이렇게 찍히는 거예요. 이해 가시나요?
그래서 콜백함수는 동기식, 비동기 있어요. 
동기식이라는 거는 콜백함수 A가 들어왔으면 A가 처리될 때까지 기다리는 방식을 동기식이라고 하고고요. 
비동기는 A가 들어왔지만 뒤에 또 다른 애가 들어오면 걔가 우선권을 갖고 있으면 걔를 우선 처리하는 거예요. 
그래서 얘가 들어오는 거고요. 
시간에 따라서 얘가 빠르면 이렇게 나와서 처리하는 거고, 얘가 늦게 들어오면 늦게. 
-(민지) B가 처리 안 되잖아요. 
A 10초 뒤에 나가는데 B 처리 못 하면 A 못 나가는 거 아니에요? 
-(조승철 교수님) A가 10초고 B가 30초예요. 
그러면 얘가 안 들어왔다는 얘기죠? 
아예 들어오지 않아요. 
30초 있다 들어오는 거고. 
얘는 10초인데 뒤에서 10초 기다렸다가 들어왔다는 얘기예요. 
그래서 갑자기 바로, 얘는 시간이 없죠. 
바로 들어온다는 얘기예요. 
바로 콜백함수가 들어왔다는 얘기예요. 
그런데 여기 쌓인 상태가 A, B라는 얘기고 이 상태에서 누구를 먼저 빼냐 하면 B를 먼저 뺀다는 얘기예요. 
그리고 얘를 뺀다는 얘기예요, 이렇게. 
얘는 뭐냐 하면 우리가 같은 여러 개 콜백함수가 호출됐을 때 어느 애가 먼저 우선권을 갖고 있느냐를 선택할 때 이렇게 써요. 
저쪽도 이해 가시나요?
-(태진) 교수님, 셋타임 여러 가지 만들어서, 그럴 때는 스택에 쌓이는 순서가 어떻게 되는지. 
그냥 시간 순서대로 알아서 쌓이는 건가요? 스택이. 
-(상협) 그런데 기다렸다가 들어오는, 
-(조승철 교수님) 큐에 넣었다가 기다렸다가 빼는데 이제 그거 자세한 동작은 이 함수를 뜯어봐야 되죠. 
그러니까 기본 개념은 그 개념인데 얘가 실질적으로 들어오는 순서가 큐로 들어오는지, 왜냐하면 이중큐일 수도 있고 원형큐일 수도 있고 이 큐의 정의를 뜯어봐야 돼요. 
이중큐면 이렇게 2개가 들어올 거거든요. 
하나는 이렇게 쌓이고 이렇게 쌓이고 이렇게 들어오고 이렇게 들어오는 게 있는데 이걸 쓴 건지, 그냥 큐라고만 쓰여 있어서 이걸 쓴 건지 다른 큐를 쓴 건지 찾아봐야 돼요. 
그게 시간에 의해서 빼내는 건지 아니면 집어넣는 순서에 따라서 빼내는 건지는 몰라요. 
그 순서는 제가 뜯어봐서 찾아봐야 돼요. 
-(상협) 넥스트틱이 비동기고 셋타임아웃은 동기인 거예요? 
-(조승철 교수님) 둘 다 같은 거예요. 
-다 비동기 아니에요? 
-(조승철 교수님) (끄덕끄덕) 
동기식이면, 
-(태진) 동기식이면 셋타임 여러 개를 쓰면 다 다르게, 다 기다렸다가 실행이... 
-(조승철 교수님) 여기다가 동기식을 넣으면, 얘가 동기식이죠? 
얘가 들어왔죠? 여기에. 
그러면 얘 기다려요. 
얘가 처리될 때까지 뒤에 있는 애들은 쭉 기다려요. 
이 순서예요. 
얘 출력하고 얘 출력하고 얘 출력되고 얘 출력하고 얘 출력하는 거예요. 
얘가 처리될 때까지 뒤에 있는 애들이 기다려야 돼요. 
됐나요? 여기도 됐나요? 
여기 됐나요? 

URL 모듈이란 인터넷 주소에 해당하는 url 을 다루기 위한 모듈. url 문자열은 아래의 순서로 의미 있는 여러 구성 요소를 포함하는 구조화 된 문자열이다. 

"https:// user : pass @ sub.example.com : 8888 /p/a/t/h ? query=string #hash "

https 는 http 프로토콜을 사용해 웹 페이지의 구조가 어떻게 되어 있는지를 읽는다. 만약 https 가 아니라 FTP 를 붙이면 파일 전송 프로토콜을 쓰겠다는 의미가 된다. 

user : pass 는 계정과 비밀번호, 즉 로그인이나 배경의 ID 또는 패스워드를 입력받아야 할 때 쓰임. 만약 이게 없다면 계정과 비밀번호가 따로 필요하지 않은 것, 생략할 수 있다. 

골뱅이 뒤쪽으로는 도메인 네임 주소를 가지고. 그 뒤로 포트번호를 쓴다. 이 뒤에는 경로를 작성하며, 만약 특정 경로가 있다면 특정 경로를 쓰면 되다. 경로가 앞에 붙거나뒤에 붙어서는 안된다. 

마지막 #hash 란, 암호화에서 나오는 해시 함수를 가리킨다. 양식을 모두 맞춘 뒤 암호화 시켜서 내보내겠다는 의미, http 를 하고 나서 주소를 보내면 user 와 pw가 노출이 되기 때문에 암호화가 필요하다. 도메인 네임과 pw가 서버쪽에서 보이면 안되기 때문에 암호화를 하며, 해커로부터 정보를 보호한다. 암호화 된 정보는 코드 자체가 있어야 풀어볼 수 있으며, 누군가가 키를 가지고 암호화를 했다면 키를 가지고 있어야 풀 수 있다. 여기서 말하는 키는 클라이언트와 서버가 양쪽에서 하나씩 가지고 있다 (첫 통신 시 섹션을 맺으면서 키를 나눠가짐). 즉,  url뒤에 암호화 시킬 거라면 url 뒤에 작업을 해야 한다고 이해하면 된다.

 

07.Express 로 웹 서버 구축하기

node.js 기반으로 개발하다보면 npm에 등록되어있는 패키지를 사용하게 된다. 구현하는 애플리케이션에서 사용하고 있는 패키지와 버전은 개발중인 애플리케이션을 론칭하고 운영하는데 상당히 중요하며, 패키지는 의존성을 가지고 있어 내가 사용하고 있는 패키지가 참조하고있는 다른 패키지를 특정 버전 내에서 사용해야 오류 없이 동작한다. 

 

패키지 설치 과정을 express 로 예시를 들어서 아래 순서로 진행된다.

1) npm install 패키지명 ( npm install express )

2) app.js 생성

const express = require("express")
const app = express()
const port = 3000

app.get('/',(req, res) => {
    res.send('hello world!')
})

app.listen(port, () => {
    console.log(`서버가 실생됩니다. http://localhost:${port}`)
})

Listen을 빼면 get이 들어왔을 때 응답을 하지 못한다 (get을 듣지 못한다). 이럴 경우 우리는 흔히 서버가 응답이 없다고 들었을 것이다.

 

3) node app.js 로 파일 실행.

원격제어 컴퓨터에서 실행시킨 서버, 접속이 잘 된다.

npm install express 를 하면 비주얼 스튜디오에 express 패키지가 설치가 된다. 하지만 동시에 node-project 와 함께 node-modules 라는 폴더도 자동으로 생성된다. 이 폴더 내에는 다양한 파일이 생성되는데, 이는 내가 사용하기 위해 인스톨한 express 패키지 내부에서 참조하고 있는 다른 모든 패키지가 설치되어있는걸 볼 수 있다. 내가 설치한 파일을 사용하기 위한 내부 파일이 분리되어 있는 형식이다.

위에서 말했듯 패키지는 의존성을 가지고 있다. 즉, 남이 패키지를 가지고 있어도 내가 가지고 있는 버전의 패키지가 아니라면 오류가 발생한다는 의미. 따라서 만약 남이 내가 개발중인 애플리케이션을 오류 없이 열어보기 위해서는 내가 구현중인 애플리케이션에서 사용하고 있는 package와, 그 package 에서 사용하고 있는 (내부 패키지가 설치된) package-lock을 같이 보내줘야 버전의 차이 없이 오류가 발생하지 않을 것이다. 

 

원격 컴퓨터의 ip주소는 210.117.212.136, 구로공단 컴퓨터에서 원격에서 작업한 서버로 접속하기 위해 http://210.117.212.136:3000 를 쳐봤다. 결과는 접속 잘 됨. 서버가 생성된 것,  express 를 이용해 3000포트 서버를 활성화 한 것이다. 활성화 한 서버의 동작은 Listen, http ip 주소 :: 포트번호가 들어오면 이 포트번호는 3000번에서 들어오는것. 이 과정은 결국 서버를 하나 만들어서 3000 포트로 들어가 요청을 하면 get으로 보내고 get으로 받는 식으로 서버가 하나 구동이 되는거라고 볼 수 있다. (이 상태에서 메인 페이지와 연결하고, 여기에서 DB를 연결을 해 나갈 예정이다. 즉, 서버를 구축할 것이고 구축하는데 필요한 요소를 집어넣을 것이다. ) 

 

 

get 과 post의 동작이 다르다는걸 확인하기 위해 아래와 같이 코드를 작성했다. 웹 페이지에서 출력될 화면 HTML  파일을 작성하고, 해당 파일을 불러와 실행하는 JS 코드를 작성한다. 즉, 두개의 파일이 작성이 되어야 한다. 

여러분 초보 이 책 몇 페이지냐 하면 246페이지. 
죄송합니다. 
262페이지. 이거 하나만 보고 끝낼게요. 
262페이지, 맨 처음에 HTML 파일 하나 만드시고요. 
걔를 이번에는 http, 뭘 만들겠다는 얘기죠? 
제가 습관이 돼서 계속 이쪽으로. 
http 모듈 만들겠다는 얘기죠. 
아까 그거 쓰겠다는 얘기예요. 
이번 서버는 http 모듈을 가지고 서버를 만들겠다는 얘기예요. 
서버의 종류도 여러 가지가 있어요. 
이번에는 http 모듈을 이용해서 서버를 만들 겁니다. 
여러분, 만들고 두 개가 필요해요. 
모듈 두 개가 필요합니다. 
하나는 http 모듈 또 하나는 뭐죠? 
fs, 이건 뭐죠? 
파일 입출력, 두 개의 모듈을 이용해서 얘네들을 동작시킬 겁니다. 
여기에서 보시면 얘가 뭘 의미하느냐. 
서버를 활성화시키겠다는 얘기예요. 
그래서 http. 하시고 이렇게 쓰시면 서버를 실행하겠다는 얘기예요. 
서버를 실행하고 얘네 둘, 얘는 뭐죠? 
얘, 얘? 
보내고 받고, 받으면 처음에 들어오는데 get으로 받으면 어떤 동작을 하겠다는 얘기죠? 
get 하고 여기 있는 거 동작하겠다는 얘기죠. 
그리고 post를 받으면 여기를 동작하겠다는 얘기예요. 
그래서 여러분이 get으로 한번 보내 보시고 post로 한번 보내 보셔서 얘를 동작시킬 건지, 얘를 동작시킬 건지 구분해 보시라는 얘기예요. 
이해 가시나요?
여기서 말하는 건 파일을 두 개 작성하셔야 돼요. 
하나는 http, 메인 페이지 하나. 
두 번째는 뭘 하라는 거죠? 
서버 프로그램, Node.js 두 개 폴더예요. 
하나는 메인 홈페이지, 두 번째 거는 Node.js 파일을 만드셔서 메인 페이지를 어떻게 하면 클라이언트에서 보내 주고 클라이언트 쪽에서 받는데 클라이언트가 우리한테 줄 건데 get이라는 요청을 하면 얘를 실행할 거고 post를 요청하면 얘를 실행할 거라는 거예요. 
한마디로 get하고 post 동작이 다르다는 걸 보는 예제라고 보시면 돼요. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Example for POST</h1>
    <form method = "post">
        <table>
            <tr>
                <td> Soju</td>
                <td><input type="text" name = "beverage_1"></td>
            </tr>
            <td>Beer</td>
            <td><input type="text" name = "beverage_2"></td>
        </table>
        <input type="submit">
    </form>
</body>
</html>

const http = require('http');
const fs = require('fs');

http.createServer((request, response) => {
    if(request.method === 'GET'){
        fs.readFile('./231129_09.html', (error, data) => {
            response.writeHead(200,{'content-type':'text/html'});
            response.end(data);
            console.log(`${request.method} 방식의 요청입니다.`);
        });
    }else if(request.method === 'POST'){
        request.on('data', (data) => {
        response.writeHead(200,{'content-type':'text/html'});
        response.end(data);
        console.log(`${request.method} 방식의 요청입니다.`);
    });
}
}).listen(50000,() => {
    console.log('서버가 동작 중입니다, http://127.0.0.1:50000');
});

 

터미널 결과는 아래와 같다.

 

node 231129_10  로 실행하고 주소를 타고 들어가면 옆과 같이 창이 뜬다.

포트 500000으로 접속이 가능한 서버를 만들었고, 제출 페이지가 넘어갈 때 어떤 방식(GET, POST) 으로 넘어가는지 출력이 된다.

이것 또한 마찬가지로 서버를 하나 만들어서 50000 포트로 들어가 요청을 주고 받으면서 어떤 방식으로 오고 가는지 확인해보는 과정이라고 볼 수 있다. 

 

 

 

 

 

 

 

 

원격제어 컴퓨터에서 작업한 것을 구로공단에서 IP주소:포트번호로 접속해봤다. 문제없이 접속 잘 됨, 서버를 만들었다면 다른 컴퓨터에서도 잘 작동이 되는지 확인해봐야 한다.

정리할게요. 

우선 여러분이 서버나 생성하시고요. 
포트번호 붙이셔서 외부에서 이 서버가 접속이 가능해야 되고 내부에서도 보여야 돼요. 
만약에 내부에서 보이는데 외부에서 안 보이면 뭔가 잘못됐다고 보시면 돼요. 
그리고 그 외부에서 접속을, 서버를 만든 상태에서 이제부터 뭘 할 거냐 하면 이제부터는 우리가 get하고 post를 만들어서 계속 주고받고 주고받고를 테스트할 거란 얘기예요. 
오전에 제가 그렸던 그림 생각나시나요? 
-(태진) 서버랑 왔다 갔다 하는. 
-(조승철 교수님) 지금 우리는 서버라는 애를 만들었어요. 
3000포트를 가지고 만들었어요. 그렇죠? 
그러면 우리가 여기에 클라이언트 PC겠죠. 
여기에서 내가 주소로 접근을 해요. 이 방식은 get이에요. 
get으로 접근을 하면 그거에 대해서 응답을 줘야 돼요. 
이 동작이 제대로 돼야 된다는 얘기예요. 
즉, 이 동작 테스트하고 있다는 거예요. 
get이라는 애 되면 우리는 post라는 애를 다시 한번 해야 돼요. 
포스트 주면 포스트로 받아야 돼요. 
내가 포스트로 받으면 조승철을 보내고 get을 보내면 건국대학교를 보낸다고 테스트를 해야 돼요. 
포스트의 방식으로 오면 포스트값을 보내 줘야 되고 그리고 get의 방식으로 오면 get의 값을 보내 줘야 돼요. 
이해 가시나요? 
이걸 하셔야 되고. 
두 번째, 여기서 더 나아가서는 값을 주는 게 아니라 URL을 줘도 되고요. 
하나는 get이면 A HTML, B HTML이라는 걸, get이면 A HTML, get이면 얘 HTML을 정보를 줘도 상관은 없어요. 
아무튼 이게 테스트가 되면 세 번째는 뭐냐 하면 form을 이용해서 체크박스든 무슨 박스든 여러분이 하나를 만드셔서 클릭하면 post로 받으면 1번 넘겨주고 얘를 받으면 뭐로 넘겨주고. 
아무튼 get과 post를 가지고 결괏값을 서버에서 반환하는 것을 동작해 보셔야 한다, 이 이야기입니다. 
그게 오늘 해 보려고 했던 이야기예요. 
이해 가시나요? 
그래서 여러분이 집에 가셔서 해 보셔야 될 건 이겁니다. 
여기에서 보시면 3000포트, 서버 3000포트고요. 
get으로 들어오면 이거 하고 post로 들어오면 뭐로 하죠? 
이거 응답받으시면 되죠. 
이게 동작이 되면 서버가 동작된다, 여기서부터 여러분이 서버의 동작 기능들을 추가할 거다, 라고 생각하시면 될 것 같아요. 
이 다음 작업은 뭐냐 하면 서버의 기능들을 추가할 겁니다. 
지금 서버 껍데기만 만들었다고 보시면 돼요. 
그러면 우리가 웹서버에 동작할 수 있는 기능들을 계속 붙일 거란 얘기예요. 
이해 가시나요?


그만합시다. 
여기도 다음에 오기 전에 이거 한 번만 더 실행해 보세요. 
여기 부분. 
서버가 실행이 돼야 서버와 여기 118페이지 우리 교재 118페이지 이게 실행이 돼야 그다음에 진행을 합니다. 
아시겠죠? 
이게 테스트해서 성공해 주셔서 오세요. 
-(상협) 저거로 해요, 아니면 200제에 있는 거 해요? 
-(조승철 교수님) 우선 저거로 하세요. 
200제는 웹서버예요. 저거는 그냥 서버고. 
마칠게요. 
수고하셨습니다. 

추후 Node.js 교재에 있는 118pg 라우팅 처리 과정의 이해를 위해 익스프레스 서버를 3000포트로 실행 해볼 필요가 있다.