좋은 프론트엔드 엔지니어가 되려면 무엇을 배워야 할까요?

프론트엔드 엔지니어란

프론트엔드 엔지니어는 인터넷 시대의 소프트웨어 제품 개발에 없어서는 안 될 전문 R&D 역할입니다. 좁은 의미에서 프런트엔드 엔지니어는 HTML, CSS, JavaScript와 같은 전문적인 기술과 도구를 사용하여 제품 UI 디자인 초안을 웹사이트 제품에 구현합니다. 사용자 PC, 모바일 웹페이지, 시각적 및 상호작용 문제를 다룹니다. 넓게 보면 사용자 단말기 제품의 비전과 인터랙션에 관련된 모든 부분은 프론트엔드 엔지니어의 전문 영역입니다.

2005년에는 대부분의 웹페이지가 다음과 같았습니다.

현재 웹페이지는 일반적으로 다음과 같습니다.

프론트엔드 엔지니어의 발전 경로와 전망은 무엇인가요?

프론트엔드는 비교적 새로운 산업입니다. 인터넷 개발 초기(1995~2005년)에는 전문적인 프론트엔드 엔지니어가 없었습니다. 2005년경부터 인터넷이 발달하면서 정식 프론트엔드 엔지니어의 역할이 업계에서 인정받게 되었고, 2010년에는 인터넷이 모바일 시대로 본격적으로 진입하기 시작했습니다. 중요하며 프론트엔드 분야의 기술 개발도 점점 더 중요해졌습니다. 빠르고 다양하고 새로운 아이디어, 디자인 패턴, 도구 및 플랫폼이 빠르게 발전하고 있으며 프론트엔드 엔지니어에 대한 기술 요구 사항이 점점 더 높아지고 있습니다.

프런트엔드 산업의 급속한 발전을 보여주는 몇 가지 데이터가 있습니다.

● 2010년 이후 가장 인기 있는 새로운 프로그래밍 언어 중 상당수는 Dart, Clojure, CoffeeScript, TypeScript 등 프런트엔드와 관련되어 있습니다.

● 가장 중요한 프론트 엔드 프로그래밍 언어인 JavaScript는 최근 몇 년간 Github 플랫폼에서 코드 양과 팔로어 수 측면에서 인기 있는 프로그래밍 언어 목록에 확고하게 자리잡고 있습니다.

● 업계에서는 프론트엔드에 대한 수요가 지속적으로 증가하고 있으며, 프론트엔드 프로그래머의 연봉은 업계 최고 수준입니다.

최근 몇 년 동안 가장 인기 있는 프로그래밍 언어 중 상당수는 JavaScript 대체 언어입니다. ​

JavaScript는 가장 인기 있는 10대 프로그래밍 언어 중 하나입니다

최근 인터넷 기업 프론트엔드팀 매년 2배씩 성장

JavaScript 엔지니어 평균연봉 상위 10위권 프로그래밍 언어 엔지니어

프론트엔드 엔지니어에게는 어떤 지식과 기술이 필요한가요?

어떤 사람들은 프론트 엔드 엔지니어의 기술 스택이 다음과 같다고 말합니다.

다른 사람들은 이렇게 말합니다.

실제로 프론트 엔드 엔지니어의 핵심 기술은 다음과 같습니다.

일반적인 인터넷 기업의 제품 개발 과정에서 프런트엔드 엔지니어와 기타 역할의 관계는 대략 다음과 같습니다.

프론트엔드는 제품과 디자인에 가장 가까운 엔지니어로, 제품과 기술을 연결해주는 역할을 하며, 사용자가 볼 수 있는 부분을 담당하는 만큼 사용자와 가장 가까운 엔지니어이기도 합니다.

멀티 단말기 시대에 제품이 PC와 모바일 단말기를 모두 지원한다면 프론트엔드 엔지니어는 더 많은 역할을 맡아야 합니다.

JavaScript 프론트엔드에서는 가장 중요한 스킬이기 때문에 뛰어난 프론트엔드 엔지니어라면 탄탄한 기본 JavaScript 실력이 있어야 합니다. JavaScript 프로그래밍 언어는 오늘날 프로그래밍 분야에서도 뜨거운 인기를 누리고 있으며, 웹 개발에만 사용되는 것이 아니라 다양한 측면에서 활용될 수 있습니다. （JavaScript 동영상 튜토리얼)

JavaScript는 "Raspberry Pi"에서 사용할 수 있습니다. 이런 형태의 스마트 하드웨어 칩 개발

프론트엔드 엔지니어도 소프트웨어 엔지니어이기 때문에 소프트웨어 엔지니어의 기본 지식도 매우 중요합니다.

● 수학

● 컴퓨터 시스템

● 운영체제

● 데이터 구조 및 알고리즘

● 편찬원리

HTML과 CSS도 프론트엔드 엔지니어에게 매우 중요한 기본 기술입니다. 특히 코드 작성을 좋아하는 학생들은 실제로 ML도 UI 관련 분야에서 매우 중요한 콘텐츠이므로 무시하는 경향이 있습니다. 무시당하다.

● HTML: The Living Standard(HTML 동영상 튜토리얼)

● HTML 및 CSS(CSS 동영상 튜토리얼)

일부 학생들은 다음과 같이 질문했습니다. "프론트 엔드 작업에 대한 수요가 많고 항상 변화와 변화가 있습니다. 실제 기술적 포인트는 많지 않습니다. 제품이 비즈니스 로직을 결정합니다. 기본 기본 서비스 작업이 더 어렵고 더 어려워질 것입니다. 더 나은 직업적 미래를 원하시나요?"

실제로 비즈니스 및 제품 수준의 작업에 가까울수록 수요의 차이가 더 커지고 변경이 더 자주 발생할 수 있습니다. 계속해서 변경되는 것은 프런트엔드뿐만 아니라 PHP 서버에서 비즈니스를 하는 학생들도 이 문제에 직면하고 비즈니스 로직도 계속해서 변경됩니다. 레이어가 낮을수록 활용도가 높아지고 상대적으로 변화가 적습니다.

그러나 모든 것에는 양면이 있습니다. 우선, 기본 서비스에 대한 시장이 더 큰지, 아니면 인터넷 비즈니스 및 제품에 대한 시장이 더 큰지 생각해 볼 수 있습니다. 둘째, 기본 서비스의 보편성은 달성하기 쉽지만 이를 제품 수준에서 어떻게 보편화할 것인지, 비즈니스 중심의 제품 개발에 있어서 개발 효율성을 높이기 위해 엔지니어링과 툴링을 어떻게 활용할 것인지는 사실 어려운 문제이다. 리치 인터넷 제품은 변화했고 우리의 삶을 변화시키고 있습니다. 그러나 제품 제작자로서 엔지니어가 어떻게 더 나은 삶을 살 수 있는지는 연구할 가치가 있는 영역입니다.

또한 실제 기술적 포인트가 많지 않다고 생각하지 마십시오. 곡선 및 표면 애니메이션 구현, 지도의 최단 경로 계산, png 정적 사진이 gif 사진과 유사한 로컬 이동을 수행하도록 만들기, 복권 게임 등 몇 가지 예가 있습니다. , 물리적 효과가 있는 HTML5 게임, 3D 차트, 증강 현실 WebGL 비디오 스트림 처리 등은 모두 프런트 엔드 분야에서 직면하는 실질적인 문제입니다.

JavaScript에 관한 한, 실제 프로젝트에서 실제 문제를 효율적으로 해결하기 위해 가장 적합한 모델을 설계하는 것은 그 자체로 매우 어려운 일입니다. 전형적인 차세대 프로그래밍 언어인 JavaScript는 기능이 풍부하고 사용이 유연하며 성능이 뛰어납니다. 객체지향, 함수형 프로그래밍, 다양한 디자인 패턴, MVC, MVVM은 그 자체로도 충분히 매력적입니다.

프론트엔드는 인터페이스와 상호작용 문제를 해결해야 합니다. 사실 UI가 끊임없이 변화하기 때문에 UI 수준의 문제는 소프트웨어 엔지니어링에서 항상 어려운 문제였습니다. 다양한 브라우저 버전, 웹 표준, 모바일 장치 및 다중 터미널 적응의 호환성으로 인해 프런트엔드 엔지니어는 큰 어려움을 겪었고 프런트엔드 엔지니어의 역량에 대한 요구 사항도 높아졌습니다. 많은 UI 문제에는 하나 이상의 솔루션이 있고, 많은 문제에는 매우 기발한 아이디어와 훌륭한 솔루션이 있습니다. 프론트 엔드는 엔지니어들 사이에서 매우 창의적인 그룹입니다. 이 산업에는 풍부한 창의성과 상상력이 필요하기 때문입니다.

프런트 엔드 엔지니어는 웹 표준의 설정자, 실무자 및 발기인이기도 하며 현재 W3C 표준은 브라우저에만 국한되지 않고 다양한 휴대용 스마트 장치, 차량 탑재 장치, 스마트 홈 등도 포함합니다. 만물인터넷(Internet of Everything)의 미래 시대에는 프론트엔드 엔지니어가 웹페이지의 엔지니어일 뿐만 아니라 모든 인간-컴퓨터 상호작용 분야의 엔지니어가 될 것입니다.

프론트엔드 엔지니어의 배움과 성장

프론트엔드 분야는 빠르게 발전하고 있으며, 다양한 신기술과 새로운 아이디어가 끊임없이 등장하고 있는 것은 좋은 현상입니다. 그러나 프론트엔드의 급속한 발전은 또한 몇 가지 문제를 가져옵니다. 예를 들어, 같은 반 친구가 나에게 정확히 무엇을 배워야 하는지 물었습니다. Angular.js, React, Node. .js, ES6, ES7, CoffeeScript, TypeScript... 항상 배워야 할 것이 너무 많은 것 같고, 어떤 것들은 명확하게 배우기도 전에 다른 신기술로 대체되고 "구식"인 것 같습니다.

사실은 여전히 ​​프론트엔드 엔지니어가 최우선 소프트웨어 엔지니어이며, 기초가 탄탄하지 않으면 모든 응용능력이 '클라우드'가 된다. . 프론트 엔드의 기초는 무엇입니까? HTML, CSS, JavaScript의 기본 기술, 수학, 알고리즘, 데이터 구조, 운영 체제 및 컴파일 원리의 기본 기술.

뛰어난 프론트엔드 엔지니어는 자신이 잘하는 분야가 있어야 하고, 그 분야에 대해 충분히 깊이 탐구해야 하며, 동시에 비전이 있어야 하며 "국경을 넘나드는" 능력도 있어야 합니다. 프론트엔드를 직업으로 삼을 수 있지만, 자신의 실력을 프론트엔드 분야에만 국한시키지 마세요. 프론트엔드 밖에 서 있어야만 더 명확하고 철저하게 볼 수 있는 것들이 많기 때문입니다.

뭔가를 배울 때 맹목적으로 유행을 따르지 마세요. 모두가 AngularJS에 대해 이야기하면 즉시 그것을 배우기 위해 달려갈 것입니다. . 프론트엔드 분야에는 많은 지식 포인트가 있고 배울 가치가 있는 것들이 많이 있습니다. 똑똑한 학생들은 체계적인 지식을 배우는 데 시간을 투자하고 그것을 충분히 깊이 연구하는 방법을 알고 있습니다. 그래야만 규칙을 요약하고 방법론을 형성할 수 있기 때문입니다. , 학습의 가치를 극대화합니다.

알림 정확함 사용법 - 한 분야의 고수는 다른 비슷한 분야의 신인이 될 수 없습니다

인터뷰에서 면접관은 프런트엔드 성능을 최적화하는 방법을 물었고 일부 학생들은 성능 최적화를 위한 야후의 군사 규칙을 사용하여 명확하게 대답할 수 있었습니다. 그들은 정적 리소스를 압축하는 도구의 사용을 반복적으로 강조했지만 그들은 블로그의 nginx 서비스를 사용했습니다. 빌드가 gzip을 활성화하지 않았습니다. 정적 자원을 병합하고 HTTP 요청을 줄여야 한다는 것은 누구나 알고 있습니다. 그런데 왜 HTTP 요청을 줄여야 할까요? 요청을 줄이면 얼마나 많은 성능 향상을 기대할 수 있을까요? 이러한 문제를 이해해야 하며, HTTP 프로토콜 자체에 대해서도 깊이 이해해야 합니다.

더 흥미로운 질문이 있습니다. HTML 작성의 핵심은 의미론이라고 다들 말하는데, 의미론이란 정확히 무엇일까요? 이 문제는 많은 학생들을 당황하게 했습니다. 레이블은 의미론을 준수해야 합니다. 이 답변은 간단하고 표준적인 것처럼 보이지만 어떤 종류의 레이블이 의미론을 준수합니까? b 대신 Strong을 사용하는 것이 강조됩니까? 그렇다면 외계 문명이 있고 그들의 언어에서 강함은 지구의 강함과 동일하고 대담함은 지구의 강함과 동일하다면 Strong 또는 b를 사용해야 합니까? i 태그는 이탤릭체를 의미한다고 하는데, Fontawesome.io는 왜 이를 아이콘 글꼴 태그로 사용합니까?

예전에는 천을 염색하기 위한 염료를 만들기 위해 농촌 곳곳에 일종의 민속 염색 작업장이 있었습니다. 이런 염색실에는 커다란 쇠통이 있는데 보통 힘이 센 작업자가 긴 쇠막대를 염료통 안에 세게 두드리면 염료의 색이 더 진해진다. 쇠통을 세게 칠수록 염료가 좋아지는 이유는 무엇입니까? 염색소 사람들은 이것이 대대로 전해 내려오는 경험이라고 하는데, 실제로 실제 염료의 색깔은 두드리는 힘과 많은 관련이 있다고 합니다. 그러던 어느 날, 마을에서 화학을 공부하러 나간 한 대학생이 염료에 철가루를 적당량만 첨가하면 염료와 철을 함유한 산화물이 화학반응을 일으켜 염료를 더욱 선명하게 만들 수 있다는 사실을 알아냈습니다. 대대로 전해지는 '의식'은 실제로는 실제 원칙에 맞서는 일종의 신앙이자 종교일 뿐이라는 것이 밝혀졌습니다. 마찬가지로, 우리가 기술의 본질을 이해하지 못하고 기술 적용에 그치면 우리는 기술 종교를 따르는 사람일 뿐입니다. 그래서 "리옌휘 자바스크립트 영상 튜토리얼"에서는 컴퓨터 언어가 마치 신부의 손에 있는 마술 지팡이와 같다고 하는데, 마술 지팡이가 바뀌어도 신부는 여전히 신부이고, 세상은 여전히 ​​산처럼 머리를 두드릴 것이다. 제사장들은 하나님과 소통하는 방법을 터득했지만 세상은 지팡이만 보았습니다.

관심별 프론트엔드 선택

처음 프로그래밍을 배울 때 C 언어를 배웠는데, 이 책 전체에는 검은색 콘솔에서 Hello World와 다양한 문자를 출력하는 방법, 키보드로 무언가를 입력하고 문자를 출력하는 방법만 가르쳐 준 것이 아닙니다. 다른 것은 없습니다. 한동안 공부한 후, 이것이 내가 생각했던 것과 다르다는 것을 느꼈기 때문에 한동안 마음이 무너졌습니다. 많은 지식을 배우고 나니 C 언어를 '배웠는지' 알 수 없었습니다. 저 화려한 운영체제와 다양한 응용 소프트웨어, 그리고 검은색 콘솔 사이에는 아직도 큰 격차가 있는 것 같습니다.

돌이켜보면 당시 내 생각은 물론 순진하고 우스꽝스러웠다. 당시에는 프로그래밍 언어와 실행 환경의 차이도 몰랐고, 운영체제, 사용자 API, 하드웨어 인터페이스 등에 대해서도 전혀 몰랐다. 네트워크 서비스 등 하지만 C 언어 튜토리얼에서는 이것을 한 마디로 말해주지 않고, C 언어 문법을 배운 후 다음에 또 무엇을 배워야 할지 모르기 때문에 이것을 탓할 수는 없습니다.

상대적으로 말하면, 어떤 환경도 설치할 필요가 없기 때문에 웹 개발이 더 매력적입니다. 텍스트 편집기에 일부 문자를 입력하고 저장한 후 브라우저를 열면 즉시 풍부한 시각 효과를 볼 수 있습니다. . 이것이 바로 프런트엔드의 장점입니다.

엄격한 입력 및 출력과 비교할 때 웹 개발은 인터페이스의 눈에 보이는 계층에서 훨씬 더 다채로워서 매력적입니다. 이것이 당신을 매력적이고 매혹시킨다면 당신은 프론트엔드를 배우기에 적합합니다.

프론트엔드를 직업으로 선택하기 전에 자신이 실제로 프론트엔드 개발에 관심이 있는지 명확하게 판단해야 합니다. 괜찮은 것 같고 돈도 많이 내는 것 같아요. 다채로운 인터페이스를 구축하고 다양한 상호 작용 논리를 다루는 데 관심이 없거나 지루하다면 가장 현명한 선택은 프론트엔드 엔지니어가 되겠다는 생각을 포기하는 것입니다. 은퇴가 정말 슬픈 일이 될 때까지 수십 년을 좋아하고 견디지 마십시오.

학교에서는 어떤 능력을 중요하게 생각하나요?

어떤 학생들은 프론트엔드 학생들이 실무 경험이 있어야 하는지 물었습니다. 여기서 저는 대답할 수 있습니다: 아니요.

학생들의 경우 면접관은 다음 사항에 더 관심을 갖습니다.

● 기초: 수학, 알고리즘, 데이터 구조, 컴퓨터 관련 기초의 숙달을 포함합니다.

● 학습능력 및 학습방법 : 프론트엔드를 어떻게 학습하는지, 얼마나 공부했는지, 어느 정도 학습했는지, 어떤 문제에 직면했는지, 이러한 문제를 해결하기 위해 어떻게 노력했는지.

● 관심도: 프런트엔드에 얼마나 관심이 있는지는 여러 세부 사항에 반영될 수 있습니다. 일반적인 부정적인 예가 있는데, 일반적으로 학생들에게 최근 어떤 새로운 프론트엔드 지식에 주목하고 있는지 물어볼 것입니다. 그가 주의를 기울이는 만큼, 나는 그가 실제로 이 새로운 지식에 별로 많은 시간을 투자하지 않는다는 것을 알게 될 것입니다. 관심 있는 문제에 시간을 할애하지 않는다면 프런트 엔드에서 어떻게 "관심"을 증명할 수 있습니까?

● 문제 해결 능력: 어려운 문제를 해결하는 방법, 이전에 접한 적이 없는 문제에 대해 생각하고 최종적으로 해결하는 방법. 여기에서 학생들이 프론트 엔드 사고를 가지고 있는지 판단할 수 있습니다. 이러한 질문에 대한 표준 답변은 없습니다. 우리는 특정 "공식적인 아이디어"를 추구하지 않으며 결과보다 과정을 중요하게 생각합니다.

이력서에 관해 몇몇 학생들은 요즘 많은 회사들이 학생들이 Node.js와 React를 배울 수 있기를 바라는 것 같다고 언급했지만 저는 어떻게 해야 할지 모르겠습니다.

내가 말하고 싶은 것은 우리는 학생들에게 이것을 알 것을 요구하지 않는다는 것입니다. 오히려 저는 개인적으로 학생들이 시간을 활용하여 탄탄한 기초를 다질 것을 권장합니다. 이력서에 자신이 정말 잘하는 것을 적으세요. 이력서에 Node.js나 React가 안 보인다고 해서 무시하지는 않습니다. 프론트엔드를 정말 좋아하고 주의 깊게 배우는 한, 프론트엔드 기본 사항으로 나에게 깊은 인상을 줄 수 있는 방법을 이해해야 합니다. 어떤 학생들은 이력서에 어휘를 쌓는 것을 좋아합니다. 사실 이것이 반드시 좋은 것은 아닙니다. 왜냐하면 당신이 잘 모르는 것을 쓰고 면접 중에 최종적으로 면접을 보게 된다면 분명히 부정적인 점수를 받을 것이기 때문입니다.

A학생은 "React를 알고 있지만 사용해본 적이 없다"고 했고, B학생은 "AngularJS를 사용해 소규모 개인 프로젝트를 작성해봤다"고 말했다. 지난 달에 그 아이디어를 바탕으로 블로그를 썼는데, 안드로이드 시스템 4.1 버전의 웹킷 브라우저에서 디스플레이 버그가 나타나서 결국 이렇게 해결했습니다." A, B, C 세 학생 중 누구를 선택할지 생각해 보세요.

인터뷰는 상호 소통의 과정입니다. 프론트엔드 분야에서 모든 사람의 능력과 잠재력을 확인하기를 바랍니다. 특히 지식이 값싼 인터넷 시대에 한 가지를 아는 것은 귀중한 능력이 아닙니다. 우리 학생들은 암기하듯 암기하는 것이 아니라 진심으로 공부해야 합니다. 우리 대학은 모든 사람에게 지식을 가르칠 뿐만 아니라 실제로 배우고 연구하는 방법도 가르칩니다. 그렇지 않습니까?

정말 프론트엔드에 관심이 있고 잠재력이 있다면 조금 주의해서 배우는 방법을 알아야 합니다.

마지막으로, 모두가 훌륭한 프론트엔드 엔지니어가 되기를 바랍니다.

관련 링크:
웹 프론트엔드 학습 경로: 웹 프론트엔드 개발 빠른 소개