12 세에서 22 세 사이의 프론트 엔드 개발에 대해 배운 것

Unsplash에 Teddy Kelley의 사진

때때로 친구들이 어떻게 프론트 엔드 개발에 들어 갔는지 묻습니다. 나는 그것에 약간 걸려 넘어 졌다고 말할 것이다. 사실은 몰랐어요 지난주에 저는 인터넷의 어두운 구석을 깊이 파고 들어 12 살 때부터 작업 한 모든 프론트 엔드 프로젝트를 파헤 쳤습니다.

그리고 소년, 그것은 다이빙이었다.

그래서 여기 있습니다. 모든 끔찍한 결정, 모든 난처한 웹 사이트, 모든 실수와 교훈을 통해 오늘날의 프론트 엔드 개발자가되었습니다. 여기에 그들은 여과되지 않은 완전한 영광이 있습니다.

(귀하가 프론트 엔드 개발을 시작한 경우, 나는 여정에서 시간을 절약 할 수있는 방법을 따라 배운 지식을 많이 포함 시켰습니다. 노련한 사람이라면… 당신에게 킥킥 웃음을 제공합니다. )

12 살

장면을 설정하겠습니다. Steve Jobs가 방금 iPhone을 소개했습니다. 모두가 MSN 메신저를 사용하고있었습니다. 아무도 Windows Vista를 좋아하지 않았습니다. 이것들은 기억 나지만 웹 사이트를 만들기로 결정한 때를 기억하지 못합니다.

마법 같은 웹을 통해 누구나 웹에서 볼 수있는 것을 볼 수 있다는 생각이 마음에 들었습니다. 확실히 그렇게 힘들 수 없습니다. 그럴 수 있습니까?

나의 첫 번째 웹 사이트-천 걸음의 여행… 큰 천막과 플래시 위젯으로 시작합니까?

내가 틀렸어. 그거 어려웠 어. 내가 뭘했는지 몰랐어요

한 시점에서 줄 바꿈을 만드는
태그를 사용하는 방법조차 알지 못했습니다. 코드에서 규칙적인 줄 바꿈이 웹 페이지에서 비슷한 줄 바꿈을하지 않는 이유가 혼란 스럽습니다. 단락을 만드는

태그를 사용해 보았지만 줄 바꿈 개념을 이해하지 못했습니다. 나는 심지어 새로운 줄을 시작하기 위해 테이블을 설정하려고 시도했습니다.

설상가상으로, 그 모든 노력에도 불구하고 여전히 끔찍했습니다 (2000 년대에도). MSN 메신저를 통해 친구들과 링크를 공유했을 때 친구들을 놀리는 것을 기억합니다. 그런 다음 다시 그들을 비난 할 수 있습니까? gif, 선택 윤곽, 바둑판 식으로 배열 된 배경, 플래시 위젯 등 웹 1.0의 모든 곡 예성을 가지고있었습니다. 나는 낙담했다. 그래서 저는 첫 수업을 배웠습니다.

첫 번째 프로젝트는 나쁠 것입니다. 첫 번째 HTML 페이지는 끔찍했습니다. 내 첫 CSS 파일은 너무 지저분했고 Marie Kondo는 그것을 만지지 않을 것입니다. 첫 번째 모바일 앱은 무시되었습니다. 첫 번째 React 앱이 1 분마다 다운되었습니다. 프론트 엔드를 배우는 것은 디자인과 컴퓨터 과학의 많은 아이디어가 교차하기 때문에 어렵고 처음에는 이해하지 못하는 것이 좋습니다.
나는 그것이 더 쉬워 질 것이라고 약속한다. 시간이 지남에 따라 전환 가능한 기술 세트를 구축했음을 알 수 있습니다 (예 : HTML은 React 구성 요소 및 Android 활동 레이아웃 작성에 도움이됩니다). 당신이 무언가에 나쁘다는 것을 인식하는 것이 프론트 엔드에 능숙 해지는 첫 번째 단계입니다.

나는 그것이 나쁘다는 것을 알았지 만 나도 더 잘할 수 있다는 것을 알았습니다. 그래서 할로윈의 경우 김프의 도움으로 신선한 호박 코트와 에반 게이션 타이포그래피로 사이트를 꾸 spice습니다. 이봐, 그것은 플레이어가 마법으로 환상의 세계를 구한 원래 모험 게임을 가지고 있었다

재 설계 중에도 깔끔한 트릭을 배웠습니다. HTML과 CSS의 세계에는 숨어 있지 않다는 것을 깨달았습니다. 모든 기술과 모든 비밀은 하나의 뷰 소스 만 남았습니다. 애플조차도 그들의 아름다운 제품 페이지의 비밀을 숨길 수 없었고, 나는 그들의 사이트에서 그들의 미스터리를 풀기 위해 몇 시간을 보낼 것입니다.

다른 사람이 할 수 있다면 그렇게 할 수 있습니다.

어딘가에, 나의 반 친구들은 나를 놀리지 않았다.

출처를 봅니다. 웹 사이트에서 멋진 것을 볼 때마다 자신이 그것을 재현 할 수 있는지 스스로에게 물어보십시오. CSS만으로 할 수 있습니까? 자바 스크립트? 그렇지 않은 경우 마우스 오른쪽 버튼으로 클릭하고 '검사'(Chrome) 또는 도구> 웹 개발자> 검사기 (Firefox)를 클릭하고 코드를 리버스 엔지니어링하십시오. 언젠가 시도해보고 싶은 멋진 효과를 북마크하거나 보관하십시오.

14 살

Snapchat과 Instagram 이전에 아이들은 블로그를 가지고있었습니다. 내 친구들 모두 하나가 있었어 그들 중 다수는 기성품 테마로 블로그를 개인화하는 것에 만족했습니다. 하지만 난 siree가 아니야. 아뇨

기존 테마를 직접 수정하여 시작했습니다. 그런 다음 친구의 생일 선물로 테마를 만들었습니다. 다른 학급의 아이들이 테마를 물어 보았습니다 나는 blogskin 사람이되었다.

나는 정말로 줄무늬에 들어갔다

그리고 HTML에 대한 나의 진짜 진출을 시작했습니다. 각 테마는 CSS가 포함 된 단일 페이지 HTML 문서입니다. <$ BlogItemTitle $>과 같은 의사 태그를 사용하여 각 요소의 위치와 위치를 제어 할 수있었습니다. 의사 태그는 나중에 서비스 제공자가 실제 컨텐츠로 대체합니다. 마지막으로, 나는 WYSIWYG 편집자의 경계에서 자유 로워졌습니다!

너무 오래 tripod.com!

CSS로 요소를 이동하는 데 시간을 소비하고 표시 및 위치 유형, 여백 및 패딩의 차이점을 배우는 것을 기억합니다. 하나의 특정 주제에 대해, 투명한 패턴을 가진 흰색 전경 뒤의 정적 배경으로 4 색 줄무늬를 사용했습니다. 모든 요소는 완벽하게 정렬되어야하므로 사용자가 스크롤했을 때 패턴이 드러났습니다.

가로 스크롤 사이트이므로 초초합니다!

테마 개발을 좋아했습니다. 웹 페이지는 단순한 2D가 아니라 : hover 및 : active와 같은 JavaScript 및 CSS 의사 선택기를 사용하는 사람들에게 응답합니다. 그들은 자라고 수축하고 퇴색했습니다.

살아있는 대화식 표면이었습니다.

이러한 상호 작용이 잘 이루어지면 사람들이 기뻐했으며 친구들이 새로운 주제에 대한 반응을 보는 것을 좋아했습니다. 사람들이 무엇을 즐기는 지 알아 내기 위해 새로운 아이디어와 기술을 시도해 보았습니다.

️ 상호 작용을 위해 개발하십시오. 좋은 프론트 엔드 요소는 검색 가능하며 (사용 방법에 대한 실마리 제공) 피드백을 제공합니다 (정보 방식으로 상호 작용에 반응). 예를 들어, 버튼으로 마우스를 가져 가면 배경색이 변경되고 클릭하면 불투명도가 높아질 수 있습니다. 다음은 주제에 관한 좋은 동영상과 책입니다.

16 살

2013 년 7 월에 첫 번째 도메인을 적절한 웹 호스트에 등록했습니다. 마치 실제로 무언가를하고있는 것처럼 통과의 의식처럼 느껴졌습니다. 포트폴리오를 설정 한 후 프로젝트와 실험의 본거지였습니다. 새로운 기술을 습득하면서 내 옆에서 성장하고 발전했습니다.

그들은 너무 빨리 자라

나는 도메인과 좋은 서버 호스트를 갖는 것이 얼마나 유용했는지 과장 할 수 없다. 웹에서 새로운 프런트 엔드 아이디어를 실험 할 수있었습니다. 나는 삶을 더 편하게 해주는 크론 작업을 운영했다. 클라이언트 또는 학교 업무를위한 새로운 공간이 필요할 때마다 새로운 하위 도메인을 만들 수 있습니다.

첫 번째 웹 사이트를 배포했을 때 큰 소년처럼 느껴졌습니다. 생계를 위해 이런 일을 할 수있을 것 같았습니다. 그것은 꽤 시원 할 것입니다, 나는 나 자신에게 생각했다.

포트폴리오를 설정하십시오. 이것은 웹 배포에 대해 배울 수있는 훌륭한 프로젝트입니다. 간단한 옵션에는 FTP가 포함되어있어 파일을 서버에 복사하여 서버에서 제공 할 수 있습니다. 이에 익숙해지면 Continuous Integration 및 Git을 설정하는 것이 좋습니다. 나는 매우 행복했던 Dreamhost (계열사 링크)에서 공유 호스팅을 끝내기 전에 여러 제공 업체를 사용해 보았습니다. 그러나 분명히 무료 대안이 있습니다.

18 살

싱가포르에서는 18 세의 소년이 2 년을 군대에서 보내야합니다. 운이 좋았을 때, 나는 모바일 개발자를 찾고있는 군대에 배치되었다. 그들은 내가 전에 이런 짓을 한 적이 있는지 물었다. 나는 웹 사이트를 개발하는 것과 다른 점이 있을까? 그래서 그렇습니다.

내가 틀렸다는 것이 밝혀졌다. 그러나 그때까지, 나는 경험이나 자격 부족으로 나를 막을 수 없었습니다.

이전에 JavaScript를 사용 해본 적이 있지만 앱 개발에 특히 중요한 객체 지향 프로그래밍 개념이 없었습니다. 저의 첫 번째 임무는 병사들이 병에 걸리도록하는 기존 API 용 Android 앱을 개발하는 것이 었습니다. 두 번째는 교육용 게임을 만드는 것이 었습니다.

Google과 StackOverflow에서 며칠 동안 '텍스트 입력란을 만드는 방법'또는 '버튼을 어떻게 만드는지'와 같은 수백 가지 가장 기본적인 질문을했습니다. NullPointerExceptions를 통해 키보드로 머리를 두드리는 데 몇 주가 걸렸습니다. 이빨의 피부로, 나는 중간 정도의 무언가를 휘젓 게했습니다.

앱이 매력적으로 보이지만 그 뒤에있는 코드는 그 밖의 것이 었습니다. 스파게티 코드의 라인과 라인이 있었고 명확한 아키텍처 패턴이 없었으며 로직은 체인 링크 펜스보다 더 밀접하게 결합되었습니다. 유지 관리가 불가능했기 때문에 내가 만든 앱 중 어느 것도 적극적으로 업데이트 할 수 없었습니다.

확장 가능하고 깨끗한 프론트 엔드 코드를 작성하는 방법에 대해 읽을 때까지 몇 년이 걸렸습니다. 그러나 그렇게했을 때 나는 그것이 왜 중요한지 이해했습니다.

tests 테스트를 작성하십시오. 테스트 작성은 아마도 더 나은 코드를 작성하기 위해 선택한 가장 효과적인 습관 일 것입니다. 코딩을 배우면서 여러 테스트 사례를 통과하려고 시도한 함수를 어떻게 작성했는지 기억하십니까? 그런 식이지만 지금은 테스트를 작성하는 사람이기도합니다! 각 기능에 대해 좋은 테스트 (단위 테스트)를 작성하면 코드베이스의 다른 부분을 변경할 때에도 코드가 작동하는지 확인할 수 있습니다.
책임을 분리하십시오. 여러 작업을 수행하는 기능이 있습니까? 그것들을 여러 기능으로 나눕니다. 다른 기능을 구현하는 몇 가지 메소드가있는 클래스가 있습니까? 그것들을 여러 클래스로 나눕니다. 책임 분리는 아마도 SOLID 원칙 중 가장 중요합니다. 코드를 읽고 확장 가능하게 만듭니다. Clean Code : Robert Martin의 Agile Software Craftsmanship 핸드북 (계열 링크)은 모든 프론트 엔드 개발자에게 반드시 읽어야합니다.

20 살

2016 년 6 월에 Google Play 스토어에 앱을 게시했습니다. 학생들이 물리학에 대해 배우도록 도와줍니다. 물리학은 제가 항상 사랑했던 주제였습니다. 첫날에는 3 회 다운로드가있었습니다. 두 번째 날에는 5가있었습니다. 세 번째 날에는 1,000이있었습니다. 처음에는 눈치 채지 못했지만 숫자는 계속 증가했습니다. 첫 달에 7,000 회 다운로드를 받았습니다. 9 월에는 월간 설치 량이 15,000으로 증가했습니다.

방법? 전혀 마케팅을 한 적이 없습니다.

누군가 누군가 Reddit (두 번!)에서 앱을 공유했고 사람들이 좋아하는 것 같았습니다. 여러 리뷰 사이트와 블로그에서 발견되었습니다. 사람들이 YouTube에서 동영상을 만들기 시작했습니다. 이 시점에서 나는 두근 두근을 받고 너무 흥분했다. 나는 어느 시점에서 울었다 고 생각합니다. 나의 모든 노력이 마침내 돈을 지불하는 것처럼 느껴졌습니다.

친구의 블로그 테마를 생일 선물로 만들었을 때 다시 돌아 왔습니다. 대신, 저는 전 세계 수천 명의 사람들에게 선물을주었습니다. 나는 사람들을 도울 수있는 인터페이스를 개발하는 것을 얼마나 좋아하는지 갑자기 깨달았다. 사람들은 사랑했습니다.

이 경험의 가장 중요한 부분은 내 앱을 사용하는 사람들을 알게되었습니다. Reddit에 대한 모든 의견에 답변하고 사람들이 가질 수있는 물리 관련 질문에 대한 이메일을 환영했습니다. 때로는 다음과 같은 멋진 작은 메시지가 나타납니다.

이것은 내가 전에 만든 앱에서 내가 가장 좋아하는 이메일입니다.
관심있는 프로젝트를 선택하십시오. 당신은 책을 읽었습니다. Codecademy 과정을 마쳤습니다. 안녕하세요 세계와 재귀 기능을 마스터했습니다. 이제 뭐? 당신이 상대 전문가 인 분야에 대해 열심히 생각하십시오. 당신은 미식가입니까? 조류 관찰자? 퀴즈 마스터? 사용할 것을 생각하십시오. 주변 사람들이나 멀리 떨어져있는 사람들을 어떻게 도울 수 있는지 생각해보십시오. 휴대 전화에서 앱을 스크롤합니다. 개선 할 수 있습니까?
무언가를 찾았다 고 생각되면 바로 뛰어 들어라. 준비가 될 때까지 기다리지 말고 허락을 기다리지 마라. 깊은 곳으로 던져라. 프론트 엔드 개발의 최고와 최저를 타고. 그것이 당신이 변화를 만들어내는 무언가를 만드는 방법입니다.

22 살

나는 새로운 아이디어와 기술을 계속 탐색하면서 열정을 느낀 프로젝트를 진행했습니다. 이것들 중 일부는 매우 도전적 이었지만, 내가 아는 것을 활용하는 법을 배웠습니다. 프론트 엔드 개발은 양도 가능한 기술로 가득합니다.

반응은 계시였습니다. 수년간 논리와 뷰를 분리 한 후 HTML, 데이터 및 논리를 우아하게 통합하는 프레임 워크를 찾는 것은 신선한 공기의 숨결이었습니다. 나는 수년 동안 버터 나이프로 나무를 자르고 있었고 누군가 누군가 나에게 전기 톱을 건네주었습니다.

안드로이드는 이제 함께 일하는 기쁨입니다. 코 틀린은 많은 어려움을 겪고 있으며 글을 쓰는 것은 기쁨입니다. 세계 최고의 인재 중 일부는 React Native, Flutter 등을 통해 모바일 프런트 엔드 개발을 개선하기 위해 노력하고 있습니다.

프론트 엔드 개발자가되기에 좋은시기입니다.

몇 년 전, 나는 태그 라인이있는 방문 페이지를 개발했습니다. 당신은 당신이 상상하는 것보다 더 재능이 있습니다. 12 살 때 처음 실패한 후 포기하려했기 때문에 누군가에게 알려 주었으면합니다.

연기 교사는 나중에 재능이 노력의 전부에 지나지 않는다고 말했습니다. 그렇게해서 사건으로 인해 여행을 일찍 시작하게되어 매우 운이 좋았습니다. 저를 안내해 주었던 사람들과 그들의 사업과 아이디어로 나를 괴롭히는 십대를 저에게 맡겨 주신 분들께 감사드립니다. 몇 년 동안 외로운 취미로 시작했지만 이제는 열정을 공유하는 친구가 있습니다.

10 년이 지났고 다음 일을 기다릴 수 없습니다.

커뮤니티를 찾으십시오. 아무도 섬이 아니며 프론트 엔드 개발자는 고립 된 부동 div 요소가 아닙니다. 지역 프론트 엔드 밋업에 참여하십시오. 회의에 가십시오. 사용중인 자식 저장소를 따르십시오. 출판물에 쓰십시오. 팟 캐스트 듣기. 트위터 DM에 참여하십시오. 당신에게 말할 사람들을 찾으십시오 : 당신은 당신이 상상하는 것보다 더 재능이 있습니다.

이 이야기가 마음에 드십니까? 연락하고 싶습니다!
Twitter, LinkedIn에서 인사하거나 내 웹 사이트를 확인하십시오.