SK_MOUSE 개발일기

[속성/값 전달] ※Provide, Inject를 통해 중간 매개체를 건너뛰고 값전달 가능 단, Provide를 사용하면 반응형으로 되기 어려움 ※참조 사용하기 $ref : ref값을 통해서도 값을 전달=querySelector같은것 - 대신 html랜더링 되고나서 사용가능(created단계에서는 불가, mounted단계에서 html연결된직후 가능) 1. 부모컴포넌트 -> 자식컴포넌트 : props를 사용해서 데이터값을 주로 주고받는다. 값전달 //부모컴포넌트 이름: {{name}} //v-bind는 :변수명으로 생략가능 export default{ data(){ return{ name: '뷰제이에스' } } } 부모컴포넌트의 "name"이라는 변수(export default date()에서 정의된)를 ..

컴포저블이란? Vue 앱의 컨텍스트에서 컴포저블은 Vue 컴포지션 API를 활용하여 상태 저장 로직를 캡슐화하고 재사용하는 함수입니다. 우리는 보통 Input, Output 나오는 로직 -> Function(모듈) 라고 한다. 하지만, 컴포저블 함수는 '상태'를 리턴하는 것을 일컫는다. 상태가 컴포넌트 단위로 각각 생성된다 일종의 Factory처럼 상태를 사용하는 객체를 찍어내는 것이 기본 동작 방식이다. 하지만, 상태를 공유하고싶다면? (= 일종의 싱글톤 패턴처럼 상태를 관리하고싶다면?) Pinia, 혹은 VueX를 사용한다

이 글은 Vue.js 사용에 앞서 가벼운 사용 방법을 적어 둔 글이다. 참고 자료 : 유튜브 코딩애플(https://youtu.be/-tVaahsXpwk?si=z0Ki1RrHcGBks7qD) 프로젝트 생성 vue create 프로젝트명 미리보기 띄우고 싶으면 터미널에 npm run serve 위와 같이 입력하면 된다. Vue는 index.html이라는 메인페이지 않에 App.vue코드를 박아넣는 것 디렉토리/파일 설명 node_modules :프로젝트에 쓰는 라이브러리들 src : 소스코드 다 담는곳 public : html파일, 기타팡리 보관 package.json : 라이브러리 버전, 프로젝트 설정 기록 Vue 특징(with 코드) {{데이터 바인딩}} = JS 데이터를 HTML에 꽂아 넣는 문법 d..

AttributeDescription id 유일한 식별자(id)를 요소에 지정한다. 중복 지정이 불가하다. class 스타일시트에 정의된 class를 요소에 지정한다. 중복 지정이 가능하다. hidden css의 hidden과는 다르게 의미상으로도 브라우저에 노출되지 않게 된다. lang 지정된 요소의 언어를 지정한다. 검색엔진의 크롤링 시 웹페이지의 언어를 인식할 수 있게 한다. style 요소에 인라인 스타일을 지정한다. tabindex 사용자가 키보드로 페이지를 내비게이션 시 이동 순서를 지정한다. title 요소에 관한 제목을 지정한다. NEW 태그 header 헤더를 의미한다 nav 내비게이션을 의미한다 aside 사이드에 위치하는 공간을 의미한다 section 본문의 여러 내용(article)..

Visual Studio Code에서 자주 사용하는 단축키를 모아보았다. 같은 변수 이름 한번에 바꾸기 (★) ctrl + f2 블럭 주석 처리 (★) Alt + Shift + A 행을 위로 이동( 현재 행을 윗줄로 옮길때) alt + (↑)화살표 커서 위치 행 삭제 Ctrl + Shift + K 전체 파일에서 찾기 Ctrl + Shift + F 현재페이지 문자열 수정하기 (★) Ctrl + H 폴더 모든 페이지 문자열 수정하기 (★) Ctrl + Shift + H 자동 정렬(★) ★ ALT + Shift + F 또는 Ctrl + A 후 Ctrl + K + F

Object 전달 const name ='evan'; const age = 44; print(name, age); function print(name, age){ console.log(name); console.log(age); } 위와같이 전달하게 되면 매개변수가 많아지면 다 받기 곤란. const evan = {name : 'evan', age:4}; function print(person){ console.log(person.name); console.log(person.name); } 따라서 이처럼 객체로 전달하게 되면 처리하기 편하다. 프로퍼티 변수를 나중에 따로 선언해도됨. 예시) hasJob 프로퍼티 주목 function print(person){ console.log(person.name)..

클래스 class Person{ constructor(name, age){ this.name = name; this.age = age; } speak(){ console.log(`${this.name} : hello!`); } } //사용 const ellie = new Person('ellie' , 20); console.log(ellie.age); ellie.speak(); getter, setter class User{ constructor(name, age){ this.name = name; this.age = age; } get age(){ return this._age; } set age(value){ // if(value

바닐라 JavaScript는 'use strict'를 사용하면 좀 더 체계적으로 코드를 짤 수 있다. TypeScript(타입스크립트)는 JavaScript(자바스크립트) 위에 타입이 올라간 것이기 때문에, 위와 같은 것을 생각해두면 좋다. 그리고 JS를 배우고 나면 TypeScript를 금방 배울수 있다. JS관련 문법 1. 변수형, 문자열 출력 표기 및 연산자 // 문법 //let : 변수를 선언할때 사용 ES6 let name='evan'; console.log(name); name = 'ggg'; console.log(name); //var hoisting이란 어디에서 선언을했던 선언을 끌어올려줌 age=4; var age;//이런식으로 위에서 먼저 써버리는게가능 //var는 {블록}에서 상관 안..

2학년때 처음 객체를 공부했던 객체지향언어와실습에서 학습한 Processing과 같은 원리다. 크게 function setup()과 function draw()로 나뉜다. setup은 시작시 기본으로 셋팅되는 배경이고, draw는 계속해서 실행이되면서 적용되는 일종의 반복 함수이다. 그리고 위에서 적용된 도형/메소드는 내려갈수록 덮어쓰기가 된다. 웹을 만들때는 아래와같이 적용하면된다. 역동적인효과 예시 mousePressed 오버라이드 VS mouseIsPressed(입력장치 되게 짧은시간에 많이입력됨) 입체감을 더해주는 방법 sqrt( (mouseX-pmouseX)^2 +(mouseY-pmouseY)^2 ) = 빗변의 길이 = 속도 circle의 반지름을 속도로 하면 마우스 이동속도에따라 원의 크기가 ..

1. html태그에 직접 style로 지정하기 Hello world li 로 적용하면 border가 다 적용되는데 왜냐면 ol이 두개기 때문. 따라서 적용할 ol에 id를 "lecture"로 주어서 상속했다. 대등한관계로 따로 적용 ul,ol{ background-color: powderblue; } 3. 속성값 정리 div와 같은 영역 박스도 높이/너비가 정해지면 background가 보인다. 버튼위에 마우스가 올려져있을때(hover) button : hover{ color : red } padding은 컨텐츠 안의 공간 margin은 컨텐츠 밖의 공간 border은 컨텐츠 테두리 .div{ border : 6px dashed red; margin : 10px 10px 10px 10px; padding..