[번역] 초보자 용 웹 개발 가이드 1:Frontend
Frontend
원본 URL : https://medium.com/devtrailsio/beginners-web-development-guide-part-1-frontend-ca59f1877ec5
초보자 용 웹 개발 가이드 1 부 : Frontend
이 게시물은 초급 웹 개발자를위한 일련의 게시물 중 일부입니다. 또한 " 2 부 : 백엔드 ", " 3 부 : 플랫폼 및 도구 "및 " 4 부 : 클라우드 배치 "도 확인하십시오.
며칠 전 필자는 언급 된 DevTrails 프로젝트를 시작하기로 결정한 이유에 대해 짧은 에세이를 게시했습니다. 첫 번째 가이드 작업을 시작할 것입니다. 개인적인 배경 대부분이 웹 개발에 있기 때문에 시작할 수있는 좋은 장소라고 생각했습니다. 또한 신생 기업 및 기업 부문에서 높은 수요를 보이는 업계 최대 규모의 기업 중 하나입니다. 이 가이드는 기초부터 시작할 것이므로 초보자에게 더 재미있을 것이라고 생각하지만 중간 개발자는 새로운 것을 발견 할 수도 있습니다.
초보자의 경우 진입 장벽이 상대적으로 낮고 무료 오픈 소스 툴링이 많으며 개발을 단순화하는 많은 프레임 워크가 있기 때문에 웹 개발에 쉽게 참여할 수 있습니다. 반면에 선택해야 할 부분이 너무 많습니다. 개발의 어려운 부분은 응용 프로그램이 작동하기 위해 많은 구성 요소를 함께 결합해야한다는 것입니다. 어떤 UI 프레임 워크를 선택할 것인가? 데이터를 저장할 위치는 어디입니까? PHP, Python, Ruby 또는 다른 것? 신청서를 어떻게 호스트합니까? 이 가이드가 이에 대해 밝히고 웹 개발에 대한 귀하의 생각을 이해하고 어쩌면 직업을 시작하는 데 도움이되기를 바랍니다.
이 가이드는 여러 부분으로 나누어 져 있으며, 오늘은 Frontend 개발부터 시작하여이 분야에서 가장 중요한 언어와 도구를 소개합니다.
프론트 엔드 개발 언어 및 도구
먼저이 영역에서 지향해야 할 사항을 묘사하는 일종의 프론트 엔드 조경지도부터 시작하겠습니다.
차트의 색상 코딩은 매우 간단합니다. 노란색 선은 배워야 할 기본 사항을 표시하는 반면, 주황색은 나중에 사용할 수있는 고급 주제를 나타냅니다.
프론트 엔드 개발 (UI 개발이라고도 함)은 사용자가보고 상호 작용하는 응용 프로그램의 부분 인 웹 사용자 인터페이스를 만드는 것을 말합니다. 프론트 엔드 개발은 마크 업을위한 HTML, 스타일링을위한 CSS 및 로직과 상호 작용을위한 JavaScript의 세 가지 요소를 기반으로합니다. 이 세 가지 기술이 시간의 테스트 였지만, 기본 도구와 프레임 워크는 끊임없이 변화합니다. 이 섹션에서는 프론트 엔드 생태계를 탐색하기위한 출발점을 제시합니다.
Frontend 개발은 웹 디자인 및 사용자 경험과도 밀접하게 관련되어 있으며 두 회사의 경계는 각 회사마다 다를 수 있습니다. 일반적으로 프론트 엔드 개발자는 기술적 문제에 초점을 맞추고 웹 디자이너는 미학과 사용자 경험에 관심을 기울입니다.
HTML
하이퍼 텍스트 마크 업 언어 (HTML) 는 사용자에게 표시되는 정보를 구조화 할 수있는 마크 업 언어입니다. 이 HTML 문서는 제목, 텍스트 단락 또는 텍스트 입력 필드와 같은 HTML 태그로 각각 표시되는 요소로 구성됩니다. HTML 문서는 하이퍼 링크를 사용하여 다른 문서에도 연결할 수 있습니다. 각 태그는 고유 한 유형의 콘텐츠를 전달하며 특정 모양과 연결된 동작을가집니다. 일단 HTML이 생기면 매우 간단한 정적 HTML 페이지를 작성할 수 있습니다.
CSS
CSS (Cascading Style Sheets) 는 HTML 요소의 시각적 모양을 설명하는 데 사용되는 스타일 언어입니다. 요소의 위치, 크기, 텍스트 스타일 또는 색상 또는 웹 사이트의 거의 모든 시각적 요소와 같은 요소를 제어하는 데 사용할 수 있습니다. 스타일은 페이지의 요소 하위 집합의 단일 요소에 적용 할 수있는 규칙 집합으로 정의됩니다. 최근의 CSS 기능을 사용하면 기본 스타일을 뛰어 넘고 애니메이션과 같은보다 복잡한 시각적 요소를 제어 할 수 있습니다.
전처리 기
CSS는 강력한 언어이지만 코드 재사용, 자세한 표시 및 격리와 관련하여 제약이 있습니다. 이 때문에 큰 CSS 코드 기반을 유지하는 것은 어려울 수 있습니다. 이러한 단점을 해결하기 위해 커뮤니티에서 여러 가지 해결책을 제시했습니다. 이러한 언어 및 해당 컴파일러는 일반적으로 CSS 전 처리기라고합니다.
Sass / SCSS 는 CSS의 기능을 확장하여 CSS 코드 기반을 유지 관리 할 수 있도록합니다. 중첩과 같은 일부 기능을 사용하면 CSS의 작성 방법이 간결 해지고 작성이 쉬우 며 변수 및 믹스 인은 코드 재사용을 허용합니다. 또한 코드를 작은 파일로 나눌 수있는 다른 SCSS 파일 가져 오기를 지원합니다. 나침반 과 같은 인기있는 CSS 프레임 워크 는 Sass를 기반으로합니다.
PostCSS는 JavaScript 플러그인을 사용하여 CSS 파일을 변환하는 도구입니다.
코드 분석을 수행하고, 변수 지원을 추가하고, 코드를 최적화하는 플러그인을 추가 할 수 있습니다. 사용자 정의 형식 인 SCSS 또는 Less와는 대조적으로 향후 표준 CSS 기능을 에뮬레이트하는 PostCSS 용 플러그인이 많이 있습니다.
Less 는 Sass와 비슷한 기능을 가진 전 처리기입니다.
유사점에도 불구하고 기본 구현에는 여러 가지 차이점이 있습니다.
과거에는 대중적 이었지만, 많은 개발자들이 Sass 나 PostCSS에 찬성하여 Less에서 멀어지고 있습니다.
자바 스크립트
JavaScript (JS) 는 웹용 사용자 인터페이스를 개발하는 데 가장 많이 사용되는 프로그래밍 언어입니다. 이를 통해 사용자 이벤트에 반응하고 웹 서비스에서 데이터를로드하고 페이지에 요소를 표시하거나 숨기는 것과 같이 웹 사이트에 사용자 정의 비헤이비어를 추가 할 수 있습니다. 또한 다양한 API를 통해 브라우저와 상호 작용할 수 있습니다. 웹 사이트에 별도의 대화식 요소를 추가하거나 복잡한 웹 응용 프로그램을 만들 때이 도구를 사용할 수 있습니다.
JavaScript와 관련하여 발생할 수있는 또 다른 용어는 실제로 JavaScript의 언어 사양 인 ECMAScript입니다. 대부분의 경우, 동의어로 취급 될 수 있습니다.
프레임 워크
JavaScript는 강력한 언어이지만 복잡한 응용 프로그램을 만들려는 경우 프레임 워크없이이 코드를 사용하면 복잡한 상용구 코드가 대량으로 생성됩니다. HTML 조작, 데이터로드, 전체 애플리케이션 아키텍처 등과 같은 기본 기능을 지원하는 많은 프레임 워크가 있습니다. 현재 가장 널리 사용되는 세 가지 프레임 워크는 React, Angular 및 Vue.js입니다.
React 는 Facebook에서 개발 한 사용자 인터페이스를 구축하기위한 라이브러리입니다. React는 입력 매개 변수를 기반으로 HTML을 렌더링 할 수있는 버튼 또는 사이드 메뉴와 같은 구성 요소를 만드는 데 기반을 둡니다. React 구성 요소는 JavaScript 코드와 HTML을 편리하게 결합 할 수있는 JSX 라는 JavaScript 확장을 사용하여 작성됩니다 . 복잡한 UI 요소와 전체 응용 프로그램을 만들기 위해 구성 요소를 함께 구성 할 수 있습니다. React는 프레임 워크 자체가 아니고 뷰 레이어 만 제공하지만 풍부한 도구 및 라이브러리의 생태계는 복잡한 응용 프로그램을 만드는 데 필요한 모든 요소를 갖추고 있습니다. React는 시작하기 쉽지만 시간이지나면서 누락 된 부분을 채우기 위해 새로운 라이브러리를 배워야합니다
- Google에서 개발 한 구성 요소 중심의 '배터리 포함'유형의 프레임 워크입니다.
각도 응용 프로그램은 일반적으로 TypeScript로 작성됩니다.
그것은 폼, 데이터 로딩, 라우팅 등을 관리하기위한 라이브러리뿐만 아니라 프로젝트를 부트 스트랩, 개발 및 빌드하기위한 CLI 도구를 포함하여 웹 애플리케이션을 구축하는 데 필요한 대부분의 것들을 제공합니다. 대부분의 것들을 제공하지만 기본적으로 더 높은 추상화와 복잡성 수준을 가지며 기본 개발 언어로 TypeScript를 배울 필요성 때문에 초기 학습 곡선이 가파르게됩니다.
Vue.js 는 모듈화되고 점진적으로 채택 될 수 있도록 설계된 프레임 워크입니다.
뷰 레이어로 사용하고 필요에 따라 추가 라이브러리를 추가 할 수 있습니다. 다른 프레임 워크와 달리 가장 중요한 라이브러리는 Vue.js 핵심 팀에서 관리합니다.
Ember.js 또는 AngularJS 와 같이 작은 커뮤니티가 있거나 다른 것으로 대체되는 다른 프레임 워크가있을 수도 있습니다 .
유형 스크립트
TypeScript는 JavaScript를 확장하여 정적 유형 검사와 async / await, classes 또는 arrow 함수와 같은 최신 ECMAScript 기능을 추가합니다. 결과적으로 TypeScript는 바닐라 JavaScript로 컴파일됩니다. 정적 유형 검사를 사용하면 컴파일러가 함수 또는 변수를 서명과 일치하지 않는 방식으로 사용하려고 할 때이를 알립니다. 또한 코드 편집기는 코드 탐색 및 리팩토링 기능을 향상시킬 수 있습니다. 입력은 선택 사항이므로 기존 JavaScript 프로젝트에서 점진적으로 소개 할 수 있습니다. TypeScript를 사용하면 코드 기반이 큰 프로젝트에서 작업하는 것이 훨씬 쉬워집니다.
구성 요소 라이브러리
구성 요소 라이브러리는 응용 프로그램을 어셈블하는 데 사용할 수있는 구성 요소 모음입니다. 그 중 일부는 버튼 및 드롭 다운과 같은 가장 일반적인 구성 요소를 구현하는 반면 다른 구성 요소는 복잡한 응답 레이아웃을 작성하는 유틸리티를 제공합니다. 각각 고유 한 시각적 스타일이 있지만 일반적으로 프로젝트의 디자인과 브랜딩에 맞게 사용자 지정할 수 있습니다. 대부분은 일반 CSS 및 JavaScript로 제공되지만 대부분의 다른 인기있는 JavaScript 프레임 워크와 함께 사용할 수 있도록 이식되어 있습니다. 가장 인기있는 도서관 중 일부는 다음과 같습니다.
부트 스트랩 은 반응 형 웹 응용 프로그램을 만들기위한 강력한 프레임 워크입니다.
레이아웃과 테마 엔진을 생성하는 유틸리티뿐만 아니라 많은 구성 요소 세트가 함께 제공됩니다.
드롭 다운, 자바 스크립트에 대한 최소한의 지식과 같이 컴포넌트에 사용자 상호 작용을 추가 할 수 있습니다.
또한 부트 스트랩으로 만들어진 다양한 기성품 웹 사이트 테마가 있습니다.
시맨틱 UI 는 모든 종류의 구성 요소와 테마 엔진을 갖춘 또 다른 인기있는 UI 라이브러리입니다.
그러나 구성 요소를 대화 형으로 만들려면 일부 JavaScript 코드를 작성해야합니다.
Material UI - Google의 Material Design의 보급 된 구현입니다 . Google은 구성 요소 집합과 애플리케이션의 모양 및 느낌에 대한 지침을 제공합니다. Angular 또는 바닐라 자바 스크립트에 사용할 수있는 다른 구현이 있습니다 .
다른 존경할만한 언급에는 개미 설계 , 재단 , Bulma 및 Pure가 포함 됩니다.
프론트 엔드 도구
프론트 엔드 생태계는 각자의 목적을 위해 설계된 유용한 툴을 보유하고있는 것으로 유명합니다. 너무 많기 때문에이 가이드의 모든 내용을 다룰 수있는 방법이 없으므로 대신 시작하는 데 중요한 몇 가지 사항에 초점을 맞 춥니 다.
NPM
Npm은 실제로 다음 두 가지를 의미합니다.
1. 프로젝트에서 설치하고 사용할 수있는 수천 개의 오픈 소스 라이브러리와 도구가 포함 된 소프트웨어 레지스트리.
2. 레지스트리에서 패키지를 설치, 갱신 및 제거 할 수있는 CLI 도구.
npm을 사용하면 프로젝트에서 사용할 라이브러리를 설치하고이를 JSON 파일로 문서화 할 수 있습니다. 이 파일을 코드 기반과 함께 저장하면 프로젝트의 종속성을 명시 적으로 선언하고 다른 환경에이를 신속하게 설치할 수 있습니다. 또한 자신의 라이브러리를 게시하고 다른 개발자와 공유 할 수 있습니다.
또한 npm CLI 도구를 사용하면 테스트를 실행하고, 코드를 컴파일하고, 코드 분석을 수행하는 데 사용할 수있는 스크립트를 실행할 수 있습니다.
npm에 대한 아날로그는 Yarn 입니다.이 패키지는 성능 향상과 라이브러리 개발 지원을 향상시키고 npm 패키지 레지스트리와 호환됩니다.
웹팩
Webpack 은 인기있는 모듈 번들러입니다. 이 도구를 사용하면 JavaScript 코드, CSS 스타일, HTML 템플릿 및 이미지와 같은 다양한 종류의 자산을 브라우저에서보다 효율적으로로드 할 수있는 번들로 병합 할 수 있습니다. Webpack을 사용할 때 코드를 모듈로 분할합니다. 각 모듈은 다른 모듈을 가져올 수 있습니다. 그런 다음 Webpack은 가져 오기 그래프를 분석하고 자원을 묶습니다. 번들링 외에도 Webpack은 컴파일러, 코드 분석 또는 축소를 수행하는 것과 같이 번들 된 코드를 변환하기 위해 로더와 플러그인을 사용합니다. Webpack은 시작하는 것이 까다로울 수 있지만 대부분의 최신 빌드 설정의 초석입니다.
Rollup.js 는 때때로 Webpack의 대안으로 사용됩니다.
Chrome DevTools
Chrome DevTools 는 Chrome 브라우저에서 사용할 수있는 풍부한 도구 모음입니다. 소스 코드 또는 HTML 요소 탐색, 네트워크 요청 추적 및 응용 프로그램의 여러 부분 성능 측정과 같은 광범위한 디버깅 사례에 사용할 수 있습니다. 빠른 변경을 테스트하는 데 유용 할 수있는 페이지를 즉시 편집 할 수 있습니다. 이 도구를 확실하게 파악하면 수많은 디버깅 시간을 절약 할 수 있습니다. 또한이 도구를 사용하여 다른 웹 페이지의 내용을보고 어떻게 작동하는지 볼 수 있습니다. 유사한 도구는 다른 브라우저에서도 사용할 수 있습니다.
이것은 프론트 엔드 개발 트랙에서 시작하기에 충분해야합니다. 걱정 마세요, 이것은 빙산의 일각에 불과합니다. 이것이 당신이 더 자세히 배우고 싶은 무언가라고 생각한다면, 당신은 당신을 기다리고있는 흥미 진진한 것들을 많이 가질 것입니다.
