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