2017 SW교육 학생동아리 Lecture 3.

2017 SW교육 학생동아리에서 진행한 "리눅스 서버를 연동한 드론 소프트웨어 프로그래밍"강의 자료입니다.

Transcript

1. Lecture 03 2017 SW교육 학생동아리 학습 목표 1. 기본 소스 살펴보기 2. HTTP 통신 이해하기
2. 프로 Express 서버 웹 서버를 쉽고 빠르게 구축하기 위해 Node JS의 많은 모듈 중 Express 라는 모듈 사용
3. 프로 JavaScript 기본 문법 변수 초기화 예시 : =(등호표시)는 같다는 의미가 아닌 ‘대입‘ 변수에 데이터를 저장할때 사용 변수란? : 데이터를 담는 그릇(데이터의 저장위치) 다양한 값을 변수에 저장한 뒤, 호출하여 사용 =(등호) 의미
4. 프로 기본 소스 살펴보기 -> Express 모듈 불러오기 -> Express 객체 생성 -> 라우터 생성 -> 서버 시작(포트 8888)
5. 프로 라우터 코드 살펴보기 라우터 코드의 형식 예시 클라이언트에서 요청할때는 http://서버주소/모듈이름 의 방식으로 요청
6. 프로 res, req? req : 클라이언트로 부터 넘어온 데이터가 저장된 장소 res : 클라이언트에게 응답할 수 있는 객체
7. 프로 res, req? 클라이언트 서버 req res req를 활용해 서버에 요청하면 서버는 res를 통해 클라이언트에 응답한다.
8. 프로 GET API : HTTP 통신 방법 중 하나로써, 서버로 전달하는 데이터가 주소에 명시적으로 보이는 방식 유튜브 검색시 통신하는 방식이 이에 해당. 주소를 보면 v=vcSONxCtnyA 라는 데이터가 명시됨. But 주소에 명시하는 방식이기 때문에, 전송할 수 있는 데이터에 제한이 생겨보리는 단점! 또한, 데이터 전송시 암호화가 이루어지지 않기 때문에 보안에 취약. 따라서 서버의 데이터를 변경할 때 보다는, 서버에 존재하는 데이터를 조회하거나 보여줄때 사용됨.
9. 프로 GET API - 사용방법 app.get 구문을 사용하면 GET 통신기반의 라우터가 생성됨. ★ 실전코드 -> pass 라우터 생성 ->req.query로 클라이언트로부터 받은 데이터 조회 ->res를 통해 받은 데이터를 다시 클라이언트에 응답
10. 프로 GET API - 테스트하기 웹 브라우저를 이용하여, 작성된 GET 기반의 pass 라우터를 테스트해보자 팀 A 175.112.236.132:8887 /pass?data=1 팀 B 175.112.236.132:8886 /pass?data=1 주소방식으로 서버에 데이터를 넘겨줄 때 ?(물음표)와 =(등호)표시의 문법을 쓸 수 있다. pass 라우터에서는 data라는 데이터를 조회하고 있으므로, 클라이언트에서 data라는 이름의 데이터를 넘겨줄 필요가 있다.
11. 프로 GET API - 테스트하기 코드상에서 의도했던 대로 넘겨받은 데이터를 그대로 클라이언트에 돌려주는 기능을 수행한다. `
12. 프로 GET API - 테스트하기 만약 서버와 클라이언트가 주고 받는 데이터가 두개 이상이라면, 요청과 조회는 다음과 같이 가능하다. &(앤드표시)를 사용하여 2개이상의 데이터를 구분한다. req.query 문을 두번 사용하여 두 데이터 모두 조회할 수 있다.
13. 프로 POST API : HTTP 통신 방법 중 하나로써, 서버로 전달하는 데이터가 주소에 명시되지 않음 덕분에 서버로 전송할 수 있는 데이터 길이의 제약이 없고, 암호화가 되기 때문에 GET보다 상대적으로 보안에 강하다. 하지만 데이터가 주소에 명시되지 않는 방식이라 주소를 통한 서버 통신이 불가능(=웹 브라우저를 통한 통신 불가능).
14. 프로 POST API post 통신은 데이터를 서버로 전송시 HTTP Body 라는 객체에 담아 전송함. 따라서 HTTP Body의 데이터를 읽어들일 bodyParser 객체의 사용필요. app.post() 의 형태로 라우터 생성 가능. 다른 부분은 GET과 유사. 클라이언트로부터 받은 데이터를 조회하는 방식이 GET과 다름 GET :
15. https://www.getpostman.com/ POST API - 테스트하기 POST 통신은 전송할 데이터를 주소에 명시하지 못하므로 웹 브라우저를 통한 테스트가 불가능 -> POST 통신이 가능한 별도의 테스트 프로그램 사용 [포스트맨] 프로그램 사용 다운로드 : https://www.getpostman.com/ 자신이 사용하는 컴퓨터에 맞는 프로그램 다운
16. 프로 POST API - 테스트하기 로그인 또는 하단의 [Take me...] 옵션을 통해 메인 화면으로 진입하기.
17. 프로 POST API - 테스트하기 1. 왼쪽의 통신방법 선택란에서 POST를 선택 2. Body 탭에서 MIME TYPE을 [x-www...]방식으로 변경
18. 프로 POST API - 테스트하기 서버에서 id와 pw라는 이름으로 데이터를 받아오고 있으므로 클라이언트에서도 id와 pw의 이름으로 데이터를 전송해야함. 3. 데이터 추가하기
19. 프로 POST API - 테스트하기 팀 A 175.112.236.132:8887 /user 팀 B 175.112.236.132:8886 /user 4. 주소창에 각 팀별로 부여받은 서버의 IP를 입력한 뒤 [Send] 버튼 클릭
20. 프로 POST API - 테스트하기 코드상에서 의도했던 대로 id와 pw값이 다시 클라이언트로 반환되는 모습을 확인할 수 잇다.
21. 프로 POST vs GET GET 통신과 POST 통신의 비교
22. 프로 정리 웹 서버의 통신 방식인 GET과 POST에 대하여 알아보았다. 결국, 서버는 단순하다. 오늘, GET이나 POST 등의 통신을 기반한 라우터들을 만들어보았는데, 클라이언트에 맞게끔, 해당 코드들을 여러 작성하면, 그것이 서버이다.
23. 프로 질문 질문 받는다 적극적으로 질문 하여라!!!!
24. 프로 다음 시간에는... 1. 데이터베이스란 무엇인가? 2. 서버에 MySQL DB 연동 실습
25. 프로 참고 강좌 http://blog.naver.com/wlsdml1103/221154373834 http://blog.naver.com/wlsdml1103/221155261911
26. 감사합니다. 2017 SW교육 학생동아리