창고 개발로 옮기고 싶은데 어디서부터 시작해야 할지 모르겠어요.

한동안 웹 페이지를 돌리는 것은 매우 간단했다.
CSS와 Javascript에 대한 링크를 포함하여 웹 서버에 게시하는 HTML 파일을 만들 수 있습니다.
공평하게 말하자면, 최근에 일이 좀 복잡해졌다.
현재 노드를 언급하지 않으면'전단'개발에 깊이 들어갈 수 없다.js, 웹팩, NPM.
그 다음은 처리해야 할 틀이다.각도, Vue.js 또는 Reactjs는 모두 현저한 특성을 가져왔지만 더 많은 개념을 배워야 한다!
그렇다면 백엔드 개발자는 이 물건들을 어떻게 처리합니까?
나는 그것이 현재 발생하고 있는 일을 가시화하는 데 도움이 된다는 것을 발견했다. (그래, 누가 좋은 도표를 좋아하지 않겠니?!)

맨 윗부분은 간단한 부분이다.이것은 브라우저가 HTML, CSS, 자바스크립트를 가져와 브라우저에서 웹 페이지를 보여주는 곳입니다.
파란색 점선 위의 모든 내용을 웹 서버에 배치하고 브라우저가 페이지를 요청할 때 브라우저에 제공합니다.
파란색 점선 아래의 하나는 모든 복잡성이다.
당신은 그것을 개발 기계에서 운행하는 부분으로 간주할 수 있습니다.
우리 그것을 분해합시다.

축소 및 번들

현재, 우리는 점점 더 큰 전단 응용 프로그램을 구축하고 있으며, 점점 더 많은 코드를 필요로 한다.
비록 인터넷 연결 속도가 상당히 빠르지만, 우리는 여전히 사용자에게 코드를 너무 많이 다운로드하도록 요구하고 싶지 않다. 단지 우리의 웹 응용 프로그램을 보기 위해서이다.
이를 위해, 현재 대부분의 자바스크립트와 CSS는 축소되었다.
이것은 생성된javascript와 css 파일을 가능한 한 작게 하기 위해javascript에서 공백, 새 줄, 긴 변수/함수 이름과 무관한 모든 것을 삭제하거나 단축하는 과정입니다.
그리고 여러 개의javascript/css 파일이 보통 한데 묶여 있습니다.
예를 들어, 색인이 있는 경우.js, 관련.js와 목록.js, 이것들은 모두 파일로 묶일 것입니다.브라우저에서 프로그램을 불러오는 요청 수를 줄이면 프로그램의 불러오는 시간을 줄일 수 있다는 생각이다.
모든 브라우저가 지원하지 않는 새로운 (ish) 언어 기능을 사용한 것을 발견할 수 있기 때문에 컴파일이 필요합니다.
Javascript 컴파일러는 이 Javascript를 브라우저에서 처리할 수 있는 버전으로'무음'할 수 있습니다.

웹 패키지, 패키지 및 기타 어플리케이션 번들

웹 팩과co.를 전방 코드의 구축 도구로 볼 수 있습니다.
그것들은 Javascript 컴파일러를 실행하고, 코드를 묶고, 축소하고, 각종 기타'구축시'작업을 설정할 수 있다.
웹 팩과 같은 도구에 대해 말하자면 이것은 가파른 학습 곡선이다. 백엔드 코드에 더 익숙한 사람들에게는 특히 그렇다.
웹 패키지는 자신만의 독특한 문법을 가지고 있어서 항상 직관적이지는 않다.
여기에 예가 하나 있다.

module.exports = {
  mode: 'development',
  entry: './foo.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js'
  }
};

최근에 나는 Parcel이 편리한 대체품이라는 것을 발견했다.

Javascript 프레임워크 구출

마지막으로 주요 Javascript 프레임워크를 소개했습니다.
기쁘게도 이 세 가지 주요 프레임워크 뒤에 있는 팀은 웹 패키지를 설정하는 데 시간을 낭비하고 싶지 않다는 것을 깨달았다.
이 세 가지는 현재 웹 패키지 설정을 추상화했기 때문에 걱정할 필요가 없다.
Vue.js와 Angular에는 명령줄 인터페이스 도구가 있습니다.
새 프로젝트를 시작하는 것과 같은 일반적인 작업을 명령줄에서 직접 수행할 수 있습니다.
새로운 기능을 추가할 때, 새로운 의존 항목을 도입하십시오. 패키지 설정은 당신을 위해 처리됩니다. 이것은 당신이 정말로 생각하지 않는 한 그것을 볼 필요가 없다는 것을 의미합니다.
Create-React 응용 프로그램도 비슷한 작업을 했습니다.그 자체는 CLI가 아니지만 웹 패키지 구성도 추상적입니다.

이제 어떡하지?

이것이 바로 대국이다.
주요 프레임워크가 관련되었을 때, 그것들은 모두 당신에게 새로운 응용 프로그램을 신속하게 시작하게 하고, 이렇게 하면 인코딩을 하는 데 급속한 진전을 거둘 수 있다.
그러나 그들은 여전히 자신의 학습 곡선과 기본적으로 같은 임무의 다른 방법을 가지고 있다. (작은 구성 요소로 응용 프로그램을 구축한다.)
그렇다면 당신은 어떻게 자신의 기능을 구축합니까?
이것은 나의 방법이다.

구축하고 싶은 응용 프로그램에 대한 아이디어(두뇌 폭풍, 얼마나 시작하고 싶은지)

만들 수 있을 정도로 작게 느껴지는 것을 선택하세요. (하지만 어려울 때 계속 전진할 수 있을 만큼 재미있어요!)

당신이 생각할 수 있는 가능한 한 많은 기능을 열거합니다(다시 한 번 강조하지만, 이때 여과하지 마세요. 다음은 바로)

이제 아주 작은 기능을 선택하십시오(아주 작고 시작할 때 간단하게 유지)

이제 이 기능을 구축하는 방법을 배우는 것이 도전입니다.
간단한 기능이 이곳에서 승리하기 때문에 일부 텍스트나 제목을 표시하는 것이 승리자이다.거기서부터 어떤 입력을 받아들이고 사용자 인터페이스를 업데이트하는 것은 좋은 다음 단계이다.
현재 모든 프레임워크에 좋은 문서가 있으니 뛰어들기를 두려워하지 말고 구축하세요:-)
만약 당신이 시간이나 인내심을 가지고 전방 개발에 들어갈 시간이 없다면, 나는 지금 하나를 개발하고 있다handy pocket guide to get you up to speed quickly.