2020년에 웹 개발자가 되는 방법 - 완성 가이드

How To Become A Web Developer in 2020 - A Complete Guide - GeeksforGeeks

2020년 2월 12일

 

수 많은 시도 후 웹 페이지에 로그인 서식을 처음 만들고 템플릿들을 시험했을 때 기분이 어땠는가? (모든 것을 맨 처음부터 만들었다곤 하지 말길...) 레이아웃을 여러 번 수정 후 당신의 첫번째 웹 애플리케이션에 적용했을 때의 기분은? (그렇다... 당신은 다른 웹사이트들이나 템플릿을 요구 사항에 따라 참고했다...) 애플리케이션 하나를 만들기 위해 수 천 명의 사용자들의 민감한 정보를 백엔드에서 성공적으로 처리했을 때 어떤 기분이었는가? (무서웠다...)

 

대부분의 웹 개발자들은 위의 단계를 전부 지난다. 처음에 어떤 이들에게는 답답할 수도 있지만 그들의 웹사이트가 작동하고 전 세계인들이 그것을 사용하고 있는 것을 볼 때 전반적인 그들의 느낌은 정말 신나고 놀랍다는 것이다. 웹 개발자의 책임은 요구사항 수집부터 웹사이트 디자인, 백엔드 부분 처리 및 사용자들을 위해 성공적으로 작동시키기에 이른다.

 

매 해 새로운 기술과 도구들이 산업에 나와서 개발자들의 생산성을 향상시키고 웹사이트를 사용자들에게 더 좋게 만든다. 그들이 웹 개발 게임에서 정상을 유지하는 것은 하나의 도전이 되었다. 오늘 우리는 2020년에 웹 개발자가 되기 위한 완전한 지도를 논의할 것이다. 이것은 모든 종류의 개발자들(프론트엔드, 백엔드, 풀스택)을 위한 실용적인 가이드라인이 될 것이다.

 

당신의 목표나 경로를 먼저 정하라

우리는 수 많은 기술들, 경향들, 그리고 도구들을 논의할텐데, 당신이 부담스러워지지 않길 바란다. 그러니 당신은 배워야할 맞는 도구들과 기술을 선택하는 데 도움이 될 수 있도록 웹 개발자가 되기 위해 뭘 하고 싶은지를 먼저 결정할 필요가 있다. 웹 개발자가 되어야할 다양한 이유가 매우 많은데 아래에 몇 가지 경우들이 있다...

 

• 한 회사에서 웹 개발자로 일하고 싶다는 것은 가장 인기 있고 흔한 이유이다.
• 프리랜스 개발자나 개인 사업이나 에이전시를 시작하고 싶다.
• 다른 회사들을 위한 컨설턴트가 되고 싶다.
• 돈을 벌기 위해 자신의 앱을 만들 수 있다.
• 취미로 코딩한다.

위의 흥미 분야나 목표에서 당신은 그에 적용될 수 있는 올바른 도구들과 기술을 고를 수 있다. 당신의 목표가 그냥 프론트엔드 개발자가 되는 것이면 프론트엔드 개발 도구들과 기술을 선택할 수 있다. 백엔드와 풀스택 개발도 마찬가지다.

 

웹 개발을 위한 기본 도구들과 소프트웨어

• 컴퓨터와 운영체제: 컴퓨터와 그 위에 돌고 있는 운영체제 없이는 코드를 쓸 수 없다. 웹 개발을 배우기 위해 값비싼 컴퓨터가 (있으면 좋고) 필요하진 않다. 중급의 노트북이나 데스크탑 아무 것이나 쓸 수 있다. 운영체제는 맥, 윈도우(최신 버전) 또는 리눅스 중 편한 것을 쓰면 된다.
• 텍스트 에디터 / IDE: VSCode 가 대부분의 경우와 언어들에게 좋다는 것에는 의심의 여지가 없다. 성능도 좋고, 확장성도 대단하며 내장된 터미널에 엄청난 기능들도 가지고 있다. 2019년 스택오버플로우의 설문조사에서도 개발자들은 VSCode를 첫번째로 선호했다. Sublime Text 또는 Atom과 같은 다른 좋은 선택지들도 있다. IDE를 말하자면 비쥬얼 스튜디오(Visual Studio) (ASP.net 또는 C#), 이클립스(Eclipse) 와 넷빈스(Netbeans) (Java) 가 좋은 선택이다.
• 웹 브라우저: 대부분 개발자들의 첫번째 선택은 크롬이나 파이어팍스다. 크롬은 빠르고 V8엔진을 사용한다. (자바스크립트 엔진) 파이어팍스도 많이 발전해서 어떤 것들은 크롬 브라우저에 없다. 두 브라우저들 다 웹 개발에서의 문제들을 해결할 환상적인 개발 도구들이다. 
• 터미널: 몇 가지 시스템 명령어들을 사용하여 CLI로 작업을 많이 하게 될 것이다. 웹 개발 프로젝트에 기본 혹은 제 3의 터미널을 사용할 수 있다. Bash, Zsh, Powershell, Git Bash, iTerm, Hyper 등이 사용 가능한 선택지들이다.
• 디자인(선택): 모두가 이것을 배워야 할 필요는 없다. 회사들은 이미지, 로고, 스케치들을 만드는 특정 팀이 있지만 당신이 프리랜서로 일하고 있다면 Adobe XD, Photoshop, Sketch, 또는 Figma를 배워야 할 수도 있다.

 

HTML 과 CSS 로 시작하라

HTML과 CSS는 웹 개발의 기초 건설 블록들이다. 당신의 웹 앱이 얼마나 앞서 가든지 무슨 프레임워크나 백엔드 기술을 사용하는지에 상관 없이 당신은 프론트엔드 애플리케이션을 HTML과 CSS를 사용해서 만들어야 할 것이다. 그러니 이것이 웹 개발에서 가장 먼저 배워야하는 것들이다.

 

• HTML5 (의미론적 요소들, 속성들, doctype 등)
• CSS 기초 색상, 폰트, 위치잡기, 박스모델 등
• CSS 그리드 와 플렉스박스 물체들을 정렬하고 열들을 생성하기 위해
• CSS 개별설정 특성들

 

반응성 레이아웃

당신의 애플리케이션은 스마트폰, 타블렛, 데스크탑, 아이패드 또는 다른 어떤 화면 크기의 장치에도 볼 수 있고 사용 가능해야 한다. 그러므로 반응성 디자인이나 레이아웃 만들기에 대해 배우는 것은 중요하다. 몇 가지 중요한 주제들을 보자.

 

• 뷰포트 설정 어떻게 하는지 배우기
• 다른 화면 크기들을 위한 미디어 쿼리들
• 유동적인 너비들
• 렘 유닛들
• 모바일 우선

 

재사용 가능 개별설정  CSS 컴포넌트

당신의 프로젝트를 부트스트랩과 같은 거대한 CSS 프레임워크에 의존하는 대신, 당신만의 모듈식, 재사용 가능한 CSS 컴포넌트들을 만들어 사용하는 것이 좋다. 당신만의 개별 설정 디자인을 만든다면 완전한 라이브러리를 불러오기 할 필요는 없다. 그 특정한 UI에만 필요한 컴포넌트를 만들어라.

CSS 코드를 더 효율적으로 쓰는 데 도움이 되는 새로운 경향의 Saas 가 최근에 나왔다. 이미 CSS를 알고 있다면 Saas를 배우는 데에 많은 노력을 기울일 필요가 없다. Saas는 표준 CSS에 더 많은 기능을 더해주고 더 효율적으로 해주는 CSS 전처리기이다. 각 재사용 가능한 컴포넌트를 위해 별개의 Saas 파일을 만들을 수도 있다. Saas는 정말 시간 절약을 많이 해주니 2020년에는 꼭 배워야 한다.

 

CSS 프레임워크

CSS 프레임워크 배우기는 작년 보다 덜 인기있지만 그래도 디자인을 별로 잘하지 못하는 개발자들에게는 여전히 매우 상관 있거나 유용하다. 이용 가능한 인기 있는 CSS 프레임워크가 많은데, 아래에 몇 가지가 있다.

 

• 부트스트랩은 가장 인기 있는 CSS 프레임워크이다. 부트스트랩을 배우면 다른 프레임워크들을 배우는 데에도 도움이 된다.
• 테일윈드 CSS는 인기를 얻어 가고 있는 프레임워크인데 다른 것들과는 좀 다르다. 이것은 유틸리티 클래스들의 세트라서 당신만의 버튼들이나 여러가지를 다른 것들과 정말 달라 보이게 만들 수 있다. 이것들은 또한 개별설정 가능성이 높다.
• 매터리얼라이즈
• 버마

 

바닐라 자바스크립트

HTML과 CSS를 배운 후 당신이 배워야 할 것은 바닐라 자바스크립트이다. 자바스크립트의 핵심을 잘 구사하는 것이 개발자들에 매우 중요하다. PHP, 파이썬, 또는 ASP.net 과 같은 서버사이드 언어와 자바스크립트를 많이 사용하게 될 것이고 리액트, 앵귤러, 노드제이에스, 뷰 또는 다른 어떤 자바스크립트 프레임워크나 라이브러리로 작업을 하고 싶다면 이 언어를 배우는 것이 훨씬 더 필요하다. 아래는 자바스크립트에서 당신이 다뤄야할 중요한 몇가지 주제들이다.

 

• 자바스크립트 핵심 (변수, 데이터 종류, 함수, 조건문 등)
• DOM (Document Object Model)
• JSON (Javascript Object Notation)
• Fetch API (Request/Response/Ajax)
• Modern JS (ES6) 리액트, 뷰, 앵귤라 또는 다른 프레임워크들로 넘어가고 싶다면 이 개념들이 정말 중요하다.

 

몇가지 중요한 도구들

웹 개발에서 사용하게 될 몇 가지 도구들이 있다. 이러한 도구들은 디버깅, 생산성 향상, 코드 관리, 다른 개발자들과의 협업과 같은 것에서 당신을 도와줄 것이다. 이러한 도구들 몇 가지를 논해 보자.

 

• 깃 (버전 컨트롤) 과 깃헙은 2020년에 당신이 반드시 배워야할 가장 인기 있는 도구이다. 깃은 다른 개발자들과 협업하고 당신의 코드를 관리하는 것을 많이 도와준다. 깃랩, 비트버킷 그리고 몇 가지 다른 선택지들도 있다.
• 브라우저 개발 도구를 어떻게 사용하는지 배워라. 크롬이든 파이어팍스든, 엘레먼트 탭, 자바스크립트를 위한 콘솔, 리퀘스트와 리스폰르르 위한 네트워크 탭, 애플리케이션 탭 그리고 다른 목적을 위한 여러 탭들을 어떻게 사용하는지 알아야 한다.
• 대부분의 IDE나 텍스트 에디터들은 생산성을 향상시키고 웹 앱 만들기에 매우 도움이 되는 익스텐션들과 플러그인들을 추가할 수 있다. 예를 들어 비쥬얼 스튜디오의 VSCode Extensions는 리액트와 함께 작업할 수 있는 live-server 또는 live-saas 컴파일러와 같은 익스텐션을 다운로드 할 수 있게 도와준다. 
• Emmet은 HTML과 CSS 정말 빠르게 쓸 수 있게 해주는 또다른 대단한 도구이다. 이것은 개발자들의 생산성을 높이는 데에 도움을 준다.
• 엔피엠(NPM)과 얀(Yarn)과 같은 자바스크립트 패키지 매니져 사용법을 배워라. 이러한 패키지 매니져들은 리액트와 같은 자바스크립트 프레임워크나 라이브러리로 작업할 것이라면 엄청 많이 쓰게될 것이지만 다른 언어들(파이썬이나 PHP)에는 다른 패키지 매니져를 사용하게 될 것이다.
• 프론트엔드에 NPM 패키지를 설치하고 싶으면 웹팩(Webpack)이나 파쓸(Parcel)을 사용해야 한다. 당신 만의 모듈을 만들고 싶거나 어떤 자바스크립트 파일을 다른 자바스크립트 파일로 가져오고 싶다면 그냥 브라우저에서 기본으로 할 수 없고 웹팩이나 파쓸이 묶어서 주도록 해야 한다.

 

기본 배포

이쯤에서 일단 당신이 프론트엔드 개발을 위해 어떤 도구들이나 기술을 배워야 하는지 알게 됐다면, 당신의 프론트엔드 웹사이트를 인터넷에 어떻게 배포하는지 알아야 할 필요가 있다. 만약 당신이 어떤 작은 애플리케이션이나 랜딩 페이지들, 작은 사업을 위한 개인 사이트들을 만들고 있다면 AWS나 데브옵스 같은 것들이 멋지고 유행이라는 이유로 배울 필요는 없다. 일이 간단하게 되는 게 아니라 더 복잡하게 될 것이다. 배포를 위해 2020년에 배워야 할 몇 가지 도구들과 단계들이 있다.

 

• 도메인 등록 (네임칩(Namecheap), 구글 도메인 등)
• 관리되는 호스팅 (인모션(InMotion), 호스트게이터(Hostgator), 블루호스트(Bluehost) 등)
• 고정(static) 호스팅 (네틀리파이(Netlify), 깃헙 페이지들)
• SSL 인증
• FTP, SFTP(파일 전송 프로토콜)는 작은 애플리케이션들에 좋다
• 향상된 앱을 위한 SSH(씨큐어 쉘(Secure Sheel)
• CLI와 Git

지금까지 논의한 도구들, 기술들, 경향들, 단계들은 뭐가 되었든지 전부 프론트엔드 개발의 한 부분이다. 프레임워크를 아직 몰라도 개인사업자나 소규모 사업자들을 위한 웹사이트나 모바일에 친근한 레이아웃을 만들 수 있다. 지금까지 논의한 도구들이나 기술들을 사용하여 작은 애플리케이션이나 프로젝트를 배포할 수 있다. 직무에 지원하고 싶다면 리액트, 뷰, 또는 앵귤러와 같은 프론트엔드 프레임워크를 배우는 것이 대단히 좋다.

 

프론트엔드 프레임워크와 상태 관리

프레임워크들은 더 향상된 프론트엔드 개발을 하게 해준다. 프레임워크들은 재사용 가능한 컴포넌트들, 더 정리된 UI나 페이지 상호작용과 같은 수 많은 이득을 가져다준다. 협업에 더 좋고 깔끔한 코드를 쓰는 것도 도와준다. 또, 상태 관리에 대해서 배워라. 이것은 각 프레임워크마다 하는 방법이 다르다. 2020년을 위해 아래에 몇 가지 인기 있는 프레임워크와 상태 매니져가 있다.

 

• 리액트: 리액트 라이브러리는 웹 개발을 위해 배워야 할 가장 인기 있는 것이고 다른 프레임워크들이나 라이브러리에 비해 상당히 쉽다. 리액트 개발자를 위한 직책도 매우 많이 있다. 상태 관리를 위해 리덕스 및 후크와 컨텍스트 API를 사용할 수 있다.
• 뷰: 뷰도 인기를 얻고 있고 개발자들은 뷰를 선호하기도 한다. 뷰는 리액트와 앵귤러와 비교하면 가장 배우기 쉽다. VueX가 보여주기 위한 상태 매니져이다.
• 앵귤러: 이 프레임워크는 일반적으로 큰 조직에서 사용된다. 꽤나 가파른 배움 곡선을 가지고 있다. 앵귤러와 함께 타입스크립트도 배우는 게 좋다. 선택적인 고정 타이핑을 사용할 수 있고 ES2015 기능 지원도 받을 수 있게 해준다. NGRX와 Services가 이 프레임워크를 위해 배울 수 있는 좋은 상태 매니져들이다.

선택사항

• 만약 이 세 프레임워크들 중 하나에 대한 지식을 가지고 있다면 자바스크립트 컴파일러인 Svelte에 도전할 수도 있다. 이것은 바닐라 자바스크립트 코드를 생산할 수 있게 하고 유저 인터페이스를 쉽게 만들 수 있게 도와준다.
• 서버 사이드 구현에 대해 배워라. NextJS(리액트) 그리고 NuxtJS(뷰) 는 리액트와 뷰를 서버에서 돌릴 수 있게 해주는 프레임워크이다. 둘 다 더 나은 SEO, 파일 시스템 라우팅, 자동 코드 쪼개기, 고정 내보내기, 자바스크립트 안 CSS 및 수 많은 기능들을 가지고 있다.
• 고정 사이트 생성기 (Static Site Generators) 개츠비(Gatsby)(리액트) 와 그리드썸(Gridsome)(뷰)

 

지금까지 프론트엔드 개발 도구들과 기술의 모든 주요 사항을 논의했다. 이제 백엔드 개발자나 풀스택 개발자가 되기 위한 언어나 기술에 대해 이야기 하자.

 

서버사이드 언어 (택 1)

적어도 하나의 서버사이드 언어에 대해 지식이 있어야 한다. 2020년에 언어를 선택하려면 아래 몇 가지 선택지가 있다.

 

• 노드제이에스 (언어는 아니고 런타임 환경임)
• 파이썬 (완전 초보에게 좋음)
• 자바 (큰 조직에 좋음)
• PHP (프리랜서에 좋음)
• 루비 (2020년엔 인기가 덜 함)
• C#
• Golang

노트: 어떤 서버사이드 언어를 배우길 선호하든지 가에 그 언어를 사용하는 데이터 구조와 알고리듬에 대해 확실히 배우도록 한다. 데이터 구조와 알고리듬은 데이터가 사용자를 위해 구현되는 것과 웹 애플리케이션에서 당신의 코드를 최적화 하는 것을 도와줄 것이다. 배열과 스트링(가장 중요함) 작업에 집중하는 것을 특히 추천한다. 이 둘과 작업할 일이 매우 많을 것이다.

 

서버사이드 프레임워크 (택 1)

당신이 선택한 서버사이드 언어를 배웠다면 그 언어를 위한 프레임워크 하나를 고른다. 아래에 주어진 선택지 중 하나를 택하면 된다.

 

• 노드제이에스: Express, Koa, Adonis, Feather.js, Nest.js
• 파이썬: Django, Flask
• 자바: Spring MVC, Grails
• PHP: Laravel, Symfony, Codeignitor, Slim
• 루비: Ruby on Rails, Sinatra
• C#: ASP.net MVC
• Go: Revel

 

데이터베이스 (택 1)

대부분의 웹 앱들은 데이터를 저장할 공간을 필요로 한다. 어떤 경우에는 특정 기술이나 특정 언어가 특정 데이터베이스와 잘 어울린다. 예를 들어 Mern 스택에서 M은 MongoDB를 가리키고 LAMP 스택에서 M은 MySQL을 가리키지만 당신의 애플리케이션을 위해서 어떤 데이터베이스를 택할 것인지는 철저히 당신에게 달려있다. 2020년에 인기 있는 데이터베이스들 몇 가지를 논해볼 것이다.

 

• 관계형 데이터베이스(Relational Database): RDBMS는 여전히 가장 인기 있는 데이터베이스들이다. PostgreSQL, MySQL, MS SQL은 여전히 가장 선호되는 것들이다
• NoSQL: MongoDB, RethinkDB, CouchDB
• 클라우드 데이터베이스: Firebase, Azure Cloud DB, AWS
• 저중량 및 캐시: Redis, SQLlite, NeDB

데이터베이스를 배우게 되면 RDBMS를 위한 SQL(구조화된 쿼리 언어), ORM(객체 관계형 맵퍼), ODM(객체 데이터 맵퍼)를 배우게 될 것이다.

 

GraphQL: (선택) 요새 꽤 인기 있는 그래프큐엘에 대해서도 배울 수 있다. 이것은 API를 위한 쿼리 언어이다. JSON과 유사한 단순한 문법을 가지고 있고 실행하기가 상당히 쉽다.

 

내용 관리(컨텐트 매니지먼트)

만약 당신이 프리랜서라면 내용 관리 시스템(Content Management System)은 꼭 배워야 한다. CMS는 당신의 웹사이트나 애플리케이션에 내용을 더하는 데에 사용된다. 고객이 자신의 내용을 업데이트 할 수 있게 해준다.

 

• 전통적인 CMS: 워드프레스(PHP), 드루팔(PHP), 키스톤(자바스크립트), 엔듀로(자바스크립트)
• 헤드리스 CMS: (2020년에 인기를 얻고 있는) Contentful, Prismic.io, Strapi.

 

배포 및 데브옵스

풀스택 앱이나 백엔드 앱을 호스팅 하는 것은 그냥 프론트엔드 애플리케이션 보다 약간 더 복잡하다. 특히 데이터베이스가 있다면. 배포를 위해 CLI를 어떻게 사용하는지 확실히 알도록 하라. 당신의 애플리케이션 배포를 위한 아래의 것들에 대해 배워라. 

대부분의 회사들에는 데브옵스 일을 하는 팀이 따로 있다. 그러니 데브옵스에 대한 지식을 얻을지는 완전히 선택사항이다. 당신 혼자 프로젝트를 하고 있다면 이것들을 배울 수 있다.

 

• SSH (씨큐어 쉘)
• 웹 서버 환경: NGINX, Apache
• 앱 호스팅: Linode, Heroku, AWS, Azure, Now
• 가상환경: Docker, Vagrant
• 시험: 유닛, 기능, 통합 등
• 적재 균형잡기, 모니터링하기, 보안

위의 모든 기술과 도구들은 당신이 프론트엔드, 백엔드 또는 풀스택 개발자가 되는 데에 충분할 것이다. 당신의 최종 목표에 따라 맞는 도구들과 기술의 세트를 선택하라.