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까지 설계해야할 때는 해당 부분에 대한 이해가 없다면 굉장히 난항을 겪을 것이기 때문에 기본 원리를 철저히 알아두도록 하자!

Author And Source

이 문제에 관하여(패스트캠퍼스 메가바이트스쿨 Day6 (2주차 월요일 - Web Programming 2)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ctaaag/패스트캠퍼스-메가바이트스쿨-Day6-2주차-월요일-Web-Programming-2

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

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