클라이언트/ 서버/ 엔지니어 " 게임 개발자"를 향한 매일의 공부일지

웹 개발 기본 다지기 1 - 웹 개발 시작하기 본문

웹 · 앱 개발/HTML & CSS

웹 개발 기본 다지기 1 - 웹 개발 시작하기

huenuri 2024. 7. 30. 09:33

HTML의 기본에 대해서 동영상 학습을 했으니 이제는 책으로 한번 내용을 깊이있게 다루어보기로 했다. 책에 밑줄도 긋고 연습문제도 풀어보면서 공부하면 더 재미있게 학습할 수 있을 것 같다.
먼저 1장 웹 개발 시작하기 단원의 내용을 정리해본다. 조금 전에 밑줄을 그으며 한번씩 읽어보았다.

그러면서 앞으로 백엔드 개발자가 되기 위해 어떤 공부를 해야하는지도 알게 된 것 같다.
웹 개발은 생각보다 광범위하고 공부해야 할 것도 아주 많은 분야이다. 이 단원에서는 웹 개발이 무엇인지 정의하고 그 안에 어떤 분야가 있는지 학습해볼 것이다.


 

웹 개발 알아보기

 

 

 

 

웹 개발이란?

웹 개발이라면 가장 먼저 '웹 사이트를 만드는 것'을 생각한다. 사이트는 크게 2가지로 나눌 수 있다.

  1. 정적 사이트 : 방문자에게 정보를 보여주는 영역
  2. 동적 사이트 : 사용자의 반응을 보여주는 서비스를 제공하는 영역

 

즉, 웹 개발은 웹 사이트에서 사용자에게 제공할 기능과 서비스까지 모두 담을 수 있어야 한다.

 

 

서버와 클라이언트

웹 개발을 하려면 먼저 웹 사이트의 동작 과정을 이해해야 한다.

  1. 서버 : 사용자가 웹 브라아저에서 정보를 입력하거나 링크를 클릭하면 인터넷이 연결된 컴퓨터로 정보를 가져와 웹 브라우저에 보여준다. 이때 인터넷에 연결된 컴퓨터를 서버라고 한다.
  2. 클라이언트 : 사용자가 웹 사이트에 접근하려고 사용하는 PC나 태블릿 PC, 스마트폰 등을 말한다. 좁은 의미로는 웹 브라우저를 의미

 

서버와 클라이언트 관계는 인사교 수업 내용 정리에서 자세히 이야기했으므로 생략한다.

 


 

 

 

프런트엔드 개발과 백엔드 개발

웹 사이트가 동작하려면 서버와 클라이언트가 필요한 것처럼 웹 개발도 크게 2가지 영역으로 나눌 수 있다.

  1. 프런트엔드(Front-end) : 사용자 앞에 보이는 영역으로 웹 브라우저 화면에 보이는 것을 다룬다. 웹 사이트를 디자인하거나 사용자 동작에 반응하는 기능을 만듦
    • HTML과 CSS, 자바스크립트를 사용
  2. 백엔드(Back-end) : 사용자 뒤에서 보이지 않는 영역을 다룬다. 웹 사이트의 회원 정보나 게시판 글 등은 서버에 데이터베이스 형태로 저장된다. 이러한 데이터베이스를 설계하거나 데이터를 처리하는 것
    • 자바, PHP, 파이썬 등의 다양한 프로그래밍 언어를 사용

 

 

 


 

웹 개발, 어디서부터 시작할까?

웹 개발을 위해 공부해야 할 기술

웹 개발에 필요한 프로그래밍 언어와 기술은 서로 어떻게 연결되는지, 앞으로 공부해야 할 언어와 기술은 무엇인지 간단히 살펴보자.

가장 먼저 기본 영역은 프런트엔드 개발을 하든 백엔드 개발을 하든 반드시 알아 두어야 하는 기술이다. 기본은 익혔다면 자신이 관심을 갖는 분야에 따라 프런트엔드나 백엔드 영역의 언어와 기술을 선택해서 깊이 있게 공부하면 된다.

 


 

웹 개발의 기본 HTML, CSS, 자바스크립트

웹 개발을 하려면 웹 브라우저에 정보를 어떻게 표현하는지 알아야 한다. 그래서 프런트든 백엔드든 이 3가지를 먼저 공부해야 한다.

이 부분도 지난 수업을 통해 충분히 학습했으니 간단히 설명한다.

 

 

  1. HTML : 웹 브라우저 창에 웹 문서의 내용을 보여주는데 필요한 약속이다. 여러 내용 중 제목과 본문, 이미지, 표와 같은 웹 요소를 알려주는 역할
  2. CSS : HTML로 만든 내용을 사용자가 알아보기 쉽게 꾸미거나 사용하기 편리하도록 배치
  3. 자바스크립트 : 사용자의 반응에 따른 동적인 효과

 

프레임워크란 프로그램을 만들 때 필요한 여러 기능을 쉽게 구현하도록 도와주는 도구이다.

 

 

프런트엔드 개발을 위한 기술

순수 자바스크립트로만 처음부터 끝까지 프로그램을 코딩해 개발하는 것은 어려운 일이다. 따라서 미리 만들어진 자바스크립트의 라이브러리와 프레임워크를 알아두면 좋다.
자바스크립트 기본 문법을 공부한 후에 라이브러리나 프레임워크를 배우는 것을 추천한다.

 

 

 

벡엔드 개발을 위한 기술

벡엔드 영역에서는 사용자가 볼 수 없는 서버의 동작을 개발한다. 웹 개발에서 브라우저 화면에 보이는 영역 외에는 모두 백엔드 영역이므로 개발 분야가 다양하다.
백엔드 개발자가 되려면 서버뿐 아니라 클라이언트와 서버 사이의 정보를 저장·관리하는 데이터베이스 등의 기본 개념을 알아야 한다. 그리고 백엔드 개발 언어와 관련 프레임워크도 선택해서 공부해야 한다.

 


 

학습을 마치며

난 벡엔드 개발자가 되기로 마음을 굳혔다. 벡엔드는 서버뿐 아니라 정보를 저장 · 관리하는 데이터베이스 영역도 공부해야 한다는 것을 알게 되었다. 그러니까 데이터베이스 공부도 조만간 다시 시작해야 할 것 같다. 지금은 정보처리기사 자격증을 따느라 바쁘지만, 이걸 취득한 후에는 SQL과 빅데이터 관련 자격증도 있으면 좋을 것 같다.
지금 난 Spring 개발자 과정을 배우고 있으니 정말 잘 선택한 것 같다. 우리반에는 백엔드보다 프론트엔드에 관심이 있는 사람들도 있었다.

벡엔드는 프론트엔드보다 배울 것도 많고 컴퓨터에 대해서도 박학다식해야 할 것이다. 그리고 프론트엔드 사람들과도 협업하고 프로젝트를 진행하려면 여기서 사용하는 프레임워크도 어느정도 알아야 할 것 같다.
앞으로 공부할 게 너무나도 많다. 하지만 앞으로의 여정이 정말 기대가 된다. 어제까지만 해도 게임 엔진에 대한 미련이 약간은 남아있었는데, 사람은 한 우물을 파야 한다. 이 분야를 정복한 후에 다음으로 넘어가야지 이것저것 건드리기만 하는 사람은 결코 전문가가 될 수 없음을 꼭 기억하자!

난 이제 진짜 개발자의 마인드를 갖게 된 것 같다.