component 만드는 방법

1. src나 아무데나 .vue로 끝나는 파일만듦

2. 그냥 처음 썼던 app.vue처럼 형식같게해서 내가 넣고싶은 html 넣음 스타일 줌 

3. script 부분에 이름을 줌 

4. css는 app.vue에 하나 여기 style에 넣나 똑같이 작동할거임 

축약해둔 컴포넌트 component를 만들었다면 갖다 쓸수있는방법 

1. vue 파일 import 해오고 (app.vue script의 맨 위에 import)

2. 등록하고 (import한거 밑에 component부분에 등록하기)

3. 쓰기 (template에 <어쩌구/>라고 갖다쓰는것)

반복적으로 출현하는 부분들만 component로 만들것....(온갖거 다 쓰지말고)

용어정리 

부모 컴퍼넌트 : 예) 가장 최상단의 App.vue

자식 컴퍼넌트 : 예) Slide.vue, Modal.vue

.vue의 naming을 할때는 기본적으로 맨앞을 대문자로 하고 길어질 경우 캐멀표기법을 쓴다

예를들면 This.vue 그리고 LikeThis.vue

자식컴포넌트인 예를들어 Modal.vue 파일로 가서

기존 App.vue에있던 template안에 데이터바인딩되있는채로 복붙시켜온다면???

component를 만들어두면 위에서 내가 쓰겠다고 데이터바인딩해둔게 이 파일안에 없기때문에 작동이안함.

무조건 밑에 script안에 있는것만 위에 template에 갖다쓸수있음.

component의 단점임. 데이터관리가 빡세짐

따라서 props를 써야한다

부모의 데이터를 자식이 갖다쓰고싶을때 쓰는 문법이 바로 Props

Props 쓰는 방법

1. 데이터 보내고 

<Slide/>안에 v-bind시킨다. 예) <Slide :데이터이름="데이터이름" />

2. 등록하고

Slide.vue로 가서 script쪽에 props만들어서 등록을한다 

3.쓰기

자식 컴포넌트에 자체적으로 스크립트안에 data를 넣어도 되긴하지만

부모가 쓰게될일이있다면 부모한테 만들어주는게좋음

많은 컴포넌트들이 쓴다면 그 중에 최상위 컴포넌트에 만들어두는게 간편함 

위로갖다쓰는건 props로 안됌 다른 문법 써야함

예시)

1. App.vue의 template안에서

<Modal :데이터이름="데이터이름" :Click="Click" :anotherData="thisIsData" />

연결시킬 Props가 많다면 그냥 이렇게 계속 v-bind시키면됌

v-bind 속성을 축약한게 :

1.5. App.vue의 Script 안에서

import Modal from './Modal.vue';


export default {
  name: 'App',
  // 컴포넌트 components를 만들었다면 밑에 쓰겠다고 등록해야함
  // es6 신문법으로 discount, 이렇게 하나만 써도 써지긴함
  components: {
    Modal: Modal,
  }
}

2. 자식컴포넌트인 Modal.vue의 Script 안에서

export default {
    name: 'Modal',
    props :{
        원룸데이터 : Object,
        누른거: Number,
        모달창열렸니: Boolean,
    }
}

이런식으로 name을 지정해주고

그 밑으로 Props들을 등록한다

부모컴퍼넌트에서 가져다쓸 데이터를 연결시키는 것
문자면 String, 숫자면 Number, 배열이면 Array, {요런거 들어간} 오브젝트면 Object, true/false면 Boolean..

틀리다고 오류뜨진않음

그리고 자식컴포넌트에서 props는 절대 막 수정하면안됨 read-only

스크립트나 컴포넌트로 나누어둔 어쩌구.vue를 쓰려면

script안에 import를 시켜야함

import/export 문법 쓰는 법
1. export default 변수명 
2. import 변수명 from 그파일경로

import/export 문법 쓰는 법 2
1. export {변수1, 변수2..}
2. import {변수1, 변수2..} from 경로

import {hi,hi2} from './assets/script.js';
hi;
hi2;


export default {
  name: 'App',
  data(){
    return{
    }
  },
  methods : {
  },
  components: {
  }
}

변수명 만들어두고 안쓰면 에러뜸

v-if="조건식"

조건식이 참일때만 보여줌 

 v-if="이거열렸나 == true"

이렇게되어있으면 열리고

 v-if="이거열렸나 == false"

이러면 안열리게

예시)

1. Template

<!--이걸클릭하면-->
<div @click="이거열렸나 = true;">어쩌구</div>


<!--이 모달창이 열림 안에있는 button 클릭하면 닫힘 -->
<div v-if="이거열렸나 == true">
	<button @click="이거열렸나 = false">닫기</button>
</div>

어쩌구가있는 Div를 클릭하면 

"이거열렸나"가 true가 되게해서

밑에 Div의 v-if가 발동하게됌

2. Script

export default {
  name: 'App',
  data(){
    return{
      이거열렸나 : false,
    }
  },

처음 기본은 false로 해두면 기본상태는 안보이는 상태

그 외

v-if

v-else

v-else-if

<!-- vue 조건문 문법 -->
<div v-if="1 == 2">
  안녕하세요
</div>
<!-- 위에 if가 안되면 밑에 else를 실행해라 -->
<!-- <div v-else>
  안녕하세요2
</div> -->
<!-- if else를 여러개쓰고싶으면 v-else-if를 써라 위에꺼아니면 이것도 맞는지아닌지 확인하게하고싶을때-->
<div v-else-if="1 == 3">
  안녕하세요3
</div>

vue.js 기본적인 설치

node js를 다운받고

vscode 터미널에서 npm install -g@vue/cli 입력

설치완료 후 다시 터미널에서 vue create 프로젝트명 입력

프로젝트폴더명으로 새로 오픈한 후 코딩시작

미리보고싶으면 터미널에  npm run serve 입력

반복문

<div class="menu">
    <a v-for="(a,i) in 메뉴들" :key="i"> {{ a }} </a>
  </div>

내용을 데이터바인딩하고싶으면  {{이렇게}}

속성을 데이터바인딩하고싶으면 앞에 : 예를들면 img태그에서 :src 이렇게

이미지 넣을때 require을 써야하는데 외부꺼 가져올때는 require 안붙여도되는듯

<!-- 내용을 데이터바인딩하고싶으면 콧수염두개 {{이렇게}} -->
<!-- 속성을 데이터바인딩하고싶으면 앞에 : 예를들면 img태그에서 :src 이렇게 -->

<div v-for="(원룸들,i) in 6" :key="i" class="onerooms">
    <!-- 이미지 넣을때 require을 써야함 -->
    <!-- <img :src="require('./assets/rooms/room' + i + '.jpg')" :alt="'원룸사진'+ i" class="room_image"> -->
    <!-- 외부꺼 가져올때는 require 안붙여도되네 -->
    <img :src="원룸데이터[i].image" :alt="'원룸사진'+ i" class="room_image">
    <!-- 클릭하면 모달창열렸니를 true로 만들어라 (클릭하면 모달창을 열어라) -->
    <h4 @click="모달창열렸니 = true; 누른거 = i">{{원룸데이터[i].title}}</h4>
    <p>{{원룸데이터[i].price}}원</p>
    <button @click="increase(i)"> 허위매물신고 </button>
    <span> 신고 수 : {{신고수[i]}}</span>
  </div>

Script에서

  // data 데이터바인딩을 위한 데이터 저장통! 중요하고 자주 바뀌는 데이터들을 쓰는곳

  // methods = 함수만드는공간

  // 컴포넌트 components를 만들었다면 쓰겠다고 등록해야함

export default {
  name: 'App',
  // data 데이터바인딩을 위한 데이터 저장통
  data(){
    }
  },
  // methods = 함수만드는공간
  methods : {
    }
  },
  // 컴포넌트 components를 만들었다면 쓰겠다고 등록해야함
  components: {
  }
}

Style은 

css그냥 똑같이 쓰면됌

Windows 키 + R을 눌러 실행 대화 상자를 열고

​

%localappdata%\Microsoft\OneDrive\onedrive.exe /reset

를 복사하여 대화 상자 창에 붙여넣은 다음 확인을 누른다.

​

나 같은 경우는 "Windows에서 찾을 수 없습니다..." 라는 메시지가 표시됐는데,

이럴 경우에는 대신에

C:\Program Files (x86)\Microsoft OneDrive\onedrive.exe /reset

를 복사하여 붙여넣은 다음 확인을 누른다.

​

Windows 를 다시 눌러 시작으로 이동하여

검색 상자에 OneDrive를 입력한 다음, OneDrive 데스크톱 앱을 클릭하여 수동으로 다시 시작한다.

아이클라우드 오류떠서 원드라이브로 넘어온건데 얘도 오류가 너무 잦네... 클라우드들 때문에 스트레스 받는다..^^

제목 그대로 마우스 우클릭을 금지 시켜주는 스크립트이다.

이 스크립트를 쓰면 오른쪽 클릭 뿐만 아니라, 드래그 또한 작동되지 않는다.

나는 업무 중, 특히 이미지가 많은 이벤트 페이지들을 작업할때

유용하게 쓰고있는 코드라서 공유해본다.

$(document).ready(function(){
 $(document).bind("contextmenu", function(e) {
  return false;
 });
});
$(document).bind('selectstart',function() {return false;}); 
$(document).bind('dragstart',function(){return false;}); 

내 스킨의 네비게이션바를 보면

대강 이런식으로 아래와 같이 짜여져있다.

<ul class="category_list">
    <li>
      	<a class="link_item">대주제</a>
        <ul class="sub_category_list">
          <li><a>소주제</a></li>
          <li><a>소주제</a></li>
          <li><a>소주제</a></li>
        </ul>
    </li>
</ul>

여기서 나는 대주제를 클릭했을시

전체목록의 페이지로 이동하는 것을 막고 싶어서,

그냥 a태그를 빼버리려고 했다.

그런데

티스토리에서 네비게이션 부분은 <nav>태그 안에

• 분류 전체보기 (52)
  • 공부 (19)
    • HTML + CSS (2)
    • JavaScript + jQuery (3)
    • UX UI Design (2)
    • Vue.js (9)
    • Computer Science (1)
    • 그 외 (2)
  • 게임 (33)
    • 메이플스토리 (15)
    • 심즈4 (5)
    • 오버워치 (5)
    • 동물의숲 (6)
    • 호그와트 레거시 (1)
    • 스택랜드 (1)
    • 젤다의전설:야생의숨결 (0)
    • 원신 (0)

디테일한 부분은 html 수정이 어렵다는 것을 알게되었다.

따라서 css로 수정을 할 수 밖에 없었는데,

이럴 때 유용하게 쓸 수 있는 css코드가 바로

pointer-events: none; 으로,

 a(앵커)태그를 무효화 시켜서 클릭 기능을 비활성화 시켜준다.

이 css를 적용시키면 href 속성이 부여된 a태그도 클릭이 되지 않는다.

/* Keyword values */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill;    /* SVG only */
pointer-events: visibleStroke;  /* SVG only */
pointer-events: visible;        /* SVG only */
pointer-events: painted;        /* SVG only */
pointer-events: fill;           /* SVG only */
pointer-events: stroke;         /* SVG only */
pointer-events: all;            /* SVG only */

/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;

pointer-events에는 여러가지가 있는데,

여기서 auto와 none 그리고 global values를 제외한 나머지들은

visibility 태그 등이 사용된 SVG에서만 쓸 수 있으니 크게 신경 쓰지 않아도 될 것 같다.

회사 업무 중 버그를 잡기위해 작성한 코드가 유용하게 쓰일 수 있을 것 같아 메모해둔다.

회사 커뮤니티 게시판의 왼쪽에 붙어있는 네비가

스크롤의 움직임에 따라서 위아래로 따라 움직이는데,

특정 카테고리에서는 목록의 개수가 적어서 본문이 짧다보니

스크롤을 가장 아래로 내릴 시 네비가 하단 푸터 밖으로 삐져나가버리는 버그가 있었다.

간단히 푸터 또는 본문의 마진으로 해결해보려했지만,

확장된 마진만큼 스크롤이 같이 따라와서 소용이 없었다.

결국 스크립트로 수정을 했는데,

아래의 아주 간단하고 짧은 코드만으로 완벽하게 버그를 잡았다.

$(window).scroll(function(){
    $("#yourDiv").css("margin-top",Math.max(-250,0-$(this).scrollTop()));
});

position: fixed;가 먹혀있는 div를 #yourDiv에 부여하고,

내가 -250로 적어둔 곳에 알맞은 숫자를 적으면 된다. 

윗 코드에서는 -250px로, 기존에 스크롤을 따라 내려가던 지점에서

-250px만큼 윗 부분까지만 따라오도록 지정한 것이다.

이렇게 코드를 작성하면, 

위에서 부터 몇 px인지가 아니라 아래에서부터 지정을 했기 때문에

게시글 수가 20개에서 늘어나서 50개가 되던 100개가 되던 상관없이,

스크롤이 늘어나더라도 여전히 내가 원하는 지점까지 오게 할 수가 있다.

1월 3일에 작성한 글

css는 참 신기하다

다 아는 것 같다가도 모르는게 계속 나온다

가끔 외국 포트폴리오 사이트 보다보면 배경이 바뀜에 따라서 글자색이 자동으로 변하는 효과를 볼 수 있었는데, 그때는 이렇게 간단하게 css로 구현할 수 있는지 몰랐다.

아까 문득 궁금해져서 개발자모드로 싸이트를 뜯어보다 mix-blend-mode라는 css를 배웠다.

/* keyword values */
mix-blend-mode: normal;
mix-blend-mode: screen;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;
mix-blend-mode: multiply;
mix-blend-mode: overlay;
mix-blend-mode: hue;

/* global values */
mix-blend-mode: initial;
mix-blend-mode: inherit;
mix-blend-mode: unset;

마치 포토샵 효과처럼 css로도 이렇게 여러가지 모드의 효과를 줄 수 있는데,

그 중에서 내가 궁금했던 효과는 difference 모드였다.

hover효과로 간단히 구현해보았다.

(hover기 때문에 밑에 예시는 pc에서만 확인가능)

See the Pen mix-blend-mode : difference by minzcho (@minzcho) on CodePen.

마우스를 올리면 배경이 흰색으로 변하면서,

텍스트가 자동으로 반대색 (흰색->검정색)으로 변하는 걸 볼 수 있다.

따로 text에 color값을 일일히 바꾸지 않아도,

mix-blend-mode: difference; 한 줄로 해결가능한 것이다.

매우매우 개꿀이쥬 ? 개꿀 개이득 ?

이런걸 이제야 알다니..

더 열심히 공부해야겠다...