Day 06 - 웹Web의 이해/구조, 웹 3요소/문법, 실습

이유승·2024년 11월 5일
타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 5기
0

데브코스 웹 풀스택 개발 5기

목록 보기
6/36

* 프로그래머스, 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 5기 강의 수강 내용을 정리하는 포스팅.

* 원활한 내용 이해를 위해 수업에서 제시된 자료 이외에, 개인적으로 조사한 자료 등을 덧붙이고 있음.

1. 웹Web의 이해

인터넷(Internet)

  • 전 세계적으로 연결된 네트워크의 집합체.

  • 컴퓨터, 서버, 라우터 등의 여러 장치들이 서로 데이터를 주고받을 수 있게 해주는 인프라.

  • 물리적 네트워크 사이에서 통신 수단을 통해서 다양한 서비스를 수행할 수 있다.



웹(Web)

  • 월드 와이드 웹(World Wide Web)의 줄임말. 인터넷 위에서 운영되는 하나의 서비스.

  • 인터넷을 통해 하이퍼텍스트 문서를 주고받으며 사람들이 쉽게 정보를 검색하고 접근할 수 있게 해주는 서비스.

  • 브라우저를 통해, 하이퍼텍스트로 이루어진 웹 문서에서 다양한 콘텐츠에 접근할 수 있다.

웹Web의 구조

  • 클라이언트-서버 구조.
    - 클라이언트(Client): 웹 브라우저(크롬, 파이어폭스, 사파리 등)를 통해 웹에 접근하는 사용자의 컴퓨터나 모바일 기기.
    - 서버(Server): 웹 페이지와 관련된 콘텐츠를 저장하고 있는 컴퓨터 시스템.

  • HTTP/HTTPS 프로토콜 방식으로 데이터를 교환. 관련 내용 포스팅 참조.



웹Web 개발 직무

프론트엔드:

사용자가 직접 보는 화면이나 인터페이스 부분을 담당. 브라우저에서 실행되는 HTML, CSS, JavaScript가 프론트엔드.

백엔드:

웹 애플리케이션의 데이터 처리, 서버 로직 등을 담당. 데이터베이스와 서버 측 스크립트를 통해 클라이언트 요청에 필요한 정보를 처리하여 프론트엔드에 전달.

데이터베이스:

웹 애플리케이션이 데이터를 저장하고 관리하기 위한 시스템. 서버는 데이터베이스와 연결하여 사용자가 요청하는 데이터를 조회하거나 업데이트할 수 있다.



프론트엔드 - 백엔드 - 데이터베이스 관계 이해

가상의 온라인 쇼핑몰에서 제품을 검색한다고 가정해보자.

  • 사용자가 온라인 쇼핑몰 홈페이지에 접속하여 제품을 검색한다.
    - 검색창에 "노트북"을 입력하고 "검색" 버튼을 클릭한다.
    - 브라우저에서는 프론트엔드 코드를 통해 백엔드 서버에 "노트북"에 대한 정보를 요청.

  • 프론트엔드는 JavaScript를 사용하여 이 요청을 HTTP 요청(예: GET 요청) 형식으로 백엔드 서버에 전송한다.

  • 백엔드는 이 요청을 받으면 해당 검색어와 관련된 제품 정보를 찾기 위해 데이터베이스와 상호작용한다.
    - 백엔드는 클라이언트로부터 받은 요청을 해석하여 필요한 쿼리를 데이터베이스에 전송.

  • 백엔드가 보낸 쿼리를 받은 데이터베이스는 "노트북"과 관련된 제품 정보를 검색한다.
    - 조회된 제품 목록을 백엔드로 반환한다.

  • 백엔드는 데이터베이스에서 받은 제품 정보를 JSON 형식으로 변환하여 프론트엔드로 응답한다.

  • 프론트엔드는 서버로부터 받은 제품 목록 데이터를 해석하여 HTML과 CSS를 사용해 화면에 제품 목록을 표시한다.



2. 웹Web 3요소 (HTML, CSS, Javascript)



HTML (HyperText Markup Language):

  • 웹 페이지의 기본 구조와 콘텐츠를 정의하는 마크업 언어. HTML 태그를 사용하여 제목, 본문, 이미지, 링크 등을 지정한다.

CSS (Cascading Style Sheets):

  • 웹 페이지의 시각적인 스타일을 정의하는 스타일 언어. CSS를 사용하여 색상, 글꼴, 레이아웃 등을 설정해 웹 페이지를 더욱 보기 좋게 만든다.

JavaScript:

  • 웹 페이지에 동적인 기능을 추가하는 프로그래밍 언어. 버튼을 클릭했을 때 상호작용, 애니메이션, 데이터 처리 등을 가능하게 해준다.



HTML, CSS, Javascript의 관계

  • HTML은 웹 페이지의 구조 등을 정의.
  • CSS는 HTML의 디자인과 스타일을 적용.
  • Javascript는 HTML과 CSS로 만들어진 페이지의 동적인 기능을 구현.



IDE - 통합 개발 환경Integrated Development Environment

  • 프로그래밍에는 수많은 도구나 기능을 필요로 한다. 코드 편집기, 디버깅 도구, 컴파일러 및 인터프리터, 버전 관리, 빌드 도구, 플러그인 및 확장 도구 등등..

  • 통합 개발 환경Integrated Development Environment은 이런 프로그래밍을 위한 도구와 기능을 한데 모아 개발자들이 편리하게 코드를 작성하고 관리할 수 있도록 도와주는 소프트웨어를 뜻한다.

VSCode? IntelliJ? Eclipse?

  • 여러 회사들이 각각의 필요와 상황에 맞는 IDE들을 개발하여 시장에 출시하였다.
    - VSCode (Visual Studio Code): 거의 모든 언어를 지원 / 확장성과 가벼운 성능 / 직관적이고 사용자 친화적 UI.
    - IntelliJ IDEA: Java를 중심으로 Kotlin, Scala 등 JVM 기반 언어에 특화 / Java와 Kotlin 개발에 매우 강력하며, 코드 분석과 자동 완성 기능
    - Eclipse: 기본적으로 Java에 최적화, C++, PHP 등 다양한 언어도 플러그인을 통해 지원 / 전통적인 Java 개발 환경

  • 웹 개발이라고 하면 통상적으로 VSCode를 사용한다. 간편하고 가벼운데다 자체적인 확장 프로그램 UI로 풍부한 플러그인 환경을 편하게 접할 수 있기 때문.



HTML, CSS 문법

HTML 문법



CSS 문법



3. 웹 프로젝트 실습 - 기본

  • HTML, CSS만 가지고 간단한 로그인 UI 구현해보기.

  <form class="login-container">
    <h2>Login</h2>
    <div class="form-group">
      <input type="text" id="username" placeholder="Username">
    </div>
    <div class="form-group">
      <input type="password" id="password" placeholder="Password">
    </div>
    <button class="login-btn">Login</button>
  </form>

  • form 태그를 사용, CSS 적용 대비를 위한 클래스 이름들이 설정된 간단 UI.

  • UI 제목, 입력 필드와 버튼으로 구성되어 있음.

  • 입력 필드는 input 태그로 이루어진 2개의 요소. 하나는 type="text"로 사용자명을 입력받기 위한 필드이며, 다른 하나는 type="password"로 비밀번호 입력 시 문자가 가려지도록 조치.

profile
이유승
프론트엔드 개발자를 준비하고 있습니다.
이전 포스트

Day 05 - 협업 Tool, Trello, Jira, Notion, 애자일 필수요소

다음 포스트

Day 07 - CSS 개념, 적용법, Javascript 개념, 기초사용법

0개의 댓글