2020년(및 그 이후)에 프론트엔드 개발자가 된다는 것은 무엇을 의미합니까?

프론트엔드 개발자 의 프론트 엔드 부분이 실제로 무엇을 의미하는지 생각해 본 적이 있습니까? 나는 한때 Eric Meyer(웹사이트가 있었던 만큼 거의 오랫동안 웹사이트를 구축해 온)에게 초창기에 그 용어가 무엇을 의미하는지 알았는지 물었고 그는 그렇다고 대답했습니다. 따라서 새로운 직함이나 직위는 아니지만 수년에 걸쳐 범위가 이동한 것은 확실합니다.

​​"프론트 엔드"는 본질적으로 웹 브라우저를 의미합니다. 저는 스스로를 프론트엔드 개발자라고 생각하며, 저를 웹 브라우저 개발자라고 부른다면 솔직히 싫지 않을 것입니다. 그러나 그것은 아마 (그리고 당신이 웹 브라우저를 만드는 것과 같은 소리를 들을 수 없을 것입니다). 프론트 엔드 개발자는 웹 브라우저와 매우 긴밀하게 협력하고 웹 브라우저에서 실행되는 코드, 특히 HTML, CSS, JavaScript 및 웹 브라우저가 말하는 소수의 기타 언어(예: SVG와 같은 미디어 형식)를 작성합니다. 또는 더 일반적으로 설명되는 코드는 궁극적으로 브라우저가 이해할 수 있는 언어로 처리됩니다. 이것이 프론트엔드 개발자로서의 영역입니다!

브라우저는 단독으로 존재하지 않으며 다양한 장치에서 실행됩니다. 우리는 반응형 디자인의 시대를 통해 그것을 배웠습니다. 그리고 가장 중요한 것은 사용자 가 해당 장치에서 해당 브라우저를 사용한다는 것입니다. 프론트엔드 개발자만큼 사용자와 가까운 사람은 없습니다. 따라서 프런트 엔드 개발자는 다양한 장치에서 실행되는 브라우저를 사용하는 사람들을 위한 코드를 작성합니다.

​​이러한 사용자, 장치 및 브라우저의 거대한 환경을 처리하는 것 자체가 작업입니다! 나는 당신이 당신의 직책에 대해 철학적으로 생각하는 것이 매일은 아니라고 생각합니다. 그리고 그것은 괜찮습니다. 우리는 여기서 당신의 할아버지인 Chris와 함께 약간의 반성을 하고 있습니다.

​​코딩 부트캠프를 막 졸업하고 웹사이트 구축 경험이 다소 좁고 새롭다면 프론트엔드 개발을 "리액트 관련 요소"로, 백엔드 개발을 "노드 물건" 또는 "파이썬 물건"이 요즘 가장 인기 있는 맛입니다. 당신도 틀리지 않았습니다. React는 일반적으로 프론트 엔드 프레임워크로 사용됩니다(말 그대로 브라우저에서 실행되는 JavaScript). Node와 Python은 웹 브라우저에서 실제로 실행되지 않는 언어의 예입니다. 그들은 웹 서버(어, 컴퓨터)에서 실행되도록 만들어졌습니다.

​​잠시 동안 이 분야에 머무르면 이러한 라이브러리, 언어, 빌드 프로세스, 그리고 심지어 웹 사이트를 가장 잘 빌드하는 방법에 대한 전체 철학까지 천천히 오고 가는 것을 보게 될 것입니다.

​​과거의 실수에서 배워야 한다고 외치며 주먹을 휘두르는 노인을 가끔 목격할 수 있습니다. 당신은 또한 일부 특히 떠들썩한 젊은이들이 그들의 주먹을 높이 휘두르며 과거를 발음하고 관련 없는 맥락과 더 이상 유용한 화두가 아니라고 말하는 것을 목격할 수 있습니다.

​​아마 둘 다 맞을 겁니다. 아무도 불쾌하지 않은 한, 그것은 모두 흐름의 일부입니다.

​​상황이 바뀝니다. 오늘날의 많은 웹사이트가 과거의 웹사이트보다 더 복잡 하다는 사실을 알게 되었습니다. 특히 큰 것들. 소셜 네트워크 및 미디어 플레이어. 여행 예약 사이트. 전자 상거래 상점. 엔지니어링 도구. 이러한 사이트는 크게 시작하여 점점 더 커졌습니다. 그들은 그들을 지원하는 대규모 팀과 함께 스스로 경제를 운영합니다. 이 복잡성은 웹 기술의 변화의 원인이자 새로운 학교와 기존 학교 사이의 마찰의 원인입니다(단순히 표현할 수 있다면).

​​기술 분야에서 일하는 많은 사람들은 본질적으로 큰 웹사이트에서 일합니다. 그래서 우리는 이 사람들로부터 가장 자주 듣습니다. 이 사람들은 도구를 만듭니다. 그들은 블로그 포스트를 쓰고, 팟캐스트를 하고, 강연을 합니다. 그들은 필요에 맞게 기술 자체를 변경하는 데 도움을 줍니다.

​​그동안 "프론트엔드"는 여전히 브라우저일 뿐입니다. 브라우저 언어, HTML, CSS 및 JavaScript는 여전히 핵심 기술입니다. 이러한 언어는 진화하고 브라우저 자체도 진화하지만 더 느립니다. 그들은 실리콘 밸리가 가장 좋아하는 슬로건 과 정반대입니다. 그들은 천천히 움직이며 매우 드물게 아무것도 부수지 않습니다.

​​프론트 엔드 개발자가 된다는 것은 여전히 ​​해당 장치에서 해당 브라우저를 사용하는 사용자에 대한 관심입니다. 그들의 경험이 우리의 일입니다. 도구는 우리가 그것을 하는 데 도움이 되기를 바랍니다.

​​그래서 프론트엔드 개발자로서 무엇을 하고 계십니까?

• ​​어떤 화면에서도 잘 보이도록 디자인을 진행하고 있습니다.
• ​​콘텐츠에 의미 체계를 적용하고 있습니다.
• ​​부분과 스타일을 효율적으로 재사용할 수 있도록 추상적으로 UI를 구축하고 있습니다.
• ​​브라우저에서 렌더링되는 항목의 접근성을 고려하고 있습니다.
• ​​사이트의 성능에 대해 걱정하고 있습니다. 즉, 브라우저에서 얼마나 많은 리소스를 사용하고 있는지를 다루고 있습니다.

​​그것들은 근본적으로 브라우저 수준의 관심사이며 이것이 프론트엔드이기 때문에 항상 사실이었고 앞으로도 그럴 것입니다.

​​변화하는 것은 브라우저가 점점 더 많은 작업을 수행할 수 있다는 것입니다. 브라우저 API의 기능이 향상되고 라이브러리가 더 좋아지고 컴퓨터가 일반적으로 좋아지는 것과 같은 모든 종류의 이유가 있습니다. 서버에서 브라우저로 작업을 오프로딩하는 것은 수년에 걸쳐 점점 더 의미가 있습니다(단일 페이지 앱!). 진자가 뒤로 흔들리는 모습(사전 렌더링된 사이트!)과 중간 지점(JAMstack!)을 찾는 것이 흥미롭긴 하지만.

​​요즘 프론트엔드 개발에는 다음이 포함될 수도 있습니다.

• ​​가장 작은 구성 요소에서 URL 수준까지 전체 페이지에 이르기까지 전체 사이트 설계
• ​​API에서 자신의 데이터를 가져오고 표시를 위해 필요에 따라 데이터를 조작합니다.
• ​​사이트의 상태를 스스로 처리
• ​​사용자 상호 작용 및 입력을 통해 데이터를 변경/변경하고 해당 데이터를 API를 통해 상태로 유지하고 다시 서버로 유지

​​이것은 이제 브라우저에서 할 수 있는 모든 일이며 이 오래된 개발자의 눈을 크게 뜨게 합니다. 당신이 이미 해야 하는 모든 일 위에 책임이 있다고 생각할 때 그것은 엄청난 책임의 건초더미입니다.

​​많은 일자리가 수년에 걸쳐 증가하는 경향이 있지만 프론트 엔드 개발자로서 우리가 가지고 있는 지침은 그다지 변하지 않았습니다. 우리의 핵심 책임은 여전히 ​​장치에서 웹 브라우저를 사용하는 사용자를 돌보는 것입니다. 그래서 우리는 약간의 데이터를 가져와야 합니다. 멋지네요. 우리는 사용자의 요구에 부응하기 위해 빠르고 의미론적이며 접근 가능한 페이지를 구축하기 위해 이 일을 하고 있습니다. 그래서 우리는 디자인 시스템을 구축해야 합니다. 멋지네요. 일관성 없는 혼란을 일으키지 않고 진화할 수 있는 사용자를 위한 이해하기 쉬운 인터페이스를 구축하기 위해 하고 있습니다. 그래서 우리는 익숙하지 않은 새로운 기술을 배워야 합니다. 글쎄요, 주의 깊게 주시하고 궁극적으로 사용자를 위해 우리 사이트를 개선하기 위해 새로운 것이 있는지 확인하는 것이 우리의 임무입니다.

행운을 빕니다!

다음 단계: Chris Coyier가 자신의 웹사이트를 강화하기 위해 Local과 Flywheel을 선택한 이유

Chris가 Local 및 Flywheel을 사용하여 사이트를 한 단계 더 발전시킨 방법을 알아보세요. 그가 가장 좋아하는 기능이 무엇인지, Flywheel을 사용하여 사이트를 마이그레이션하는 방법(무료!) 등을 확인하십시오! 자세히 알아보려면 여기를 클릭하세요.