Frontend🐮

pinia기본

pinia
pinian 기본 기록용

less than 1 minute read

Frontend

github pages에서 vue router 404 에러

배경1. vue 프로젝트를 github pages를 통해 myurl.com에 배포를 했다 배경2. vue router를 사용하여 myurl.com/posts 페이지가 있다
배경3. vue router의 history모드는 createWebHistory를 사용한다

myurl.com에서 myurl.com/posts로 이동하는 기능은 정상적으로 동작한다. 만약 여기서 이동한 상태에서 새로고침을 하거나, 주소창에 직접 myurl.com/posts를 사용한다면?
동작하지않는다!!!!!ㅜㅜ 물론 localhost에서 돌렸을 경우에는 정상적으로 동작한다.

less than 1 minute read

Frontend

object의 변수인 경우 ref와 reactive 어느 것을 사용할까

object변수는 ref와 reactive 중 어떤 것으로 선언해야할까
각각의 장단점이 있다 확인해보자

less than 1 minute read

Frontend

Route

Route
url에 따라 보여줄 vue를 정하자

1 minute read

Frontend

Template ref

template ref
태그 같은 DOM element요소를 ref를 이용하여 접근하자

1 minute read

Frontend

provide와 inject

provide와 inject
1단계위인 부모Component가 아닌 고조할아버지Componennt와 고손자Component와의 데이터 통신방법을 알아보자

less than 1 minute read

Frontend

slots

slots
부모component에서 자식의 템플릿 content를 렌더링해주는 것

1 minute read

Frontend

nonProps

nonProps
컴포넌트에 전달되지만, props나 emit에 정의된 특성을 지니고 있지 않은 속성 또는 이벤트 리스너

1 minute read

Frontend

v-model을 통한 3depth 양방향 바인딩

3depth의 양방향 바인딩
component의 3개 depth를 갖는다했을 때 처리 방법

1 minute read

Frontend

emit, component와 v-model을 통한 양방향 바인딩

emit
<script setup>안에서의 props 와 component와 v-model을 통한 양방향 바인딩

2 minute read

Frontend

props

props

1 minute read

Frontend

watch

watch
watch 사용법, watch와 computed의 차이

1 minute read

Frontend

양방향 바인딩

v-model
v-model을 통해 양방향 바인딩을 시키자

less than 1 minute read

Frontend

event Parameter

$event 파라미터
v-on을 통해서 실행할 함수를 연결할수있는데, 함수에 event Parameter에 대해 알아보자

less than 1 minute read

Frontend

Scope와 Closure

Scope와 Closure
scope는 function Scope와 block Scope가 있다. 여기서 var, function(){...}는 function Scope이고, let과 const는 block Scope이다
block은 {와 }가 포함되어 있으면 무조건 block scope이다. 그렇기때문에 function Scope는 block Scope에 포함된다.

1 minute read

Frontend

classStyleBinding

classStyleBinding
v-bind를 이용한 class binding을 알아보고, ref와 Array,reactive,computed의 관계를 알아보자

1 minute read

Frontend

computed

Computed
반응형 데이터를 이용한 계산된 속성

1 minute read

Frontend

Ref와 Reactive

반응형 데이터
반응형 데이터 ref와 reactive에 대하여

3 minute read

Frontend

notion page를 웹사이트에 삽입하기

notion 페이지들을 github.io에 넣어보자

4 minute read

Frontend

간단한 반응형 메뉴갖는 웹 만들기

간단한 반응형 Header 메뉴바 만들기 ↗️

less than 1 minute read

Frontend

Json

자바스크립트에서 Xml을 대체하는 데이터 포맷

1 minute read

Frontend

Javascript 배열

자바스크립트에서 배열

less than 1 minute read

Frontend

Javascript 객체

자바스크립트-객체지향 개념의 객체(object)

1 minute read

Frontend

Javascript 클래스

자바스크립트-객체지향 개념의 클래스

less than 1 minute read

Frontend

Javascript 함수

자바스크립트에서의 여러 함수 선언방법

1 minute read

Frontend

Javascript 변수심화

자바스크립트에서 변수의 비교와 변수할당방식

less than 1 minute read

Frontend

Javascript 변수

자바스크립트에서 변수란?

1 minute read

Frontend

CSS Centering

css의 flexbox을 사용할 수 없을 때 포지션변경을 해보자.

1 minute read

Frontend

CSS flexbox

css의 flexbox는 element의 요소의 화면 포지션을 쉽게 컨트롤할 수 있다.

less than 1 minute read

Frontend

CSS 변수

css의 변수를 설정함으로써 하나하나 값을 바꾸지않고 변수 값만 바꿈으로써 전체를 바꿔줄수있다.

less than 1 minute read

Frontend

CSS Size

css의 사이즈조절을 알아보자. (em, rem, %, vw, vh)

1 minute read

Frontend

CSS layout

css의 레이아웃(display 속성)을 알아보자.

less than 1 minute read

Frontend

CSS 기본

CSS 기본속성에 대해 알아보자

less than 1 minute read

Frontend

HTML5 Data 속성

HTML의 data attributes는 HTML5에서만 가능하다.

less than 1 minute read

Frontend

HTML의 다양한 태그

HTML의 다양한 태그를 알아보자

less than 1 minute read

Frontend

Visual studio code의 유용한 툴

visual studio code에서 유용한 확장툴

less than 1 minute read

Frontend

HTML 기초

HTML 기초

less than 1 minute read

Frontend