프론트엔드 개발의 기본은 무엇입니까? 전체 가이드 알아보기

현대 사회에서 점점 더 많은 사람들이 프로그래밍을 배우고 싶어하면서 어디서부터 시작해야 할지 모르는 동시에 웹 프로그래머가 되는 것이 유행이기 때문에 IT 산업이 꿈꾸고 있습니다. 많은 사람들에게 웹 개발자 또는 주니어 프론트 엔드 개발자, 기본 프론트 엔드 개발과 같은 이 놀라운 세계로의 첫 번째 단계를 제공합니다. 그러나 꿈의 직업을 찾기 전에 어딘가에서 시작해야 합니다. 여기에 몇 가지 답을 얻을 수 있는 초보자용 지식 책이 있습니다. 프론트 엔드 개발자를 위한 무료 과정이 있습니까? HTML, CSS 및 JavaScript를 마스터하기 위한 학습 자료를 찾을 수 있는 온라인에서 스스로 학습하는 방법. HTML과 CSS를 안다면 이미 웹 레이아웃 디자이너 자리에 지원할 수 있습니다.

프론트엔드 개발의 기본은 무엇입니까?

웹 프로그래밍 세계에 들어가는 것은 새로운 사람들에게 어려울 수 있습니다. 너무 많은 개념이 이상하게 들리고 쓰기 단계에서 문제가 됩니다. 작성 방법: 소프트웨어 개발자 또는 프론트 엔드 개발자? 프론트엔드 개발자인가, 아니면 프론트엔드 소프트웨어 엔지니어인가? 그러나 가장 일반적인 것은 하이픈 항목입니다. 프론트 엔드 개발자 - 애플리케이션의 시각적 부분을 담당하는 사람(우리가 보는 것, 우리 = 사이트 사용자).

일반적으로 프론트엔드 개발자는 그래픽 디자인을 제공하는 그래픽 디자이너(웹 디자이너)와 작업합니다. 종종 프론트엔드 개발자는 웹사이트에서 일어날 상호작용의 프로토타입을 제안하고 생성하는 UX 디자이너와 협력할 기회가 있습니다. 프론트엔드 개발자의 역할은 이 모든 것을 통합하는 것입니다. 일반적으로 프론트엔드 개발자는 그래픽 디자인을 잘라 디자인을 더 작은 부분으로 나누고 사용자가 궁극적으로 사용하는 웹사이트로 코딩(HTML 및 CSS)하는 작업을 맡는다고 합니다.

그런 다음 JavaScript를 사용하여 앞서 언급한 상호 작용이 추가되었습니다. HTML과 CSS3를 사용하면 부드러운 전환과 기본 애니메이션을 만들 수 있지만 JavaScript는 모든 고급 페이지-사용자 상호 작용을 도입합니다. JavaScript를 사용하여 드롭다운 메뉴, 페이지의 슬라이더, 양식 유효성 검사, 하위 페이지 또는 고급 애니메이션 간의 전환, 3D 게임(예: Babylon-JavaScript 사용)을 추가합니다. 애플리케이션의 백엔드에서 JavaScript의 논리에 대한 데이터, 따라서 프론트엔드 협력 - 백엔드 개발자.

프론트엔드 개발자의 위치는 매우 다양합니다. 인터랙티브 크리에이티브 에이전시의 프론트엔드 개발자, 소프트웨어 개발 하우스 회사의 프론트엔드 개발자가 하는 일은 스타트업의 프론트엔드 개발을 담당하는 사람에게 다르게 보이고 다른 직업으로 보일 것입니다. .

절단 그래픽 프로젝트의 프론트 엔드 개발자는 주로 응용 프로그램 논리 및 고급 JavaScript 작업 작성을 다루는 웹 프로그래머인 JavaScript 개발자로 발전할 수 있습니다. 또한 프론트엔드 개발자(백엔드 개발자 포함)는 종종 애플리케이션의 JavaScript 아키텍처를 계획하고 프로젝트를 위한 프레임워크와 라이브러리를 의식적으로 선택해야 합니다.

프론트엔드 개발이 쉬운가요?

• 효과를 빠르게 볼 수 있습니다. 웹 개발/백엔드 개발을 배우는 것과 달리 순수한 HTML에서도 코드 조각을 즉시 생성하면 시각적 효과가 나타나 작업을 계속할 수 있습니다.
• 낮은 진입 임계값 - 초기에 인턴십이나 주니어 직책에서 전문 경력을 시작하는 데 필요한 프런트 엔드 기술은 상대적으로 거의 없습니다.
• 특히 방학이 다가오고 여름 인턴십이 많을 때 후배들을 위한 많은 일자리 제안이 있습니다.
• 독립성 - 우리는 스스로 웹사이트를 만든 다음 프리랜서로 주문을 받을 수 있습니다. 결국 기본 범위에서 A부터 Z까지 간단한 웹 사이트를 설정할 수 있어야 합니다.

어쨌든 만족스러운 수준에서 전문 경력을 시작하기 위한 기본 사항을 배우려면 며칠에서 몇 주가 걸립니다. 예를 들어, 매일 5시간이 없고 주말에는 몇 시간만 있다면 적어도 6개월은 유용할 것입니다. 프론트엔드 개발자를 위한 과정을 받게 됩니다. 그리고 예, 이것은 주제를 올바르게 이해하기에 충분합니다.

프론트엔드 개발에 필요한 것은?

다음은 성공의 비법입니다. 웹사이트를 만들려면 다음이 필요합니다.

HTML + CSS

이것들은 웹 사이트를 구축하기 위한 기본 요소입니다. HTML은 웹사이트의 구조(설명된 요소)를 제공하고 CSS는 이러한 요소의 모양을 브라우저에 알려줍니다. HTML과 CSS를 마스터하면 (그래픽) 디자인을 다시 만들어 웹사이트로 만들 수 있습니다.

자바스크립트

웹 사이트를 만들기 위한 웹 프로그래밍 프론트 엔드 개발 언어입니다. JavaScript 덕분에 웹사이트에 상호작용을 추가할 수 있습니다. 즉, 사용자 작업에 응답하는 웹사이트를 개발할 수 있습니다. 게임을 만들 수도 있습니다. 언어 작동 방식이나 웹 프로그래밍 언어 논리를 이해하려면 최소한 기본 JavaScript 코드를 마스터하는 것이 좋습니다. 그런 다음 jQuery로 이동할 수 있습니다.

제이쿼리

기술적으로 언어가 아니라 JavaScript 라이브러리입니다. JavaScript를 더 쉽고 빠르게 작성할 수 있게 해주는 중개자와 같습니다. jQuery 코드를 입력합니다. 라이브러리는 당신을 걱정하고 약간 복잡한 JavaScript의 의미를 브라우저에 전달하기 위해 번역기를 가지고 노는 것입니다. 오늘날 jQuery는 "조금 오래되었지만" "요청 시" 배우는 것이 좋습니다. 이를 통해 웹 프로그래밍 로직과 부트스트랩(CSS 프레임워크 사용)을 더 쉽게 배울 수 있으며 여전히 채용 공고에 나타납니다.

프레임워크

그들의 임무는 가장 일반적인 문제에 대한 기성품 솔루션을 제공하여 웹 사이트 및 응용 프로그램을 만드는 프로세스를 단순화하는 것입니다. 또한 코드를 깔끔한 방식으로 개발하는 방법에 대한 패턴을 제공합니다. 처음에는 Bootstrap(다른 옵션은 Foundation, Pure, YAML CSS)과 같은 CSS 프레임워크를 선택한 다음 현재 인기 있는 JavaScript 프레임워크 중 하나인 Angular 4, ReactJS, Vue.js, Ember.js를 추가하는 것이 좋습니다. 유성.js.

힘내

이것은 웹 코딩과 직접적인 관련이 없습니다. 우리가 이해하는 바는 종종 끝까지 지연됩니다. 틀리게도 버전 관리 시스템인 Git은 빠르면 빠를수록 좋다. 이것이 우리가 제안한 순서이다. 물론 완전히 다르게 할 수도 있습니다. jQuery를 건너뛰고 HTML과 CSS의 기초를 마스터한 직후 부트스트랩을 배우십시오. 그러나 우리는 당신이 손으로 작성한 솔루션을 찾는 일을 너무 단순화하고 단절하지 말고, 프레임워크에서 프리팹을 사용하지 않거나 순수 JavaScript로 거의 한 줄도 얻을 수 없는 JavaScript 프레임워크를 배우지 말라고 조언합니다.

프론트엔드 개발은 어디서부터 시작해야 하나요?

규칙적으로 배우고 새로운 기술 각각을 실제로 적용하려고 노력하십시오. 단 하나의 목적을 가진 작은 코드 조각이라도 방금 마스터한 것을 보여주기 위한 것입니다. 웹에서 공유하세요. Facebook에서 동기 부여 그룹을 제한하십시오. 동기 부여에 관한 이야기를 단 3시간 동안 읽어도 3배 이상 동기 부여가 되지 않는 경우가 많습니다. 보통 공부할 시간이 3시간 적습니다.

시장을 보고 구인 요구 사항을 읽으십시오. 그들은 변화하고 있습니다! 우리는 오늘 이 게시물을 작성하고 있으며 기술 변화에 따라 1년 안에 업데이트해야 할 것입니다. 기본 사항인 HTML CSS JavaScript에 익숙해지면 새로운 것이 유행할 수밖에 없습니다. "배울 내용" 목록을 업데이트하세요. 무료 워크샵(멘토로부터 배우고 동시에 흥미로운 접촉을 만들기 위해)과 산업 인턴쉽을 가능한 한 빨리 찾으십시오. 그 직업은 최고의 교사가 될 것입니다.

프론트엔드 개발의 예는 무엇입니까?

HTML + CSS

세 곳은 아마도 대화형 웹 프론트 엔드 개발 과정이 있는 가장 유명한 사이트일 것입니다. 무료이며 잘 조직되어 있으며 초보자에게 매우 쉽게 지식을 전달합니다. 그들은 브라우저에서 대화식 코스를 개최합니다. 집에 아무것도 설치할 필요가 없으며 과정만 수행하면 진행 상황이 즉시 측정됩니다.

칸아카데미, 코드아카데미, 홈스쿨

Khan Academy는 완전 무료 자료를 제공하며 다른 웹 언어를 사용할 수도 있습니다. 이것은 웹 개발뿐만 아니라 교육 플랫폼입니다. HTML 및 CSS를 포함한 기본 요소에서 고급 JavaScript 스크립트에 이르기까지 다양한 작업을 수행할 수 있습니다.

Codecademy 에는 전문 사용자만 사용할 수 있는 많은 무료 항목과 흥미로운 사전 구축된 프론트 엔드 개발 경로가 있습니다.

코드 학교 - 우리의 의견으로는 가장 조직적인 과정입니다. 비디오 + 프론트 엔드 개발 작업이 포함된 대화형 부분으로 구성됩니다. 각 코스의 첫 번째 레벨은 무료이지만 불행히도 나머지는 비용을 지불해야 합니다. 그러나 무료 부품(보통 약 1시간)도 볼 가치가 있습니다.

수강할 코스는 어떻게 선택하나요?

세 가지 웹 플랫폼을 모두 보십시오. 주제가 중복되지만 일부 중복 주제를 살펴볼 가치가 있습니다. 첫째, 반복은 지식을 통합하고, 둘째, 각 프론트 엔드 플랫폼은 교육에 대한 접근 방식이 약간 다릅니다. 선택은 당신의 것입니다. 많은 사람들이 월별 Bootcamp 또는 웹 개발 과정에 대한 비용을 지불하고 싶어합니다. 손끝에서 모든 것이 무료이기 때문입니다. 이상한 것은 없습니다.

가장 나쁜 점은 자료가 많고 확인하거나 선택하지 않고 필요한 모든 것을 빠르게 배우고 싶어한다는 것입니다. 모든 것을 트레이에 넣고 기본 자료에서 한 걸음 더 나아가십시오. 따라서 모든 프론트 엔드 과정을 수강할 시간이 없고 의사 결정이 자신의 강점이 아닌 경우 Khan Academy: Introduction to HTML CSS—Web Development를 확인하십시오.

자바스크립트

JavaScript를 사용하지 않는 프론트엔드 개발 과정은 어떻게 될까요? 위의 대화식 사이트는 훌륭합니다. 그들은 우리를 위한 JavaScript 과정을 제공합니다. 훌륭하고 간단하며 불행히도 매우 포괄적이지는 않지만 워밍업에 좋습니다. HTML 및 CSS 기본 사항이 이미 있는 경우 이전 제안 사항으로 시작할 필요가 없습니다.

소개에서 9개의 짧은 개발 연습을 시작하려면: JavaScript를 사용하여 Udacity: JavaScript Intro에서 동일한 주제를 기반으로 빌드한 다음(또는 즉시) 더 큰 작업 세트로 이동할 수 있습니다. HTML / JavaScript: 대화형 웹 만들기 페이지.

제이쿼리

프론트엔드 방식에서 한 단계 더 나아가지만 극히 선택 사항입니다. 현재 프론트엔드 개발 과정은 jQuery 없이 할 수 있습니다. 특히 오늘날 프론트엔드 개발자를 위한 흥미롭고 새로운 옵션이 많기 때문에 우리는 구인 제안을 살펴보았고 여전히 재고할 가치가 있습니다.

네, Khan Academy와 Codecademy에는 jQuery 과정이 있습니다. 그러나 이 경우에는 jQuery Pluralsight(이전 코드 학교) 프론트 엔드 개발 과정을 한 시간 동안 완전히 무료로 사용해 볼 것을 권장합니다.

학습 프레임워크

이 단계에서 프론트 엔드 자료를 직접 선택하고 지식에 대한 적합성을 평가할 수 있습니다. 부트스트랩 프레임워크와 관련하여 웹사이트 구축은 12열 그리드를 기반으로 하며, 이 지식은 나머지를 실제로 이해하는 데 기본이 됩니다. 부트스트랩을 사용하면 모바일 장치에 맞게 조정된 반응형 웹사이트(RWD)를 빠르게 만들 수 있습니다. 튜토리얼 형식의 학습을 선호하는 경우: 부트스트랩 과정은 코드 아카데미에서 제공되며 Daily Web을 사용하면 30분 안에 첫 번째 부트스트랩 슬라이더를 생성할 수 있습니다.

프레임워크 자바스크립트

현재, 괜찮은 프론트 엔드 개발 과정은 현재 사용되는 JavaScript 프레임워크를 확실히 소개하고 적어도 하나는 가르쳐야 합니다. Pluralsight(이전의 Code School)에서 14일 동안 무료로 제공되는 프레임워크가 있는 대화형 과정을 찾을 수 있습니다. scotch.io에서 매우 풍부한 무료 자료 모음을 찾을 수 있습니다. 반면에 각 프레임워크에 대한 무료 프론트 엔드 개발 과정을 찾을 수 있는 구독 취소는 별도의 게시물에 대한 주제입니다.

그들 중 많은 수가 있습니다. 선택은 어렵고, 그것들을 모두 아는 것은 불가능합니다. 무엇을 시작하기로 선택하든 그냥 고수하십시오. 웹 개발을 배운 지 일주일이 지났기 때문에 꽃에서 다른 꽃으로 건너뛰지 마십시오. 누군가는 다른 사람이 더 낫다고 말할 것입니다. 첫 번째 것을 배우고 그것에 간단한 웹 애플리케이션을 작성하십시오. 일반적으로 플래너, 할 일 목록 및 순위 뉴스와 같은 응용 프로그램은 초보자에게 권장됩니다. 프레임워크의 이름과 생성하려는 웹 애플리케이션의 이름만 있으면 됩니다.

무료 과정의 예:

• AngularJS
• Angular 2+(현재 6-그러나 4/5는 또 다른 프론트엔드 개발 버전임)
• ReactJS
• 뷰.js
• 엠버.js

끝인가요? 아니다! 이것은 주니어 프론트엔드 개발자를 위한 훌륭한 시작이자 확고한 기반입니다.

이 과정 후에 다음은 무엇입니까?

웹 프로젝트 작업으로 시작하십시오. 처음에 썼듯이, 첫 번째 프론트 엔드 개발 단계부터 작업을 문서화하고 코드가 이상적이지 않더라도 GitHub에 코드를 올려두십시오.

자신을 테스트 하시겠습니까?

배운 내용을 통합하는 가장 좋은 방법은 연습을 통해서입니다. 프론트 엔드 과정을 거치는 것은 한 가지이지만 웹 프로젝트에서 작업하는 것만으로 문제를 스스로 해결하기 위해 코딩하는 법을 배울 수 있습니다. 페이지 작성자에게 이메일을 보낼 수 있는 양식(방문 페이지)을 만듭니다.

명함 웹사이트 - 포트폴리오 만들기 - JavaScript를 사용하여 테이블을 피보나치 수열, 슬라이더 또는 처음부터 간단한 게임으로 채우는 것에 대해 생각해 보십시오. 이미 코딩 기술은 있지만 그래픽 기술이 없어서 개발이 "못생긴" 것이라고 생각하십니까? 아니에요! 예를 들어 Weekly Dev Challenge에서 준비된 그래픽 디자인을 선택하고 만들어 보십시오.

기초를 배우는 데 얼마나 걸립니까?

이것은 너에게 달려있어. 규율이 가장 중요합니다. 대부분의 사람들은 웹 프로그래밍 언어를 배우는 것이 더 어렵지만 비용이 들지 않는 과정을 수강하는 데 시간을 할애합니다. 첫 번째 웹 사이트를 설정하기 위한 기본 사항을 마스터하는 데는 프론트 엔드 개발에 대한 야심에 따라 약 1-3개월이 소요될 수 있습니다.

JavaScript를 마스터하려면 3개월의 하드 러닝을 더 추가할 것입니다. 나는 당신이 일하고 있다고 가정합니다. 그래서 당신은 학습에 일주일에 약 5-10시간, 즉 하루에 적어도 1시간을 할애할 것입니다. 6개월 안에 프론트 엔드 전문가가 되지는 않겠지만 추가 학습을 위한 기반을 만들기에는 충분한 시간입니다.

온라인으로 도움말 찾기

학습하는 동안 한 번 이상 문제가 발생합니다. 요소를 가운데에 맞추는 방법? 이 스크립트가 작동하지 않는 이유는 무엇입니까? HTML과 CSS는 Firefox와 Chrome에서 다르게 보입니다. 프론트엔드 개발 전문가가 되려면?

이것은 정상이지만 묻는 사람들은 실수하지 않습니다.

• Google — 가급적이면 영어로 Google 삼촌에게 물어보십시오.
• 스택 오버플 로 — 아마도 스택 오버플로의 응답을 가장 먼저 표시할 것입니다. 사용자가 웹 프로그래밍 언어 관련 질문을 게시하고 다른 사람들(보통 경험이 더 많은 웹 프로그래머)이 프론트엔드 개발에 대한 답변을 제공하는 웹 개발자 포털입니다. 전자의 최상의 솔루션은 포인트이며 질문 작성자는 자신의 문제를 해결한 댓글을 표시할 수 있습니다. 때로는 여러 가지 또는 수십 가지 솔루션이 있으므로 모든 솔루션을 읽고 자신의 자리에서 확인하는 것이 좋습니다. 해결 방법이 도움이 되었다면 투표하십시오. 위쪽 화살표를 표시하십시오.
• Facebook —초보자를 위한 FB의 프론트 엔드 개발 그룹은 특히 문제에 대해 질문하는 방법을 모를 때 많은 도움을 줄 수 있습니다. 화면과 코드를 업로드하세요. 누군가가 당신을 위해 그것을 쓸 것이라고 기대하지 마십시오. 그러나 의견은 분명히 당신을 올바른 길로 인도할 것입니다. 불행히도, 사소하고 간단한 질문으로 사람들은 항상 불쾌한 것을 작성합니다. 어렵고 인내심이 많습니다. 웹 그룹을 권장합니다. 스타트업 지원은 스타트업과 관련된 질문에 가장 적합하며 중재자는 증오가 없는지 확인합니다.
• CanIUse — 문제가 브라우저 중 하나에서 작동하지 않는 CSS와 관련된 경우 사용 중인 항목이 확인 중인 버전에서 지원되는지 확인하십시오. 이렇게 하면 고스트 프런트 엔드 문제에 대한 길고 지루한 검색을 피할 수 있습니다.

결론

따라서 이 기사에서 IT 세계에 대해 더 많이 배웠으며 방향을 제시하는 데 도움이 된다면 기쁠 것입니다. 프론트 엔드 세계는 방대하고 초보자가 길을 잃기 쉽지만 우리는 사람들이 올바른 길을 찾도록 돕는 데 중점을 둡니다. 그러나 전통적인 웹 언어 외에도 코드가 없는 웹 프로그래밍 언어가 있습니다. 코드가 없는 도구가 널리 사용 가능해질 때까지 웹 응용 프로그램 개발은 웹 프로그래머에 의해 독점적으로 수행되었습니다.

다행히 시간이 얼마 남지 않았으므로 이제 이 자료에 정통한 학생이라면 누구나 웹 애플리케이션이나 랜딩 페이지를 만들 수 있습니다. 기본 지식, HTML, CSS 수준에서도 기본을 배우고 나면 이미 꿈의 직업을 찾을 수 있습니다. 많은 과학자들은 웹 프로그래밍 언어가 인간의 능력을 향상시키고 소프트 스킬 개발에 기여한다는 점에 주목했습니다. 결국 이것은 재정적 독립입니다. 우리는 스타트업을 시작하고 지구를 위해 필요한 일을 한 프론트 엔드 세계의 다양한 사람들을 알고 있습니다.

물론 이러한 접근 방식에는 다음과 같은 장점이 있습니다.

• 사용이 간편하고 강력합니다.
• 훌륭한 템플릿 라이브러리.
• 다양한 매개변수 설정을 지원합니다.

코드가 없는 프로그래밍 언어 또는 시각적 프로그래밍 언어는 코드를 처음부터 작성할 필요가 없는 새로운 접근 방식입니다. 웹 개발의 미래인 그래픽 인터페이스가 있는 도구를 사용하는 것이 좋습니다. 전통적인 프론트 엔드 웹 애플리케이션은 멋진 것이지만, 우리는 당신이 혁신해야 한다고 생각하므로 우리 제품이 당신에게 유용할 수 있습니다. 우리는 진심으로 프로그래머라는 직업을 마스터하기 위한 올바른 길을 찾고자 합니다. 이 길은 험난하지만 마스터하면 이 시간 동안 보낸 평생을 만족시킬 것입니다.