0. 웹 공부 로드맵

웹 공부 가이드

처음 웹 개발 공부를 시작할 땐 어떤걸 공부 해야할지도, 내가 뭘 모르는지도 몰라 막막합니다.

저 또한 아직 초보 개발자지만 정말 처음 웹 개발을 접했을 때 도움이 될 만한 가이드라인을 정리해 보았습니다 :)

 

 

프론트엔드 vs 백엔드

웹(Web)은 크게 프론트엔드와 백엔드, 2파트로 나뉩니다.

 

생소한 단어가 나와서 당황할 수 있는데요.

이 두 단어는 말 그대로 사용자와 가까운 '앞'쪽을 프론트엔드(Front + End), 사용자와 먼 '뒤'쪽을 백엔드(Back + End)라고 표현한 것입니다.

 

이름을 보면 살짝 감이 올텐데, 프론트엔드는 사용자에게 보여지는것을 담당하고, 백엔드는 서버쪽에서 사용자의 행동을 처리하는 기능을 담당한다고 생각하면 편합니다.

식당으로 비유를 하자면 홀서빙은 프론트엔드, 주방은 백엔드인 것이죠.

 

처음 웹 개발을 접한다면 눈으로 보여지는 프론트엔드 부터 공부하는것을 추천하지만, 자신이 개발하고 싶은 분야를 생각해보고 거기에 맞는 공부를 해보는 것도 좋습니다.

 

 

웹 프로그래머 로드맵

기본적인 웹 프로그래머 테크트리(로드맵)의 순서는 다음과 같습니다.

1. HTML
2. CSS
3. Javascript (바닐라 자바스크립트)
4. Javascript 프레임워크 or 라이브러리 (React, Vue, Angular 등)
5. 백엔드

(백엔드 개발자는 1,2,3,4번을 건너뛰는 경우도 많습니다.)

왜 이런 순서일까요? 그 이유를 한번 살펴봅시다.

 

1~3) 가장 먼저 접하게 되는 HTML,CSS, Javascript는 웹의 가장 기본이 되는 언어입니다. 각각의 역할을 간단히 설명하자면, HTML은 기본적인 웹의 뼈대를 만들고, CSS는 거기에 디자인을 입히며, Javascript는 마지막으로 페이지에 애니메이션을 넣거나, 여러 기능을 동작시키는 역할 입니다.

마치 집을 지을 때 구조를 먼저 완성하고, 그 다음 인테리어, 그 후 수도와 전선을 넣는것과 유사하죠.

따라서 기본이 되는 이 세가지의 언어를 먼저 배우는 것입니다,

(참고 링크 : https://html-css-js.com/ )

 

4) 라이브러리, 프레임워크? 생소한 단어일 수 있습니다.

라이브러리와 프레임워크는 개발에 필요한 여러 기능들을 모아놓은 것들이라고 생각하면 됩니다.

(참고 영상 : https://www.youtube.com/watch?v=t9ccIykXTCM )

 

그럼 왜 그럼 왜 자바스크립트 라이브러리나 프레임워크를 공부할까요? 그 이유는 여러가지가 있으나 가장 큰 이유는 라이브러리로 쉽게 구현할 기능을 바닐라 자바스크립트(순수 자바스크립트)만으로 구현하려면 시간과 노력이 많이 들기 때문입니다.

집을 지을 때 벽돌부터 굽진 않듯이 개발에 필요한 엔간한 기능들은 이미 다 개발이 되어있습니다. 이미 있는 기능들을  굳이 처음부터 다시 개발하는것 보단 라이브러리를 사용하여 새로운 것을 개발하는 것이 더 가치있지 않을까요?

 

5) 마지막으로 백엔드를 공부하는 이유는 전체적인 웹개발의 흐름을 좀 더 명확하게 이해하기 위함입니다. 이 수준이 되면 각자 자신의 길을 개척하고 있을테니 생략하겠습니다.

 

아래의 동영상을 보면 도움이 될 거에요.

 

 

---

# 참고

 

기초 공부

가장 많이 헤멜 때가 기초 공부할 때입니다. 이시기에 도움이 될만한 사이트들을 모아봤습니다.

 

생활코딩 - 기본 감 잡기

어떤 언어나 개념에 대해서 완전 생초보일때 도움이 많이 되는 사이트입니다. 이곳에서 기본 개념을 잡고 시작하는것을 추천합니다.

https://opentutorials.org/course/3084

WEB1 - HTML & Internet - 생활코딩

 

Heropy - 본격적인 입문

HTML과 CSS의 여러 속성들을 좀 더 깊이 알고 싶을 때 공부하기 좋은 블로그입니다. '패스트 캠퍼스'에서 프론트엔드 개발 강의를 들으면 이 블로그를 운영하시는 분이 강의하시더라구요.

https://heropy.blog/2019/04/24/html-css-starter/

입문자에게 추천하는 HTML, CSS 첫걸음

 

---

다큐먼트 참고용

HTML, CSS, js의 모든 기능을 다 알 필요는 없습니다. 필요하면 그때그때 찾아보는 게 더 좋아요. 개발 도중에 막히는 부분이 있을때 document를 찾아보기 좋은 사이트들을 모아보았습니다.

 

w3school - 초보일땐 뭘 모르는지도 모르는 경우가 많습니다. 이때 여기서 제공하는 튜토리얼을 훑어보면 따라가기 좋더라구요.

https://www.w3schools.com/html/default.asp

HTML Tutorial

 

Mozilla - 파이어폭스에서 만든 공식웹페이지입니다. ⭐추천⭐

http://developer.mozilla.org

MDN Web Docs

 

---

 

공부방법

혼자 독학하다보면 뭔가 효율이 떨어지는 느낌을 받을 때가 있습니다. 좀 더 효과적인 공부방법은 없을까요?

이런 생각을 해봤다면 클론코딩을 해보는 것을 추천합니다.

클론코딩이란 아무 웹 페이지나 정해서 똑같이 따라 만들어 보는 것을 말해요. 막연히 개념만을 익히다보면 재미도 없고 하나를 기억하면 하나를 까먹습니다. 개념을 이해한 후 직접 Clone Codding을 통해 몸에 익힌다면, 장담컨데 금방 실력이 늘거에요.

 

아래의 동영상을 참고하면 도움이 될 듯합니다.

 

 

---

도움되는 사이트

독학만으로 부족함을 느낄 때, 도움이 될만한 사이트들을 모아보았습니다.

 

스택 오버플로우 - 모르는거 질문 (영어)

http://stackoverflow.com

Stack Overflow - Where Developers Learn, Share, & Build Careers

 

노마드코더 - 무료/유료 강의

https://nomadcoders.co/

노마드 코더 Nomad Coders

 

Inflearn - 무료/유료 강의 (한글)

http://www.inflearn.com

인프런 - 프로가 되는 온라인 클래스 | 온라인 강의 플랫폼

 

패스트캠퍼스 - 유료 강의

https://fastcampus.co.kr/

패스트캠퍼스 [직장인 실무교육]