잉어빵

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는 값이 변화된 것을 감지하고 실행 되는 이벤트기 때문에 차이가 있는것을 알 수 있었습니다.

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

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

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

리엑트를 공부하면서 (인강... 레퍼런스 문서 등등) 최근에 왜 함수형 컴포넌트가 클래스 컴포넌트보다 대세가 되었는지 생각해보았습니다... 지극히 개인의 의견 !!

먼저 Hook의 도입이 클래스 컴포넌트가 갖고 있던 기존의 문제들을 어떤 식으로 해결 했는지 이해하면 좋을것 같다.

대표적인 예로 클래스 컴포넌트들은 대부분 UI를 레너링하는 로직(이벤트 리스너 로직..) 과 내부 데이터 (상태/생에 주기) 를 처리하는 로직을 따로 떼기 어려워 코드가 많이 복잡하여 가독성이 떨어집니다. 그래서 함수형 컴포넌트에 비해 버그도 빈번히 발생되고 유지보수도 떨어진다고 생각함...

이런 문제가 있었지만도 기존 클래스 컴포넌트 사용이유는 함수형 컴포넌트의 기능이 상대적으로 많이 제한 되었기 떄문인데 단순한 UI를 보여주는 것 외에 상태관리 , 컴포넌트 생애주기, 하위 컴포넌트 props 전달 같은 기능은 모두 클래스 컴포넌트에서 가능하였습니다.

그러나 Hook이 도입 되면서 useState, useEffect를 이용하여 함수형 컴포넌트 내부에서 상태 및 컴포넌트 생애주기도 관리 할 수 있으며 , 클래스 컴포넌트가 할 수 있던 작업들을 보다 쉽고 간결하게 할 수 있다는 것입니다.

또한 Hook을 통하여 컴포넌트 내부 데이터 처리 로직을 컴포넌트에서부터 따로 분리 시킬 수 있게 되면서 코드 재사용성이 많이 높아진것 뿐만 아니라 개발자들이 ui 렌더링 로직과 데이터 처리 로직도 따리 분리해서 생각할 수 있게 된 점이 중요합니다. (ex.. 커스텀 훅으로 data fetching 같은 로직을 따로 빼서 관리) 덕분에 디자인 수정할 경우 ui 로직만 손보면 되다보니 클래스 컴포넌트보다 사용하기 편해짐

이를 통하여 hook 을 통한 상태로직 재사용이 쉬워지면서 이를 기반으로한 라이브러리 (react-query 등) 이 개발 되며 점점 함수형 컴포넌트 로 사용하는 방향이 되지 않았나... 생각합니다

 https://ko.reactjs.org/docs/hooks-intro.html#motivation