[ 번역 ] 초보 자 용 웹 개발 가이드 1 : Frontend 
 라이 킷 14 댓글 공유 7 
 by 열혈남아 Nov 27 . 2018 
 원본 URL : https : / / medium . com / devtrailsio / beginners - web - development - guide - part - 1 - frontend - ca 59 f 1877 ec 5 
 Beginner ’ s Web Development Guide Part 1 : Frontend – devtrails . io – Medium 
 A few days ago I ’ ve posted a short essay on why I decided to start the DevTrails project mentioned , that I will begin working on the first … 
 초보 자 용 웹 개발 가이드 1 부 : Frontend 
 이 게시물 은 초급 웹 개발자 를 위한 일련 의 게시물 중 일부 입니다 . 또한 " 2 부 : 백 엔드 ", " 3 부 : 플랫 폼 및 도구 " 및 " 4 부 : 클라우드 배치 " 도 확인 하 십시오 . 
 며칠 전 필자 는 언급 된 DevTrails 프로젝트 를 시작 하 기 로 결정 한 이유 에 대해 짧 은 에세이 를 게시 했 습니다 . 첫 번 째 가이드 작업 을 시작 할 것 입니다 . 개인 적 인 배경 대부분 이 웹 개발 에 있 기 때문 에 시작 할 수 있 는 좋 은 장소 라고 생각 했 습니다 . 또한 신생 기업 및 기업 부문 에서 높 은 수요 를 보이 는 업계 최대 규모 의 기업 중 하나 입니다 . 이 가이드 는 기초 부터 시작 할 것 이 므로 초보 자 에게 더 재미있 을 것 이 라고 생각 하 지만 중간 개발자 는 새로운 것 을 발견 할 수 도 있 습니다 . 
 초보자 의 경우 진입 장벽 이 상대 적 으로 낮 고 무료 오픈 소스 툴 링 이 많 으며 개발 을 단순 화 하 는 많 은 프레임 워크 가 있 기 때문 에 웹 개발 에 쉽 게 참여 할 수 있 습니다 . 반면 에 선택 해야 할 부분 이 너무 많 습니다 . 개발 의 어려운 부분 은 응용 프로그램 이 작동 하 기 위해 많 은 구성 요소 를 함께 결합 해야 한다는 것 입니다 . 어떤 UI 프레임 워크 를 선택 할 것 인가 ? 데이터 를 저장 할 위치 는 어디 입니까 ? PHP , Python , Ruby 또는 다른 것 ? 신청서 를 어떻게 호스트 합니까 ? 이 가이드 가 이 에 대해 밝히 고 웹 개발 에 대한 귀하 의 생각 을 이해 하 고 어쩌면 직업 을 시작 하 는 데 도움 이 되 기 를 바랍니다 . 
 이 가이드 는 여러 부분 으로 나누 어 져 있 으며 , 오늘 은 Frontend 개발 부터 시작 하 여 이 분야 에서 가장 중요 한 언어 와 도구 를 소개 합니다 . 
 프론트 엔드 개발 언어 및 도구 
 먼저 이 영역 에서 지향 해야 할 사항 을 묘사 하 는 일종 의 프론트 엔드 조경 지도 부터 시작 하 겠 습니다 . 
 차트 의 색상 코딩 은 매우 간단 합니다 . 노란색 선 은 배워야 할 기본 사항 을 표시 하 는 반면 , 주황색 은 나중 에 사용 할 수 있 는 고급 주제 를 나타냅니다 . 
 프론트 엔드 개발 ( UI 개발 이 라고 도 함 ) 은 사용 자 가 보 고 상호 작용 하 는 응용 프로그램 의 부분 인 웹 사용 자 인터페이스 를 만드 는 것 을 말 합니다 . 프론트 엔드 개발 은 마크 업 을 위한 HTML , 스타일링 을 위한 CSS 및 로직 과 상호 작용 을 위한 JavaScript 의 세 가지 요소 를 기반 으로 합니다 . 이 세 가지 기술 이 시간 의 테스트 였 지만 , 기본 도구 와 프레임 워크 는 끊임없이 변화 합니다 . 이 섹션 에서 는 프론트 엔드 생태계 를 탐색 하 기 위한 출발점 을 제시 합니다 . 
 Frontend 개발 은 웹 디자인 및 사용 자 경험 과 도 밀접 하 게 관련 되 어 있 으며 두 회사 의 경계 는 각 회사 마다 다를 수 있 습니다 . 일반 적 으로 프론트 엔드 개발자 는 기술 적 문제 에 초점 을 맞추 고 웹 디자이너 는 미학 과 사용자 경험 에 관심 을 기울입니다 . 
 하이퍼 텍스트 마크 업 언어 ( HTML ) 는 사용자 에게 표시 되 는 정보 를 구조 화 할 수 있 는 마크 업 언어 입니다 . 이 HTML 문서 는 제목 , 텍스트 단락 또는 텍스트 입력 필드 와 같 은 HTML 태그 로 각각 표시 되 는 요소 로 구성 됩니다 . HTML 문서 는 하이퍼 링크 를 사용 하 여 다른 문서 에 도 연결 할 수 있 습니다 . 각 태그 는 고유 한 유형 의 콘텐츠 를 전달 하 며 특정 모양 과 연결 된 동작 을 가집니다 . 일단 HTML 이 생기 면 매우 간단 한 정적 HTML 페이지 를 작성 할 수 있 습니다 . 
 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 은 실제로 다음 두 가지 를 의미 합니다 . 
 1 . 프로젝트 에서 설치 하 고 사용 할 수 있 는 수천 개 의 오픈 소스 라이브러리 와 도구 가 포함 된 소프트웨어 레지스트리 . 
 2 . 레지스트리 에서 패키지 를 설치 , 갱신 및 제거 할 수 있 는 CLI 도구 . 
 npm 을 사용 하 면 프로젝트 에서 사용 할 라이브러리 를 설치 하 고 이 를 JSON 파일 로 문서 화 할 수 있 습니다 . 이 파일 을 코드 기반 과 함께 저장 하 면 프로젝트 의 종속 성 을 명시 적 으로 선언 하 고 다른 환경 에 이 를 신속 하 게 설치 할 수 있 습니다 . 또한 자신 의 라이브러리 를 게시 하 고 다른 개발자 와 공유 할 수 있 습니다 . 
 또한 npm CLI 도구 를 사용 하 면 테스트 를 실행 하 고 , 코드 를 컴파일 하 고 , 코드 분석 을 수행 하 는 데 사용 할 수 있 는 스크립트 를 실행 할 수 있 습니다 . 
 npm 에 대한 아날로그 는 Yarn 입니다 . 이 패키지 는 성능 향상 과 라이브러리 개발 지원 을 향상 시키 고 npm 패키지 레지스트리 와 호환 됩니다 . 
 Webpack 은 인기 있 는 모듈 번 들러 입니다 . 이 도구 를 사용 하 면 JavaScript 코드 , CSS 스타일 , HTML 템플 릿 및 이미지 와 같 은 다양 한 종류 의 자산 을 브라우저 에서 보다 효율 적 으로 로드 할 수 있 는 번들 로 병합 할 수 있 습니다 . Webpack 을 사용 할 때 코드 를 모듈 로 분할 합니다 . 각 모듈 은 다른 모듈 을 가져올 수 있 습니다 . 그런 다음 Webpack 은 가져 오 기 그래프 를 분석 하 고 자원 을 묶 습니다 . 번들 링 외 에 도 Webpack 은 컴파일러 , 코드 분석 또는 축소 를 수행 하 는 것 과 같이 번들 된 코드 를 변환 하 기 위해 로더 와 플러그인 을 사용 합니다 . Webpack 은 시작 하 는 것 이 까다로울 수 있 지만 대부분 의 최신 빌드 설정 의 초석 입니다 . 
 Rollup . js 는 때때로 Webpack 의 대안 으로 사용 됩니다 . 
 Chrome DevTools 는 Chrome 브라우저 에서 사용 할 수 있 는 풍부 한 도구 모음 입니다 . 소스 코드 또는 HTML 요소 탐색 , 네트워크 요청 추적 및 응용 프로그램 의 여러 부분 성능 측정 과 같 은 광범위 한 디버깅 사례 에 사용 할 수 있 습니다 . 빠른 변경 을 테스트 하 는 데 유용 할 수 있 는 페이지 를 즉시 편집 할 수 있 습니다 . 이 도구 를 확실 하 게 파악 하 면 수많 은 디버깅 시간 을 절약 할 수 있 습니다 . 또한 이 도구 를 사용 하 여 다른 웹 페이지 의 내용 을 보 고 어떻게 작동 하 는지 볼 수 있 습니다 . 유사 한 도구 는 다른 브라우저 에서 도 사용 할 수 있 습니다 . 
 이것 은 프론트 엔드 개발 트랙 에서 시작 하 기 에 충분 해야 합니다 . 걱정 마세요 , 이것 은 빙산 의 일각 에 불과 합니다 . 이것 이 당신 이 더 자세히 배우 고 싶 은 무언가 라고 생각 한다면 , 당신 은 당신 을 기다리 고 있 는 흥미 진진 한 것 들 을 많이 가질 것 입니다 . 
 작가 의 이전 글 	 [ 번역 ] JavaScript 2018 의 상태 [ 번역 ] 초급 웹 개발 가이드 2 부 : 백 엔드 작가 의 다음 글