다시 오신 것을 환영합니다.
이 비디오는이 수업에서 매우 중요한 이정표를 나타냅니다.
우리는 순전히 프론트 엔드 기술에서부터 웹 개발 및 개발에 이르는 첫 번째 단계로 옮겨 가고 있습니다.
그래서 우리는 우리가 배운 모든 것을 계속 사용할 것입니다.
그것은 G 메일 CSSA 자바 스크립트이지만 우리는 완전한 웹 어플리케이션을 만드는 데 도움이되는 몇 가지 새로운 기술을 배우게 될 것입니다.
물론 우리가 코드를 작성하기 전에 몇 가지 다른 것들을 처리해야합니다.
우리는 인터넷이 어떻게 작동하는지 검토함으로써 시작할 것입니다.
그런 다음 정적 사이트와 동적 사이트에 대해 이야기하고 프런트 엔드가 맞는 위치와 뒷쪽에 맞는 위치 및 대부분 우리는 앞으로 할 구체적인 기술과 기술에 대해 자세히 이야기 할 것입니다.
이제 인터넷이 어떻게 작동하는지 60 초 버전으로 시작해 보겠습니다.
우리가 여기서 유로화를 볼 때 거기에 몇 가지 일이 발생합니다.
첫 번째로 우리 컴퓨터는 어떤 IP 주소로 요청을 보낼지 알아야합니다.
그래서 그것은 우리에게 당신을 필요로합니다 - 오 당신이 그것을 읽어 와서 당신과 나 서버에 대한 고유 한 로케이터입니다 올바른 IP 주소를 가져옵니다.
그런 다음 IP 주소를 얻으면 New Age TTP 요청이 전송됩니다.
따라서 요청은 해당 IP 주소로 전송되며 단지 공백 요청이 아닙니다.
그것은 많은 정보를 가지고 있습니다.
다음 동영상에서 해당 요청에 포함 된 세부 정보에 대해 자세히 이야기하겠습니다.
그러나 짧은 버전은 요청 유형에서 IP 주소를 보내는 시간과 같은 것이 있습니다.
그리고 가장 중요한 것은 당신이 요구하는 특정 페이지입니다.
그래서이 경우 우리는 코스의 페이지를 요구하고 있습니다.
그래서 그것은 내 옆에 보내지는 요청에 인코딩되어 그 요청을 얻고 무엇을해야 할지를 결정합니다.
그리고 나서 그것은 무언가로 반응합니다.
따라서 우리가 슬래시 코스를 요구한다면 Tomy 서버는 코스 페이지에 무엇이 있어야 하는지를 알아낼 것입니다.
그래서 나는 그것이 데이터베이스에 들어가서 일련의 과정과 이미지를 잡아서 성공과 자바 스크립트를 가진 하나의 긴 HTL 파일로 컴파일 한 다음 마침내 내 컴퓨터로 보내져 HTP 응답을받은 다음 가져옵니다. 페이지를 렌더링하는 작업을 수행하는 브라우저로 이동합니다.
그래서 이것은 브라우저가 그것을 처리하고 우리 인간을 위해 렌더링하기 전에 실제 내용이 어떻게 보이는지입니다.
이것은 컴퓨터가 자바 스크립트에서 HMO의 성공을 보는 것입니다.
모든 것을 요약하면 내가 먼저 도메인에 들어가는 IP 주소를 찾은 다음 IP 주소로 특정 페이지를 요청한 다음 HTP 요청을 보내야합니다. 그 요청을받습니다.
그것은 무엇으로 대응할 것인지를 결정합니다.
그런 다음 H.M으로 응답합니다. SS 자바 스크립트.
다음으로 논의 할 것은 정적 웹 페이지와 동적 웹 페이지의 차이점입니다.
우리는 인터넷이 어떻게 작동하는지에 대한 초기 비디오 중 하나에서 이것에 대해서도 이야기했습니다.
나는 우리가해야 할 백엔드 토론에 중요하기 때문에 간략히 요약하고 싶다.
따라서 정적 페이지와 동적 페이지의 두 가지 유형이 있습니다. 동적 웹 페이지는 서버가 함께 잡아 당기는 서버 측에서 컴파일되거나 응답으로 다시 보내기 전에 웹 페이지를 구성하는 사이트입니다.
우리가 지금까지 작성한 모든 것은 정적입니다.
그래서 동적 콘텐츠가 있기 때문에 정적 인 것처럼 보이지 않는 이런 것조차도.
우리는 매번 랜덤 색상을 얻습니다.
그것은이 주제에 대한 이전 비디오에서 사용한 레스토랑 웹 페이지 예제와 같이 정적이 아니지만 자바 스크립트에서 동일한 HMO C Ss이기 때문에 여전히 정적입니다.
매번.
그렇습니다. 색상이 다르기 때문에 모양이 달라 보이지만 동적 웹 사이트의 브라우저에서 열 때마다 동일한 기본 조각입니다.
우리는 매번 다른 팀과 다른 자바 스크립트 또는 다른 C S를 가질 수 있습니다.
예를 들어 Reddit과 같은 페이지로 이동하면 페이지가 새로 고침되어 다른 콘텐츠를 얻을 수 있습니다.
사실 새 사이트를 새로 만들 때마다 항상 새로운 작업을 수행하므로 컴파일 작업을 수행하는 데이터베이스가 있습니다.
로그인했는지 확인하는 몇 가지 코드가 있으며 로그인 한 상태에서 여기에 양식이 표시되지 않지만 로그 아웃 버튼이 표시됩니다.
로그인하지 않은 경우 양식이 표시되며 로그인 또는 가입 버튼이 표시됩니다.
그래서이 웹 페이지는 서버가 실제로 무엇을 돌려 보내야 할지를 결정할 때마다 나에게 되돌려 보내는 javascript와 정확히 똑같은 H G M L C S S가 아닙니다.
웹 페이지를 나에게 보내기 전에 웹 페이지를 구성 할 때마다 매번 똑같은 내용을 담고 있습니다.
이제는 백 엔드에 조금 더 집중하겠습니다.
따라서이 다이어그램은 일반 스택과 스택으로, 특정 웹 응용 프로그램에서 사용하는 모든 기술을 나타내는 데 사용되는 용어입니다.
그래서 H.T. Melchior는 요즘 자바 스크립트가 항상 멋진 스택 웹 앱의 스택에 포함되어 있다고 말합니다.
기술적으로 우리는 성공하지 못한 웹 사이트를 가질 수 있습니다.
그것은 단지 끔찍할 것입니다.
우리는 클라이언트 사이드 자바 스크립트도 가지고 있지 않은 웹 사이트를 가질 수 있습니다. 단지 대화식이 아닙니다.
그러나 우리는 여전히 원래의 사진 포트폴리오 사이트에서했던 것처럼 완벽하게 좋은 웹 사이트를 만들 수 있습니다. Eliseus 우리 각자의 팀이지만, 대부분의 웹 앱은 HDMI라고 말했고, 백엔드에서 보내지는 Javascript는 우리가 볼 수있는 곳입니다. 더 많은 변종.
그래서 우리는 서버 측 코드를 작성할 수있는 다양한 언어가 있으며 우리는 루비 또는 파이썬 또는 스칼라 또는 자바 또는 자바 스크립트 또는 THP를 작성하거나 되돌릴 수 있습니다.
거기에는 여러 가지 선택 사항이 있습니다.
거기에 모든 종류의 다른 데이터베이스가 있습니다.
포스트 포스트 위기와 그것을 속박하고 Mongo와 너무 많은 선택이 있습니다.
따라서 스택이라는 용어는 개발자가 어떤 특별한 선택을했는지, 그리고 그들이 사용하는 정확한 기술을 말합니다.
개발자들이 서로에게 묻는 것은 매우 일반적인 질문입니다.
이 회사의 스택 또는이 특정 프로젝트에서 사용하는 스택은 무엇입니까?
그래서 Reddit 스택의 실제 예제가 있습니다.
그래서 이들은 Reddit이 자사 웹 사이트에서 사용하는 기술 중 일부입니다.
따라서이 사이트는 flask라는 프레임 워크를 사용하여 파이썬으로 작성되었습니다.
엔진 X 서버에 구축되어 있으며 데이터베이스로 포스트 스크립트를 사용합니다.
실제로 스택 공유라고 불리는 다른 회사 스택을 공유하는 웹 사이트가 있습니다.
그래서 여기에서 열어 보았습니다. 그리고 이것은 Reddit 페이지의 텍스쳐이며, 우리가 사용하는 모든 다른 기술들을 볼 수 있습니다.
그리고 유전학 Python은 Amazon S3를 게시합니다.
그리고 그것은 그들이 사용되는 것에 대해 조금 알려줍니다.
얼마나 많은 아이콘이 있는지 압도하지 마십시오.
얼마나 많은 이름과이 모든 다른 범주와이 모든 다른 용어.
여기에 초점이 맞지 않습니다.
내가 보여주고 싶은 것은 서로 다른 웹 사이트가 서로 다른 기술을 사용한다는 것입니다.
이제 스택을 클릭하고 다른 회사 스택을 살펴 보겠습니다.
예를 들어 공기 B와 B는 FBN B가 자바와 Java에서 Esky를 많이 사용하는 레일과 Ruby를 사용하고 있음을 알 수 있습니다.
그들은 다양한 기술을 사용합니다.
여기에있는 슬라이드로 돌아가 봅시다.
제가 가지고 나가기를 원하는 또 다른 점은 바로이 파란색 선은 백 엔드와 프론트 엔드 사이의 경계를 나타냅니다.
그래서 우리는 역동적 인 사이트가 백엔드에있는 서버에 의해 구축되는 방법을 논의했습니다.
여기 다이어그램의이 부분은 사이트의 동적 부분이 들어오는 곳입니다.
그래서 이것은 파이썬으로 작성된 모든 논리입니다. 적색으로 표시됩니다. 양식을 보여줄 필요가있는 경우 사용자가 로그인하면 페이지에 추가 할 내용을 입력하십시오. 잠금 버튼 또는 로그 아웃 버튼.
이 모든 것은 다이어그램의 뒷부분과이 부분에서 이루어지며 타임 스탬프와 자바 스크립트를 다시 보냅니다.
여기에 우리가 배울 스택이 있습니다.
노드 j를 사용할 것입니다.
예.
그래서 우리는 여전히 자바 스크립트를 작성하지만 우리는 백엔드에 그것을 작성하려고합니다.
우리는 Express라는 프레임 워크를 사용할 것이고 Mangu DBI를 데이터베이스로 사용할 것입니다.
그리고 마지막 몇 단위에서 사용했던 것처럼 우리는 물론 ht m l c s와 Javascript도 갖습니다.
따라서 지금 당장이 과정에서 웹 사이트의 프론트 엔드를 만들기 위해 알아야 할 모든 것을 다루었을 때 프론트 엔드 개발자 또는 교육의 프런트 엔드 개발자라고 생각할 수 있습니다.
이제 웹 개발에 대해 이야기하고 Express AJ로 서버 사이드 코드를 작성하는 곳이면이 둘을 코스 끝까지 가져와야합니다. Mongo D-B는 사용자 로그인이 있지만 클라이언트 측 또는 프런트 엔드 자바 스크립트를 작성합니다.
H Tim L and C Ss.
이것이 우리가 전체 스택 웹 개발이라고 부르는 것입니다.
전체 스택 웹 개발이라는 용어는 스택의 모든 부분에 백 엔드와 프런트 엔드의 코드를 작성하는 것을 의미합니다.
다음은 바구니에 구현할 수있는 기능의 다이어그램입니다.
그리고 이것은 Reddit을 다시 한 번 예로 들면 사용자가 로그인했는지 확인하는 것과 같은 기능을 볼 수 있습니다. 사용자에게 가입하기 데이터베이스에 새 게시물을 추가하십시오. 새 코멘트를 만듭니다. 데이터베이스에서 게시물을 제거하십시오. 게시물을 정렬하고 순위를 매 깁니다. 새로운 Reddit Reddit은 구독자를 뉴스 레터에 추가하고이를 데이터베이스에 저장합니다.
물론 가장 중요한 것은 각 팀이 javascript에서 평가하여 사용자에게 다시 전송 된 다음 다시 전송되는 것을 확인하는 것입니다.
우리가 프론트 엔드에 지금 가고있는이 파란 선을 넘어서서 H.M.S. 암살자와 자바 스크립트가 나에게 전송 된 다음 브라우저에서이 사실을 볼 수 있습니다.
프론트 엔드 대 백엔드에 대해서도 이야기하지만 여기서는 약간 다른 형식의 다이어그램이 있습니다.
이 다이어그램은 프론트 엔드와 백 사이의 이벤트 시퀀스를 몇 페이지로드 과정을 통해 설명합니다.
그래서 프론트 엔드에서 나는 그것을 읽고 com을 새로 고치 러갑니다.
Reddit 홈페이지 요청을 보내면 읽습니다.
이 요청은 서버로 전송되며 서버는 홈 페이지를 요청하고 있습니다.
그래서 데이터베이스에서 최상위 게시물을 가져 오는 서버 측 로직이 있으며 여기에 표시되는 LNC SS와 javascript를 모두 만든 다음 다시 내 브라우저로 보냅니다.
다음 단계는 내가 개를 여기에 입력하고 엔터를 치면 할 수있는 개와 같은 검색 창에 무언가를 입력 할 수 있다는 것입니다.
그리고 내가 Enter 키를 눌렀을 때 이번에 Reddit 서버로 새로운 요청이 보내 져서 개를 찾고 있다고 말합니다.
그래서 서버는 내 검색 용어 dogs를 사용하는 로직을 가지고 있으며 데이터베이스에서 해당 용어와 일치하는 모든 게시물을 찾은 다음 강아지의 결과 페이지에 대한 javascript에서 새 나이 남성 평가를 내게 보낸다. .
그리고 나서 브라우저가 렌더링되고 나는 매우 단순화 된 버전이라는 것을 알 수 있습니다.
배후에서 훨씬 더 많은 일이 일어나고 있습니다. Reddit은 실제로 응용 프로그램의 독자적인 버전을 작성하여 읽는 것과 매우 유사합니다.
우리가 Express에 대해 더 많이 배우고 J.S.을 알게되면 Mongo DB 그리고 우리는 완전한 스택 어플리케이션을 만들 것입니다.