개발을 시작할 땐 웹 개발로 시작해보자

 

 안녕하세요. 진득코딩입니다.

 많은 분들이 개발을 시작하고 싶은 마음은 있는데 어디서부터 어떻게 시작해야 할지 막막한 분들이 계실 거라고 생각합니다.

 개발에는 여러 분야가 있지만 그 중에서 처음 시작하기 에는 웹개발이 가장 적절하다고 생각합니다.

 

 이번 시간에는 웹 개발에 대해 전반적으로 알아보고 웹 개발을 어떻게 시작할지 알아보도록 하겠습니다.

 

웹 개발

 

• 웹 개발(web development)은 흔히 '웹 사이트를 만드는 것'입니다.
  
  
• 그중 정적 사이트(static site)는 방문자에게 정보를 보여주기만 하는 웹 사이트입니다.
  
  
• 정적 사이트는 미리 작성한 내용을 웹 사이트에 올려놓으면 방문자는 그 정보를 확인하는 방식이므로 제작하기가 쉽습니다.
  
  
• 동적 사이트(dynamic site)는 서비스나 기능 같은 것들도 포함되어 있는 웹사이트입니다.
  
  
• 즉, 웹 개발은 웹 사이트에서 사용자에게 제공할 기능과 서비스까지 모두 담을 수 있어야 합니다.
  
  

서버와 클라이언트

 

• 웹 개발을 하기 위해서는 먼저 웹 사이트의 동작 과정을 이해해야 합니다.
  
  
• 이 과정을 간단하게 알아보자면 먼저 사용자는 웹 브라이저에서 정보를 입력하거나 링크를 클릭하면 웹 사이트는 인터넷에 연결된 컴퓨터에서 정보를 가져와서 웹 브라우저에 보여줍니다.
  
  
• 이때 인터넷에 연결된 컴퓨터를 서버(server)라고 합니다.
  
  
• 서버에는 웹사이트에 접속하면 보이는 텍스트, 이미지, 동영상 등의 웹 요소와 사용자 정보, 상품 정보 등의 여러 정보가 저장됩니다.
  
  
• 또한 사용자가 웹 사이트에 접근하려고 사용하는 PC나 태블릿 PC, 스마트폰 등을 클라이언트(client)라고 합니다.
  
  
• 좁은 의미로 웹 브라우저를 클라이언트라고 합니다.
  
  
• 웹 사이트에서 정보를 검색하거나 처리하는 일은 서버에서 하고, 사용자의 요청을 받아 처리한 결과는 클라이언트에서 보여 줍니다.
  
  
• 즉, 클라이언트는 사용자와 서버 사이에서 화면으로 보여 주는 역할을 합니다.
  
  

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

 

• 웹 개발을 크게 두가지 영역으로 나누면 프런트엔드 개발과 백엔드 개발로 나눌 수 있습니다.
  
  
• 프런트엔드(front-end)는 사용자 앞(front)에 보이는 영역으로, 즉 웹 브라우저 화면에 보이는 것을 다룹니다.
  
  
• 웹사이트를 디자인하거나 사용자 동작에 반응하는 기능을 만들 수 있습니다.
  
  
• 특히 다양한 웹 브라우저의 종류와 버전에 따라 작동할 수 있게 만드는 것이 중요합니다.
  
  
• 백엔드(back-end)는 사용자 뒤(back)에서 보이지 않는 영역을 의미합니다.
  
  
• 웹사이트의 회원 정보나 게시판 글 등은 서버에 데이터베이스(database) 형태로 저장됩니다.
  
  
• 이러한 데이터베이스를 설계하거나 데이터를 처리하는 것이 백엔드 개발의 영역입니다.
  
  
• 백엔드 개발에는 자바, PHP, 파이썬 등의 다양한 프로그래밍 언어를 사용합니다.
  
  
• 이러한 프런트엔드 개발과 백엔드 개발을 모두 할 수 있는 사람을 풀스택(full-stack) 개발자라고 합니다.
  
  

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

 

 웹 개발에 필요한 프로그래밍 언어와 기술은 서로 어떻게 연결되고, 앞으로 공부해야 할 언어와 기술이 무엇인지 간단히 살펴보도록 하겠습니다.

 

웹 개발 기술 한눈에 살펴보기

 

• 웹 개발을 크게 3가지로 나눈다면 기본, 프런트엔드, 백엔드 영역이 있습니다.
  
  
• 이 중 기본 영역은 프런트엔드 개발을 하든 백엔드 개발을 하든 반드시 알아 두어야 하는 기술입니다.
  
  
• 기본을 익혔다면 자신이 관심을 갖는 분야에 따라 프런트엔드 영역이나 백엔드 영역의 언어와 기술을 선택해서 깊이 있게 공부하면 됩니다.
  
  

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

 

 프런트 엔드 개발을 하든 백엔드 개발을 하든 기본이 되는 HTML, CSS, 자바스크립트에 대해 알아보겠습니다.

1. 웹 문서의 뼈대를 만드는 HTML
   - HTML은 웹 브라우저 창에 웹 문서의 내용을 보여 주는 데 필요한 약속이라고 할 수 있습니다.
   - HTML은 웹 브라우저의 여러 내용 중에서 제목과 본문, 이미지, 표와 같은 웹 요소를 알려 주는 역할을 합니다.
   - 웹 개발을 하면서 웹 브라우저에 보여 주고 싶은 내용이 있다면 HTML에 맞는 표기법을 사용해야 합니다.
   
   
2. 웹 문서를 꾸미는 CSS
   - CSS는 HTML로 만든 내용을 사용자가 알아보기 쉽게 꾸미거나 사용하기 편리하도록 배치할 때 사용합니다.
   - CSS를 이용해서 웹 요소를 적절하게 배치하고 필요한 곳을 강조할 수 있습니다.
   - 다양한 디바이스에 따라 화면이 자동으로 바뀌는 반응형 웹 디자인을 만들려면 CSS를 공부해야 합니다.
   
   
3. 사용자 동작에 반응하는 자바스크립트
   - 사용자가 클릭하거나 스크롤하는 동장에 따라 반응하게 해줍니다.
   - 동적인 효과를 사용하려면 자바 스크립트가 필요합니다.
   - 규모가 큰 웹 사이트 개발에서는 리액트(React)나 뷰(Vue) 같은 자바스크립트 프레임워크를 사용합니다.
   
   ** 프레임워크란 프로그램을 만들 때 필요한 여러 기능을 쉽게 구현하도록 도와주는 도구입니다.
   ** 웹 프레임워크는 로그인이나 댓글처럼 자주 쓰는 기능을 제공해 개발자가 웹 사이트를 쉽게 만들도록 도와줍니다.
   
   

소스를 관리해 주는 유용한 서비스, 깃과 깃허브

 

• 깃(Git)은 소스의 수정 내용을 계속 저장하고 관리해 주는 도구입니다.
  
  
• 깃허브(GitHub)는 온라인에서 깃을 사용할 수 있게 만든 서비스입니다.
  
  
• 깃과 깃허브를 사용하면 파일 이름은 그대로 사용하면서 수정 내용만 따로 관리하기 때문에 공동 작업 할 때 편리합니다.
  
  
• 프로그램을 개발하면서 여러 소스를 작성하고 관리할 때 유용합니다.
  
  
• 개발하는데 직접적으로 사용되지는 않지만 협업할 때 필수적인 스킬입니다.
  
  

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

 

• 프런트엔드 개발을 할 때는 소스를 작성하고 결과를 즉시 웹 브라우저 화면에서 빠르게 확인할 수 있습니다.
  
  
• 웹 브라우저에서 표현할 수 있는 기술이 많아지면서 웹 사이트가 아니라 마치 애플리케이션처럼 동작하면 보여 주기도 합니다.
  
  
• 순수 자바스크립트로만 코딩하는 것은 힘들기 때문에 미리 만들어진 자바스크립트의 라이브러리와 프레임워크를 알아 두면 좋습니다.
  
  
• 라이브러리나 프레임워크를 사용하지 않고 자바스크립트만으로 처음부터 끝까지 직접 개발하는 것을 바닐라 자바스크립트(Vanila JavaScript)라고 합니다.
  
  
• 자바스크립트의 기본을 알아야 라이브러리나 프레임워크를 배우기도 쉽고 새로운 기술이 나오더라도 어렵지 않게 시작할 수 있기 때문에 자바스크립트 기본 문법을 공부한 후에 라이브러리나 프레임워크를 배우는 것이 좋습니다.
  
  

종류	특징	관련 사이트
제이쿼리(jQuery)	DOM을 활용해 웹 요소를 조작하기 쉽고 사용하기 편리한 라이브러리 도구입니다. 최근에는 웹 애플리케이션 개발에 적합한 다른 라이브러리나 프레임워크에 자리를 내주고 있습니다.	jquery.com
D3.js	웹 브라우저에서 실시간으로 변하는 정보를 시각적으로 표시하기에 적합한 라이브러리 도구입니다. 데이터를 시각화해 주는 자바스크립트 라이브러리는 D3.js 외에도 라파엘, Three.js 등이 있습니다.	d3js.org
부트스트랩(Bootstrap)	웹 사이트 디자인을 쉽게 만들어 주는 라이브러리 도구입니다. CSS로 PC, 태블릿 PC, 휴대 전화 등에서 동작하는 반응형 디자인을 만들 수 있게 해줍니다.	getbootstrap.com
리액트(React)	페이스북처럼 한 화면에서 모든 내용을 볼 수 있는 사이트를 SPA(single page application)라고 합니다. SPA나 복잡한 사이트를 개발할 때 프레임워크를 사용합니다. 이때 가장 많이 사용하는 프레임워크가 리액트이며 페이스북에서 개발했습니다.	ko.reactjs.org
앵귤러(Angular)	앵귤러는 구글에서 개발한 언어로 웹 애플리케이션을 제작하는 프레임워크입니다. 프로젝트 성격에 따라 리액트나 앵귤러 중에서 선택해서 사용합니다.	angular.io
뷰(Vue)	웹 애플리케이션에서 사용자 인터페이스를 만드는 프레임워크입니다. 화면에 보이는 부분에만 초점을 맞추기 때문에 다른 라이브러리나 프레임워크와 함께 사용할 수 있습니다.	vuejs.org

 

** 라이브러리 도구 vs 프레임워크

 - 라이브러리는 자신에게 필요한 기능만 사용해도 됩니다.

 - 즉, 개발 주도권이 개발자에게 있습니다.

 - 프레임워크는 개발 주도권이 프레임워크에게 있습니다.

 - 웹개발을 시작하는 방법부터 기능을 구현하는 모든 것을 프레임워크에서 정해 놓은 대로 따라야 합니다.

 

백엔드 개발을 위한 기술

 

• 백엔드 영역에서는 사용자가 볼 수 없는 서버의 동작을 개발합니다.
  
  
• 웹 개발에서 브라우저 화면에 보이는 영역 외에는 모두 백엔드 영역입니다.
  
  
• 서버뿐만 아니라 클라이언트와 서버 사이의 정보를 저장/관리하는 데이터베이스(database)등의 기본 개변을 알아야 합니다.
  
  
• 또한 백엔드 개발 언어와 관련 프레임워크도 선택해서 공부해야 합니다.
  
  
• 백엔드 개발은 서버 운영체제에 따라 사용하는 언어도 프레임워크도 달라집니다.
  
  

종류	특징	관련 사이트
노드제이에스(Node.js), 익스프레스(Express)	노드제이에스는 서버에서 자바스크립트를 실행할 수 있는 환경, 즉 플랫폼이라고 생각하면 됩니다. 그래서 자바스크립트만 익숙하면 웹 개발의 전체를 다룰 수 있습니다. 노드 제이에스에서 주로 사용하는 웹 개발 프레임워크는 익스프레스입니다.	nodejs.org/ko, expressjs.com
자바(Java), 스프링(Spring)	자바를 사용하면 안드로이드 앱을 개발할 수도 있고, 셋톱 박스나 하드웨어용 애플리케이션을 만들 수 있습니다. 자바의 웹 개발 프레임워크로는 스프링을 많이 사용합니다.	java.com, spring.io
파이썬(Python), 장고(Django)	파이썬은 배우기도, 사용하기도 쉬워서 개발 입문자가 처음 공부할 때 선택하는 언어입니다. 특히 데이터를 많이 다뤄야 하는 분야에서는 파이썬이 훨씬 유리합니다. 백엔드 개발을 할 때 파이썬의 프레임워크로는 장고를 사용합니다.	python.org, djangoproject.com
PHP, 코드이그나이터 (CodeIgniter)	PHP는 백엔드 개발에서 오랫동안 사용된 개발 언어입니다. 이전 버전은 개인 웹 사이트에서 주로 사용했지만 PHP7 버전부터는 백엔드 개발을 위한 프레임워크로 탈바꿈했습니다. 코드이그나이터는 PHP의 대표적인 웹 프레임워크입니다.	php.net, codeigniter.com

 

• 이 밖에 백엔드 개발 언어로 루비(Ruby)와 루비에서 사용하는 루비 온 레일즈(Ruby on rauls)라는 프레임워크가 있습니다.
  
  
• 최근에는 고(Go)와 고의 레벨(Revel)이라는 프레임워크도 소개되었습니다.
  
  

웹 브라우저

 

• 웹 브라우저는 웹 사이트를 방문할 때 사용하거나 웹 개발자가 웹 편집기로 작성한 문서를 화면에 나타내는 프로그램을 말합니다.
  
  

종류	제조업체	특징	관련 사이트
크롬	구글	HTML5가 등장할 때 가장 빨리 지원한 웹 브라우저로 사용자가 가장 많습니다. 다양한 확장 프로그램으로 필요한 기능을 추가해 사용할 수 있다는 장점이 있습니다.	google.com/chrome
엣지	마이크로소프트	2020년 1월에 출시된 웹 브라우저입니다. 크롬 브라우저와 같은 엔진을 사용하여 같은 기능을 대부분 제공합니다.	microsoft, com/ko-kr/edge
파이어폭스	모질라	개발자들이 많이 사용하는 웹 브라우저로 개발 도구와 부가 기능이 뛰어납니다.	mozilla.org/ko/firefox/new

 

웹 편집기

 

• 웹 문서를 만들 HTML 태그를 비롯해 CSS나 자바스크립트 소스를 입력하는 프로그램을 웹 편집기(web editor) 또는 코드 편집기(code editor)라고 합니다.
  
  
• 메모장이든 전문 편집기든 텍스트를 입력할 수 있는 프로그램이면 모두 편집기로 쓸 수 있습니다.
  
  
• 그러나 웹 편집기는 태그와 속성, 일반 텍스트 등을 서로 다른 색으로 표시해 주므로 소스를 읽기 쉽습니다.
  
  
• 또한 웹 편집기에 따라 태그나 속성의 일부 글자만 입력하더라도 전체를 입력해 주는 자동 완성 기능으로 오타로 발생하는 오류를 줄일 수 있습니다.
  
  

웹 편집기 종류

 

• 윈도우용 웹 편집기에는 노트패드++(Notepad++)나 에디트 플러스 등이 있습니다.
  
  
• macOS용 편집기에는 텍스트메이트(Textmate)나 코다(Code)등이 있습니다.
  
  
• 앞으로 실습할 때 사용하는 웹 편집기는 비주얼 스튜디오 코드(Visual Studio Code)입니다.
  
  
• 비주얼 스튜디오 코드는 윈도우와 macOS 모두 사용할 수 있는 무료 소프트웨어입니다.
  
  
• 특히 Node.js나 파이썬 등의 프로그래밍 언어도 사용할 수 있어 유용합니다.
  
  

웹 기반 편집기

 

• 웹 기반 편집기는 웹 브라우저에서 코드를 입력하면 결과도 바로 확인할 수 있는 도구입니다.
  
  
• PC에 설치하거나 시스템 환경 설정 등이 필요 없으며 웹 브라우저 화면에 코드를 입력하면서 결과를 확인해 볼 수 있습니다.
  
  
• 또한 다른 사람과 소스를 공유하는 것도 편리하고 초보자 코딩 연습용으로도 적합합니다.
  
  

웹 개발 환경 설정하기

 

1. 비주얼 스튜디오 코드 내려받기
   
   - 웹 브라우저에서 비주얼 스튜디어 코드 홈페이지(code.visualstudio.com)에 접속해서 자신의 운영체제에 맞게 설치 파일을 내려받습니다.
   
   
2. 비주얼 스튜디오 코드 설치하기
   
   - 진행 순서에 따라 [다음]과 [설치] 버튼을 눌러서 설치를 마칩니다.
   
   - 이때 편리한 실행을 위해 '바탕화면에 바로가기 만들기'를 선택하는 방법도 있습니다.
   
   
3. 비주얼 스튜디오 코드 실행해 보기
   
   - 비주얼 스튜디오 코드를 실행하면 [Welcome] 탭과 함께 비주얼 스튜디오 코드가 시작됩니다.
   
   - 이를 시작 페이지(welcome page)라고 하는데, 이곳에는 코드를 작성할 때 도움이 되는 여러 가지 항목이 표시됩니다.
   
   - 시작 페이지는 기본적으로 비주얼 스튜디오 코드를 실행할 때마다 표시되는데, 화면 왼쪽 아래에 있는 'Show welcome page on startup'의 체크 박스를 해제하면 다시 보이지 않습니다.
   
   - 나중에 이 화면을 다시 보고 싶다면 [Help -> Welcome] 메뉴를 선택합니다.
   
   

비주얼 스튜디오 코드의 기본 언어 바꾸기

 

 

• VScode의 설치가 완료되었다면 여러 설정을 해서 좀 더 개발하기 편한 환경을 만들어 봅시다.
  
  
• 먼저 기본 언어를 바꾸기 위해서는 왼쪽 사이드 바에서 확장 아이콘을 누릅니다.
  
  
• 그 후 검색 창에 'korean'이라고 검색해서 'Korean Language Pack for Visual Studio Code'를 누릅니다.
  
  

 

• 해당 화면에서 <install>을 누르게 되면 자동으로 설치가 됩니다.
  
  

 

• 설치가 완료되면 하단 오른쪽에 위와 같은 창이 뜨게 됩니다.
  
  
• 'Change Language and Restart'를 누르게 되면 VScode가 재시작됩니다.
  
  

 

• 재시작된 VScode를 보게 되면 위와 같이 기본 언어가 한국어로 바뀐 것을 볼 수 있습니다.
  
  
• 기본 언어를 바꾸는 것은 필수는 아니기 때문에 불편하지 않거나 영어가 편하신 분들은 넘어가주셔도 됩니다.
  
  

비주얼 스튜디오 코드의 색 테마 변경하기

 

• 이번에는 VScode의 색 테마를 변경해 보도록 하겠습니다.
  
  
• 해당 작업도 취향껏 진행해 주시면 됩니다.
  
  
• 먼저 VScode의 왼쪽 아래에 있는 관리 아이콘을 클릭한 뒤 [테마] -> [색 테마]를 클릭해 줍니다.

 

• [색 테마]를 클릭하게 되면 위와 같이 검색창에 여러 테마들이 나오게 되는데 하나씩 확인해서 원하시는 테마를 선택해 주시면 됩니다.
  
  

 

• 필자는 라이트 모던을 선택해서 위와 같이 테마를 바꿔주었습니다.
  
  
• 개인적으로 이클립스를 사용하다 보니 흰 바탕이 더 편해서 위와 같이 테마를 변경해 주었습니다.
  
  

작업 파일 추가하기

 

• 이번에는 HTML을 사용하기 위한 파일을 생성해 보도록 하겠습니다.
  
  
• 탐색기에 오른쪽 마우스 클릭을 하게 되면 위와 같이 메뉴가 나오게 됩니다.
  
  
• 이 중 새 파일을 클릭해 줍니다.

 

• 새 파일을 클릭하게 되면 위와 같이 파일명을 정해줄 수 있는데 HTML 파일의 이름은 보통 index.html로 지정해 주기 때문에 위와 같이 파일 이름을 지정해 주었습니다.
  
  
• 원하는 파일 이름을 작성한 뒤 엔터를 눌러주시면 파일이 하나 생성되는 것을 확인하실 수 있습니다.
  
  

 

• 빈 파일에 html이라고 적어주면 위와 같이 여러 메뉴들이 나오게 됩니다.
  
  
• 이 중에서 'html:5'를 클릭해 줍니다.
  
  

 

• 'html:5'를 클릭해 주면 위와 같이 html의 뼈대가 생성됩니다.
  
  
• 이때 스타일을 지정해 줄 수 있는 css파일도 만들어봅시다.
  
  

 

• HTML 파일을 만들 때처럼 새 파일을 눌러서 위와 같이 파일을 만들어줍니다.
  
  
• CSS 파일명은 보통 style.css로 지어주기 때문에 위와 같이 파일을 생성해 주었습니다.
  
  

• HTML 파일로 돌아와서 확인해 보면 현재에는 CSS파일과 HTML파일이 연결되어 있지 않습니다.
  
  
• 위에 밑줄이 적힌 코드를 넣어주면 HTML 파일과 CSS파일이 연결되게 됩니다.
  
  

VScode 실행해 보기

 

• 개발 준비가 완료되었으니 간단하게 출력을 해서 설치가 잘 되었는지 확인해 봅시다.
  
  
• 위에서 실습한 것처럼 확장 기능에서 'Live Server'이라는 라이브러리를 찾아 설치해 줍니다.
  
  

 

• 그 이후 <body>에 원하는 문장을 적어줍니다.
  
  
• 이 상태에서 오른쪽 마우스 클릭을 통해 나오는 메뉴 중 'Open with Live Server'를 클릭해 줍니다.
  
  

 

• 이렇게 하게 되면 웹 브라우저가 실행되면서 위와 같이 <body>에 적은 문구가 출력된 것을 확인할 수 있습니다.
  
  

---

 

 이번 시간에는 개발 중에서 웹 개발이란 것이 무엇인지 간단하게 살펴보고 VScode를 깔아 간단한 출력까지 해보았습니다.

 HTML/CSS는 어떤 개발을 하든 기초적으로 필요합니다.

 그렇기 때문에 개발에 관심이 있다면 먼저 HTML/CSS를 해보는 것을 추천합니다.

 HTML/CSS는 백엔드 개발과 다르게 바로바로 결과가 출력되기 때문에 시각적인 변화가 있어 좀 더 쉽게 접근할 수 있다고 생각합니다.

 이번 포스팅은 여기까지입니다.

 개발을 시작하시는 모든 분들을 응원하고 궁금하시거나 문의할 사항이 있다면 댓글에 남겨주세요

 끝까지 봐주셔서 감사합니다.😊