1
00:00:00,360 --> 00:00:01,320
다시 오신 것을 환영합니다.

2
00:00:01,680 --> 00:00:05,790
이 비디오는이 수업에서 매우 중요한 이정표를 나타냅니다.

3
00:00:05,790 --> 00:00:11,580
우리는 순전히 프론트 엔드 기술에서부터 웹 개발 및 개발에 이르는 첫 번째 단계로 옮겨 가고 있습니다.

4
00:00:11,580 --> 00:00:13,940
그래서 우리는 우리가 배운 모든 것을 계속 사용할 것입니다.

5
00:00:13,950 --> 00:00:20,880
그것은 G 메일 CSSA 자바 스크립트이지만 우리는 완전한 웹 어플리케이션을 만드는 데 도움이되는 몇 가지 새로운 기술을 배우게 될 것입니다.

6
00:00:20,880 --> 00:00:25,300
물론 우리가 코드를 작성하기 전에 몇 가지 다른 것들을 처리해야합니다.

7
00:00:25,410 --> 00:00:27,840
우리는 인터넷이 어떻게 작동하는지 검토함으로써 시작할 것입니다.

8
00:00:27,840 --> 00:00:38,580
그런 다음 정적 사이트와 동적 사이트에 대해 이야기하고 프런트 엔드가 맞는 위치와 뒷쪽에 맞는 위치 및 대부분 우리는 앞으로 할 구체적인 기술과 기술에 대해 자세히 이야기 할 것입니다.

9
00:00:39,030 --> 00:00:43,660
이제 인터넷이 어떻게 작동하는지 60 초 버전으로 시작해 보겠습니다.

10
00:00:43,980 --> 00:00:50,790
우리가 여기서 유로화를 볼 때 거기에 몇 가지 일이 발생합니다.

11
00:00:50,790 --> 00:00:56,130
첫 번째로 우리 컴퓨터는 어떤 IP 주소로 요청을 보낼지 알아야합니다.

12
00:00:56,490 --> 00:01:04,840
그래서 그것은 우리에게 당신을 필요로합니다 - 오 당신이 그것을 읽어 와서 당신과 나 서버에 대한 고유 한 로케이터입니다 올바른 IP 주소를 가져옵니다.

13
00:01:05,130 --> 00:01:10,050
그런 다음 IP 주소를 얻으면 New Age TTP 요청이 전송됩니다.

14
00:01:10,290 --> 00:01:14,910
따라서 요청은 해당 IP 주소로 전송되며 단지 공백 요청이 아닙니다.

15
00:01:14,910 --> 00:01:16,800
그것은 많은 정보를 가지고 있습니다.

16
00:01:16,800 --> 00:01:20,830
다음 동영상에서 해당 요청에 포함 된 세부 정보에 대해 자세히 이야기하겠습니다.

17
00:01:21,090 --> 00:01:27,910
그러나 짧은 버전은 요청 유형에서 IP 주소를 보내는 시간과 같은 것이 있습니다.

18
00:01:27,990 --> 00:01:31,920
그리고 가장 중요한 것은 당신이 요구하는 특정 페이지입니다.

19
00:01:31,950 --> 00:01:34,710
그래서이 경우 우리는 코스의 페이지를 요구하고 있습니다.

20
00:01:34,830 --> 00:01:43,010
그래서 그것은 내 옆에 보내지는 요청에 인코딩되어 그 요청을 얻고 무엇을해야 할지를 결정합니다.

21
00:01:43,140 --> 00:01:44,810
그리고 나서 그것은 무언가로 반응합니다.

22
00:01:45,030 --> 00:01:52,230
따라서 우리가 슬래시 코스를 요구한다면 Tomy 서버는 코스 페이지에 무엇이 있어야 하는지를 알아낼 것입니다.

23
00:01:52,230 --> 00:02:13,580
그래서 나는 그것이 데이터베이스에 들어가서 일련의 과정과 이미지를 잡아서 성공과 자바 스크립트를 가진 하나의 긴 HTL 파일로 컴파일 한 다음 마침내 내 컴퓨터로 보내져 HTP 응답을받은 다음 가져옵니다. 페이지를 렌더링하는 작업을 수행하는 브라우저로 이동합니다.

24
00:02:13,860 --> 00:02:19,880
그래서 이것은 브라우저가 그것을 처리하고 우리 인간을 위해 렌더링하기 전에 실제 내용이 어떻게 보이는지입니다.

25
00:02:20,010 --> 00:02:24,880
이것은 컴퓨터가 자바 스크립트에서 HMO의 성공을 보는 것입니다.

26
00:02:25,050 --> 00:02:42,600
모든 것을 요약하면 내가 먼저 도메인에 들어가는 IP 주소를 찾은 다음 IP 주소로 특정 페이지를 요청한 다음 HTP 요청을 보내야합니다. 그 요청을받습니다.

27
00:02:42,750 --> 00:02:45,310
그것은 무엇으로 대응할 것인지를 결정합니다.

28
00:02:45,570 --> 00:02:51,300
그런 다음 H.M으로 응답합니다. SS 자바 스크립트.

29
00:02:51,300 --> 00:02:56,510
다음으로 논의 할 것은 정적 웹 페이지와 동적 웹 페이지의 차이점입니다.

30
00:02:56,610 --> 00:03:00,960
우리는 인터넷이 어떻게 작동하는지에 대한 초기 비디오 중 하나에서 이것에 대해서도 이야기했습니다.

31
00:03:00,960 --> 00:03:05,730
나는 우리가해야 할 백엔드 토론에 중요하기 때문에 간략히 요약하고 싶다.

32
00:03:06,330 --> 00:03:22,530
따라서 정적 페이지와 동적 페이지의 두 가지 유형이 있습니다. 동적 웹 페이지는 서버가 함께 잡아 당기는 서버 측에서 컴파일되거나 응답으로 다시 보내기 전에 웹 페이지를 구성하는 사이트입니다.

33
00:03:22,530 --> 00:03:25,610
우리가 지금까지 작성한 모든 것은 정적입니다.

34
00:03:25,650 --> 00:03:31,330
그래서 동적 콘텐츠가 있기 때문에 정적 인 것처럼 보이지 않는 이런 것조차도.

35
00:03:31,350 --> 00:03:35,000
우리는 매번 랜덤 색상을 얻습니다.

36
00:03:35,010 --> 00:03:48,030
그것은이 주제에 대한 이전 비디오에서 사용한 레스토랑 웹 페이지 예제와 같이 정적이 아니지만 자바 스크립트에서 동일한 HMO C Ss이기 때문에 여전히 정적입니다.

37
00:03:48,060 --> 00:03:49,160
매번.

38
00:03:49,440 --> 00:03:58,530
그렇습니다. 색상이 다르기 때문에 모양이 달라 보이지만 동적 웹 사이트의 브라우저에서 열 때마다 동일한 기본 조각입니다.

39
00:03:58,560 --> 00:04:04,620
우리는 매번 다른 팀과 다른 자바 스크립트 또는 다른 C S를 가질 수 있습니다.

40
00:04:04,980 --> 00:04:11,580
예를 들어 Reddit과 같은 페이지로 이동하면 페이지가 새로 고침되어 다른 콘텐츠를 얻을 수 있습니다.

41
00:04:11,820 --> 00:04:19,330
사실 새 사이트를 새로 만들 때마다 항상 새로운 작업을 수행하므로 컴파일 작업을 수행하는 데이터베이스가 있습니다.

42
00:04:19,380 --> 00:04:28,020
로그인했는지 확인하는 몇 가지 코드가 있으며 로그인 한 상태에서 여기에 양식이 표시되지 않지만 로그 아웃 버튼이 표시됩니다.

43
00:04:28,320 --> 00:04:34,360
로그인하지 않은 경우 양식이 표시되며 로그인 또는 가입 버튼이 표시됩니다.

44
00:04:35,370 --> 00:04:44,430
그래서이 웹 페이지는 서버가 실제로 무엇을 돌려 보내야 할지를 결정할 때마다 나에게 되돌려 보내는 javascript와 정확히 똑같은 H G M L C S S가 아닙니다.

45
00:04:44,430 --> 00:04:53,540
웹 페이지를 나에게 보내기 전에 웹 페이지를 구성 할 때마다 매번 똑같은 내용을 담고 있습니다.

46
00:04:56,320 --> 00:04:59,260
이제는 백 엔드에 조금 더 집중하겠습니다.

47
00:04:59,350 --> 00:05:09,800
따라서이 다이어그램은 일반 스택과 스택으로, 특정 웹 응용 프로그램에서 사용하는 모든 기술을 나타내는 데 사용되는 용어입니다.

48
00:05:09,820 --> 00:05:17,770
그래서 H.T. Melchior는 요즘 자바 스크립트가 항상 멋진 스택 웹 앱의 스택에 포함되어 있다고 말합니다.

49
00:05:17,770 --> 00:05:21,310
기술적으로 우리는 성공하지 못한 웹 사이트를 가질 수 있습니다.

50
00:05:21,340 --> 00:05:22,690
그것은 단지 끔찍할 것입니다.

51
00:05:22,780 --> 00:05:28,420
우리는 클라이언트 사이드 자바 스크립트도 가지고 있지 않은 웹 사이트를 가질 수 있습니다. 단지 대화식이 아닙니다.

52
00:05:28,540 --> 00:05:46,050
그러나 우리는 여전히 원래의 사진 포트폴리오 사이트에서했던 것처럼 완벽하게 좋은 웹 사이트를 만들 수 있습니다. Eliseus 우리 각자의 팀이지만, 대부분의 웹 앱은 HDMI라고 말했고, 백엔드에서 보내지는 Javascript는 우리가 볼 수있는 곳입니다. 더 많은 변종.

53
00:05:46,270 --> 00:05:57,720
그래서 우리는 서버 측 코드를 작성할 수있는 다양한 언어가 있으며 우리는 루비 또는 파이썬 또는 스칼라 또는 자바 또는 자바 스크립트 또는 THP를 작성하거나 되돌릴 수 있습니다.

54
00:05:57,820 --> 00:05:59,500
거기에는 여러 가지 선택 사항이 있습니다.

55
00:05:59,530 --> 00:06:01,930
거기에 모든 종류의 다른 데이터베이스가 있습니다.

56
00:06:01,930 --> 00:06:07,760
포스트 포스트 위기와 그것을 속박하고 Mongo와 너무 많은 선택이 있습니다.

57
00:06:07,810 --> 00:06:16,110
따라서 스택이라는 용어는 개발자가 어떤 특별한 선택을했는지, 그리고 그들이 사용하는 정확한 기술을 말합니다.

58
00:06:16,180 --> 00:06:19,200
개발자들이 서로에게 묻는 것은 매우 일반적인 질문입니다.

59
00:06:19,450 --> 00:06:25,010
이 회사의 스택 또는이 특정 프로젝트에서 사용하는 스택은 무엇입니까?

60
00:06:25,030 --> 00:06:28,290
그래서 Reddit 스택의 실제 예제가 있습니다.

61
00:06:28,510 --> 00:06:32,830
그래서 이들은 Reddit이 자사 웹 사이트에서 사용하는 기술 중 일부입니다.

62
00:06:33,160 --> 00:06:37,010
따라서이 사이트는 flask라는 프레임 워크를 사용하여 파이썬으로 작성되었습니다.

63
00:06:37,410 --> 00:06:42,610
엔진 X 서버에 구축되어 있으며 데이터베이스로 포스트 스크립트를 사용합니다.

64
00:06:42,610 --> 00:06:48,250
실제로 스택 공유라고 불리는 다른 회사 스택을 공유하는 웹 사이트가 있습니다.

65
00:06:48,460 --> 00:06:55,470
그래서 여기에서 열어 보았습니다. 그리고 이것은 Reddit 페이지의 텍스쳐이며, 우리가 사용하는 모든 다른 기술들을 볼 수 있습니다.

66
00:06:55,660 --> 00:06:59,270
그리고 유전학 Python은 Amazon S3를 게시합니다.

67
00:06:59,410 --> 00:07:02,590
그리고 그것은 그들이 사용되는 것에 대해 조금 알려줍니다.

68
00:07:02,590 --> 00:07:04,980
얼마나 많은 아이콘이 있는지 압도하지 마십시오.

69
00:07:05,110 --> 00:07:09,530
얼마나 많은 이름과이 모든 다른 범주와이 모든 다른 용어.

70
00:07:09,790 --> 00:07:11,100
여기에 초점이 맞지 않습니다.

71
00:07:11,340 --> 00:07:15,910
내가 보여주고 싶은 것은 서로 다른 웹 사이트가 서로 다른 기술을 사용한다는 것입니다.

72
00:07:15,910 --> 00:07:20,190
이제 스택을 클릭하고 다른 회사 스택을 살펴 보겠습니다.

73
00:07:20,290 --> 00:07:33,130
예를 들어 공기 B와 B는 FBN B가 자바와 Java에서 Esky를 많이 사용하는 레일과 Ruby를 사용하고 있음을 알 수 있습니다.

74
00:07:33,520 --> 00:07:35,720
그들은 다양한 기술을 사용합니다.

75
00:07:35,770 --> 00:07:38,500
여기에있는 슬라이드로 돌아가 봅시다.

76
00:07:38,500 --> 00:07:45,650
제가 가지고 나가기를 원하는 또 다른 점은 바로이 파란색 선은 백 엔드와 프론트 엔드 사이의 경계를 나타냅니다.

77
00:07:46,000 --> 00:07:51,490
그래서 우리는 역동적 인 사이트가 백엔드에있는 서버에 의해 구축되는 방법을 논의했습니다.

78
00:07:51,490 --> 00:07:57,050
여기 다이어그램의이 부분은 사이트의 동적 부분이 들어오는 곳입니다.

79
00:07:57,250 --> 00:08:13,130
그래서 이것은 파이썬으로 작성된 모든 논리입니다. 적색으로 표시됩니다. 양식을 보여줄 필요가있는 경우 사용자가 로그인하면 페이지에 추가 할 내용을 입력하십시오. 잠금 버튼 또는 로그 아웃 버튼.

80
00:08:13,240 --> 00:08:23,600
이 모든 것은 다이어그램의 뒷부분과이 부분에서 이루어지며 타임 스탬프와 자바 스크립트를 다시 보냅니다.

81
00:08:23,680 --> 00:08:26,170
여기에 우리가 배울 스택이 있습니다.

82
00:08:26,380 --> 00:08:27,800
노드 j를 사용할 것입니다.

83
00:08:27,870 --> 00:08:28,440
예.

84
00:08:28,450 --> 00:08:33,120
그래서 우리는 여전히 자바 스크립트를 작성하지만 우리는 백엔드에 그것을 작성하려고합니다.

85
00:08:33,280 --> 00:08:40,090
우리는 Express라는 프레임 워크를 사용할 것이고 Mangu DBI를 데이터베이스로 사용할 것입니다.

86
00:08:40,370 --> 00:08:46,490
그리고 마지막 몇 단위에서 사용했던 것처럼 우리는 물론 ht m l c s와 Javascript도 갖습니다.

87
00:08:46,720 --> 00:08:58,950
따라서 지금 당장이 과정에서 웹 사이트의 프론트 엔드를 만들기 위해 알아야 할 모든 것을 다루었을 때 프론트 엔드 개발자 또는 교육의 프런트 엔드 개발자라고 생각할 수 있습니다.

88
00:08:58,960 --> 00:09:14,510
이제 웹 개발에 대해 이야기하고 Express AJ로 서버 사이드 코드를 작성하는 곳이면이 둘을 코스 끝까지 가져와야합니다. Mongo D-B는 사용자 로그인이 있지만 클라이언트 측 또는 프런트 엔드 자바 스크립트를 작성합니다.

89
00:09:14,510 --> 00:09:16,170
H Tim L and C Ss.

90
00:09:16,390 --> 00:09:19,090
이것이 우리가 전체 스택 웹 개발이라고 부르는 것입니다.

91
00:09:19,270 --> 00:09:26,380
전체 스택 웹 개발이라는 용어는 스택의 모든 부분에 백 엔드와 프런트 엔드의 코드를 작성하는 것을 의미합니다.

92
00:09:26,710 --> 00:09:30,990
다음은 바구니에 구현할 수있는 기능의 다이어그램입니다.

93
00:09:31,210 --> 00:09:51,420
그리고 이것은 Reddit을 다시 한 번 예로 들면 사용자가 로그인했는지 확인하는 것과 같은 기능을 볼 수 있습니다. 사용자에게 가입하기 데이터베이스에 새 게시물을 추가하십시오. 새 코멘트를 만듭니다. 데이터베이스에서 게시물을 제거하십시오. 게시물을 정렬하고 순위를 매 깁니다. 새로운 Reddit Reddit은 구독자를 뉴스 레터에 추가하고이를 데이터베이스에 저장합니다.

94
00:09:51,760 --> 00:10:00,270
물론 가장 중요한 것은 각 팀이 javascript에서 평가하여 사용자에게 다시 전송 된 다음 다시 전송되는 것을 확인하는 것입니다.

95
00:10:00,460 --> 00:10:10,730
우리가 프론트 엔드에 지금 가고있는이 파란 선을 넘어서서 H.M.S. 암살자와 자바 스크립트가 나에게 전송 된 다음 브라우저에서이 사실을 볼 수 있습니다.

96
00:10:11,020 --> 00:10:17,260
프론트 엔드 대 백엔드에 대해서도 이야기하지만 여기서는 약간 다른 형식의 다이어그램이 있습니다.

97
00:10:17,560 --> 00:10:24,070
이 다이어그램은 프론트 엔드와 백 사이의 이벤트 시퀀스를 몇 페이지로드 과정을 통해 설명합니다.

98
00:10:24,370 --> 00:10:29,410
그래서 프론트 엔드에서 나는 그것을 읽고 com을 새로 고치 러갑니다.

99
00:10:29,680 --> 00:10:34,790
Reddit 홈페이지 요청을 보내면 읽습니다.

100
00:10:34,960 --> 00:10:39,340
이 요청은 서버로 전송되며 서버는 홈 페이지를 요청하고 있습니다.

101
00:10:39,370 --> 00:10:52,040
그래서 데이터베이스에서 최상위 게시물을 가져 오는 서버 측 로직이 있으며 여기에 표시되는 LNC SS와 javascript를 모두 만든 다음 다시 내 브라우저로 보냅니다.

102
00:10:52,780 --> 00:11:02,370
다음 단계는 내가 개를 여기에 입력하고 엔터를 치면 할 수있는 개와 같은 검색 창에 무언가를 입력 할 수 있다는 것입니다.

103
00:11:02,710 --> 00:11:10,320
그리고 내가 Enter 키를 눌렀을 때 이번에 Reddit 서버로 새로운 요청이 보내 져서 개를 찾고 있다고 말합니다.

104
00:11:10,570 --> 00:11:25,930
그래서 서버는 내 검색 용어 dogs를 사용하는 로직을 가지고 있으며 데이터베이스에서 해당 용어와 일치하는 모든 게시물을 찾은 다음 강아지의 결과 페이지에 대한 javascript에서 새 나이 남성 평가를 내게 보낸다. .

105
00:11:26,620 --> 00:11:32,700
그리고 나서 브라우저가 렌더링되고 나는 매우 단순화 된 버전이라는 것을 알 수 있습니다.

106
00:11:32,810 --> 00:11:39,660
배후에서 훨씬 더 많은 일이 일어나고 있습니다. Reddit은 실제로 응용 프로그램의 독자적인 버전을 작성하여 읽는 것과 매우 유사합니다.

107
00:11:39,820 --> 00:11:46,630
우리가 Express에 대해 더 많이 배우고 J.S.을 알게되면 Mongo DB 그리고 우리는 완전한 스택 어플리케이션을 만들 것입니다.