안녕하세요! 이 글에서는 웹 개발자 여정을 시작하는 사람들을 안내할 거에요. 웹 개발의 모든 부분을 설명할 거에요. 웹 개발에 깊이 들어가기 전에, 웹의 간단한 역사를 살펴보도록 할게요.
우리는 컴퓨터 간에 정보를 초미계로(일부는 이미지나 미디어인) 전송할 수 있다는 것을 알게 되었어요.
가장 먼저 개발된 것은 HTML(하이퍼텍스트 마크업 언어)라는 마크업 언어였죠. 이 HTML을 읽고 HTML 문서가 무엇을 포함하는지 보여줄 수 있는 브라우저가 개발되었어요. 처음에는 데이터 전송이 한 방향으로만 이루어져 서버에는 다양한 웹 페이지가 있을 수 있었지만 사용자는 URL(균일 자원 식별자)이라 불리는 링크를 통해서만 이 웹 페이지들에 접근할 수 있었어요.
일정 시간 후 새로운 언어인 JavaScript가 개발되었습니다. 이제 사용자들은 웹 페이지에서 일부 작업을 수행할 수 있습니다. JavaScript를 통해 HTML을 조작할 수 있고, 브라우저에 일부 이벤트를 호출하며 사용자가 어떤 작업을 수행했을 때 일부 작업을 수행할 수 있습니다.
현재 데이터는 클라이언트에서 서버로, 서버에서 클라이언트로 전송될 수 있으며, JavaScript가 중요한 역할을 합니다.
웹 애플리케이션 또는 웹 사이트는 주로 두 부분으로 구성됩니다. 하나는 클라이언트 측이고 다른 하나는 서버 측입니다. 웹 사이트의 URL을 입력하면 HTML 코드가 포함된 웹 페이지가 반환됩니다. HTML에는 이미지, CSS 링크 및 JavaScript 코드 링크와 같은 여러 링크가 포함될 수 있습니다. 브라우저는 이러한 링크를 인식하고 로드하며 실행합니다. 클라이언트 측(사용자 측)에서는 프론트엔드라고도 불리며, 페이지에 정보를 표시하는 방법과 사용자가 페이지와 상호 작용하는 방법을 브라우저에 알려주는 코드를 작성합니다. 프론트엔드 코드에는 주로 HTML, CSS 및 JavaScript가 있습니다.
- HTML — 웹에서 콘텐츠를 생성하고 구조화하기 위해 사용되는 마크업 언어입니다. 브라우저가 이해하고 표시하는 많은 미리 정의된 태그가 있습니다.
- CSS — HTML은 페이지의 뼈대를 생성하며, CSS는 스타일을 삽입합니다. 예를 들어 색상, 글꼴 및 레이아웃입니다.
- JavaScript — 현재 웹 개발에서 가장 중요한 요소입니다. HTML 및 CSS는 페이지에 정보를 표시하는 반면 JavaScript는 웹 사이트를 활발하게 만듭니다. 웹 사이트를 동적이고 상호 작용적으로 만듭니다.
원래는 JavaScript 코드와 CSS 코드를 HTML 내부의 script 및 style 태그 내부에만 작성했습니다. 그러나 웹 페이지의 복잡성이 증가함에 따라 이러한 코드를 하나의 파일에서 관리하는 것이 매우 어렵게 되었습니다. 이러한 복잡성을 해결하기 위해 여러 라이브러리와 프레임워크가 개발되었는데, 그 중 가장 널리 사용되는 것은 Reactjs와 Angular입니다. 이것은 웹 사이트의 프론트엔드에 대한 기본 개요입니다. 프론트엔드 작업을 하려면 HTML, CSS, JavaScript, 그리고 프론트엔드 JavaScript 라이브러리 또는 프레임워크(React 또는 Angular)를 배워야 합니다.
이제 웹 사이트의 백엔드로 넘어가 보겠습니다. 프론트엔드는 정보를 표시하고 웹 사이트를 상호작용적으로 만듭니다. 그러나 이 정보가 어디에서 오는지, 제공하는 정보가 어디로 가는지 고려해 보았습니까? 답은 그 모든 정보가 서버에서 나오고 데이터베이스에 저장된다는 것입니다. 서버에서는 정보를 수집하고 조작하여 프론트엔드에 제공하기 위한 프로그램을 작성합니다. 백엔드의 두 가지 가장 중요한 부분은 데이터베이스와 API입니다.
데이터베이스 — 데이터베이스는 전자적으로 저장되고 액세스되는 데이터의 조직화된 집합입니다. 대량의 정보를 효율적으로 관리, 검색 및 업데이트하기 위해 설계되었습니다. MySQL 및 MongoDB와 같은 여러 데이터베이스가 있습니다. 데이터베이스에 정보를 저장하려면 데이터의 구조를 먼저 데이터베이스에 알려주어야 하는데, 이를 스키마 디자인이라고 합니다. 예를 들어, 블로깅 웹사이트를 만들고 MongoDB에 정보를 저장하려고 가정해보겠습니다. 우리는 Blog와 User라는 두 가지 기본 엔티티가 필요합니다.
User = {
id: number
name: string
email: string
}
Blog = {
id: string
title: string
content: string
author: user(user 엔티티와의 관계)
}
API — API(Application Program Interface)은 데이터베이스에서 정보를 가져와 조작하며 클라이언트에게 보내는 함수 또는 프로그램입니다. 또한 클라이언트가 보내는 데이터를 데이터베이스에 저장합니다. 이는 실제 데이터와 클라이언트 측 응용 프로그램 간의 인터페이스 역할을 합니다. 이러한 API는 클라이언트에 HTTP 요청을 통해 노출되며 여러 가지 메서드(Get, Post, Put)를 가질 수 있습니다.
Get 메서드는 서버에서 데이터를 가져오는 데 사용됩니다. Post 메서드는 클라이언트에서 데이터를 보내고 데이터베이스에 저장하는 데 사용됩니다. Put 메서드는 서버에서 데이터를 업데이트하는 데 사용됩니다.
백엔드 프로그램을 작성하고 데이터베이스에 연결하는 데 도움이 되는 여러 프레임워크가 있습니다. 예: Flask(Python), Laravel(PHP), Expressjs(JavaScript). 이 글에서는 Expressjs를 설명했습니다.
위 내용은 웹 개발 학습을 시작하는 데 도움이 되기 위한 것입니다. 개발을 시작하기 전에 위에서 언급한 주제를 자세히 학습해야 합니다.