Node 란?

Node 란?

 

Node 는 대규모 프로젝트를 진행하기엔 적합하지 않고, 소규모 프로젝트에 적합하다.

 

json : key 와 value 의 문법으로 이루어진 데이터

 

 

 

 

 

HTTP 란?

HTTP 란?

HTTPS : S (Secure) 이 붙음으로서 암호화가 들어간 형태

 

 

 

 

 

IP 란?

ip 란?

 

 

 

 

 

Server & Client 란?

Server & Client 란?

 

 

 

 

 

정적 웹 서비스와 동적 웹 서비스

정적 웹 서비스와 동적 웹 서비스

728x90

'BE > Node.js' 카테고리의 다른 글

[Node.js] 쿠키  (0) 2024.04.01
[Node.js] EJS_ router 분리, controller 분리, sevice 분리, views 분리, dao 분리, 서버 별칭 사용  (0) 2024.03.29
[Node.js] EJS 설치, 변수 전달하기, EJS 에서 for 문 사용  (0) 2024.03.28
[Node.js] Node.js 실행하기, express 설치, supervisor 설치  (0) 2024.03.28
[Node.js] Node.js 설치  (0) 2024.03.28

 

 

 

 

 

Node.js 설치

 

- Node.js 다운로드 -

 

Node.js — Download Node.js®

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

 

v20.12.0(LTS) 버전으로 다운로드

 

더블클릭 후 next 눌러서 진행하다가 install

 

Finish 클릭

 

cmd 창 열어서 설치된 node 의 버전 확인

728x90

'BE > Node.js' 카테고리의 다른 글

[Node.js] 쿠키  (0) 2024.04.01
[Node.js] EJS_ router 분리, controller 분리, sevice 분리, views 분리, dao 분리, 서버 별칭 사용  (0) 2024.03.29
[Node.js] EJS 설치, 변수 전달하기, EJS 에서 for 문 사용  (0) 2024.03.28
[Node.js] Node.js 실행하기, express 설치, supervisor 설치  (0) 2024.03.28
[Node.js] Node, HTTP, IP 란?  (0) 2024.03.28

 

 

 

 

 

datepicker(), draggable()

- jQuery UI 사이트 -

 

jQuery UI

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQue

jqueryui.com

 

jquery-1.12.1-ui.js
0.50MB

 

jquery 의 ui 기능을 추가로 script 로 선언해야 사용할 수 있는 메소드

아래 코드에 보면 추가로 선언해놓은 것을 볼 수 있으며, jquery 보다 아래에 코드로 선언해야 오류가 발생하지 않는다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="jquery-1.12.1-ui.js"></script>
    <script>
      $(() => {
        $("#date").datepicker();
        $("#drag").draggable();
      });
    </script>
    <style>
      #drag {
        width: 200px;
        height: 100px;
        background: red;
        border-style: solid;
      }
    </style>
  </head>
  <body>
    <div id="drag"><h3>Drag</h3></div>
    <input type="date" /><br />
    <input type="text" readonly placeholder="날짜 선택" id="date" />
  </body>
</html>
코드 실행
728x90

'FE > JavaScript' 카테고리의 다른 글

[JavaScript] 답글 달기 기능 만들기  (0) 2024.03.27
[JavaScript] jquery - slideDown, slideUp 메소드  (0) 2024.03.27
[JavaScript] append, html  (0) 2024.03.27
[JavaScript] animate  (0) 2024.03.27
[JavaScript] 클래스 추가, css 추가  (0) 2024.03.27

 

 

 

 

 

답글 달기 기능 구현

z-index 를 사용하여 display:none 으로 보이지 않게 태그를 겹쳐놓은 뒤 덮어씌워서 사용

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #modal_wrap {
        display: none;
        position: fixed;
        z-index: 0;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
      }
      #first {
        display: none;
        position: fixed;
        z-index: 1;
        margin: auto;
        top: 30px;
        left: 0;
        right: 0;
        width: 300px;
        height: 350px;
        background: rgba(233, 38, 38, 0.4);
      }
    </style>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
      const reply = () => {
        $("#first").slideDown("slow");
        $("#modal_wrap").show();
      };
      const slide_hide = () => {
        $("#first").slideUp("fast");
        $("#modal_wrap").hide();
      };
    </script>
  </head>
  <body>
    <div id="modal_wrap">
      <div id="first">
        <div style="width: 250px; margin: auto; padding-top: 20px">
          <b>답글 작성 페이지</b>
          <b>작성자 : 홍길동</b>
          <b>제목 : </b><input type="text" /><br />
          <b>내용 : </b><br /><textarea cols="30" rows="5"></textarea>
          <hr />
          <button type="button">답글</button>
          <button type="button" onclick="slide_hide()">취소</button>
        </div>
      </div>
    </div>
    <h1>내용 작성 합니다</h1>
    <p>배부르다</p>
    <button onclick="reply()">답글 달기</button>
  </body>
</html>
코드 실행
728x90

'FE > JavaScript' 카테고리의 다른 글

[JavaScript] jquery_ui - datepicker, draggable  (0) 2024.03.27
[JavaScript] jquery - slideDown, slideUp 메소드  (0) 2024.03.27
[JavaScript] append, html  (0) 2024.03.27
[JavaScript] animate  (0) 2024.03.27
[JavaScript] 클래스 추가, css 추가  (0) 2024.03.27

 

 

 

 

 

slideDown, slideUp

jQuery 의 내장 메소드인 slideDown, slideUp

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #slide {
        padding: 5px;
        text-align: center;
        background: aqua;
      }
      #first {
        display: none;
        background: yellow;
        height: 100px;
      }
    </style>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
      window.onload = () => {
        $("#slide").mouseover(() => {
          $("#first").slideDown("slow");
        });
        $("#slide").mouseout(() => {
          $("#first").slideUp("slow");
        });
      };
    </script>
  </head>
  <body>
    <div id="slide">[오늘의 공지]</div>
    <div id="first">
      오늘의 공지사항<br />
      입니다<br />
      안녕
    </div>
  </body>
</html>
코드 실행
728x90

'FE > JavaScript' 카테고리의 다른 글

[JavaScript] jquery_ui - datepicker, draggable  (0) 2024.03.27
[JavaScript] 답글 달기 기능 만들기  (0) 2024.03.27
[JavaScript] append, html  (0) 2024.03.27
[JavaScript] animate  (0) 2024.03.27
[JavaScript] 클래스 추가, css 추가  (0) 2024.03.27

 

 

 

 

 

append, html

append : 선택된 요소의 끝부분에 내용을 추가

html : 선택된 요소의 내용을 교체

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
      let member = [];
      let cnt = 0;
      window.onload = () => {
        let msg = "";
        for (let i = 0; i < 100; i++) {
          member[i] = i;
          if (i < 10) {
            msg += i + "<br>";
            cnt++;
          }
        }
        console.log(member);

        $("#content").html(msg);
      };
      const view = () => {
        let msg = "<hr>";
        for (let i = cnt + 1; i <= cnt + 10; i++) {
          msg += member[i] + "<br>";
        }
        cnt += 10;
        $("#content").append(msg);
      };
      const appendVal = () => {
        // document.getElementById("txt").insertBefore
        $("#txt").append("내용 추가");
      };
      const htmlVal = () => {
        $("#txt").html("내용 교체");
      };
      function inputVal() {
        var t = $("#val01").val();
        $("#val01").val("");
        $("#val02").val(t);
      }
    </script>
  </head>
  <body>
    <div id="txt"></div>
    <hr />
    <input type="text" id="val01" /><br />
    <input type="text" id="val02" /><br />

    <button onclick="inputVal()">input 변경</button>
    <button onclick="appendVal()">appendVal</button>
    <button onclick="htmlVal()">htmlVal</button>

    <hr />

    <div id="content"></div>
    <button onclick="view()">더보기</button>
  </body>
</html>
코드 실행
728x90

'FE > JavaScript' 카테고리의 다른 글

[JavaScript] 답글 달기 기능 만들기  (0) 2024.03.27
[JavaScript] jquery - slideDown, slideUp 메소드  (0) 2024.03.27
[JavaScript] animate  (0) 2024.03.27
[JavaScript] 클래스 추가, css 추가  (0) 2024.03.27
[JavaScript] JQuery 사용법  (0) 2024.03.27

 

 

 

 

 

animate

animate : css 코드를 변화시킬때 수치를 천천히 변화시킨다 ( 부드러운 변화 효과 )

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
      window.onload = () => {
        $(".move").click(() => {
          $("img").css({ left: "300px", height: "300px", width: "350px" });
          // css 는 바로 변환
        });

        $(".init").click(() => {
          $("img").animate({ left: "0px", height: "100px", width: "130px" });
          // animate 는 수치가 천천히 변화 ( 부드러운 효과 )
        });
      };
    </script>
  </head>
  <body>
    <button class="move">확대</button>
    <button class="init">축소</button>
    <hr />
    <img
      src="resources/images/car01.png"
      width="130px"
      height="100px"
      style="position: relative"
    />
  </body>
</html>
코드 실행

확대는 css 를 변경하여 바로 크기가 커지지만, 축소는 animate 를 사용하여 천천히 부드러운 효과를 가지며 축소

728x90

'FE > JavaScript' 카테고리의 다른 글

[JavaScript] jquery - slideDown, slideUp 메소드  (0) 2024.03.27
[JavaScript] append, html  (0) 2024.03.27
[JavaScript] 클래스 추가, css 추가  (0) 2024.03.27
[JavaScript] JQuery 사용법  (0) 2024.03.27
[JavaScript] button 태그와 submit 태그의 차이  (0) 2024.03.27

 

 

 

 

 

클래스 추가, css 추가

id 값으로 요소를 불러와 addClass, removeClass, css 를 사용하여 클래스를 추가, 제거, css 추가

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
      .c {
        color: blue;
        font-size: xx-large;
      }
    </style>
    <script>
      function addClass() {
        $("div").addClass("c");
      }
      function rmClass() {
        $("div").removeClass("c");
      }
      function addCss() {
        $("div").css({ background: "yellow", color: "blue" });
      }
    </script>
  </head>
  <body>
    <div>연습</div>
    <button onclick="addClass()">추가</button>
    <button onclick="rmClass()">삭제</button>
    <hr />
    <button onclick="addCss()">css추가</button>
  </body>
</html>
코드 실행
728x90

'FE > JavaScript' 카테고리의 다른 글

[JavaScript] append, html  (0) 2024.03.27
[JavaScript] animate  (0) 2024.03.27
[JavaScript] JQuery 사용법  (0) 2024.03.27
[JavaScript] button 태그와 submit 태그의 차이  (0) 2024.03.27
[JavaScript] confirm, open  (0) 2024.03.27

+ Recent posts

티스토리툴바