잉어빵

windown.open()

팝업을 띄우는데 사용

window.open(url, name, option)
window.open('팝업주소', '팝업창 이름', '팝업창 설정');

팝업창 이름

- target="_blank" : 팝업을 새창에서 열기 . target 입력하지 않았을 때 default

- target="_parent" : 부모창에서 팝업창 열기

- target="_self" : 현재 페이지에서 팝업 열기

- target="_top" : 현재 페이지에서 최상위 페이지에서 팝업이 열림

// 커스텀 컴포넌트 형태
<커스텀 컴포넌트 v-model="모델명" @click="클릭 이벤트"/>


// 커스텀 컴포넌트 내부
<template>
	<div>
    	<!--문제 되던 코드-->
    	<input type="radio" v-model="모델명" @click="커스텀 클릭 이벤트"/>
        
        <!--수정 코드 -->
        <input type="radio" v-model="모델명" @change="커스텀 클릭 이벤트"/>
    </div>    
</template>


-- 이하 생략 --

커스텀 클릭 이벤트(evt) {
	this.$emit('click', evt);
}

vue에서 switch 컴포넌트를 만드는 중 커스텀 컴포넌트에 @click 이벤트를 달아야 하는 상황이 생겼습니다.

내부에는 radio 타입의 input 태그가 있고 그곳에 @click 이벤트를 달아서 클릭 시에 이벤트를 올려야지 생각했는데 의도와 다르게 작동하였습니다.

의도할 때는 해당 태그의 v-model 값이 변경 되고 함수가 실행 될거라고 생각하였으나 클릭 이벤트가 먼저 발생되었기 때문에 @change 이벤트로 변경하여 실행하였더니 의도된대로 잘 되었습니다.

정리 해보자면 @click 이벤트는 클릭 시 발생 되는 이벤트고 @change는 값이 변화된 것을 감지하고 실행 되는 이벤트기 때문에 차이가 있는것을 알 수 있었습니다.

내비게이션 바라고 불리는 이 카테고리 영역은 위치와 역할에 따라 GNB, LNB, SNB, FNB 등으로 나눌 수 있습니다.

1. GNB (Global Navigation Bar)

어느 페이지에 들어가든 공통적으로 사용 하는 메뉴.

보통 최상위 메뉴이며 상단에 위치합니다.

2. LNB (Local Navigation Bar)

GNB를 클릭하거나 마우스 hover를 하였을 때 소제목 형식으로 나오는 메뉴

3. SNB (Side Navigation Bar)

일반적으로 왼쪽에 있어서 LNB(Left Navigation Bar)라고 불리기도 합니다. (오른쪽에 위치할 수도 있어요)

4. FNB (Foot Navigation Bar)

웹사이트 가장 하단 Footer에 위치한 메뉴 

위 내용들은 개인 공부용으로 만들었습니다.

참고 사진들은 인프런 사이트를 참조하여 올렸습니다!

프로젝트 작업 중 작성 또는 할당은 하였지만 사용하지 않는 변수가 있을 경우 no-unused-vars 에러를 eslint에서 발생 시키는 경우가 있습니다.

사실 작업 시에 문제가 되고 있진 않지만 매번 터미널에 에러가 뜬다면 작업자 입장으로선 상당히 신경쓰일 수 있는데 이런 에러를 끄는 방법은 vue 프로젝트 기준 .eslintrc.js 에서 코드 한줄이면 나타나지 않게 할 수 있습니다.

rules에 "no-unused-vars" : "off" 를 입력후 내부 서버를 다시 재실행 시킨다면 해당 에러는 더 이상 발생되지 않는것을 확인할 수 있습니다!