DSC Ewha seminar concept of web and server

1. Web & Server
발표자 : DSC Ewha Lead 김민정

2. HTML 파일 = 웹 문서

3. 웹 브라우저 : html 을 읽어주는 프로그램

5. HTML로 정보를 보여주기만 하는 것은 가능하다!
구글과 유사하게 만들 수는 있다!
단 정적데이터로

6. 하지만!
불특정 다수의 유저가 이 서비스를 이용할 때
우리가 예상한 정보들에 대해서만 검색을 하는가?
추가로 이럴 경우엔 유저별로 드라이브 서비스를 사용할 수 있을까?

7. 하지만!
불특정 다수의 유저가 이 서비스를 이용할 때
우리가 예상한 정보들에 대해서만 검색을 하는가?
추가로 이럴 경우엔 유저별로 드라이브 서비스를 사용할 수 있을까?
HTML / CSS 순수 JS만을 이용해서 만든 웹 페이지 : 정적이다

8. HTML / CSS 순수 JS만을 이용해서 만든 웹 페이지 :정적이다
내 PC로 html 파일을 다운 받아서 사용한다.
검색어 입력을 해도 파일에서 제공하는 검색어에 대한 결과만 낼 수 있다.
그리고 내가 무엇을 입력했는지 저장하고 싶을 때에 대한 변경적인
로직을 html 만으로 담는 것이 어렵다.
여러 유저끼리의 커뮤니케이션을 하는 서비스가 나오기 어렵다.
엄청난 데이터가 들어갈 텐데 html안에 담는게 사실상 불가능하다.

9. 웹 서비스
Web World Wide Web (= 인터넷)
Service 사용자가 원하는 것을 제공

10. 웹 서비스
Web World Wide Web (= 인터넷)
Service 사용자가 원하는 것을 제공
서버 – 클라언트 구조를 이용하여 서비스를 만든다.

12. URL(Uniform Resource Locator)

13. 요청에 대한 정보가 들어간 html 파일

14. 서버에 요청
HTTP
Request
1. 간단한 DB 저장
오늘의 일기를
등록 할꺼야!

15. Request를 처리하기 위한 로직 수행
DB에 저장
OK
1. 간단한 DB 저장

16. Request를 처리하기 위한 로직 수행
DB에 저장
OK
1. 간단한 DB 저장
클라이언트에 응답
Response
200 OK

17. 서버에 요청
HTTP
Request
2. Cloud에 이미지 저장
내 사이트의
프로필 사진을
저장할래

18. Request를 처리하기 위한 로직 수행
2. Cloud에 이미지 저장

19. Request를 처리하기 위한 로직 수행
이미지 저장
2. Cloud에 이미지 저장

20. Request를 처리하기 위한 로직 수행
URL 저장
2. Cloud에 이미지 저장

21. Request를 처리하기 위한 로직 수행
2. Cloud에 이미지 저장

22. Request를 처리하기 위한 로직 수행
2. Cloud에 이미지 저장
클라이언트에 응답
200 OK
Response

23. 서버에 요청
HTTP
Request
내 현재 위치를
알려줘!
3. 외부 API키 커스텀

24. Request를 처리하기 위한 로직 수행
3. 외부 API키 커스텀

25. Request를 처리하기 위한 로직 수행
API Request
3. 외부 API키 커스텀

26. Request를 처리하기 위한 로직 수행
3. 외부 API키 커스텀
DB 저장

27. Request를 처리하기 위한 로직 수행
3. 외부 API키 커스텀

28. Request를 처리하기 위한 로직 수행
3. 외부 API키 커스텀

29. Request를 처리하기 위한 로직 수행
3. 외부 API키 커스텀
클라이언트에 응답
200 OK
Response

30. 그러나 클라이언트가 Web만 있을까?

32. 서버를 사용해
여러 플랫폼으로
서비스 제공 가능

33. 그래서 어떻게 개발 하는데?

34. 1. Client
IOS Web Android

35. 1. Client
IOS
xcode
Language
IDLE

36. 1. Client
Web
Language
Framework
IDLE

37. 1. Client
Language
FrameworkAndroid

38. 2. Server

39. 3. Cloud

40. 3. DataBase

41. 3. DataBase