프론트엔드 개발자가 되는 방법: 기술 및 리소스 [2022]

아름다운 프론트 엔드 개발을 통해 영향력을 미치면서 세계 일류 기업에서 일하고 싶습니까?

현대 웹의 뛰어난 아티스트에 대한 수요가 높으며 이 가이드는 시작하는 방법을 보여줍니다.

그리고 소프트웨어에서 일하는 사람들은 가장 많은 보상을 받는 사람들이기 때문에 이 새로운 기술을 습득하는 것을 고려해 볼 가치가 있습니다. 그것은 결국 당신을 위한 직업으로 바뀔 수 있습니다.

이 가이드의 첫 번째 섹션은 프런트 엔드 개발에 대한 긴급한 질문에 답하는 데 전념합니다. 프론트엔드 개발자의 책임, 급여 및 기타 측면에 대해 알고 있다면 두 번째 부분을 건너뛸 수 있습니다. 이 가이드의 두 번째 섹션은 리소스, 자습서 및 팁 전용입니다.

프론트엔드 개발이란?

프런트 엔드 웹 개발은 HTML, CSS 및 JavaScript를 사용하여 고유한 웹 앱을 만드는 방법입니다. 웹사이트, 모바일 웹사이트와 같은 앱뿐만 아니라 모바일 앱 및 프로그레시브 웹 앱.

이런 식으로 생각할 수도 있습니다. 이 웹사이트를 포함하여 탐색하는 모든 웹사이트는 어떤 식으로든 프론트 엔드 개발자가 구축했습니다. 적어도 클라이언트 측에서는.

한때 광범위한 도구와 프레임워크가 필요했던 작업을 이제 기본 사양을 사용하여 수행할 수 있습니다.

프론트 엔드는 웹 사이트 개발에서 가장 접근하기 쉬운 경로 중 하나이지만 가장 어려운 경로 중 하나이기도 합니다.

웹 사이트를 만드는 기술은 항상 변화하고 있습니다. 즉, 개발자는 최신 방식에 정기적으로 자신의 기술을 적용해야 합니다. 초보자에게는 지루할 수 있지만 1, 2년 동안 꾸준히 개발 연습을 하면 좋아집니다.

프론트엔드 개발을 무료로 배울 수 있습니까?

당신은 절대적으로 할 수 있습니다!

새로운 리소스, 자습서 및 오픈 소스 프로젝트의 엄청난 유입 덕분에 웹 개발을 배우는 것이 훨씬 더 쉬워지고 있습니다.

freeCodeCamp와 같은 프로젝트는 수백만 명의 사람들이 첫 번째 프로그램을 위한 코드를 작성하도록 돕고 있습니다. 그리고 freeCodeCamp 블로그 프론트엔드뿐만 아니라 웹 개발의 다른 측면에 대한 흥미로운 기사로 가득합니다. 북마크할 가치가 있습니다!

복잡해 보이죠? 연습하면 쉬워집니다!

이 가이드의 전제는 무료 학습을 돕는 것이지만 유료 과정의 이점을 간과할 수 없습니다.

결정적인 군중을 수용하는 많은 신생 기업이 있으며, 모든 과정이 끝나면 인증서를 제공할 수 있는 몇 가지 놀라운 과정 플랫폼을 강조할 것입니다.

프론트엔드 개발자의 평균 급여는 얼마인가요?

이전 경험이 있는 프론트엔드 개발자는 미국에 거주하는 경우 연간 $100,000 이상을 집으로 가져갈 것으로 예상할 수 있습니다.

나쁘지 않은 수치입니다!

주니어 개발자는 $60,000 이상에서 집으로 돌아갈 것으로 기대할 수 있습니다.

그리고 유럽의 급여도 꽤 합리적인 것 같습니다. 독일은 연간 평균 $50,000.

주목할 가치는 원격 근무의 인기 최근 몇 년 동안 폭발적으로 증가했으며, 이는 개발자들이 전반적으로 급여를 국제 표준에 맞게 균등화하려고 한다는 것을 의미합니다. 이것이 프론트엔드 개발자가 되는 것을 고려해야 하는 더 많은 이유입니다!

프론트엔드 개발자로 일자리를 찾는 방법은 무엇입니까?

기술적으로 직업은 가장 마지막에 이야기해야 합니다. 먼저 기술을 축적한 다음 잠재적인 기회에 대해 생각해야 합니다. 하지만 이 게시물은 가이드로 구성되어 있으므로 언제든지 돌아와서 이 섹션을 확인하여 참조할 수 있습니다.

원격 직업은 전례 없는 속도로 증가하고 있습니다. 결국, 누가 집에서 일하거나 해변에서 곧바로 일한다는 아이디어를 좋아하지 않습니까?

다음은 프런트 엔드 개발자에게 가장 인기 있는 작업 게시판 목록입니다.

이것은 다음 프론트 엔드 직업을 찾기 위한 권장 사항을 제공하는 사이트의 다소 압축된 목록입니다. 다른 대안은 수익을 올리거나 프리랜서 공연에 시간을 할애하기 위해 개인 프로젝트를 진행하는 것입니다.

리소스: 시작 위치.

다음 리소스는 모두 시작하기 위한 것입니다. 우리는 이와 관련하여 합리적으로 선형적인 접근 방식을 취하고 있습니다. 그리고 거기에는 엄청난 양의 자원이 있다는 단순한 이유 때문입니다.

빠르게 시작할 수 있도록 최신 워크플로를 구성하는 플랫폼 및 프런트 엔드 도구에 중점을 둡니다. 결과적으로 현대 개발자의 워크플로를 제어하는 ​​도구를 이해하면서 기본에서 중급까지의 코딩 구문을 배울 수 있습니다.

이 리소스는 이 가이드의 두 번째 부분에 있는 코스 및 자습서를 준비할 수 있도록 시간을 할애하는 것이 좋습니다.

코드아카데미

코딩 방법을 배우기 위해 리소스를 찾는 데 몇 분만 투자한다면 Codecademy는 의심할 여지 없이 첫 번째 히트작 중 하나가 될 것입니다. 이 코딩 학습 플랫폼은 잘 알려져 있으며 7년 동안 1억 명이 넘는 사람들에게 서비스를 제공했습니다.

당시 Codecademy는 역동적이고 인터랙티브한 코딩 인터페이스로 상당히 혁신적이었습니다. 많은 사람들이 같은 길을 갔지만 Codecademy는 일관된 실적을 유지했습니다.

요즘에는 완료 시 인증서를 받을 수 있으며 많은 사람들이 해당 인증서를 사용하여 최상위 스타트업에 취업했습니다. 주니어 개발자로서, 그 이하도 아닙니다.

그동안에는 Codecademy가 충분하지 않다는 주장.

숙련된 개발자의 관점에서 보면 이 플랫폼이 너무 단순할 수 있습니다. 그러나 프론트 엔드 개발에 대해서만 배우고 있다면 실시간 결과와 함께 단계별 지침을 따르는 것보다 더 만족스러운 것은 없습니다.

Codecademy는 HTML5, CSS3, SASS, Python, JavaScript, Ruby, SQL 및 Java에 대한 수업을 제공합니다.

CSS 레이아웃 배우기

프론트엔드 개발자는 레이아웃 작업에 상당한 시간을 할애할 것입니다. 레이아웃은 웹 사이트를 구성하는 캔버스입니다. 이 블로그 텍스트는 더 큰 컨테이너의 일부인 행 안에 위치합니다.

이는 모든 웹페이지 디자인에 적용됩니다. CSS 레이아웃 학습을 사용하면 컨테이너와 행이 작동하는 방식과 콘텐츠를 원하는 위치에 정확히 배치하는 방법에 대한 기본적인 이해를 얻을 수 있습니다.

탐색할 수 있는 추가 도구는 다음과 같습니다. 플렉스박스 프로기 ~을 위한 플렉스박스 기초와 그리드 가든 ~을 위한 그리드 각각 기본.

레이아웃은 파악해야 하는 상당히 중요한 주제이므로 레이아웃 경험에 대해 자세히 알아보는 데 몇 시간을 투자하세요. 가장 좋은 학습 방법은 연습입니다.

부트스트랩

레이아웃이 어떻게 작동하는지 이해했다면 이제 몇 가지 구체적인 실험을 할 차례입니다. 물론, 첫 번째 프로젝트로 사용자 정의 UI를 개발하려고 할 수 있지만 계속 진행하도록 권장하는 것보다 더 많은 것을 두려워할 수 있습니다.

따라서 프레임워크 또는 두 가지에 대해 배워야 합니다. 프레임워크는 모든 종류의 웹 개발을 시작하는 간단한 방법입니다. 첫날부터 대화형 웹사이트 구축을 시작할 수 있는 도구와 문서가 제공됩니다. 그리고 가장 좋은 것 중 하나는 Bootstrap입니다.

세계에서 가장 인기 있는 프런트 엔드 구성 요소 라이브러리를 사용하여 웹에서 반응형 모바일 우선 프로젝트를 빌드하십시오. Bootstrap은 HTML, CSS 및 JS로 개발하기 위한 오픈 소스 툴킷입니다.

부트스트랩은 모든 웹에서 많이 사용되며 의심할 여지 없이 세계에서 가장 인기 있는 프론트엔드 프레임워크 중 하나입니다.

젠장, 매일 방문하는 사이트의 상당 부분이 일부 부트스트랩 기능을 사용하고 있습니다.

Bootstrap의 환상적인 점 중 하나는 얼마나 빨리 시작할 수 있는지. 설명서 페이지에는 예제와 사용 사례가 가득합니다. 그리고 무엇보다도 Bootstraps 레이아웃 시스템은 반응형 디자인을 염두에 두고 설계되었습니다. 따라서 Bootstrap 기반 사이트는 자동으로 모바일 친화적입니다.

Bootstrap이 제공하는 것이 마음에 든다면 다음은 인기 있는 프론트 엔드 프레임워크에 대한 추가 리소스입니다.

프런트 엔드 체크리스트

웹사이트를 구축하는 데 사용하는 기술에도 불구하고 여전히 특정 규칙과 규정을 따라야 합니다. 물론 이러한 요구 사항을 무시하도록 선택할 수 있지만 사용자 경험과 디지털 호환성을 희생해야 합니다.

프론트엔드 체크리스트는 웹사이트 URL을 제공할 수 있는 훌륭한 도구이며 플랫폼은 프론트엔드 개발의 모범 사례에 대해 사이트를 감사합니다. 여기에는 이미지를 최적화했는지 또는 SEO 모범 사례를 따르고 있는지 확인하는 것이 포함됩니다.

전문 웹사이트 및 앱에 대한 최신 요구 사항이 무엇인지 이해하는 데 시간이 걸리는 한 이 앱을 시도하고 사용해야 합니다. 게다가, 방해가 되지 않고 부드러운 UI는 작업하는 데 절대적인 즐거움입니다.

뷰.js

Vue.js는 작은 아이디어/개념이 어떻게 세계에서 가장 인정받는 것들 중 하나로 성장할 수 있는지 보여주는 좋은 예입니다. 실제로 Vue.js는 프론트엔드 커뮤니티를 폭풍으로 몰아넣었습니다.

이 진보적인 프레임워크는 개발자가 HTML 및 JavaScript를 사용하여 놀라운 사용자 인터페이스를 구축하는 데 도움이 됩니다.

이 프레임워크는 재정 및 개발 측면 모두에서 커뮤니티에서 전적으로 지원합니다.

오픈 소스가 어떻게 함께 모여 훌륭한 일을 만들어낼 수 있는지를 보여주는 완벽한 예입니다. 그리고 프론트엔드 개발자로서 당신은 다음에 대해 더 공부해야 합니다. 오픈 소스와 그것이 중요한 이유.

다음은 Vue.js에서 권장되는 몇 가지 읽기 사항입니다.

마지막으로 Vue.js로 빌드된 다양한 프로젝트를 확인하십시오. Vue.js 쇼케이스 웹사이트.

프론트엔드 기초

지금까지 살펴본 모든 것은 대부분 무료이며 오픈 소스입니다. 당신이 필요로하는 것은 자신을 잡는 것입니다 숭고한 텍스트, 그리고 프론트 엔드 실험을 잘 할 수 있으며 절대적으로 그래야 합니다! 튜토리얼과 프레임워크 문서를 읽는 것은 전투의 절반에 불과합니다.

실제 학습은 텍스트 편집기와 브라우저에서 이루어집니다. 이 접근 방식의 유일한 단점은 완전히 체계적이지 않다는 것입니다. 당신은 모두에게 자유를 주는 모드에서 일하고 있고 결과는 당신 자신을 훈련하는 능력에 따라 다를 수 있습니다.

당신이 투자하기로 결정하지 않는 한, 그리고 투자함으로써, 나는 상징적 인 금액을 지출하여 프론트 엔드 책을 구입하는 것을 의미합니다. 책 떨어져. 이 사람들은 업계 최고 중 일부이며 베테랑 프론트 엔드 개발자가 반복해서 자신의 책을 추천합니다.

프론트 엔드 기초 섹션에는 SVG, CSS, HTML, JavaScript 및 Sass에 대한 책이 있으며, 이는 현대 프론트 엔드 워크플로를 위한 완벽한 시작점입니다.

깃허브

GitHub는 코딩 및 개발의 모든 것을 위한 디지털 사무실입니다. 세계에서 가장 인기 있는 프레임워크와 도구의 대부분이 있는 세계 최대의 오픈 소스 플랫폼입니다.

GitHub를 사용하면 프로젝트를 호스팅하고 다른 사람들이 기여를 제출하도록 환영할 수 있습니다. 그리고 다른 프로젝트에 직접 기여를 제출할 수 있습니다.

GitHub 및 제공해야 하는 모든 것을 탐색할 수도 있습니다. 예를 들어 GitHub에는 특정 프레임워크 및 기술에 대한 자습서, 리소스, 도구 및 기타 항목의 방대한 모음인 유명한 Awesome 목록이 있습니다.

예, 멋진 프런트 엔드 목록 프론트 엔드에 대해 알아야 할 최신 정보와 그 방향에 대한 최신 정보가 포함되어 있습니다.

스택 오버플로

Stack Overflow는 세계에서 가장 엄격한 Q&A 프로그래밍 사이트로 악명이 높습니다. 그리고 정말 그렇다..

Stack Overflow의 사용자는 조사되지 않았거나 제대로 분석되지 않은 질문을 가볍게 여기지 않습니다. 그리고 이것이 불쾌하게 느껴질 수도 있지만 강한 목적 의식을 형성하는 데 도움이 됩니다.

사용자가 질문에 대한 답변을 제출할 때마다 다른 사용자가 앞으로 나와 해당 답변에 찬성할 수 있습니다. 결국 사용자의 질문에 철저히 답하는 여러 ‘검증된’ 답변을 얻게 됩니다. 결과적으로 사이트의 계층 구조가 명확하고 일관되게 유지됩니다.

초보자 프론트엔드 개발자는 스택 오버플로를 사용하여 특정 주제를 이해하고 필요할 경우 질문을 하고 싶을 것입니다. 그러나 대부분의 초보자용 항목의 경우 몇 초 안에 간결한 답변을 찾을 수 있어야 합니다.

자습서 및 코스: 생태계를 파악합니다.

첫 번째 섹션은 시작하는 데 도움이 되는 리소스와 플랫폼에 대해 전적으로 설명했습니다. 프론트엔드 개발에서 기대할 수 있는 것에 대한 실제 느낌을 얻을 수 있도록 목록에 있는 각 리소스에 적절한 시간을 투자해야 합니다.

이 모든 작업을 마치면 튜토리얼과 코스로 주의를 돌릴 수 있습니다. 학습에 중점을 둔 보다 엄격하게 조직된 리소스입니다.

프론트엔드 개발은 도구, 프레임워크, 라이브러리, 테스트 소프트웨어 등의 모음입니다. 그렇다고 해서 그 범위가 겁먹게 해서는 안 됩니다!

다음 과정 중 일부는 무료로 사용할 수 없습니다. 그러나 다음 권장 사항이 절대적으로 최상위임을 보증합니다.

또한 Frontend Masters와 같은 플랫폼을 통해 세계에서 가장 성공적인 신생 기업에서 사용되는 모든 기술에 대한 최신 정보를 얻을 수 있습니다.

이 게시물의 목표는 프론트엔드 개발을 취미로 홍보하는 것이 아니라 모든 학습을 통해 경력을 쌓을 수 있도록 실질적인 리소스를 제공하는 것입니다.

MDN 웹 문서

MDN(Mozilla Developer Network)은 어떤 식으로든 당신의 지인을 만들 것입니다. 이 웹 문서 플랫폼은 웹 작동 방식을 홍보하는 데 전적으로 전념합니다. 여기에서 개발자 도구, 웹 기술 및 웹 개발 자체에 대해 배울 수 있습니다.

CSS 또는 HTML에 대한 몇 가지 세부 사항을 검색할 때 Google 및 기타 검색 엔진에서 첫 번째 결과로 나타나는 것은 종종 MDN입니다. 가이드, 사양 및 전반적인 통찰력은 프런트 엔드 개발자에게 적합한 방식으로 구성되어 있습니다.

edX 프론트엔드 과정

이 안내서의 앞부분에서 언급했듯이 엄격한 커리큘럼을 따르는 것은 배우고 적응하는 훨씬 선형적인 방법입니다. 그리고 코스를 시작하려면 edX가 제공하는 것을 확인해야 합니다. 수료 시 수료증을 받을 수 있을 뿐만 아니라 원하는 속도로 학습할 수도 있습니다.

edX 과정은 학생들이 각 과정 주제의 기본 사항을 이해하도록 돕는 데 중점을 두고 철저하게 구성되어 있습니다. 현재 JavaScript, HTML5, CSS3 등과 같은 기술을 배울 수 있습니다.

전체 프론트 엔드 인증서를 얻으려면 $500의 적당한 투자를 해야 합니다. 그러나 이렇게 하면 코스 강사 등에 직접 액세스할 수 있습니다. 수많은 회사에서 edX를 사용하여 이 특정 프로그램에 직원을 등록했습니다.

프론트엔드 마스터

Frontend Masters는 부트캠프 경험과 유사합니다. 이 플랫폼에서 찾을 수 있는 과정은 매우 철저하며 긴 형식의 콘텐츠와 프로젝트 지향 학습에 중점을 둡니다.

여기에서 React, Vue, Angular, Node.js 등과 같은 기술에 대해 배울 수 있습니다. 실제 부트캠프 코스와 유사한 경험을 할 수 있도록 제작 퀄리티가 매우 높습니다.

등록된 사용자로서 진행 상황을 추적할 수 있습니다. 배우다 페이지. 이 페이지는 학습 진행 상황을 추적하여 각 기술에 대한 백분율을 개별적으로 표시하지만 전체 스택에 대한 백분율도 표시합니다. 동기 부여를 유지하는 재미있는 방법입니다.

마지막으로, 이력서에 프론트엔드 석사 과정을 이수했다는 사실을 고용주가 눈치채지 못할 일이 아닙니다.

지식인

Egghead는 위에서 언급한 플랫폼과 매우 유사하지만 더 확고하고 압축된 교훈으로 눈에 띕니다. 예를 들어, ‘ListViews를 사용하여 Flutter에서 동적 목록 작성’ 강의는 개념을 진정으로 이해하기에 충분한 학습 자료를 제공하지만 2분 길이입니다.

Egghead는 프레임워크, 라이브러리, 언어, 도구 및 플랫폼에 대한 자습서 및 과정을 제공합니다. 모바일 개발에 대해 배우고 싶으십니까? 문제 없습니다. Egghead에는 iOS, Android 및 기타 플랫폼용 강의 자료가 있습니다.

연간 가격은 250달러이지만 사이트에서 찾을 수 있는 모든 단일 과정과 자습서에 액세스할 수 있습니다. 다른 커뮤니티 구성원과 각 수업에 대해 토론할 수도 있습니다. 투자 가치가 있습니다!

CSS 트릭

크리스 코이어 CSS 커뮤니티의 절대적인 전설입니다. 그는 10년 넘게 CSS-Tricks를 따라갔을 뿐만 아니라 코드펜 — 웹 개발자를 위한 인기 있는 코드 공유 플랫폼.

CSS-Tricks에 대해 신뢰할 수 있는 한 가지는 지속적으로 업데이트되고 현재 유행하는 주제 및 기술을 기반으로 스토리가 게시된다는 것입니다. 따라서 많은 사이트 작성자가 제공하는 자습서를 사용하여 기술을 빠르게 향상시킬 수 있습니다.

요컨대 책갈피에 넣어두고 하루에 한 번 확인하는 유용한 사이트입니다. 자습서 자체에서 엄청난 가치를 얻을 수 있을 뿐만 아니라 함께 제공되는 권장 사항도 얻을 수 있습니다.

스코트랜드 인

Scotch는 웹 개발의 최신 사건을 위한 장소인 동시에 학습 자원입니다. 2014년부터 운영되어 온 이 사이트는 수천 개의 무료 웹 개발 튜토리얼과 함께 엄청난 팔로워를 모았습니다.

Scotch 작성자는 Vue, React, Laravel, Angular, JavaScript, Node.js 등과 같은 기술에 중점을 둡니다. 그리고 이것들이 일종의 노크 튜토리얼이라고 생각하지 마십시오.

대부분의 경우 실제적이고 실질적인 앱을 구축하게 됩니다. 예: Twitter 클론 Vue 및 Adonis를 구축하는 방법을 배우고 싶습니까? 문제 없습니다. 무료 과정에 등록하기만 하면 됩니다.

멋진 사이트이며 신규 및 기존 프론트 엔드 개발자에게 충분히 추천할 수 없습니다!

팁: 투쟁이 없으면 진전도 없습니다.

여기까지 완료했으므로 다음 팁 중 일부에 빠져들 수도 있습니다. 프론트 엔드는 수익성 있는 직업 선택이지만 상당히 가파른 학습 곡선과 현재 타임라인을 둘러싸고 머리를 감는 동안 상당한 골칫거리가 포함됩니다.

그럼에도 불구하고 기회의 수준에 따라 당신을 끌어들일 수 있습니다. 힘든 싸움을 할 가치가 있습니다!

합리적으로 배우십시오.

프로그래밍을 배우는 이유는 무엇입니까? 더 나은 직장을 얻고 싶습니까? 창의적인 웹사이트를 만들고 싶습니까? 도움이 될 것이므로 이유를 알아내십시오. 벽에 머리를 박고 있을 때, 심지어 몇 주 동안에도 유용할 것입니다.

당신의 부족을 찾으십시오.

같은 생각을 가진 사람들, 그리고 가능하다면 멘토와도 최소한 몇 번은 관계를 맺고 싶을 것입니다. 내가 다니던 학교의 CS 선생님에게 Pascal 책을 빌리러 갔을 때 그는 매우 친절했고 내가 가진 어떤 문제라도 도와줄 수 있는 열린 마음을 갖고 있었습니다. 지역 커뮤니티를 찾거나 온라인 커뮤니티에서 다른 개발자를 찾는 유사한 경로를 고려하십시오. 누군가가 당신이 봐야 할 곳을 손가락으로 가리킬 때 배우는 것이 훨씬 쉽습니다.

모든 것을 배우는 것을 피하십시오.

모든 것을 알아야 하는 부담을 스스로에게 지우지 마십시오. 프론트 엔드의 경우 HTML5 및 CSS3으로 시작하는 것으로 충분합니다. JavaScript는 케이크 위의 아이싱과 같으므로 자신이 부풀어 오를 수 있으므로 얼만큼의 아이싱을 얻을 수 있는지 주의하십시오! 기본 사항에 익숙해지면 새로운 영역, 주제 및 프레임워크를 탐색하십시오. 작고 컴팩트한 학습 자료가 여기에서 핵심입니다.

더 자세히 알고 싶다면 읽어보세요 Ali Spittel의 이 게시물 여기에서 그녀는 새로운 개발자를 위한 25개 이상의 팁을 공유하고 있습니다.

거기서 나와

무엇을 기다리고 있습니까? 나가서 학습을 시작하십시오! 새로운 업데이트와 팁을 위해 몇 개월마다 프런트 엔드 개발에 대한 이 가이드를 다시 확인하십시오.

행운을 빕니다!