반응형

🚀 기초 React (1강 ~ 8강)

> 강의 보러가기 

 

🙋🏻‍♂️ Node.js 란 ?

예전에는 자바스크립트 런타임이 브라우저 밖에 존재하질 않았다. 이러한 한계를 극복하고 나온 자동차의 엔진과 같은 역활.

 

🙋🏻‍♂️ Express.js란 ?

node.js를 쉽게 이용할 수 있게 해주는 자바스크립트 프레임워크.

 

📁 폴더 생성 순서

  • Documents에 접속 > 터미널(or git bash) > npm init 입력 > package.json 생성 > index.js 만들기

 

💾 명령어

  • npm express --save // --save를 적어주면 package.json에 기록되므로, 타인이 설치된 내용에 대해 쉽게 알 수 있다.

  • npm run start // server 시작. 변경 사항이 자동으로 반영되지 않기 때문에 페이지를 새로고침 해야한다.

 

📂 Express.js 만들기

> Documents

 

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

  • require() 은 뭘까? => 확인

 

 

반응형
저작자표시

'Frontend > React' 카테고리의 다른 글

MongooseServerSelectionError: Could not connect to any servers in your MongoDB Atlas clust current IP address is on your Atlas cluster's IP  (0) 2020.09.01
React 시작하기 #3  (1) 2020.08.24
React 시작하기 #2  (0) 2020.08.20
반응형

🚀 바닐라 JS 계산기

바닐라 자바스크립트로 간단한 계산기를 만들어 보았다. 은근히 신경써주어야 할 부분들이 많았다.. 코드가 너무 지저분 해...... 리팩토링이 필요해 !

🍙 CSS & HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div class="container">
        <div class="result"><input type="text" class="show" value="0"/></div>
        <button class="cancle" data-Type="ac">C</button>
        <button class="number">7</button>
        <button class="number">8</button>
        <button class="number">9</button>
        <button class="operation" data-Type="operator">+</button>
        <button class="number">4</button>
        <button class="number">5</button>
        <button class="number">6</button>
        <button class="operation" data-Type="operator">-</button>
        <button class="number">1</button>
        <button class="number">2</button>
        <button class="number">3</dbuttoniv>
        <button class="operation" data-Type="operator">*</button>
        <button class="zero number">0</button>
        <button class="operation" data-Type="equals">=</button>
        <button class="operation" data-Type="operator">/</button>
    </button>
    <script src="src/index.js"></script>
  </body>
</html>

 

 

body {
  font-family: sans-serif;
  background-color: black;
}

button {
  color: white;
  font-size: 20px;
}

input {
  background-color: black;
  color: white;
  width: 95%;
  height: 60px;
  text-align: right;
  font-size: 40px;
  border: none;
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background-color: black;
  color: white;
  padding: 10px;
}

.result {
  grid-column: 1/4;
}

.zero {
  grid-column: 1/3;
}

.number {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(48, 47, 47, 0.925);
  margin: 3px;
  height: 60px;
  border-radius: 10px;
}

.operation {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: orange;
  margin: 3px;
  height: 60px;
  border-radius: 10px;
}

.cancle {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: gray;
  margin: 3px;
  height: 60px;
  border-radius: 10px;
}

 

🍙 결과 화면

 

🍙 Javascript

// <⚠️ DONT DELETE THIS ⚠️>
import "./styles.css";
// <⚠️ /DONT DELETE THIS ⚠️>

const buttons = document.querySelectorAll("button");
const input = document.querySelector(".show");

let result = "";
let operCheck = false;
let numberCheck = true;
let equlasCheck = true;

function init() {
  buttons.forEach((button) => {
    button.addEventListener("click", () => {
      switch (button.dataset.type) {
        case "operator":
          const oper = button.innerText;
          operator(oper);
          break;
        case "ac":
          clear();
          break;
        case "equals":
          calc();
          break;
        default:
          const number = button.innerText;
          displayNumber(number);
          break;
      }
    });
  });
}

function displayNumber(number) {
  operCheck = true;
  const current = input.value;

  //계산 끝난 후 초기화
  if (equlasCheck) {
    //연산자 눌렸을 시 계산기 값만 초기화
    if (numberCheck) {
      input.value = current === "0" ? number : input.value + number;
    } else {
      input.value = number;
      numberCheck = true;
    }
    result += number;
  } else {
    equlasCheck = true;
    input.value = number;
    result = number;
    console.log(result);
  }
}

function calc() {
  // 지속적으로 계산기 값 누르는 거 확인
  if (input.value === "0") {
    clear();
  } else {
    //마지막이 연산자로 끝나는 지 확인
    if (!operCheck) {
      alert("Calculation is unavailable because of operation.");
    } else {
      // 계속 눌렸을 때 변경
      if (equlasCheck) {
        const final = eval(result);
        input.value = `RESULT : ${final}`;
        result = "";
        equlasCheck = false;
        operCheck = false;
      } else {
        clear();
      }
    }
  }
}

function operator(oper) {
  if (!operCheck) {
    alert("Operation Error.");
  } else {
    operCheck = false;
    result += oper;
    numberCheck = false;
  }
}

function clear() {
  input.value = 0;
  result = "";
  operCheck = false;
  equlasCheck = true;
}

init();
반응형
저작자표시

'Frontend > Vanilla JS' 카테고리의 다른 글

호이스팅(Hoisting)이란 무엇일까?  (0) 2020.08.29
바닐라 자바스크립트 슬라이더 만들기(2)  (2) 2020.08.08
바닐라 자바스크립트 슬라이더 만들기(1)  (4) 2020.08.08
반응형

🚀 FLEX

기존의 TABLE 이나 Float를 사용하던 Layout을 간편하게 사용하기 위해 고안된 방법

📢 기본구조

<container>
  <item></item>
  <item></item>
<container>

태그와 class값은 변해도 된다. 하지만 부모, 자식 관계는 꼭 유지해야 한다 !

 

📢 관련 속성

container

  • display
  • flex-diection
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

item

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • algin-self

 

📢 Holy grail layout

출처-생활코딩

 

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        display: flex;
        flex-direction: column;
      }

      header {
        border-bottom: 1px solid gray;
      }

      footer {
        border-top: 1px solid gray;
      }

      .content {
        display: flex;
      }

      .content nav {
        border-right: 1px solid gray;
      }

      .content aside {
        border-left: 1px solid gray;
      }

      nav,
      aside {
        flex-basis: 200px;
        flex-shrink: 0;
      }

      main {
        flex-grow: 1;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <header>
        <h1>생활코딩</h1>
      </header>
      <section class="content">
        <nav>
          <ul>
            <li>html</li>
            <li>css</li>
            <li>javascript</li>
          </ul>
        </nav>
        <main>
          냠냠
        </main>
        <aside>
          AD
        </aside>
      </section>
      <footer>
        https://taiyakee.tistory.com
      </footer>
    </div>
  </body>
</html>

 

반응형
저작자표시
반응형

🚀 허접한 슬라이더

결과 보기 Click

 

> 허접한 슬라이더(1)

 

🌵 추가사항

  • 이미지 아래 원 추가
  • 3초 후 이미지 자동 변경

🌵 앞으로.. 

  • 타인이 구현한 방식 알아보기

  • 다른 형식의 슬라이더 만들기

slider.js

//Current DIV
let current = 1;

//Call by btn class
const btnPre = document.querySelector(".pre"),
btnNext = document.querySelector(".next");

//button Next
function handleNextEvent(){
    let target = document.querySelector(`.slider__0${current}`);
    let circle = document.querySelector(`.circle__0${current}`);
    target.classList.remove("showing");
    circle.classList.remove("showing__circle");

    current = current + 1 < 6 ? current + 1 : 1;
    
    target = document.querySelector(`.slider__0${current}`);
    circle = document.querySelector(`.circle__0${current}`);
    target.classList.add("showing");
    circle.classList.add("showing__circle");
}
btnNext.addEventListener("click", handleNextEvent);

//button Pre
function handlePreEvent(){
    let target = document.querySelector(`.slider__0${current}`);
    let circle = document.querySelector(`.circle__0${current}`);
    target.classList.remove("showing");
    circle.classList.remove("showing__circle");
    
    current = current - 1 > 0 ? current - 1 : 5;
    
    target = document.querySelector(`.slider__0${current}`);
    circle = document.querySelector(`.circle__0${current}`);
    target.classList.add("showing");
    circle.classList.add("showing__circle");
}
btnPre.addEventListener("click", handlePreEvent);

function init(){
    setInterval(handleNextEvent, 5000);
}

init();

 

index.html

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    <title>Slider</title>
    <body>
        <div class="slider">
            <div class="slider__01 showing"><img src="images/1.jpg"></div>
            <div class="slider__02"><img src="images/2.jpg"></div>
            <div class="slider__03"><img src="images/3.jpg"></div>
            <div class="slider__04"><img src="images/4.jpg"></div>
            <div class="slider__05"><img src="images/5.jpg"></div>
            <div class="slider__bg"></div>
        </div>

        <div class="circles">
            <div class="circle circle__01 showing__circle"></div>
            <div class="circle circle__02"></div>
            <div class="circle circle__03"></div>
            <div class="circle circle__04"></div>
            <div class="circle circle__05"></div>
        </div>

        <div class="btn__div">
            <span><button class="pre">👈</button></span>
            <span><button class="next">👉</button></span>
        </div>

        <script src="slider.js"></script>
    </body>
  </head>

 

style.css

/*slider item*/

img {
    width: 400px; height:200px;
}

.slider{width: 400px; height:200px; position: relative; margin-bottom: 10px;}
.slider__01{ position: absolute; }
.slider__02{ position: absolute; }
.slider__03{ position: absolute; }
.slider__04{ position: absolute; }
.slider__05{ position: absolute; }
.slider__bg{ position: absolute; width: 400px; height:200px; background-color: black; z-index: 0; }

/*btn*/
.btn__div{text-align:center; width: 400px;}

/*function*/
.showing{ z-index: 1; animation: fadeIn 0.5s linear; }

/*circle*/
.circles{width: 400px; position: relative; margin-bottom: 50px;}

.circle{
  position: absolute;
  width: 10px; 
  height: 10px; 
  background-color: gray;
  border-radius: 50%;
}

.circle__01{ left:10%; }
.circle__02{ left:30%; }
.circle__03{ left:50%; }
.circle__04{ left:70%; }
.circle__05{ left:90%; }

.showing__circle{width:13px; height:13px;}

/*animation*/
@keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
반응형
저작자표시

'Frontend > Vanilla JS' 카테고리의 다른 글

호이스팅(Hoisting)이란 무엇일까?  (0) 2020.08.29
바닐라 자바스크립트 계산기 만들기  (0) 2020.08.13
바닐라 자바스크립트 슬라이더 만들기(1)  (4) 2020.08.08

+ Recent posts

티스토리툴바