차례:
프론트 엔드 웹 개발자가되기 위해 알아야 할 모든 것!
프론트 엔드 개발자가되는 것을 목표로 코딩을 배우고 싶다면 성공하고 취업하기 위해 알아야 할 많은 것들이 있습니다. 웹 개발의 기본 사항을 확실히 파악한 다음 대부분의 웹 개발자가 활용하는 추가 도구와 리소스로 기술을 강화해야합니다.
연구를 마쳤고 프런트 엔드 개발이 귀하를위한 방법이라고 확신하는 경우 마스터해야하는 이러한 도구를 확인하십시오. 이러한 도구와 리소스를 아는 것은 웹 개발 프로세스에 도움이 될뿐만 아니라 일자리를 신청할 때 경쟁에서 바로 승리하는데도 도움이됩니다.
마지막으로, 코딩을 배우는 것이 시도하고 싶은 것인지 100 % 확신하지 못한다면, 코딩을 배워야하는 10 가지 이유가 있습니다.
프런트 엔드 개발자가하는 일
먼저 프론트 엔드 웹 개발자가 무엇인지 정확히 알아야합니다. 일반적으로 웹 개발은 세 가지 세그먼트 유형의 작업으로 구성됩니다.
- 프런트 엔드 개발자. 이 사람 (프런트 엔드 웹 개발자 또는 프런트 엔드 엔지니어라고도 함)은 웹 페이지의 브라우저에서 사용자가보고 사용하는 모든 것을 포함하는 웹 사이트 및 웹 응용 프로그램의 프런트 엔드로 작업하는 웹 개발자입니다.. 프런트 엔드 개발자는 일반적으로 디자인에 중점을 둡니다.
- 백엔드 개발자. 이 사람은 웹 사이트 및 웹 애플리케이션의 백엔드 또는 서버 측을 담당합니다. 백엔드는 모든 데이터가 조작되고 업데이트되는 곳입니다. 백엔드 개발자는 일반적으로 논리적 사고가입니다.
- 풀 스택 개발자. 이 사람은 프론트 엔드와 백 엔드 모두에 능숙한 특별한 닌자입니다. "예쁜 물건"과 "초 기술적 인"물건으로 작업하는 것을 즐긴다면이 직업이 당신을위한 것입니다…
또한, 아주 오래 전에 멀리 떨어진 은하계에서… Web Designer 라는 제목이있었습니다 . 웹 디자이너는 실제로 코딩을 배우는 일을 전혀 다룰 필요가 없었으며 웹 페이지의 디자인 측면에만 집중했습니다.
요즘에는 웹 사이트와 웹 응용 프로그램이 훨씬 더 기능적이고 상호 작용하게 되었기 때문에 구직 시장은 디자인과 코드를 모두 아는 사람들의 서비스를 요구합니다.
웹 디자이너가 사용할 수있는 직업이 아직 몇 가지 있지만 대부분의 웹 디자이너는 더 나은 기회, 급여 및 직업 보안을 위해 코딩하는 방법을 배우려고합니다. 여러면에서 프론트 엔드 개발자의 일은 프로그래밍 언어, 아마도 JavaScript에 능숙한 웹 디자이너로 간주 될 수 있습니다.
HTML은 웹 페이지의 골격이고 CSS는 스킨이며 JavaScript는 두뇌입니다.
기본 사항 마스터
웹 개발에 사용되는 세 가지 기본 기술을 확실히 이해하고 있어야합니다.
- HTML: 이것은 모든 웹 페이지의 첫 번째 기본 구성 요소이며 웹 페이지에 구조를 제공합니다. HTML은 코딩 언어이지만 완전한 프로그래밍 언어가 아니라 마크 업 언어입니다. 마크 업 언어를 사용하면 처리 목적으로 텍스트를 "마크 업"할 수 있습니다.
- CSS: 이것은 모든 웹 페이지의 두 번째 기본 구성 요소이며 웹 페이지의 "모양과 느낌"을 담당합니다. CSS도 프로그래밍 언어가 아닙니다.
- JavaScript: 대부분의 웹 개발자가 배우는 세 번째 빌딩 블록이자 첫 번째 실제 프로그래밍 언어입니다. JavaScript는 컴퓨터의 브라우저에서 실행되며 웹 페이지의 기능을 허용합니다.
사람을 상상하는 방식으로 웹 개발의 세 가지 구성 요소를 상상한다면 HTML은 웹 페이지의 뼈이자 골격이고 CSS는 스킨을 제공하며 JavaScript는 두뇌입니다.
웹 개발 기술을 가르치는 WHIZ 인 Brad Traversy의 HTML 크래시 과정을 수강하면 지금 코딩을 배우는 데 어려움을 겪을 수 있습니다.
기본 웹 개발 도구
- 텍스트 편집기: 우리는 텍스트 편집기를 사용하여 코드를 작성하며, 하나를 선택하고 모든 기능에 익숙해 져야합니다. 오늘날 인기있는 텍스트 편집기에는 Atom, Sublime Text, Brackets, Visual Studio Code, 좋은 오래된 MS 메모장 및 Mac 텍스트 편집이 포함됩니다.
- 브라우저 개발자 도구: Google Chrome 및 Mozilla Firefox에는 브라우저에서 웹 사이트의 코드를보고 조작 할 수있는 내부 개발자 도구가 모두 장착되어 있습니다.
- 이러한 도구는 디버깅 목적에 적합하며 물론… 개발자 도구를 사용하여 웹 사이트의 변경 사항을 볼 수있는 유일한 사람은 자신의 브라우저에 표시되는 사이트를 조작하는 것뿐입니다.
- 버전 제어 시스템: 버전 제어 시스템을 사용하면 웹 프로젝트의 변경 사항을 관리 할 수 있습니다. 이를 통해 작업중인 프로젝트를 완성 할 때까지 배포 된 프로젝트를 방해하지 않고 다른 버전의 프로젝트로 되돌릴 수 있습니다. 사용중인 버전 제어 시스템이 여러 개 있지만 Git 이 가장 우세합니다.
- 명령 줄 (터미널): 전문적인 웹 개발을 위해서는 명령 줄에 대한 철저한 숙달이 필요합니다. 명령 줄은 무섭게 보이지만 새 소프트웨어 패키지를 쉽게 업로드 할 수 있으며 파일과 폴더를 매우 쉽게 탐색 할 수 있습니다. 하루 만에 명령 줄을 마스터하는 방법을 배울 수 있습니다.
기본 웹 개발 지원 기술
- CSS 전 처리기:이 기술은 CSS 작성 및 유지 관리를 쉽게 만들어줍니다. 지금까지 가장 일반적인 CSS 전처리 기는 SASS 이며 하루 만에 학습 할 수 있습니다.
- CSS 프레임 워크: 복잡한 CSS 작업을 만드는 데 걸리는 시간을 줄이는 데있어 알아야 할 CSS 프레임 워크는 Twitter Bootstrap 입니다.
- CSS Flexbox 및 CSS Grid: 웹 페이지를 모바일 반응 형으로 만드는 데 크게 도움이되는 CSS 웹 모델 레이아웃입니다.
- 번들링 도구: Webpack 및 Browserify with Gulp 는 페이지를 브라우저에 더 빠르게로드하는 데 사용됩니다. 이러한 도구는 더 빠른로드 시간을 위해 콘텐츠 를 축소 하거나 슬림화하는 데 사용됩니다.
- JavaScript 라이브러리 및 프레임 워크: 라이브러리 및 프레임 워크를 사용하면 웹 페이지에 JavaScript 상호 작용을 빠르고 쉽고 효율적으로 추가 할 수 있습니다. 또한 JavaScript의 더 복잡한 측면을 단순화하는 데 도움이됩니다. 인기있는 라이브러리 및 프레임 워크에는 JQuery, React 및 Angular가 있습니다.
보시다시피 프론트 엔드 웹 개발자가 되려면 많은 것을 배워야합니다. 좋은 소식은 이러한 모든 도구, 리소스 및 기술을 무료로 배울 수 있다는 것입니다. YouTube에만 수많은 무료 리소스가 있음을 이미 알 수 있습니다.
보다 포괄적 인 학습이 필요한 경우 Team Treehouse와 같은 온라인 학습 리소스를 사용하여 이러한 모든 도구를 거의 아무것도 학습 할 수 없습니다. The Complete Front-End Development 코스 또는 Udemy의 Modern React와 같은 단일 코스도 있습니다.