패스트캠퍼스 메가바이트스쿨 Day6 (2주차 월요일 - Web Programming 2)

Today Topic : Web Programming 2


🗝 Keywords

✅ JS와 Web

✅ JS의 Server 활용(node.js)

✅ Html 태그 사용의 중요성

✅ Html outline

✅ CSS가 중요한 이유



1. JS와 Web

🚀 자바스크립트가 웹에서 동작하는 방식 (1)

  • script태그를 통해 html 요소 값을 찾아 textContent라는 프로토타입 함수가 작동하는 코드 및 과정

🚀 자바스크립트가 웹에서 동작하는 방식 (2)

  • 렌더링 엔진 : 돔을 처리하는 엔진(doctype) 토큰 발행 html,css
  • js 엔진 : script 태그에 있는 것을 작동하는 토큰 발행

🚀 자바스크립트가 웹에서 동작하는 방식 (3)

  • js엔진이 자바스크립트 코드로 움직이는 단계
  • var a = 5;라는 코드를 입력하면 각각의 요소들을 쪼개서 UTF-8 사전을 이용해 2진수 형태로 저장
  • lexer로 자신의 규칙을 이용해 어떤 기호인지 기초적 의미 부여
  • ast 객체 : parser는 어셈블러 형식으로 수행하는데 이 때 트리구조를 사용함
  • 어셈블러 : ast를 이용해 어셈블러 형식으로 번역됨.
  • 머신코드 : cpu의 계산회로를 구동시킴
  • ecma script를 통해서 js엔진이 인간을 위한 기호적 표현을 cpu를 위한 기계적 명령으로 번역하여 작동시키는 과정으로 만드는 것
  • 기계명령으로 바꾸는 중간단계를 큰 트리구조(각 항목별로 묶는다)로 만든다


2. JS의 Server활용(node.js)

🚀 JS 엔진의 OS 작동

  • 자바스크립트는 브라우저 안에서 동작하도록 시작됐지만, js엔진이 바깥으로 나오면서 즉, os에 직접적으로 명령을 하면서 html없이 다양하게 사용할 수 있는 언어가 되었음.
  • 이로 인해서 js엔진으로 node.js를 사용할 수 있게 됨. 이로 인해서 모던한 자바스크립트를 사용할 수 있게 되었다고 봐도 무방함.
  • 일렉트론을 통해 설치하는 프로그램을 자바스크립트로 짜는 등의 행동이 가능함

JS로 로컬 서버만들어서 웹페이지 만들기

const http = require('http');
const fs = require('fs');
function mySet(req,res) {
    let url = req.url ;
    if (req.url === '/') {
        url = '/index.html';
    } 
    if (req.url === '/') {
        url = '/about.html';
    } 
    res.writeHead(200);
    let htmlFile = fs.readFileSync(__dirname + url);
    res.end(htmlFile);
};
var app = http.createServer(mySet);
app.listen(8080);
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
    <title>About</title>
</head>
<body>
    <h1>첫 페이지입니다.</h1>
    <img src='./door.png'>
</body>
</html>

🚀 JS로 서버만들기

  • 위와 같이 만들면 자바스크립트 서버를 자체적으로 만들 수 있음
  • node로 위의 자바스크립트를 실행하고, localhost : 8080 으로 접속하면 자바스크립트 내의 서버 활성화
  • 다만, 이런식으로 모든 서버를 하나씩 구동하기에는 시간이 많이 걸리니 웹페이지 서버 툴을 사용함
  • 그렇다고 해당 웹 서버가 어떤 형태로 만들어지는지 모르면 안됨


3. Html 태그 사용의 중요성


🚀 Html 태그 사용의 중요성

  • html의 태그는 잘 고민해서 사용해야함
  • 같은 h1 태그이더라도 검색엔진에 무엇을 노출시킬지 전략에 따라서 다르게 사용할 수 있음.
  • 돈이 되는 것은 h1, 돈이 안되는 것은
  • 프론트엔드 개발자는 psd->html로 옮기기만 하는 것이 아님
  • 데이터를 뿌리기 좋게 html 구조를 짜고, 의미화를 잘 할 수 있는 구조인지가 굉장히 굉장히 중요하다.
  • 그래서 html은 프론트엔드를 하면 할수록 어렵다.

🚀 Html내의 중요도에 따른 태그 구분

  • header,main,footer는 영향을 안주고
  • section, article,aside,nav는 섹셔닝 태그로서 의미구조에 영향을 미침


4. Html Outline

🚀 Naver, Toss의 Html outline 비교

  • html outline은 크롬 브라우저의 HTML5 Outliner 프로그램 설치 후 웹페이지를 보면 아웃라인이 어떻게 적용되어있는지 볼 수 있음
  • outline이 중요한 이유는 무엇에 따라서 html에서 목차로 적용하는지 알 수 있고, 이는 곧 html 구성요소 중 우선순위는 무엇에 있는지
  • 검색엔진은 무엇을 중심으로 할 것인지 구성할 수 있기 때문이다.

🚀 실습) 아웃라인을 고려한 Html 구조 설계하기

🚀 내가 짠 코드 리뷰

  • header,main,aside,footer 구분을 할 것.
  • h1을 검색엔진 상위노출을 위해 다른 것으로 할 수 있지만, 그럴 경우에는 나머지 태그들에 대해서 잘 정리를 해줘야함.
  • header와 footer는 웹페이지 내에 여러개로 만들어도 상관 없음. 한 묶음안에 header가 들어가기 보다는 다른 묶음들에서 header,footer 사용이 좋음
  • html 구조를 생각할 때는 1)seo 노출 2)협업 3)css 순서대로 고려해야함. css를 우선 고려할 필요는 없음. 왜냐? css는 어떻게든 만들 수 있기 때문. 그렇기에 css 실력이 중요한 것.


5.CSS가 중요한 이유

🚀 CSS 개발자도구로 확인하기

  • dom은 html이 만들고, css는 cssom을 만들어냄
  • dom은 프로퍼티, css는 computed에서 확인이 가능함.
  • 항상 웹페이지 만들고 개발자도구로 확인하는 습관을 들일 것!

🚀 CSS적인 사고하기

  • 프론트엔드 개발자는 1)css 매커니즘을 잘 이해하는 것 2) 상자를 머릿속으로 그릴 줄 아는 것. 두 가지의 능력이 필요함.
  • 오랜경력을 통해서 감으로 하는 것과, 정확하게 어떤 동작원리로 CSS를 만들어낼 수 있는지 아는 것은 굉장히 다름
  • 예를 들어, div 태그를 만들었을 때 생기는 태그의 여백은 왜? 16픽셀인지, 그런데 개발자도구로 확인하면 19픽셀인데 왜그러는지 아는가?
  • 현업에서 서비스를 a부터 z까지 설계해야할 때는 해당 부분에 대한 이해가 없다면 굉장히 난항을 겪을 것이기 때문에 기본 원리를 철저히 알아두도록 하자!

좋은 웹페이지 즐겨찾기