const transFormatFrequency = (
  hertz: number,
  digits: number = 0
): string => {
  const yota = Math.pow(10, 24);
  if (hertz >= yota) {
    return `${(hertz / yota).toFixed(digits)} YHz`;
  }
  const format = ["Hz", "kHz", "MHz", "GHz", "THz", "PHz", "EHz", "ZHz"];

  const formatFrequency = (
    value: number,
    decimals: number,
    [currentLabel, ...otherLabels]: string[]
  ): string => {
    if (value < 1000) {
      return `${Number.parseFloat(value.toString()).toFixed(
        digits
      )} ${currentLabel}`;
    }
    return formatFrequency(value / 1000, digits, otherLabels);
  };

  return formatFrequency(hertz, digits, format);
};

주파수를 단위에 맞게 변환해주는 코드입니다.

 

 

사용하기

transFormatFrequency(1665000000, 2)

>>> 1.67 GHz 

``
저작자표시

'Frontend' 카테고리의 다른 글

NUXT.js 로 Vue SSR 세팅하기(1)  (0) 2019.06.23
아코디언 메뉴(업데이트 예정)  (0) 2019.04.12
[jQuery] 최상단, 최하단 바로가기 애니메이트 버튼  (0) 2019.04.11
jQuery를 pure js, vue.js로 바꿔보자  (0) 2019.02.25
뷰 설치  (0) 2019.02.12

# 설치환경

node
v10.13.0

npm
6.4.1

editor
VScode

 

1. 설치

 

- work path

C:\Users\choi\Desktop\nuxt

 

- npx create-nuxt-app <my-nuxt-app>

npx create-nuxt-app nuxt-app

 

- 설치한내용

? Project name nuxt-app
? Project description My fine Nuxt.js project
? Use a custom server framework express
? Choose features to install Axios
? Use a custom UI framework vuetify
? Use a custom test framework none
? Choose rendering mode Universal
? Author name DaeBeom Choi
? Choose a package manager npm

- 설치요약

express 설치는 서버환경만들어서 Authorization 인증으로 CRUD 테스트 

axios 설치는 nuxt client 랑 express server 간에 편리한 통신

vuetify 설치는 디자인하기 싫어서... (잘 쓰겠습니다.)

 

 

저작자표시

'Frontend' 카테고리의 다른 글

transform hertz unit  (0) 2020.08.18
아코디언 메뉴(업데이트 예정)  (0) 2019.04.12
[jQuery] 최상단, 최하단 바로가기 애니메이트 버튼  (0) 2019.04.11
jQuery를 pure js, vue.js로 바꿔보자  (0) 2019.02.25
뷰 설치  (0) 2019.02.12

 

html

<body>
    <div class="arrcodian_wrap">
        <dl class="arrcodian_contain">
            <dt class="accordion">
                1 title
            </dt>
            <dd class="panel">
                1 panel
            </dd>
            <dt class="accordion">
                2 title
            </dt>
            <dd class="panel">
                2 panel
            </dd>
            <dt class="accordion">
                3 title
            </dt>
            <dd class="panel">
                3 panel
            </dd>
            <dt class="accordion">
                4 title
            </dt>
            <dd class="panel">
                4 panel
            </dd>
            <dt class="accordion">
                5 title
            </dt>
            <dd class="panel">
                5 panel
            </dd>
        </dl>
    </div>
</body>

 

css

 body{
            background: #ffb900;
        }
        
  
        /* 아코디언메뉴 */
        
        .arrcodian_wrap {
            width: 200px;
            margin: 50px auto 0;
            border-radius: 10px;
            overflow: hidden;
        }
        
        .accordion {
            background-color: #f74f4f;
            color: #fff;
            cursor: pointer;
            padding: 10px;
            font-weight: bold;
            border-bottom: 1px solid #ec3636;
            font-size: 14px;
        }

        .panel {
            background-color: #004a80;
            color: #fff;
            display: none;
            padding: 12px;
            font-size: 12px;
        }
        
        .panel.active {
            display: block;
        }

 

js

let acc = document.querySelectorAll(".accordion");
    let panel;
    [].forEach.call(acc, (accItem) => {
            accItem.addEventListener('click', function() {
                this.classList.toggle("active");
                panel = this.nextElementSibling;
                panel.classList.toggle('active');
            })
        })

See the Pen 아코디언 by CHOEDB (@chleoqja) on CodePen.

저작자표시

'Frontend' 카테고리의 다른 글

transform hertz unit  (0) 2020.08.18
NUXT.js 로 Vue SSR 세팅하기(1)  (0) 2019.06.23
[jQuery] 최상단, 최하단 바로가기 애니메이트 버튼  (0) 2019.04.11
jQuery를 pure js, vue.js로 바꿔보자  (0) 2019.02.25
뷰 설치  (0) 2019.02.12

너무 간단하지만, 쓸 일이 많으므로 저장!

최상단으로 가는 버튼

 

html

<button type="button" id="goTop'"> go to ther TOP </button>

jQuery

$('#goTop').on('click', function(e){ 
     $("html, body").animate({ scrollTop : 0 }, "400") ;
     return false; 
});

최하단으로 가는 버튼

html

<button type="button" id="goBottom"> go to ther BOTTOM </button>

 

jQuery

$('#goBottom').on('click', function(e){ 
     $("html, body").animate({scrollTop : $(document).height() }, "400");
     return false; 
})
저작자표시

'Frontend' 카테고리의 다른 글

NUXT.js 로 Vue SSR 세팅하기(1)  (0) 2019.06.23
아코디언 메뉴(업데이트 예정)  (0) 2019.04.12
jQuery를 pure js, vue.js로 바꿔보자  (0) 2019.02.25
뷰 설치  (0) 2019.02.12
[Array] array.filter 메서드 사용하기  (0) 2019.01.29

 

 

input 과 textArea 바인딩하기

 

1. jQuery

See the Pen zbOdQd by Choidaeboem (@choidaeboem) on CodePen.

 

2. javascript

See the Pen jsBinding by Choidaeboem (@choidaeboem) on CodePen.

 

3. vue (양방향바인딩)

See the Pen vue binding by Choidaeboem (@choidaeboem) on CodePen.

 

지극히 개인적으로 잊지말자  

저작자표시

'Frontend' 카테고리의 다른 글

아코디언 메뉴(업데이트 예정)  (0) 2019.04.12
[jQuery] 최상단, 최하단 바로가기 애니메이트 버튼  (0) 2019.04.11
뷰 설치  (0) 2019.02.12
[Array] array.filter 메서드 사용하기  (0) 2019.01.29
[jQuery] 쇼핑몰-썸네일영상띄우기  (0) 2019.01.21

뷰 개발에 필요한 사항들... 계속 업데이트 예정

 

vue-cli 설치

npm install -g vue-cli     

 

웹팩설치

vue init webpack-simple

 

개발에 필요한 모듈설치

npm i 

 

VUE-ROUTER 설치

npm install vue-router --save

 

VUEX 설치

npm install vuex

 

코드보기                           

code . 

 

뷰빌드시 참고사항

1. main.js 를 엔트리포인트로 삼는다.                        

 

 
import Vue from 'vue'
import VueRouter from 'vue-router'
//뷰라이브러리를 사용할 때
//뷰를 먼저 가져오고, 뷰 라이브러리를 가져온다.
 
Vue.use(VueRouter)
// Vue.use 안에 VueRouter 를 기입한다.
 
const router = new VueRouter({
mode:'history',
// Vue.use 안에 VueRouter 를 기입한다.
routes : [
{ path:'/', component: Home},
{ path:'/Login', component: Login},
{ path:'*', component:NotFound}
]
})
 
 
export default router
// 설정해놓은 코드들을 router 라는 이름으로 내보낸다.
 

 

 

업데이트 될 내용들

 

바인딩( v-if, v-for, click 등등)

Vue-router를 활용한 액세스 링크관리

Vuex를 활용한 상태관리(State, Mutation, Action)

 

확장프로그램설치

vetur

task explorer

vuetify-vscode

 

플러그인

vue add vuetify

 

 

 

 

저작자표시

'Frontend' 카테고리의 다른 글

[jQuery] 최상단, 최하단 바로가기 애니메이트 버튼  (0) 2019.04.11
jQuery를 pure js, vue.js로 바꿔보자  (0) 2019.02.25
[Array] array.filter 메서드 사용하기  (0) 2019.01.29
[jQuery] 쇼핑몰-썸네일영상띄우기  (0) 2019.01.21
userAgent를 활용한 브라우저 감지  (0) 2019.01.11 
  

    #특명 : 이름에 "g" 가 들어간 사람들을 찾아야한다!

    

    var person = [

        {

            "name": "kim",

            "age": "20",

            "gender": "man"

        }, {

            "name": "vicky",

            "age": "22",

            "gender": "women"

        },

        {

            "name": "gloria",

            "age": "42",

            gender: "women"

        }, {

            "name": "gom",

            "age": "27",

            "gender": "man"

        }

    ];

    

    // 객체가 담은 배열 person에 filter 메서드 사용

    // 배열 순서대로 객체단위로 쪼개어 load 라는 매개변수로 할당

    // 객체 순서대로 name 에 우리가 원하는 문자열이 있는지 탐색

    // 해당 문자열이 있는 경우 참, 거짓으로 리턴된다.

    // filter메서드는 참의 결과들만 모아 배열로 반환한다.

    

    function arrayFilter(_objInArray, _findValue) {

        return _objInArray.filter(function(load) {

            return load.name.includes(_findValue);

        });

    };

    

    arrayFilter(person, "g");

    

    

    //결과 Array

 [

    {name: "gloria", age: "42", gender: "women"},

    {name: "gom", age: "27", gender: "man"}

]
저작자표시

'Frontend' 카테고리의 다른 글

jQuery를 pure js, vue.js로 바꿔보자  (0) 2019.02.25
뷰 설치  (0) 2019.02.12
[jQuery] 쇼핑몰-썸네일영상띄우기  (0) 2019.01.21
userAgent를 활용한 브라우저 감지  (0) 2019.01.11
[button]pulse 버튼 만들기  (0) 2019.01.10

쇼핑몰 재직 중 만든 썸네일에 영상띄우기 pc버전

필요한 부분만 구성한 약식 UI로 만들어봤다.

 

실사용하려면 콘텐츠를 생산해야하니 촬영팀 부담이 크다... 

 

ps. 영상은 존경하는 김포프님 영상입니다.  

 

 

#설명 

1. productNumber에 상품번호, productMedia 에 매치시킬 영상링크 두 가지를 설정한다.

2. 해당 상품번호가 페이지내 상품목록에 있을 경우, [영상보기] 버튼을 노출 시킴.

3. [영상보기] 버튼 클릭 시 모달창과 영상이 띄어진다.

4. 띄어진 모달창엔 클릭한 상품의 상품명, 상품링크가 새겨진다.

5. [닫기] 혹은 모달창 외부를 클릭할 경우 닫힌다.

끝

 

#ex

상품번호가 127464 일 경우, https://www.youtube.com/embed/6eSyE9cXQ-U 영상이 출력된다.

 

productInfo = [

    {

        "productNumber": "127464",

        "productMedia": "https://www.youtube.com/embed/6eSyE9cXQ-U"

        }, {

        "productNumber": "127434",

        "productMedia": "https://www.youtube.com/embed/YrweCYauK6o"

        }

          ];

 

 

 

[ 0.5× ] 보기로 확인하시면 편리합니다.

저작자표시

'Frontend' 카테고리의 다른 글

뷰 설치  (0) 2019.02.12
[Array] array.filter 메서드 사용하기  (0) 2019.01.29
userAgent를 활용한 브라우저 감지  (0) 2019.01.11
[button]pulse 버튼 만들기  (0) 2019.01.10
[DOM]DOMSubtreeModified, 하위메뉴의 변화를 감지하자!  (0) 2019.01.10

+ Recent posts

티스토리툴바