패스트 캠퍼스 MGS 3기 - 4월 18일

40118 단어 패스트 캠퍼스JavaScriptTILhtmlCSSCSS

💡 Keyword

  • Javascript의 함수
  • Node.js를 이용한 서버 구축
  • HTML 마크업



1. Javascript

구조적인 객체를 정적으로 찍어내는 html과는 달리 js는 데이터에 대한 반복, 비교, 평가, 저장 등 일련의 일들을 CPU에 명령할 수 있는 다양한 표현력을 가지고 있다.

함수

프로그래밍에서 함수는 코드를 담는 그릇이라고 생각하면 쉽다. 순차적으로 실행되는 코드 중 일부를 덜어서 함수로 빼놓고 실행시키고 싶을 때 실행할 수 있다.

👩‍💻 예제

<!DOCTYPE html>
<html lang="ko">
<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">
  <title>Document</title>
</head>
<body>
  <input type="text" />
  <button>확인</button>
  <p>안녕하세요.</p>
  <script>
    const input_El = document.querySelector('input');
    const button_El = document.querySelector('button');
    const p_El = document.querySelector('p');
    
    // 버튼에 'click'을 감지하는 장치 만들기
    // 버튼에 어떤 일('click')이 일어났을 때, 어떤 함수(할일)를 실행할 것인지
    button_El.addEventListener('click', 할일);

    function 할일() {
      // input에 접근해 값을 가져와서 <p>에 넣어주기
      p_El.textContent = input_El.value + '님 안녕하세요.';
    }
  </script>
</body>
</html>

👉 실행 결과

🤔 const, let, var?

  • const: 변하지 않을 것들
  • let, var: 변할 수 있는 것들
  • const를 사용할 수 있는 것들에는 최대한 사용하는 것이 좋다.

Node.js

브라우저의 주소창에 url형식의 요청을 보내면 그에 맞는 html을 보내주는 프로그램 즉, 서버 프로그램을 만들 수 있다.

👩‍💻 예제

루트 폴더에 code라는 폴더를 생성하고(c:/code), html과 js를 이용해 서버 프로그램을 만들어 본다.

1. 파일 생성

index.html 파일 생성

<!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>Document</title>
</head>
<body>
  <h1>첫 페이지입니다.</h1>
</body>
</html>

server.js 파일 생성

// http 프로그램의 메모리 주소를 받아서 지정
const http = require('http');
const fs = require('fs');

// 인자로 `요청, 응답`을 받음
function mySet(request, response) {
  let url = request.url;
    if (request.url === '/') {
      url = '/index.html'
    }
    // 약속되어 있는 메시지를 남김(성공하면 200, 실패하면 404)
    response.writeHead(200);
    var htmlFile = fs.readFileSync(__dirname + url);
    response.end(htmlFile);
  };
  const app = http.createServer(mySet);
  app.listen(8080);

2. 서버 실행

VSCode의 터미널에서 서버를 실행한 후, 주소창에 localhost:8080을 입력하여 접속한다.

$ node server.js

👉 실행 결과

+) About 페이지 추가

about.html 파일 생성

<!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>About 페이지 입니다.</h1>
  <img src="./door.png" />
</body>
</html>

server.js 파일에 코드 추가

if (request.url === '/about') {
      url = '/about.html'
    }

👉 실행 결과

2. HTML

html 태그의 규칙과 웹페이지 구조 파악에 대하여 알아보자.

<h1>~<h6>

  • 사이트의 비즈니스 방향에 따라 제목 태그를 사용하는 것이 중요하다.
  • 웹사이트의 기획 목적과 마케팅 전략에 따라 검색이 잘 되어야 하는 제목을 <h1>~<h6>까지 마크업 해서 사용할 수 있다. 이는 SEO 전략에 포함되어 있다.
  • 제목 태그는 의미의 구조를 표현하므로 검색 엔진이 그 문서의 목차처럼 활용할 수 있다.

👉 따라서 psd->html 단순히 똑같이 옮기는 작업이 아니라!! 데이터를 출력하기 좋도록, 검색이 잘 되도록 html를 구성하는 것이 정말 중요하다.

<div>
	<h1>네이버 캐스트</h1>
	<h2>오픈 캐스트</h2>
	<p>이것은 오픈 캐스트의 내용입니다.</p>
	<h3>게임 캐스트></h3>
	<p>이것은 오픈캐스트의 내용입니다.</p>
	<h3>자동차 캐스트></h3>
	<p>이것은 자동차캐스트의 내용입니다.</p>
	<h3>인테리어 캐스트></h3>
	<p>이것은 자동차캐스트의 내용입니다.</p>
</div>


<div>

<div>는 <header>, <main>, <footer>, <section>, <article>, <aside>, <nav> 태그로 세분화된다.

  • 의미구조에 영향을 미치지 않는 태그: <header>, <main>, <footer>
  • 의미구조에 영향을 미치는 태그: <section>, <article>, <aside>, <nav>

👩‍💻 예제

다음과 같은 블로그의 html 코드를 작성하며 웹페이지 구조에 대해 파악하자. 용도에 알맞은 태그를 사용하자!

💡 tip:

  • <main>은 한 번만 사용할 수 있으며, <header>, <footer>는 여러 번 사용할 수 있다.
  • html 작성 시 우선순위는
    검색 엔진 최적화 > 데이터 출력이 쉬운 구조 > css

<body>
  <div class="wrap">
    <header>
      <h1>SimpleBits<sup>do your self</sup></h1>
      <nav>
        <h2>Main Navigation</h2>
        <ul>
          <li><a href="">HOME</a></li>
          <li><a href="">WORK</a></li>
          <li><a href="">BOOKS</a></li>
          <li><a href="">ABOUT</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <article>
        <header>
          <h2>Sass For Web Designers</h2>
        </header>

        <div>
          <p>
            I’m dusting off this ol’ website to announce that, ...
          </p>
        </div>

        <footer>
          <time datetime="2001-05-15">Nov 13, 2013</time>
          <div class="tag">
            <a href="">books</a>
            <a href="">css, sass</a>
          </div>
        </footer>
      </article>
    </main>

    <aside>
      <h2>side contents</h2>
      <h3>About SimpleBits</h3>
      <h3>Books by Dan</h3>
      <h4>Archives</h4>
      <h4>Elsewhere</h4>
      <h4>Ads via the Deck</h4>
      <h4>What I’m Working On</h4>
      <h4>Latest Projects</h4>
    </aside>

    <footer>
      <p>HANDCRAFTED PIXELS & TEXT FROM SALEM, MASSACHUSETTS.</p>
      <p>COPYRIGHT © 1999-2014 SimpleBits LLC. ALL RIGHTS RESERVED. HOSTED BY (mt) Media Temple.</p>
    </footer>
  </div>
</body>

3. CSS

  • html이 DOM을 만든다면, css는 SOM을 만든다고 볼 수 있다.
  • 브라우저 기본 설정을 초기화하는 reset 파일을 가지고 있는 것이 좋다.



오늘의 한마디...👏

주간 회고 후 조원들에게 받은 피드백(내 생각이나 경험이 드러나게 글을 쓰기)을 신경써서 글을 써보려고 노력하는데 쉽지 않은 것 같다..🥲
그리고 생각보다 html과 css에 대해서 모르고 있던 내용이 많다는 걸 새삼 깨달았다. 특히 웹표준을 지키거나 여러 사항들을 고려하여 마크업하는 것은 많은 연습이 필요할 것 같다는 생각이 들었다.

참고

  • mdn 문서를 자주 활용하여 개념을 익혀두자!!
모두를 위한 딥러닝 시즌2 - PyTorch Lab 3
[CS] 메모6. 타이머

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage