웹 개발 공부를 선택한 이유는 여러가지가 있겠지만, 혼자서 서비스를 만들 수 있는 것에 가장 친화적인 것이 무엇일까 라고 생각했을 때 개인적으로 웹서비스를 만드는 것이 가장 편하게 다가와서 '아 나도 웹개발자가 되어야겠다' 라고 진로를 정했던 것 같습니다. 그리고 웹사이트를 항상 이용하는 입장에서 좀 더 가깝게 느껴져서도 있었던 것 같습니다.
웹 개발자가 되는 것을 마음먹고 독학 해봐야지! 라는 생각으로 이것저것 찾아보다가 이런 웹 개발자 로드맵을 보았습니다.
딱 봐도 방대한 양이고 어떤 상황에 저런 것이 필요한지 모르는 상태에서 공부를 하려고 하니 시작도 하기전에 힘이 빠지는 기분이 들더라구요. 그 과정에서 일단 공부는 해야하니 이것저것 시작은 했었는데 생각해보면 길을 잃어 해매는 시간이 길었던 것 같습니다. 저처럼 헤매는 분이 적었으면 하는 마음으로 코딩 공부 순서를 한번 이야기해보겠습니다.
웹개발 시작의 기초 - HTML CSS부터 배워보자
아니 시작도 안했는데 두개를 배우라고요? 사실 HTML, CSS는 프로그래밍 언어가 아닌 Markup Language로 화면을 구성하거나, 페이지를 연결해주는 등의 기능만 하는 어찌보면 단순한 언어입니다. 따라서 배우는 난이도도 상당히 쉬운 편이고, 내가 적는 코드가 그대로 화면에 표시되기 때문에 아직 코딩이 익숙하지 않은 사람들에게 좀 더 직관적으로 다가올 수 있다는 장점이 있습니다.
HTML은 웹사이트의 뼈대를 구성한다면, CSS는 HTML로 구성한 뼈대에 위치를 올바르게 잡아주고 색을 칠한다고 생각하시면 되겠습니다. 우리가 웹사이트를 사용하면서 가장 흔하게 볼 수 있는 로그인 화면으로 예를 들어볼까요?
이런식으로 내가 생각했을 때 필요한 기능, 모양들을 HTML을 통해 배치시켜줍니다. 내가 치는 텍스트와 모양들이 화면에 즉각적으로 나타나기 때문에 학습하는데 있어서도 다른 언어들보다 더 직관적입니다. CSS는 내가 만든 뼈대를 재배치하거나 색을 입힌다고 했죠?
이런 식으로 못생겨보였던 로그인 입력창과 버튼의 모양을 바꾸거나 색을 입힐 수 있고, 사용자 친화적인 위치로 레이아웃을 css를 통해 재배치 해 줄 수 있습니다. 웹 개발을 공부하고 있다면 html, css를 공부하며 뼈대를 잡아보고, 레이아웃을 재배치 시켜보는 식으로 먼저 공부하면 좋을 것 같습니다.
레이아웃을 잡는게 익숙해졌다면 Javascript를 공부해보자
본격적으로 프로그래밍 언어를 배울 차례입니다. 사실 우리가 html과 css만을 사용해서 만든 웹사이트는 아무런 기능이 없는 깡통과도 같습니다. 우리가 사용하는 웹사이트를 자세히 들여다보면 장바구니에 담고자 버튼을 누르면 해당 아이템이 장바구니에 담기기도 하고, 로그인 버튼을 누르면 로그인이 되거나, 비밀번호가 틀렸다고 알려주는 등의 여러가지 기능들이 있습니다. 이런 기능을 구현하기 위해서는 Javascript의 도움이 필요합니다.
내 프로필 사진을 클릭하면 로그아웃, 프로필정보와 같은 메뉴들이 주르륵 내려오듯이 클릭을 하면 어떤 '이벤트'가 발생해 혹은 사용자의 입력이 '123'이 아니라면 올바른 상황이 아닌 것을 알려줘 와 같이 좀 더 섬세하게 웹사이트를 다루기 위한 언어라고 생각하면 됩니다.
그럼 어떤식으로 공부하면 좋을까요? 프로그래밍 언어인 만큼 학습해야할 양이 상당히 많습니다.
사진에서 보이는 섹터 외에도 중고급 안내서, reference만 해도 그 양이 어마어마 합니다. 물론 해당 부분을 전부 읽어가며 javascript를 깊게 이해하는 것도 하나의 방법일 수도 있겠지만, 이론과 해당 이론에 대한 코드들을 따라치면서 공부하는 것 보다 프로그래밍언어의 기본이 되는 기초 문법과, 반복문, 제어문 등을 가볍게 익히신 후 프로젝트를 만들면서 내가 필요한 부분을 그때그때 학습해나가는 것을 추천합니다.
그럼 서버는?
앞서 설명드린 html, css, javascript만 있으면 웹 프론트의 전반적인 부분을 전부 만들 수 있습니다. 프론트만 있어도 충분히 서비스할 수 있는 것도 많지만 제대로 된 프로젝트를 하나 만들어보겠다! 하면 서버와 DB를 병행하는 것은 거의 필수일 것입니다.
서버는 무슨말인지 알 것 같다가도 왜 필요한지는 잘 몰랐던 것 같습니다. 막연하게만 다가왔는데 서버가 하는 일을 구체적으로 하나만 이해해보면 전반적으로 어떤 역할을 하는지 와닿게 될거라 생각합니다.
우리가 로그인을 할때 아이디와 비밀번호를 치고 올바르게 입력했다면 로그인에 성공할 것이고 그렇지 않다면 둘 중 하나를 잘못 입력했다는 메세지를 보게됩니다.
프론트에서는 우리가 입력을 할 수 있게 창구를 열어주고, 입력받은 값을 서버로 전송해주는 역할을 합니다. 데이터를 전달받은 서버에서는 사용자가 입력한 아이디와 패스워드가 올바른지 비교합니다.
만약 올바르다면 다시 프론트에게 인증된 사용자이니 로그인이 됐다고 알려줘 혹은 아이디 패스워드를 다시 입력해달라고 요청하게 됩니다. 서버로부터 전달받은 메세지를 사용자에게 표시해주는 것은 프론트의 담당이고 우리가 생각했을때 기능의 논리적인 부분은 서버가 담당하게 됩니다.
웹 서버를 만들 수 있는 언어 파이썬의 장고(Django), Flask 자바의 스프링부트 등 여러가지 프레임워크가 있지만 웹의 프론트 파트를 공부하면서 익숙해진 Javascipt로도 충분히 가능합니다.
본인이 어느정도 Javascript를 다루는데도 익숙해졌고, 프로젝트를 만드는데 서버가 필요해졌다면 Nodejs와 Nodejs의 프레임워크인 Express를 배워보세요.
Nodejs와 express는 새로운 언어가 아닌, javascipt를 브라우저(크롬, 웨일, 엣지 등)가 아닌 내 컴퓨터에서 javascipt를 실행할 수 있게 도와주며, express는 서버 개발에 필요한 많은 자원을 제공해주며 좀 더 편리하게 서버를 만들 수 있게 도와주는 일종의 도구라고 생각하시면 됩니다.
'개발관련 > 개발정보' 카테고리의 다른 글
| CSS Position 검색하는 것은 여기서 끝내기 | absolute? relative ? (0) | 2023.10.03 |
|---|---|
| 프로그래밍 독학하나요? 코딩 독학 이렇게 해보세요 (feat. 웹 개발자 가이드) (0) | 2023.09.18 |
| 웹 개발 공부 독학하시나요? 코딩 공부 순서 정리해보았어요 (2) | 2023.08.28 |
| HTML이란 뭘까? 어려운 용어빼고 쉽게 이해하기 (0) | 2023.08.07 |
