big frontend

큰 대표

• 전면 및 후면 끝에서 다양한 프레임 워크와 라이브러리를 경험하기 위해 Todo-App 예로 들어보십시오.
• 서버 주소는 http://localhost:8080 입니다
• 전면 및 후면 끝의 인터페이스는 다음과 같습니다.
  • 모든 todos를 얻으십시오 : {path: '/api/todo', method: 'GET', status: 200, return: [{action: 'todo1', done: false}]
  • 새 TODO 추가 : {path: '/api/todo', method: 'POST', status: 201, return: ''}
  • 지정된 todo {path: '/api/todo/toggle/{index}', method: 'POST', status: 200, return: ''} 완료하거나 닫습니다.
  • 지정된 todo를 삭제하십시오 : {path: '/api/todo/{index}', method: 'DELETE', status: 200, return: ''}

백엔드 완료

• {tech: 'spring-boot', tag: 'springboot-backend'}

완료된 웹 프론트 엔드

• {tech: 'vuejs', tag: 'use-vue-frontend' }
• {tech: 'vuejs-vuex', tag: 'use-vuex'}
• {tech: 'react', tag: 'use-react'}
• {tech: ['react', 'redux'], tag: 'use-react-redux'}
• {tech: ['react', 'hooks'], tag: 'use-react-hooks'}
• {tech: 'jquery', tag: 'use-jquery-ajax-to-read/write-from/to-server'}
• {tech: ['react', 'typescript'], tag: 'use-react-typescript'}
• {tech: ['react', 'typescript', 'redux'], tag: 'use-react-typescript-redux'}

명령 줄 프론트 엔드 완료

• {tech: ['react', 'ink'], tag: 'use-ink-cli'}

독립적으로 실행할 수있는 프론트 엔드

• {tech: 'jquery', tag: 'use-jquery-in-static-web' }
• {tech: 'javascript', tag: 'use-pure-javascript' }

목적

• 프론트 엔드와 백엔드의 의미를 이해하십시오
• 여러 프론트 엔드의 차이점과 연결을 이해하십시오
• 큰 프론트 엔드의 중요성을 이해하십시오
• 프론트 엔드의 주류 기술 프레임 워크를 경험하십시오

프론트 엔드, 백엔드

• 프론트 엔드 : 시스템의 휴먼-컴퓨터 상호 작용에 대한 인터페이스를 설계하고 구현합니다.
  • 명령 줄 : 콘솔 프로그램. 일반적으로 C, C#및 Java와 같은 언어를 사용하여 구현됩니다. 명령 및 매개 변수로 입력 및 출력, Scanf 및 Printf
  • 데스크탑 : Keyboards 및 MICE와 같은 다양한 장치를 사용하여 Windows, 메뉴, 양식 등과 같은 다양한 그래픽 컨트롤을 사용하여 입력 및 출력을 완료하십시오. 일반적으로 사용되는 기술에는 MFC, Java Swing, QT, WPF 등이 포함됩니다.
  • 웹 (H5) : 데스크탑과 유사하지만 브라우저에서 실행됩니다. 채택 된 기술에는 주로 HTML5, CSS3 및 JavaScript가 포함됩니다
  • 모바일 : 휴대 전화를 이동 통신사로 사용하는 일반적인 모바일 장치에는 Android 및 iOS가 포함됩니다.
  • MINI 프로그램 : 설치 또는 배포 할 필요가 없으며 WeChat과 같은 응용 프로그램에서 실행되며 미국에서 매우 인기가 있습니다. WeChat 미니 프로그램, QQ 미니 프로그램, Baidu 미니 프로토리, Alipay 미니 프로그램, 빠른 응용 프로그램과 같은 ...
• 백엔드 : 서버 측로도 알려져 있습니다. 일반적으로 데이터 및 서비스를 제공하는 데 사용됩니다.
  • 일반적인 처리 절차
    • 데이터는 데이터베이스에 저장됩니다
    • 서버는 일반적으로 HTTP 요청 인 프론트 엔드에서 요청을받습니다.
    • 요청에 따르면 관련 비즈니스 로직이 호출되고 계산 결과가 반환됩니다.
    • 계산 결과에 따르면 응답이 반환되며 일반적으로 HTTP 응답입니다. 응답은 JSON, HTML 등과 같은 여러 표현을 가질 수 있습니다.
  • 일반적으로 사용되는 기술 및 프레임 워크
    • Java EE, Asp.net, Php
    • 봄, 최대 절전 모드
    • ...
• 전통적인 응용 프로그램의 개발 특성
  • 프론트 엔드 및 백엔드에 사용되는 기술 스택은 통일되지 않았습니다.
  • 여러 프론트 엔드에서 사용되는 기술 스택은 통일되지 않습니다.
  • 프론트 엔드 및 백엔드 개발 방법과 아이디어는 일관성이 없습니다.
  • 전면 및 뒷면에 동시에 능숙한 엔지니어가있는 것은 어렵습니다.

큰 프론트 엔드, 풀 스택

• 2009 년 Nodejs는 태어났습니다

  • 브라우저에서 JavaScript 실행 환경을 독립적으로 해제합니다
  • JavaScript는 호스트 언어가됩니다
  • 최신 버전은 10.16.0입니다
  • 백엔드의 엔지니어링 아이디어를 바탕으로 NodeJ를 기반으로 한 많은 라이브러리, 프레임 워크 및 도구가 생성되었습니다.
    • MVC : Angular/Vue/React (3 개의 프론트 엔드 프레임 워크)
    • Maven/Gradle : NPM/원사
    • 의존성 주입 : 각도 주입/VUE 주입
    • 단위 테스트 : Jest/Jasmine/Ava
    • 단일 페이지 응용 프로그램 (SPA) : ES6/Babel/Webpack
    • 봄 : Nestjs
    • 응답 프레임 워크 : RXJS
    • 모듈 식 : 가져 오기/내보내기
    • ...
  • 많은 새로운 개발 아이디어와 관행이 만들어졌습니다
    • 상태 관리 : Redux
    • 컴포넌트 UI : 재사용이 쉬운 코드
    • 기능 프로그래밍 : 예를 들어 반응 후크
    • 전면과 후면 사이의 경계는 점차 흐릿하며, 큰 프론트 엔드의 추세가 형성되고 있습니다.

• 큰 프론트 엔드, 풀 스택

  • Nodejs를 기반으로 JavaScript 언어는 백엔드 기능을 구현하기 시작합니다.
  • 풀 스택 : 평균
    • MongoDB : 데이터를 JSON 형식으로 저장하는 NOSQL 데이터베이스
    • Express : HTTP 요청을 처리 할 수있는 서버 백엔드 개발을위한 프레임 워크
    • Angular : MVVM을 사용한 프론트 엔드 UI 프레임 워크
    • 노드 : 노드를 사용하여 모듈을 개발하십시오
  • JavaScript 언어 사용 개발 언어, 개발 프레임 워크로서 하나의 프레임 워크 및 동시에 여러 프론트 엔드에 적응
    • H5 끝 : 기본 반응 프레임 워크
    • 모바일 : IOS 및 Android를 모두 지원할 수있는 React Framework를 기반으로 React Native Framework
    • 데스크탑 : 2019 년 5 월 오픈 소스 인 Microsoft가 공식적으로 개발 한 Windows 용 React Native Windows, 현재 안정적인 버전이 없습니다.
    • 미니 프로그램, 빠른 응용 프로그램 등 : JD.com에서 개발 한 RACT 기반 타로 프레임 워크
    • 명령 줄 : React 프레임 워크를 기반으로 한 잉크 프레임 워크