웹 개발 기초 : 도메인, 호스팅, HTML, CSS, JavaScript, API 개념 과 역할 이해하기!

콘텐츠플로우

처음 프로프래밍을 접하거나, 홈페이지 제작 같은 웹 개발을 처음 하시는 분들이라면 도메인, 호스팅, html, css, javascript, api 와 같은 언어를 처음 접해보실텐데요. 프로그래밍 언어를 몰라도 이제는 ai 로 다 가능하지만, 기본적으로 어떤 역할을 하는지 개념을 이해한다면 조금 수월하게 공부할 수 있습니다. 웹 개발에서 개본적으로 사용하는 도메인, 호스팅, html, css, javascipt 그리고 api 에 관한 개념과 역할을 빠르게 이해할 수 있도록 구성되어 있습니다.

도메인, 호스팅, HTML, CSS, JavaScript, 그리고 API 이해하기!

만약 당신이 웹사이트를 만드는 과정을 “집을 짓는 것”에 비유한다면, 도메인, 호스팅, 그리고 다양한 웹 기술들이 집을 구성하는 요소들이 됩니다. 집과 관련된 비유로 설명하면 훨씬 쉽게 이해할 수 있습니다! 아래에서 먼저 간다하게 도메인, 호스팅, html, javascript, api 의 역할을 집에 비유해서 확인해보도록 하겠습니다.

웹 개념집에 비유하기역할
도메인집 주소사용자가 웹사이트를 찾을 수 있는 경로
호스팅집 자체웹사이트 데이터를 저장하는 공간
HTML집의 뼈대웹사이트의 기본 구조를 구성
CSS집의 인테리어웹사이트의 디자인과 스타일을 꾸밈
JavaScript집의 전기 및 자동화웹사이트에 동적인 기능을 추가
API외부 서비스 연결외부 데이터나 기능을 가져오도록 연결

🏡 도메인: 집 주소

  • 기술 개념: 웹사이트의 주소.
  • 역할:
    • 사용자가 웹사이트에 쉽게 접근하도록 네트워크 상의 IP 주소를 사람이 읽을 수 있는 형식으로 제공.
    • 예: google.com, naver.com.
  • 친구들이 여러분의 집을 방문하려면 정확한 주소가 필요하듯, 인터넷 사용자들도 웹사이트를 방문하려면 주소가 필요합니다.
  • 도매인 예시: “www.myhouse.com “이 도메인입니다. 이 주소를 입력하면 사용자가 여러분의 집(웹사이트)을 찾을 수 있어요.

도메인집 주소를 등록하는 것과 같습니다. 주소를 잃어버리면 아무도 여러분의 집을 찾을 수 없겠죠. 홈페이지에 등록을 하려면 도메인을 설정해주셔야합니다.

도메인

🏠 호스팅: 집을짓는 땅

  • 기술 개념: 웹사이트를 인터넷에 올려주는 서버 공간.
  • 역할:
    • 웹사이트를 저장하고, 사용자가 언제든 접근할 수 있도록 24/7 제공.
    • 호스팅 제공 업체(AWS, 카페24 등)가 서버 관리 및 유지보수를 처리.

호스팅은 집을 짓기위한 땅이라고 생각하시면 됩니다. 집을 짓기 위해서는 땅이 필요하잖아요? 집을 짓기위해 저희는 온라인에서 호스팅 서버를 대여하거나, 직접 호스팅 서버를 운영할 ㅜㅅ 있습니

  • 웹사이트는 데이터와 파일들로 구성된 공간이 필요합니다. 이 공간이 바로 호스팅 서버입니다.
  • 여러분이 집에 물건을 보관하듯, 웹사이트의 콘텐츠(텍스트, 이미지, 영상)를 호스팅 서버에 저장합니다.

호스팅은 집을 임대하거나 소유하는 것과 비슷합니다. 좋은 호스팅을 선택하면 안전하고 편안한 집을 가질 수 있어요.

주요 호스팅 서비스로는

🛠️ HTML: 집의 뼈대

  • 기초 언어: 웹페이지의 구조를 정의하는 언어.역할:
    • 문서를 구성하는 태그(<h1>, <p>, <img> 등)를 사용해 콘텐츠를 구조화.
    • 텍스트, 이미지, 링크 등을 배치.
  • 특징:
    • 정적인 언어이며, 프로그래밍 언어라기보다는 마크업 언어입니다.
    • 배우기 쉽고, 웹 개발의 출발점.

HTML은 집을 짓는 골조(뼈대)라고 생각하시면 됩니다. 아무것도 없는 빈 공간에 기본적인 웹사이트의 구조를 만드는게 html 입니다.

  • 집을 지으려면 벽, 천장, 문 등 기본 구조가 필요하죠.
  • 웹사이트의 기본 구조를 만드는 언어가 바로 HTML입니다.
  • HTML은 집의 “뼈대”를 짓는 설계도와 같습니다.
  • 뼈대만 있다면 보기엔 썰렁한 집이겠죠? 여기서 CSS와 JavaScript가 필요합니다!

아무것도 없는 현재 이 페이지도 html 과 css 로 구성 되어 있는 상태를 보시면 됩니다. 페이지로 넘어갈 때 사용되는게 자바스크립트(javascrpit) 라고 보시면 됩니다.

아래의 코드는 html 코드 예시 인데요.

<h1>여기는 거실입니다</h1>
<p>거실에는 소파와 테이블이 있습니다.</p>

위 예시 코드에서 보면 h1 은 페이지의 제목1번(헤드1) 이라는 뜻인데요. 즉 페이지가 어떤 제목인지 알려주는 뜻입니다. p 는 단락이라는 뜻입니다.

<> 이 코드는 시작이라는 단어이고, </> 이 코드는 코드를 닫는다. 라고 생각하시면 됩니다. 즉 “<h1>”은 제목 1의 시작 , “</h2>” 는 제목1 끝 이라고 보시면 됩니다.

아래에서는 htmml 의 주요 용어 목록을 간단히 확인해볼 수 있고, html 에 관한 더 자세한 내용은 이 글에서확인해보세요!

📖 HTML 주요 용어 목록

용어설명
태그(Tag)HTML의 기본 구성 요소. 꺾쇠괄호(< >)로 감싸며 코드를 시작하고 닫는다.
요소(Element)태그와 콘텐츠를 포함한 전체 구조.
<태그>내용</태그> 형태.
속성(Attribute)태그에 추가 정보를 제공하는 키-값 쌍.
<태그 속성="값">내용</태그> 형태.
헤드(Head)문서의 메타정보를 정의하는 영역.
<head> </head>
head 태그 안에 메타 정보를 작성.
본문(Body)웹 페이지에 표시되는 주요 콘텐츠 영역. <body> 태그 안에 작성.
HTML5HTML의 최신 표준 버전으로, 멀티미디어와 상호작용을 더 쉽게 구현 가능.
DOCTYPE문서의 HTML 버전을 정의하는 선언. <DOCTYPE html> 형태.
주석(Comment)코드 설명을 추가하는 영역. 브라우저에 표시되지 않음. <!-- 내용 -->

🎨 CSS: 집의 인테리어

  • 기초 언어: 웹페이지의 스타일(디자인)을 정의하는 언어.
  • 역할:
    • HTML 요소의 색상, 크기, 위치, 배경 등을 지정.
    • 웹페이지를 시각적으로 아름답고 사용자 친화적으로 만듦.
  • 특징:
    • HTML과 분리되어 있어, 디자인만 독립적으로 관리 가능.
    • 동작: 선언형 언어로 로직이 아닌 스타일을 기술.

CSS는 집을 꾸미는 인테리어라고 생각하시면 됩니다. CSS가 없다면 집은 기능만 있고 보기엔 매우 투박할 거예요. 집의 벽지 색, 바닥 마감, 가구 배치 등을 결정하듯 웹피이지에 CSS를 더하면 세련되고 아름다운 집이 됩니다.

CSS는 웹사이트의 색깔, 크기, 위치, 배경 등을 설정하여 HTML로 만들어진 골격에 디자인을 합니다. . HTML로 만들어진 골격에 미적인 요소를 입힙니다. CSS는 집의 페인트, 벽지, 가구 배치입니다. 집의 벽을 흰색으로 칠하거나, 창문에 커튼을 다는 작업이 CSS입니다.

css 코드 예시 :

h1 {
  color: blue;
  font-size: 24px;
}

    H1 태그에 스타일을 적용하게 되는 예시입니다. “color: blue;“는 텍스트의 색상을 파란색으로 지정하고, “font-size: 24px;:” 는글꼴 크기를 24픽셀로 설정합니다.

    📖 CSS 주요 용어 목록

    용어설명
    Selector스타일을 적용할 HTML 요소를 선택합니다. 예: h1, .class, #id 등.
    Property스타일의 속성을 정의합니다. 예: color, font-size, margin.
    Value속성(Property)에 지정할 값을 나타냅니다. 예: blue, 16px, 10px.
    Class여러 요소에 동일한 스타일을 적용하기 위한 속성. 예: .myClass.
    ID특정 요소에 고유하게 스타일을 적용하기 위한 속성. 예: #myId.
    Inline StyleHTML 태그의 style 속성에 직접 CSS를 작성하는 방식. 예: <h1 style="color: red;">.
    External CSS별도의 .css 파일에 스타일을 작성하고 연결하는 방식.
    Box Model요소의 크기와 여백을 정의하는 모델로, margin, border, padding, content 포함.
    Pseudo-class특정 상태에만 스타일을 적용하는 클래스. 예: :hover, :focus.
    Media Query화면 크기나 장치에 따라 다른 스타일을 적용합니다. 예: @media

    ⚡ JavaScript: “집의 기능(생명)”

    • 프로그래밍 언어: 웹페이지에 동적인 기능을 추가하는 스크립트 언어.
    • 역할:
      • 사용자와의 상호작용(클릭, 입력 등)을 처리.
      • 애니메이션, 버튼 클릭 이벤트, 실시간 데이터 업데이트 구현.
    • 특징:
      • 프로그래밍 언어로서, 변수, 조건문, 반복문 등 로직 작성 가능.
      • 예: 버튼을 클릭하면 알림을 띄우거나, 데이터를 실시간으로 갱신.

    JavaScript는 집에 설치된 스마트 기능입니다. 버튼을 누르면 불이 켜지고, 센서가 동작해 문이 자동으로 열리는 것처럼 동작을 추가합니다. 시로 사용자가 버튼을 누르면 팝업이 뜨거나, 이미지가 슬라이드로 전환되는 기능을 만듭니다.

    JavaScript는 집에 생명을 불어넣는 요소입니다. 예를 들어, 버튼을 누르면 조명이 켜지거나, 음악이 재생되는 “스마트 홈”처럼 작동합니다. 웹 페이지로 적용하면, 웹페이지를 이동시키거나, 웹페이지 팝업창 및 이미지 슬라이드 등의 기능을 담당합니다.

    JavaScript 코드 예시 :

    document.querySelector('button').
    addEventListener('click', 
    () => { alert('문이 열렸습니다!'); });

    document.querySelector('button'). : HTML 문서에서 <button> 요소를 선택합니다. 페이지에 있는 첫 번째 <button> 요소를 찾습니다.

    addEventListener('click', : 선택된 버튼에 클릭 이벤트 리스너를 추가합니다. 사용자가 버튼을 클릭했을 때 특정 동작을 실행하도록 설정합니다.

    () => { alert('문이 열렸습니다!'); }: : 버튼을 클릭하면 화살표 함수가 실행됩니다. 함수 내용은 alert('문이 열렸습니다!')로, 경고 창을 띄웁니다.

    📖 JavaScript 주요 용어 목록

    용어설명
    Variable데이터를 저장하는 변수. var, let, const로 선언.
    Function코드 블록을 정의하고 재사용 가능하도록 만드는 함수. function 키워드로 작성.
    Array여러 데이터를 하나의 변수에 저장하는 리스트 형태. 예: [1, 2, 3].
    Object키-값 쌍으로 데이터를 저장하는 구조. 예: { key: "value" }.
    Event사용자 동작(클릭, 입력 등)에 반응하기 위해 발생하는 이벤트.
    DOMHTML 문서를 JavaScript로 조작할 수 있게 해주는 객체 모델(Document Object Model).
    Callback다른 함수에 인자로 전달되는 함수. 비동기 작업에서 자주 사용.
    Promise비동기 작업의 완료나 실패를 나타내는 객체. .then.catch로 처리.
    Async/Await비동기 작업을 동기 코드처럼 작성할 수 있게 도와주는 문법.
    Loop반복문으로 코드 블록을 여러 번 실행. 예: for, while.
    Conditional조건에 따라 다른 코드를 실행. 예: if, else, switch.
    Scope변수나 함수가 유효한 범위. GlobalLocal로 구분.
    Closure함수가 자신이 선언된 환경(스코프)의 변수에 접근할 수 있는 특성.
    API응용 프로그램이 상호작용하기 위한 도구와 함수의 집합.
    ES6JavaScript의 최신 문법(ECMAScript 6). let, const, 화살표 함수 등이 포함.
    Hoisting변수나 함수 선언이 코드 상단으로 끌어올려지는 JavaScript의 동작 방식.

    📡 API: 집의 외부 서비스 연결

    • 술 개념: 외부 서비스나 애플리케이션과 연결해 데이터를 주고받는 인터페이스.
    • 역할:
      • 외부 기능(날씨, 결제, 지도 등)을 호출해 가져오거나 데이터를 보냄.
      • 개발자가 복잡한 기능을 직접 구현하지 않고도 외부 서비스를 활용 가능.
    • 특징:
      • 다른 서비스와 소통하기 위한 규칙과 도구.
      • 예: PayPal API로 결제를 처리하거나, Google Maps API로 위치 정보를 표시.

    API는 집 안에 설치된 배달 시스템이나 수도, 전기 같은 외부 서비스 연결입니다. PI는 웹사이트와 외부 서비스 간의 중개자 역할을 합니다. 집에서 음식 배달을 시키거나 외부 수도 서비스를 사용하려면 연결이 필요하듯, 웹사이트도 외부 데이터나 기능(API)을 가져오려면 연결해야 합니다.

    예를 들어, 날씨 정보를 웹사이트에 표시하려면 외부 날씨 API를 사용합니다. API를 통해 여러분의 집(웹사이트)은 외부 세계와 상호작용할 수 있습니다!

    API 작동 방식

    1. 클라이언트(Client):
      • API를 사용하는 프로그램 또는 사용자(예: 브라우저, 앱).
      • 데이터를 요청합니다. (예: 날씨 앱에서 현재 날씨 요청)
    2. API 요청(Request):
      • 클라이언트는 API의 특정 **엔드포인트(URL)**로 요청을 보냅니다.
      • 요청은 주로 HTTP 메서드를 사용합니다:
        • GET: 데이터를 가져옴.
        • POST: 데이터를 생성.
        • PUT: 데이터를 수정.
        • DELETE: 데이터를 삭제.
      • 예: GET https://api.weather.com/current?city=Seoul
    3. 서버(Server):
      • API 요청을 처리하는 시스템입니다.
      • 클라이언트의 요청을 확인하고, 필요한 데이터를 처리합니다.
    4. 응답(Response):
      • 서버는 요청에 대한 결과를 클라이언트에 반환합니다.
      • 주로 JSON 형식의 데이터를 반환합니다.
      • 예:json복사편집{ "city": "Seoul", "temperature": "15°C", "condition": "Sunny" }
    5. 클라이언트에서 처리:
      • 클라이언트는 응답 데이터를 사용해 정보를 표시하거나, 추가 작업을 수행합니다.
      • 예: 앱 화면에 “서울의 현재 날씨: 맑음, 15°C” 표시.

    API는 레스토랑의 메뉴와 주문 과정 이라고 보시면 됩니다.

    • 응답(Response): 완성된 요리를 제공.
    • 메뉴(API 문서): 선택할 수 있는 요리와 옵션(기능과 엔드포인트).
    • 주문(Request): 원하는 요리(데이터)를 요청.
    • 주방(Server): 요청을 처리하고 요리를 준비.

    간단 예시 (JavaScript로 REST API 호출)

    fetch('https://api.weather.com/current?city=Seoul')
      .then(response => response.json())  // 응답 데이터를 JSON으로 변환
      .then(data => console.log(data))    // 결과 출력
      .catch(error => console.error('Error:', error)); // 오류 처리
    

    위의 api 호출 예시 작동 방식 순서는 아래와 같이 진행 됩니다.

    1. fetch('https://api.weather.com/current?city=Seoul') : fetch 함수로 URL 요청을 보냄 → 서버에서 응답.
    (get 요청을 통해 데이터를 서버에 요청 하는 단계

    2. then(response => response.json()) : 응답 데이터를 JSON으로 변환
    (서버에서 변환된 응답은 response 객체로 전달되어, 응답이 온 데이터를 json 형식으로 변환. (JSON은 서버와 클라이언트 간 데이터를 주고받는 데 널리 사용되는 표준 형식입니다.response.json() 자체도 Promise를 반환하므로, JSON 데이터가 준비되면 다음 then으로 데이터를 전달합니다.)

    3. .then(data => console.log(data)) : 변환된 데이터를 then으로 처리 → 콘솔에 출력.
    dataresponse.json()으로 변환된 JSON 데이터를 의미합니다.이 데이터를 활용해 화면에 표시하거나 다른 작업을 수행할 수 있습니다.이 예시에서는 console.log(data)를 사용해 JSON 데이터를 브라우저 콘솔에 출력합니다.

    4. .catch(error => console.error(‘Error:’, error)); 오류 발생 시 catch로 처리
    네트워크 문제, 잘못된 URL, 또는 서버 응답 실패 등으로 인해 요청이 실패하면, catch 블록이 실행됩니다.error 객체에 오류 정보가 담겨 있으며, 이를 콘솔에 출력하거나 사용자에게 알릴 수 있습니다.

    1. 1. fetch 함수
      • 설명: HTTP 요청을 보낼 때 사용하는 함수입니다.
      • 역할:
        • https://api.weather.com/current?city=Seoul로 요청을 보내 서울 날씨 데이터를 서버에서 가져옵니다.
        • 기본적으로 GET 요청을 수행하며, URL에 쿼리 파라미터를 포함해 데이터를 요청합니다.
        • fetch비동기 함수로, Promise 객체를 반환합니다.
    2. GET 요청
      • 설명: 데이터를 서버에서 가져오는 HTTP 요청 방식입니다.
      • 역할:
        • 서버의 리소스를 읽어오기 위해 사용되며, 데이터를 변경하지 않습니다.
        • URL에 쿼리 파라미터(?city=Seoul)를 포함해 요청을 세부적으로 지정합니다.
        • 예: 웹페이지나 이미지 파일을 불러올 때 GET 요청이 사용됩니다.
    3. then 메서드
      • 설명: Promise가 성공적으로 해결된 후 실행됩니다.
      • 역할:
        • 이전 작업의 결과를 처리하며, 여러 then을 체인으로 연결해 작업을 순차적으로 실행할 수 있습니다.
        • 예: 데이터를 변환하고 화면에 표시하는 작업 처리.
    4. response.json() : response.json()은 Promise를 반환하며, 실제 데이터를 객체로 변환해 사용할 수 있도록 준비합니다.
      • 설명: 서버에서 반환된 응답 데이터를 JSON 형식으로 파싱합니다.
      • 역할: JSON(JavaScript Object Notation)은 서버와 클라이언트 간 데이터를 주고받는 데 널리 사용되는 형식입니다.

    📖 API 주요 용어 목록

    용어설명
    API (Application Programming Interface)애플리케이션이 서로 통신하고 데이터를 주고받는 인터페이스.
    EndpointAPI 요청을 받는 특정 URL. 예: https://api.example.com/data.
    Request클라이언트가 API에 데이터를 요청하는 작업. 예: GET, POST, PUT, DELETE.
    ResponseAPI가 요청에 대해 클라이언트에 보내는 데이터. 예: JSON 형식으로 반환.
    HTTP MethodAPI 요청의 작업 유형을 정의. 예: GET(조회), POST(생성), PUT(수정), DELETE(삭제).
    Status Code요청 결과를 나타내는 HTTP 코드. 예: 200 OK, 404 Not Found, 500 Internal Server Error.
    JSON (JavaScript Object Notation)API 요청 및 응답 데이터의 일반적인 형식. 사람이 읽기 쉽고 기계가 처리하기 쉬움.
    Header요청과 응답에 포함된 메타데이터. 예: 인증 토큰, 콘텐츠 타입.
    Query ParameterURL에 포함된 추가 데이터. 예: ?key=value.
    AuthenticationAPI 접근 권한을 확인하는 과정. 예: API 키, OAuth.
    Rate Limiting일정 시간 내에 클라이언트가 보낼 수 있는 요청 수를 제한하는 메커니즘.
    Webhook특정 이벤트 발생 시 API가 클라이언트에 데이터를 푸시하는 방식.
    REST (Representational State Transfer)API 설계 아키텍처 스타일로, 리소스를 URL로 나타냄. RESTful API로 구현됨.
    GraphQLAPI를 위한 쿼리 언어. 필요한 데이터만 요청하고 받을 수 있음.
    SDK (Software Development Kit)특정 API를 쉽게 사용하도록 제공되는 라이브러리 및 도구 모음.
    CORS (Cross-Origin Resource Sharing)도메인 간 요청을 허용하거나 제한하는 보안 정책.

    프로그래밍 언어 분류

    1. HTML과 CSS: 기본적인 구조와 스타일
      • 프로그래밍이라기보다는, 웹 콘텐츠를 설계하고 꾸미는 도구로 이해할 수 있습니다.
      • 초보자도 쉽게 시작 가능하며, 웹 개발의 기초를 다질 수 있습니다.
    2. JavaScript: 프로그래밍의 첫 단계
      • JavaScript는 웹을 동적으로 만드는 실제 프로그래밍 언어입니다.
      • 조건문, 반복문, 함수 등 프로그래밍의 핵심 개념을 JavaScript에서 배우게 됩니다.
    3. API: 고급 활용
      • 프로그래밍 언어와 도구로 기본기를 다진 후, API를 활용해 외부 서비스와 연결하는 기술을 익힙니다.
      • 이는 실제 서비스 개발 단계에서 많이 활용됩니다.

    어떻게 배우면 좋을까?

    1. 기초부터 차근차근:
      • HTML → CSS → JavaScript 순으로 학습.
      • 각각의 역할과 기능을 이해하며, 간단한 웹페이지부터 만들어봅니다.
    2. 실습과 프로젝트:
      • 간단한 HTML, CSS로 정적인 페이지를 만들고, JavaScript로 동작을 추가.
      • API를 활용해 실시간 데이터(예: 날씨 정보) 표시 같은 프로젝트를 시도.
    3. 단계적 확장:
      • 초보 단계에서 HTML, CSS, JavaScript를 배우고, 점점 API, 서버 개발, 데이터베이스로 확장.

    결론

    도메인과 호스팅은 웹사이트를 인터넷에서 사용할 수 있도록 하는 필수 개념입니다. 호스팅과 도메인을 설정하고, HTML, CSS, JavaScript 로 웹 개발의 시작점이 됩니다.
    기초를 탄탄히 다지면서, 실제 프로젝트를 통해 학습하면 더 효과적으로 이해할 수 있습니다!

    Content View