웹 개발에 대한 실용적인 접근 방식 (A practical approach to web development)

이 포스트는 A practical approach to web development. 를 한글로 번역한 글입니다.

웹 개발에 대한 실용적인 접근 방식

이 짧은 포인트 기사를 읽어보세요. 어떻게 웹개발에 접근할지 알려줍니다.

그러니까 당신은 이 분야에 대한 지식이 없는 초보자군요.

문제 없습니다. 이 글은 어떻게 내가 웹개발을 시작할 수 있지? 라는 의문을 다 날려주니까요. 웹개발을 시작할때 도움될 수 있는 실전 단계와 쉽게 이해할 수 있는 언어로 작성되었습니다.

왜 썼냐고요?

저도 웹 개발자인게 주된 이유이고, 이 개발자 커뮤니티에 발을 들여놓고 싶지만 멘토가 필요한, 모든 의욕넘치는 웹 개발자를 도울 용의가 있기 때문입니다. 저도 신입일때 많은 실수를 저질렀고, 제가 했던 실수를 다른 사람들이 하지 않길 바랍니다.

"시작하기 위해서 위대할 필요는 없지만, 위대해 지려면 시작 해야된다."

웹개발의 놀라운 여행을 시작합시다.

로드맵

1. 코더의 툴킷

이 단계에서 아마 당신은 코딩이나 개발에 완전 초보일 것이고, 처음에 무엇을 해야하는지, 어떻게 시작해야되는지 알아 나가야 합니다.

시작하기 전에, 웹개발자로써의 삶을 훨씬 쉽게 만들어주는, 몇가지 꼭 가지고 있어야하는 툴이 있습니다.

1. 노트북 - 기본이죠

2. 좋은 브라우저 - 크롬, 크롬 같은거, 또는 아마도.. 크롬

3. 텍스트 에디터 -  Atom, VS Code, Sublime Text, Notepad++ 혹은 아무 IDE

4. FTP/SSH 툴 (Filezilla, Putty, gFTP) - 개발 단계 후반에 필요합니다.

5. 클라우드 저장소 (선택) - Dropbox, 구글 드라이버 등

2. 조명! 카메라! 코드!

여기서는, 당신이 필요한 모든것을 포함한 툴들을 이미 가지고 있습니다. 이제 코딩을 시작해야 됩니다.

1. HTML5 (이 모든 코드에 익숙해집니다.)

  * 태그 (Tags)

  * 속성 (Attributes)

  * 링크 (Links)

  * 이미지 (Images)

  * 표 (Tables)

  * 레이아웃 (Layouts)

2. CSS3 (CSS의 기본, 선택자, 선언, 속성 및 값을 배우세요)

지금 당장 당신은 멋지고 시각적으로 매력적인 웹 사이트를 만들 수 있지만, 당신의 사이트는 아직 동적이지 않고 사용자 친화적이지 않습니다.

3. 아무 디자인툴에 대한 기본 지식 (어떤걸 선택하든, 굉장히 도움이 될거임)

  * 포토샵

  * 일러스트레이터

  * GIMP (리눅스 유저용) etc.

4. 다음과 같은 것들을 알게 해줄 Javascript (JS는 웹페이지에 생명을 불어 넣어줄거에요)

  * 기초 JS (지금 바로 Node.JS 나 프레임워크로 가지 마세요)

  * 데이타 타입 : 문자(String), 숫자(Number), 배열(Arrays), 객체(Objects) 등.

  * 함수(Functions), 조건문(Conditionals), 반복문(Loops), 연산자(Operators) 등.

  * 이벤트 핸들링(Event handling)

  * JSON

  * jQuery (JS에 정말 익숙한 경우에만)

3. 셋! 둘! 하나! 개발!

축하해요. 당신은 이제 웹디자이너입니다. 이제 HTML, CSS, Javascript를 다룰 수 있고, 간단한 웹사이트를 만들 수 있으며, 하나의 디자인 소프트웨어의 기본을 이해하고 있고, 정적인 웹사이이트를 만드는 방법과 프론트엔드 기술을 가지고 있기 때문에, 스스로 웹 디자이너라고 부를 수 있습니다.

더 멀리 가기전에 몇가지 더 알아야 됩니다.

1. GIT(혹은 다른 버전 관리 시스템)

2. SSH

3. 기본 터미널 사용(혹은 윈도우 명령 프롬프트)

4. 공유 호스팅 계정 (Hostgator, InMoton, 000webhost 등)

5. Cpanel 기본 정보 (이메일, FTP 설정)

6. FTP를 통해 프로젝트 업로드

7. 도메인 등록 및 호스팅 계정 연결

웹디자이너! 이런 기회가 제공됩니다.

1. 스타트업을 위한 단순하고 매력적인 웹사이트

2. 앱을 위한 UI디자인

3. 인턴쉽

4. PSD를 HTML/CSS로 마크업

5. 취업 하거나 프리랜서로 일하기

4. 선택의 시간 (중요한 결정)

자 이제 어디로 가야할지 스스로에게 물어보세요. 프론트엔드 개발을 계속 하면서 더 깊게 갈 것인지, 백엔드 개발자로 갈 건지 말입니다.

어디로 갈지 정하세요....

1. 프론트엔드 HTML/CSS 프레임워크 (Bootstrap, Foundation, Bulma, Materialize..)

2. 서버사이드 프로그래밍 (PHP, Ruby, Django, NodeJS..)

3. Javscript 프론트엔드 프레임워크 (React, Angular..)

4. 데이터베이스 (MySQL, PostgreSQL, Hadoop, Mongo..)

4a) 프론트엔드 기술을 선택했다면

다음 프레임워크 중 하나(혹은 이상)을 배우면, 당신의 삶을 훨씬 쉽게 만들어줄거에요.

1. Bootstrap

2. MaterializeCSS

3. Zurb foundation

4. Skeleton

5. MUI

6. Pure

4b) 코딩 기술이 있습니까? 그럼 백엔드에 도전하세요!

벡엔드 개발자가 될거라 선택한것은 이 시점에서 현명한 선택입니다. 이제 몇가지 서버 사이드 측 스크립트 언어를 배워야 합니다. 아무거나 하나 선택하세요. (혹은 몇개 더, 한개 이상 배울 필요는 없지만!)

1. PHP - 최고의 언어는 아니지만 견고하고, 몇 년 동안 아무데도 가지 않아요.

2. Node js - 새롭고, 흥미롭고, 강력하고, 놀라운 개발자 커뮤니티. (개인적으로 전 이걸 선호해요)

3. Ruby on Rails - 위대한 프레임워크, 하지만 인기없고 평범해졌어요.

4. Python - 배우기 쉽지만 요즘 웹프로그래밍 하는데 인기가 없습니다.

어떻게 백엔드를 시작해야할지 더 궁금하신가요? 이 글을 읽어보세요.

4c) 백엔드에 발을 들여놓았으니, 데이터베이스를 배우세요.

관계형 데이터베이스

• MySQL
• PostgreSQL

NoSQL 데이터베이스

• MongoDB
• CouchDB

하나에 집중해서 선택하세요.

• PHP / MySQL
• Node.JS / MongoDB

4d) 개발기술을 높이세요.

요즘 사용 빈도가 높은 프레임워크를 학습하세요.

1. Angular

2. React [Flux/Redux]

3. Apollo Client (모든 서버 또는 UI 프레임워크를 위한 완벽한 기능의 Production Ready 캐싱 GraphQL 클라이언트)

4. Vue.JS

5. Express/Sails

6. PHP로 작업하신다면, 배우세요.

  * MVC

  * Routing

  * Database Mining

  * Helpers

  * Data Binding 등

5. 배워야 할 사이드 기술 (프론트든 백엔드든 상관없음)

전문적인 환경에서 일하기 위해 다음에 대해 꼭 알아야 합니다.

1. GIT & GITHUB (또는 다른 버전 관리 툴)

2. SSH & 커멘드 명령어

3. CSS 사전 컴파일러 - SASS/LESS

4. APIs/REST Services

5. HTTPS/SSL

어플리케이션 배포

이제 이전 보다 훨씬 많은 지식을 가지고 있고, 자신만의 웹 기반 어플리케이션을 만들기 시작했을겁니다. 이제 이 기술들을 이용해 온라인에 배포해봅시다.

1. 전용 서버 / VPS

2. 앱 호스팅 - Heroku, Digital Ocean, AWS

3. 배포 툴

4. 리눅스 명령어

5. 유지 보수 및 업데이트

6. 웹개발자! 이런 기회가 제공됩니다.

축하합니다! 마침내 당신 스스로 웹개발자라고 부를 수 있으며 신나는 기회들이 제공됩니다.

1. 단순한 것부터 고급스러운 웹 어플리케이션 만들기

2. 백엔드 API 생성

3. 동료 개발자들에게 강의

4. 서버 작업

5. DB 작업

6. 네트워크 보안 작업

7. 좋은 직장 구하기

8. 프리랜서로 일하기

9. 자신의 사업 시작하기

7. 한 걸음 앞으로 나아 가십시오.

Wordpress, Joomla, Drupal 등과 같은 컨텐츠 관리 시스템(CMS)에 대해 배웁니다. 그들은 일하기에 환상적이고, 빠른 배포를 제공하며, 수천 개의 플러그인 / 애드온 / 템플릿이 있으며, 훌륭한 유지 보수를 제공합니다.

모바일 앱 개발

이제 당신은 이 레벨까지 왔습니다. 왜 웹으로만 제한하나요? 모바일 앱은 미래입니다. 모든 앱은 두가지 유형이 있습니다. 네이티브와 하이브리드.

네이티브 앱은 (이름에서 알 수 있듯이) 운영 체제에서 기본적으로 제공되는 앱입니다. 예를 들어, 내가 안드로이드 앱 개발자이기 떄문에, JAVA와 XML, KOTLIN등을 사용해 앱을 만듭니다.

하이브리드 앱은 (이름에서 알 수 있듯이) 네이티브가 아니며, 다른 플랫폼에서 빌드된 것입니다. 이건 웹 개발자로써 위대한 일입니다. 당신은 모바일 앱까지 만들 수 있어요.

1. Progressive Web App은 미래입니다.

2. JAVA / Kotlin / Swift / Objective C 같은 것들을 배울 필요가 없어요.

3. 그냥 JS!!! Javascript는 자신의 하이브리드 앱을 만드는데 충분합니다. React Native, Ionic, Cordova와 같은 프레임워크를 사용하십시오.

이제는 뭘?

• 계속 배우고 탐구하세요.
• 경력에 집중하세요.
• 좋은 프로필을 만드세요.
• 돌아가서 다른 스택도 공부하세요.
• 다른 분야도 공부하세요. (머신러닝, 컴퓨터 비전, 딥러닝, 인공지능AI, 경쟁 코딩 등)
• 최신 기술로 자신을 무장하세요.
• 조사 하세요.
• 고급 언어를 공부하세요 (C#, JAVA 등)
• 커뮤니티를 늘리고, 좋은 개발자들을 팔로우하고, 영감을 얻고 계속 학습하세요.

우리는 친구가 될 수 있습니다.

이 글이 도움되었길 바랍니다. 우리는 Github 또는 Linkdin으로 친구가 될 수 있으며, 의견, 제안 또는 질문을 보내주시면 더 기쁠것 같아요.

또한, 나는 친구 사귀는 걸 좋아하고, 우리는 친구가 될 수 있으니, 메세지를 보내주세요 :)

끝까지 읽어주셔서 대단히 감사합니다.

이제 무엇을 해야하고 어떻게 구현할지 알 수 있습니다. 최고가 되시길!

의문점이 있으시거나 도움이 필요하면 연락주세요.

Email: madhavbahl10@gmail.com

Web: http://madhavbahl.ml/

Github: https://github.com/MadhavBahlMD

LinkedIn: https://www.linkedin.com/in/madhavbahl/

로드맵 - 프론트엔드 개발자

로드맵 - 백엔드 개발자

참고

https://github.com/kamranahmedse/developer-roadmap

원글

https://codeburst.io/a-practical-approach-to-web-development-1ee37a4ad829