인생은 속도가 아니라 방향이다

Language

[Web] Mac에서의 웹 프로그래밍 개발환경 구성과 이해

Joonfluence 2021. 10. 17.

서론

 

대상독자

  • 큰 맥락에서 개발 환경을 이해하고 싶은 웹 프로그래밍 초급/입문자.
  • 웹 개발에 익숙하지만 각각 수행하는 역할을 자세히 알고 싶은 중급자.

오늘의 학습 목표

  • 서버와 클라이언트 구조를 파악한다.
  • 기본적인 HTML 구조를 이해한다.
  • HTML 파일과 CSS, Javascript 파일을 연동한다.
  • 웹 서버와 WAS의 차이점을 이해한다.

본론

 

개발환경 구축하기 (For Mac)

Web Browser

웹 프로그래밍 개발환경을 구축하기 위해, 가장 먼저 필요한 소프트웨어는 바로 웹 브라우저입니다. 저희에게 익숙한 크롬, 인터넷 익스플로러 등입니다. 바로 이 웹 브라우저들이 웹 페이지의 문서 파일들을 읽어 사용자가 확인할 수 있도록 화면에 띄워주는 역할을 합니다.

현재 세계에서 가장 많은 점유율을 차지하고 있는 것이 크롬이므로, 크롬을 설치해보도록 하겠습니다. 빠르게 설치하기 위해, 패키지 매니저인 brew를 사용하겠습니다. 만약 brew가 무엇인지 모르거나, 설치하지 않으신 분들은 해당 페이지를 참고 바랍니다.

brew install --cask google-chrome

Text Editor

다음으로 설치해볼 프로그램은 텍스트 에디터입니다. 텍스트 에디터는 프로그래밍 생산성을 높여줄 수 있는 좋은 도구입니다. 각종 단축키 설정을 통해 파일과 폴더를 쉽게 생성할 수 있고 프로젝트 단위로 관리하기에도 편리합니다. 또 코드 자동완성 기능을 제공해, 사용자가 손쉽게 개발을 할 수 있도록 도움을 줍니다.

brew install --cask visual-studio-code

자, 성공적으로 설치되셨나요?

기본 문서구조 분석

프로그래밍에 앞서, 우리가 먼저 알아야 할 점들이 있습니다. 바로 웹 페이지가 어떻게 구성되는지 알아야 합니다. 웹 페이지는 HTML, CSS, Javascript 파일로 구성되는데요, 이와 같은 요소들을 웹 페이지의 화면을 구성한다는 점에서 프론트엔드의 기능을 수행한다고도 말합니다.

가장 먼저 살펴볼 것은 HTML 입니다. HTML은 웹의 정보를 담습니다. 또한 문서의 구조를 표현하는 역할을 하는 마크업 언어이기 때문에, 여타 프로그래밍 언어처럼 문법적인 제약이 존재하진 않습니다. 그래서 오류가 있어도 화면에서 해당 내용을 확인할 수 있다는 장점이 존재합니다. 다만 웹 프로그래머들은 규범적으로 웹 표준을 따를 것을 요구 받는데요, 웹 표준이란 웹 접근성과 시맨틱 웹 등을 따르는 표준 웹 환경을 말합니다.

쉽게 말하자면, 해당 웹 사이트의 사용자와 웹 사이트의 내용을 분석하는 웹 브라우저와 검색엔진에게 필요한 정보를 제공하는 역할을 합니다. HTML을 얼마나 친절하게 정보를 작성하느냐에 따라, 해당 사이트가 검색어 결과 목록 상위에 위치하기도 합니다.
자세한 설명은 실제 웹 프로젝트 파일들을 만들면서 진행하도록 하겠습니다. 간단한 CLI(Command Line Interface) 명령어를 통해, 폴더 및 파일을 생성하겠습니다.

mkdir web-project-sample
cd web-project-sample
touch index.html index.css index.js

먼저 기본적인 HTML5 문서를 살펴보면서, 각각의 역할에 대해 알아보도록 하겠습니다.

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Document</title>
  </head>
  <body>
    HTML 파일입니다.
  </body>
</html>
  • DOCTYPE html은 해당 문서가 HTML5 스펙을 따른다는 것을 나타냅니다.
  • html lang 설정은 실제 데이터와는 무관합니다만, 검색 엔진에게 해당 문서가 주로 어떤 언어로 작성됐는지 알려줍니다. 예를 들어 lang="en" 속성으로 설정된 경우, 한국어 브라우저에서 영어로 작성된 사이트를 보면 '이 페이지를 번역하시겠습니까?'와 같은 메세지가 출력되는 것을 볼 수 있습니다.
  • head 태그에는 각종 meta 태그가 위치하며 meta 태그란 브라우저에는 표시되지 않는 각종 정보들을 명시해줄 때 사용됩니다.
  • meta charset="UTF-8"은 해당 문서의 문자 인코딩 방식이 UTF-8이란 것을 나타냅니다. 이에 대해서 자세하게 알아보려면, 다국어 지원에 필요한 유니코드와 문자열 인코딩에 대해 알아보시면 좋을 것입니다.
  • meta name="viewport" content="width=device-width"란 디바이스의 크기에 따라 웹 페이지 사이즈를 조절하겠다는 의미입니다만, 당연하게도 자동으로 처리되는 것은 아닙니다. 이에 대해서 자세하게 알아보려면, 반응형 웹에 대해 알아보시면 좋을 것입니다.
  • title 태그는 검색어 결과 시, 보이는 제목 부분을 의미합니다.
  • body 태그는 문서의 내용 부분이 위치합니다.

기타 파일 연동하기

<head>
  <!-- 위 내용과 일치합니다 -->
  <link rel="stylesheet" href="index.css" />
</head>

CSS 파일은 head 태그 안에 link 태그의 href 속성으로, HTML 파일과 연동할 수 있습니다. 이는 HTML 파일의 디자인을 담당합니다. 글자 크기 및 색상 지정, 배경 이미지 등등 여러 효과들을 줄 수 있습니다.

<body>
  <script src="index.js"></script>
</body>

JS 파일은 body 태그 아래에 위치시키며, 이는 script 태그를 통해 HTML 파일과 연동할 수 있습니다. Javascript는 문서에서의 동작을 담당합니다. 예를 들어, 쇼핑몰 사이트에서 볼 수 있는 캐로젤(Carousel)이 그러할 것입니다.

이것으로 웹 페이지를 구성하는 파일들을 연동하는 방법에 관하여, 살펴보았습니다. 다음으로는 node.js를 활용해, 해당 파일들을 전송해줄 실제 웹 서버를 구축해보도록 하겠습니다.

로컬 웹서버와 연동하기

mkdir server
cd server
touch app.js

이를 위해, 다음 명령어들을 실행해주고 기존 파일들은 client 폴더로 옮겨줍니다. 그럼 아래와 같은 구조로 프로젝트가 변경됩니다.

├── client
│   ├── index.css
│   ├── index.html
│   └── index.js
└── server
    └── app.js

먼저, 앞서 화면을 구성하기 위해 생성했던 HTML, CSS, Javascript 파일들을 합쳐 정적파일(static file)이라고 말합니다. 이렇게 이름 붙인 까닭은 서버 요청과 관계 없이, 동일한 내용의 파일이 전송되기 때문입니다.

본격적으로 Node.js으로 클라이언트 폴더에 존재하는 정적파일들을 브라우저 화면에서 띄우는 작업을 진행하겠습니다. 한가지 알아둬야 할 점은 이 때 생성된 웹 서버는 바로 여러분의 컴퓨터라는 점입니다. 실제라면, 아마존에 등록된 클라우드 서버이거나 회사의 서버용 컴퓨터가 될 것입니다.
포트는 웹 서버용 포트번호인 8080 (혹은 80)을 사용하겠습니다.

// app.js

var http = require("http");
var fs = require("fs");
var path = require("path");

const CLIENT_DIRECTORY = "../client";

http
  .createServer(function (request, response) {
    console.log("request starting...");

    var filePath = CLIENT_DIRECTORY + request.url;

    if (request.url === "/") {
      filePath = `${CLIENT_DIRECTORY}/index.html`;
    }

    var extname = path.extname(filePath);
    var contentType = "text/html";
    switch (extname) {
      case ".js":
        contentType = "text/javascript";
        break;
      case ".css":
        contentType = "text/css";
        break;
    }

    fs.readFile(filePath, function (error, content) {
      if (error) {
        if (error.code == "ENOENT") {
          response.end("Not Found Error");
        } else {
          response.writeHead(500);
          response.end(
            "Sorry, check with the site admin for error: " +
              error.code +
              " ..\n"
          );
          response.end();
        }
      } else {
        response.writeHead(200, { "Content-Type": contentType });
        response.end(content, "utf-8");
      }
    });
  })
  .listen(8080);

console.log("Server running at http://127.0.0.1:8080/");

위 코드의 모든 내용을 이해하실 필요는 없습니다. 중요한 점은 서버에선 정적 파일의 경로를 파악해, 해당 파일을 요청에 대한 응답으로 전송하고 있다는 점입니다.

http://localhost:8080/

주소창에 위와 같은 URL을 입력하면, HTTP 네트워크를 통해 서버로부터 응답 받은 화면을 볼 수 있습니다. 아래와 같은 정보는 개발자 도구 - 네트워크 탭에서 확인할 수 있습니다.

이것으로 아래와 같이, 기본적인 클라이언트 - 서버 구조가 완성됩니다.

반응형
저작자표시 비영리

'Language' 카테고리의 다른 글

[WEB] 왜 웹 페이지를 반응형으로 디자인 해야 할까?  (0) 2020.09.10
[WEB] 개인 노트북으로 웹 서버를 운영할 순 없을까?  (0) 2020.06.07

댓글

티스토리툴바