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

초보자로서 웹 개발을 배우고 싶지만 어디서부터 시작해야할지 막막합니다.

너무나 많은 초보자 튜토리얼이 있지만 가장 좋은 방법을 찾는 것은 어렵습니다. 우선 웹과 웹 개발이 뭔지 알아봅시다.

1 : 웹 개발이란 무엇입니까?

웹 개발은 크게 프런트 엔드와 백엔드로 나눌 수 있습니다. 프런트 엔드는 클라이언트, 즉 사용자를 위한 작업입니다. 백엔드는 서버, 즉 서비스와 데이터를 위한 작업입니다.

웹 사이트는 어떻게 작동합니까?

모든 웹 사이트는 서버라고하는 컴퓨터에 저장되어 있습니다. 이 서버는 인터넷에 연결되어 있어야 합니다. 그래야 웹사이트에 접근할 수 있습니다. 브라우저 (예 : Chrome, Firefox 또는 Safari)를 통해 컴퓨터 또는 휴대 전화에서 연결합니다. 이를 클라이언트 라고 합니다.

따라서 인터넷에 접속할 때마다 사용자(클라이언트)는 서버에서 데이터(예 : 고양이 사진)를 가져옵니다. 데이터를 서버로 (새로운 고양이 사진을) 업로드 할 수도 있습니다.  클라이언트와 서버 사이를 오가는 것이 인터넷의 기반입니다.

브라우저에서 액세스 할 수있는 모든 것은 웹 개발자가 구축했습니다. AirBnb, 페이스 북, 트위터들이 모두 웹 사이트입니다.

프런트 엔드와 백 엔드의 차이점은 무엇입니까?

"프런트 엔드", "백 엔드"및 "풀 스택" 웹 개발자라는 구분은 어디를 작업하는지에 구분됩니다. "프런트 엔드"는 주로 클라이언트 측을 다루고 있음을 의미합니다. 반대로 "백엔드"는 서버 측을 다룹니다. 실제로 볼 수는 없지만 많은 논리와 기능을 처리합니다. 모든 것이 작동하는 데 필요합니다.

이에 대해 생각할 수있는 한 가지 방법은 프런트 엔드 웹 개발이 식당의 "홀"에 해당됩니다. 고객은 인테리어 장식을 구경하고 음식을 먹을 수 있습니다.

반면에 백엔드 웹 개발은 식당의 "주방"에 해당됩니다. 주문을 받고 음식을 만들고 제공합니다. 고객이 볼 수 없는 비하인드 스토리가 있는 곳입니다. 최종적으로는 고객에게 맛있는 식사를 대접하기 위함입니다.

코드 편집기 사용

웹 사이트를 구축 할 때 가장 필수적인 도구는 코드 편집기 또는 IDE (통합 개발 환경)입니다.

좋은 옵션이 많이 있지만 현재 가장 인기있는 코드 편집기는 VS 코드입니다. Microsoft의 기본 IDE 인 Visual Studio의 보다 가벼운 버전입니다. 빠르고 무료이며 사용하기 쉬우며 확장성이 있습니다.

다른 코드 편집기는 Sublime Text , Atom 및 Vim 입니다.

하지만 초보자에게는 VS Code를 추천합니다.

2 : 기본 프런트 엔드

웹 사이트의 프런트 엔드를 구성하는 언어는 HTML, CSS 및 JavaScript 등이 있습니다.  이 파일은 클라이언트 측 브라우저에서 로드됩니다. 각각을 자세히 살펴 보겠습니다.

HTML

HTML 또는 HyperText Markup Language는 모든 웹 사이트, 브라우저에서 로드되는 기본 파일 유형입니다. HTML 파일에는 태그를 사용하여 다양한 유형의 콘텐츠를 나타냅니다.

예를 들어 헤드 라인 제목, 단락, 글 머리 기호 목록, 이미지 등을 만들 수 있습니다. HTML 태그 자체에는 몇 가지 스타일이 첨부되어 있지만 Word 문서에서 볼 수 있는 것과 같이 매우 기본적입니다.

HTML만 사용하여 매우 간단한 웹 사이트를 구축할 수도 있습니다.

CSS

CSS 또는 Cascading Style Sheets를 사용하면 HTML 콘텐츠의 스타일을 멋지고 하려하게 만들 수 있습니다. 색상, 사용자 정의 글꼴 및 레이아웃을 추가 할 수 있습니다. 웹 사이트의 요소를 원하는대로 표시합니다. 심지어 CSS로 애니메이션을 만들 수도 있습니다. 프론트 엔드를 전문으로하고 싶다면 정말 탄탄한 CSS 기술을 갖추는 것이 필수적입니다.

자바 스크립트

JavaScript는 브라우저에서 실행되도록 설계된 프로그래밍 언어입니다. JavaScript를 사용하면 웹 사이트를 동적으로 만들 수 있습니다. 사용자 입력에 따라 바로 동적인 웹 페이지를 구현할 수 있습니다.

예를 들어 JavaScript로 "맨 위로 이동" 버튼을 만들 수 있습니다. 클릭하면 페이지 상단으로 다시 스크롤됩니다. 또는 사용자의 위치를 인식해 오늘의 날씨를 표시할 수도 있습니다.

React와 같은 JavaScript 프레임 워크는 개발자들이 너무 좋아하는 프레임 워크입니다. 하지만 먼저 일반 바닐라 JavaScript를 배울 것을 추천합니다. 재밌게 배울 수 있는 언어이며, 할 수 있는 일이 너무 많습니다!

3 : 기본 백엔드

백엔드 또는 웹 개발의 서버 측은 세 가지로 구성됩니다. 주요 구성 요소 : 서버, 서버 측 프로그래밍 언어 및 데이터 베이스.

서버

처음에 언급했듯이 서버는 컴퓨터입니다. 모든 웹 사이트 파일, 데이터베이스 및 기타 구성 요소가 저장되어 있습니다.

기존 서버는 OS에 따라 Linux 또는 Windows로 나누어 집니다.

요즘에는 서버리스 아키텍처인 클라우드 서버도 있습니다. AWS (아마존 웹 서비스) 또는 Netlify 는 대표적인 서버리스 공급자 입니다.

서버리스 설정은 빠르고 저렴하며 사용자가 서버 유지 관리에 대해 걱정할 필요가 없습니다. 서버 측 언어가 필요하지 않은 정적 웹 사이트를 구성하는 것은 매우 쉽습니다. 그러나 복잡한 애플리케이션의 경우 기존 서버 설정 더 나은 옵션이 될 수 있습니다.

프로그래밍 언어

서버에서는 프로그래밍 언어를 사용하여 응용 프로그램에 대한 기능과 논리에 대한 코드를 작성하고 결과를 클라이언트에 다시 전달합니다.

웹에서 널리 사용되는 프로그래밍 언어로는 PHP, Python, Ruby, C # 및 Java가 있습니다. Node.js는 서버 언어를 자바 스크립트의 형태로 제공합니다.

이들 각각에 사용할 수있는 프레임 워크도 있습니다. 프론트 엔드 자바 스크립트 프레임 워크와 마찬가지로 이러한 백엔드 프레임 워크는 웹 앱을 구축하는 데 유용한 도구입니다.

웹 개발에 가장 일반적으로 사용되는 프로그래밍 언어 목록을 확인해 보겠습니다.

 

C#

C#은 Microsoft의 Java 경쟁자로 개발되었습니다. 웹 앱, 게임 개발 등을 만드는 데 사용되며 모바일 앱을 만드는데도 사용할 수 있습니다.

 

JAVA

Java는 가장 널리 사용되는 프로그래밍 언어 중 하나이며 웹 앱 및 Android 앱 빌드에 사용됩니다.

 

Node.js

Node.js는 매우 인기있는 기술입니다. 한 가지주의 할 점은 기술적으로 서버 측 언어가 아니라 사용하여 서버에서 실행되는 JavaScript의 한 형태입니다.

 

PHP

PHP는 WordPress 를 지원하는 언어입니다. 중소기업 웹 사이트에서 많은 사람들이 WordPress를 사용하므로 이것은 좋은 선택이 될 것입니다.

 

Python

Python은 기계 학습, 데이터에 사용됨에 따라 인기가 높아지고 있습니다. 그것은 초보자에게 좋습니다. 문법이 다른 언어보다 간단하기 때문입니다. Django 또는 Flask 프레임 워크를 사용하여 웹 개발을 할 수 있습니다.

 

Ruby

Ruby는 다음과 같은 구문을 가진 또 다른 언어입니다. 초보자도 쉽게, 재미있게 배울 수 있습니다. 프레임 워크 Ruby on Rails을 사용하여 웹 앱을 빌드 할 수 있습니다.

 

어떤 언어를 선택하는 것이 좋은지는 개인의 선택입니다.

데이터베이스

이름에서 알 수 있듯이 데이터베이스는 웹 사이트에 대한 정보를 저장하는 곳입니다. 대부분의 데이터베이스 SQL이라는 언어를 사용합니다.

데이터베이스에서 데이터는 테이블에 저장됩니다. 그런 다음 SQL로 쿼리를 작성하여 데이터를 만들고, 읽고, 업데이트하고, 삭제합니다.

데이터베이스는 같은 서버를 사용하여 서버에서 실행됩니다 Microsoft SQL Server Windows 서버의 및 과 MySQL Linux 용 .

NoSQL 이라는 데이터베이스도 있습니다. 기존 테이블과 달리 JSON 파일에 데이터를 저장하는 데이터베이스입니다. NoSQL 데이터베이스의 한 유형은 MongoDB 이며 React, Angular 및 Vue 애플리케이션에서 자주 사용됩니다.

초보자를 위한 몇 가지 팁…

이 가이드가 웹 개발 학습을 시작하는 데 도움이 되기를 진심으로 바랍니다.

독학 과정을 진행하는 경우 몇 가지 팁이 있습니다.

1. 한 번에 모든 것을 배우려고하지 마십시오. 한 번에 하나의 기술을 선택하십시오.
2. 튜토리얼에서 튜토리얼로 이동하지 마십시오. 튜토리얼이 하나 끝났다고 해서 바로 다음 튜토리얼로 넘어가지 마세요. 궁금한 모든 것을 수정하고 시도해 보세요. 배울 수 있는 것들이 아주 많습니다.
3. 웹 개발을 배우는 것은 장기적인 여정입니다. 단기간에 모든 것을 배울려고 하지마세요. 최소 3개월에서 1년을 목표로 하세요.
4. 비디오 코스를 보거나 책을 읽는다고 자동으로 전문가가되는 것은 아닙니다. 자료를 배우는 것은 첫 단계에 불과합니다. 실제 웹 사이트 구축을 해보는 것이 무엇보다 중요합니다!

웹 개발을 배우기 시작하는 모든 분들께 코딩의 신이 내리길!