웹 개발 공부에 입문해보고 싶으시거나, 코딩 공부를 시작한지 얼마 안되신 분들에게 해당되는 이야기를 해보려고 합니다. 처음 공부를 하신다면 웹사이트 혹은 어플리케이션을 만들어서 서비스를 해보고는 싶은데, 무엇을 어떻게 공부해야 할 지 막막하실거라 생각합니다. 저 또한 그랬었거든요.
저는 학과 수업시간을 통해 처음 웹 개발에 대해 접하였는데, 그때 당시 한 학기 (3개월) 안에 웹의 전반적인 부분을 가르쳐 주시려고 하니 배워야할 양도 많고 '중간, 기말고사를 준비한다' 이런 입장에서 공부를 해야하니까 개발 자체에 흥미를 가지기가 정말 어려웠습니다
가령 예를들면 html의 모든 요소 (태그, 속성) 들을 주르륵 이론공부 하듯이 읽으면서 공부하거나, javascript의 string 자료형을 배우고 string과 관련된 모든 메소드를 외우는 식으로 공부했었습니다.
일단 웹 서비스를 혼자서 만들고 싶어서 들었던 과목인데
대체 이걸 배워서 어디에 적용해야하는지
이렇게 많은 양을 배워야하는데 내가 저걸 잘 할 수 있을까? 라는 생각도 자연스럽게 들더군요 당연히 이후에 웹 개발자가 되기로 마음먹고, 공부를 하려고 해도 독학을 하는데 있어 공부를 어떻게 해야하는지 몰랐기에 헤맸던 시간도 길었습니다.
일단 공부를 하기 전에
먼저 공부를 하기전에 무엇을 왜 공부하는지 알고가는게 중요하다고 생각합니다.
그러기 위해서는 전반적으로 웹 서비스가 어떻게 동작하는지에 대해 전반적인 그림을 알고,
그 그림에서 우리가 필요한 언어와 기술은 무엇이 있는지 맞춰가면 되겠죠?
요즘 성격테스트, mbti 테스트 등 유형테스트 등을 인스타 스토리에서 어렵지않게 볼 수 있습니다.
우리가 한번 이런 유형테스트를 서비스 한다는 입장에서 한번 예를 들어보겠습니다.
우리는 웹사이트를 이용할 대 도메인을 입력하거나 링크를 클릭하는 식으로 웹사이트에 방문합니다.
해당 도메인을 입력 혹은 클릭해서 들어가면 우리가 미리 만들어 놓은 유형 테스트 페이지를 사람들에게 전달해주고, 브라우저가 그것을 해석하여 화면에 보여줍니다.
서버가 필요없는 간단한 웹사이트라면 여기서 끝입니다. 전달만 해주고 아무것도 할 게 없는거죠.
단, a, b, c를 골랐을 때는 이런 유형이고, b,c,f를 골랐을 때는 저런 유형이야 와 같이 어떤 걸 골랐을 때 해당 유형이 나오도록 미리 지정을 해두어야 겠죠?
만약 사용자의 이름, 전화번호 같은 정보를 얻기 위해 로그인 등의 기능이 필요하다면
사람들의 정보를 저장하거나,
이 사람이 회원가입을 한지 안했는지 확인하기 위해 서버가 필요할 겁니다.
아이디, 비밀번호를 입력받고 이 사람이 회원가입을 했어? 혹은 올바른 정보를 입력했어? 와 같은
다양한 논리들을 처리하여 판단한 후, 저장할 정보가 있으면 Database에 저장을 하고
올바른지 아닌지에 대한 정보를 클라이언트에게 보내주게 됩니다.
그럼 어떤 것을 공부해야 할까
1. html css
웹 서비스가 어떻게 동작하는지 대략적으로 알아보았습니다. 그럼 이제 무엇을 공부해야 하는지 알아야겠죠?
도메인을 입력해서 들어가면 '우리가 미리 만들어놓은 페이지'를 클라이언트에게 보내준다고 했습니다.
사실 이 페이지들은 HTML, CSS, Javascript로 이뤄어져 있습니다
그럼 한번 로그인 페이지를 만들어본다고 가정해보겠습니다.
주변에서 건물이 올라가는 모습을 보면 아래서부터 예쁘게 짓는게 아니라, 건물의 골조를 먼저 잡죠?
웹사이트도 마찬가지로 모든 기능을 하나하나 차례대로 완성해나가는 것이 아니라,
뼈대를 먼저 잡고, 그 뼈대를 재 배치하거나 색을 입히고 기능을 다는 순서로 개발하게 됩니다.
HTML은 웹페이지에서 뼈대의 역할을 하며, 대충 내가 만드는 페이지에 어떤 글이 들어가면 좋겠고, 이런 이미지가 들어가야겠다 식에 뼈대를 잡는 역할을 합니다. 아래 사진처럼 말이죠.
CSS는 우리가 잡은 뼈대에서 요소들을 어떻게 배치시키고, 색을 입힐지 결정해줍니다. 위의 사진에서의 못생긴 요소들에 css를 적용해보면 아래사진과 같이 바꿀 수 있습니다.
html과 css는 프로그래밍 언어가 아니기때문에 공부하기에는 무리가 없다고 생각합니다만,
처음 공부할 때는 이거조차 힘들고, 양이 많다고 느껴집니다. 특히 css가 그렇죠 (개인적인 생각)
많은 요소들을 전부 외워야지만 개발을 잘하는 것이 아닙니다.
처음 생소하고 많은 양을 전부 보려고 하지마시고, 이런게 있구나 하고 넘어간 다음에 프로젝트를 만들면서 내가 필요한 부분을 그때그때 학습한다는 느낌으로 공부하시면 좋을 것 같습니다.
2. Javascript
html, css만으로도 멋진 웹사이트를 만들 수 있지만, 웹사이트의 기능적인 부분을 다루기 위해서는 javascript가 필요합니다.
말로만 듣는 것보다 직접 예시를 보는게 이해가 빠르겠죠?
한번 인스타그램의 좋아요로 예를 들어보겠습니다.
인스타그램에서 하트모양을 누르면 하트모양이 빨간색으로 변하게 됩니다.
하트모양을 클릭했을 때 서버에게 하트모양을 클릭했어 라는 걸 알려주게 되고,
서버는 알겠어 너가 좋아요 했다는 걸 내가 처리하고 기억했어라고 응답을 보내게 됩니다.
그럼 하트모양을 클릭했을 때 서버에게 요청을 보내거나, 올바른 응답이 왔으면 하트모양을 빨갛게 물들이는 것들을 javascript가 수행하게 됩니다. 즉 javascript는 웹사이트의 두뇌 역할을 하는거죠.
아주 고난이도의 알고리즘 문제를 해결할 수 있을 때 비로소 웹사이트를 만들 수 있는 것이 아니라
1,2 단계 정도의 문제를 코드로 구현할 수 있는 단계 즉 어느정도 javascript가 익숙해지고 논리적으로 코드를 작성할 수 있는 수준이면 누구든지 만들 수 있다고 생각합니다.
이 단계에서 어느정도 html, css, javascript가 익숙해지면 tailwind, bootstrap와 같은 css 프레임워크나
react, vuejs와 같은 javascript 프레임워크 등 프론트 개발을 하는데 있어 우리를 도와주는 프레임워크를 공부하시는 것을 추천드립니다.
back-end (서버)는 어떻게 공부하면 좋을까?
위의 흐름대로 따라오셨다면 프론트파트에 필요한 부분은 얼추 공부가 끝나셨을겁니다.
서버 개발도 마찬가지로 다양한 언어와 프레임워크를 사용하여 만들 수 있는데,
대표적으로 javascript는 express.js
Java는 spring
python은 flask, django가 있습니다.
프론트 부분을 공부하면서 javascript에 익숙해져 있을 텐데,
처음은 따로 다른 언어를 학습하지 않아도 프레임워크를 이해하는데 많은 노력이 들여도 되지않는
expressjs로 서버 개발을 시작하는 것을 추천합니다.
만약 본인이 javascript보다 java, python과 같은 다른 언어에 익숙하시거나,
다른 언어도 공부해보고 싶으시면 해당 언어가 지원하는 프레임워크를 학습하시는 것을 추천드립니다
끝으로
여기까지 웹 개발을 독학하면서 적용해볼 수 있는 개발순서에 대해 알아보았습니다.
제가 혼자 공부하고 여러 시행착오를 겪으면서 이렇게 했으면 좋아겠다라고 느낀 것을 한번 이야기 해보았는데요.
공부의 방법과 순서에는 정답이 없으므로 본인에게 더 맞는 공부방법이 있으면 그 방법도 정답이 될 수 있습니다 :)
많은 양 끙끙거리며 공부하고 있으실텐데, 도움이 되셨으면 좋겠습니다
'개발관련 > 개발정보' 카테고리의 다른 글
| CSS Position 검색하는 것은 여기서 끝내기 | absolute? relative ? (0) | 2023.10.03 |
|---|---|
| 프로그래밍 독학하나요? 코딩 독학 이렇게 해보세요 (feat. 웹 개발자 가이드) (0) | 2023.09.18 |
| 코딩 독학해서 웹사이트를 만들고 싶다면 / 웹 개발 공부 순서 정리 (0) | 2023.08.22 |
| HTML이란 뭘까? 어려운 용어빼고 쉽게 이해하기 (0) | 2023.08.07 |
