반응형 vue37 Vue.js 네이버 로그인 연동하기 vue에서 네이버 API를 활용하여 로그인 연동을 하는 샘플을 구현해본다 네이버 개발자 센터 오픈 API 이용 신청 네이버 개발자 센터에 접속하고 로그인 후 하단에 '네이버 로그인'을 클릭한다. 하단에 '오픈 API 이용 신청'을 클릭한다. '애플리케이션 이름' 항목과 사용 API에서 필요한 정보를 선택한다. 필자는 테스트를 위해 '연락처 이메일 주소'와 '별명'을 체크했다. 그리고 '서비스 URL'과 'Callback URL'은 로컬 접속 정보로 http://localhost:8080, http://localhost:8080/naverlogin 을 각각 입력하고 등록한다. 등록을 완료하면 내 애플리케이션 메뉴에서 다음과 같이 확인 가능하다. 개발 상태인 경우에는 검수요청이 별도로 필요하지 않지만 실제 .. 2024. 3. 14. Vue.js slot 기본 이해하기 vue에서는 컴포넌트를 활용하여 재사용을 높일 수 있는데, 어떤 화면 경우 굉장히 비슷한 UI 및 기능을 가지고 있으면서 아주 일부부만 다른 경우가 있다. 이런 경우 slot을 사용하여 컴포넌트의 재사용성을 좀 더 높여줄 수 있다. 예를들면, Alert팝업, Confirm팝업 등과 같이 팝업 화면이 있을 수 있다. 샘플 코드를 통해 간단히 slot의 기능을 이해해본다 먼저 slot이 정의된 컴포넌트를 작성한다. 위 코드에서 으로 name이 지정된 slot을 Named Slot이라고 하고, name이 없는 slot을 Default Slot이라고 한다. 이제 위의 컴포넌트를 사용하는 부모컴포넌트를 작성한다. Slot1 Alert 닫기 Slot2 Confirm 저장 닫기 자식 컴포넌트를 import하고 2번 .. 2024. 3. 8. Vue.js emit 이해 및 사용(자식컴포넌트 -> 부모컴포넌트 이벤트/데이터 전달) vue에서 부모컴포넌트에서 자식컴포넌트로 데이터를 보내기 위해 props를 사용한다면, emit은 자식컴포넌트에서 부모컴포넌트로 이벤트나 데이터를 보내기 위해 사용한다. 사용법을 이해하기 위한 간단한 샘플은 아래와 같다. 먼저 자식컴포넌트를 아래와 같이 작성해준다. mount가 되면 $emit을 사용하여 메시지를 전달한다. 부모컴포넌트는 아래와 같이 작성해보자. 자식컴포넌트로부터 "send-message"를 받으면 부모컴포넌트 내부의 receiveMsg() 메소드를 호출한다. 이제 부모컴포넌트를 적용해보면 아래와 같이 자식컴포넌트로부터 전달받은 메시지가 로그로 출력되는 것을 확인할 수 있다. 정리해보면 자식컴포넌트에서 $emit으로 부모컴포넌트에 선언된 "send-message" 이벤트를 호출한다. th.. 2024. 3. 7. Vue.js computed와 watch 이해하기 Vue에서 computed와 watch 모두 인스턴스 내에서 정의된 데이터 값의 변경이 일어나는지 감시하고, 변경이 될 때마다 정의된 기능을 실행한다는 측면에서는 비슷해보일 수 있지만 특징이나 사용용도 측면에서는 차이가 있다. Computed 만약, 인스턴스 내에서 데이터 조합 등의 처리가 필요하고, 이 처리된 데이터가 화면 내에서 여러곳에서 사용을 해야 한다면 아래와 같은 처리를 생각해볼 수 있다. {{ fullNameCall() }} {{ fullNameCall() }} 위와 같이 필요한 처리를 하는 함수를 만들어서 실행을 할 경우 화면에 표시가 될 때마다 함수를 호출을 해야하는 비효율이 발생하고, 데이터가 변경(ex. fName, lName)이 되었을 경우 감지가 안되는 문제가 있다. 이런 경우를 .. 2024. 3. 3. Vue.js Vuex 알아보기 Vuex vue에서 모든 컴포넌트가 접근 가능한 중앙 집중식 저장소 역할로 데이터 및 상태 관리를 할 수 있는 상태 관리 패턴 라이브러리 데이터를 store에 저장하고, 프로젝트 전체에서 사용할 수 있음 주로 사용자 로그인 정보, 쇼핑몰의 장바구니 정보 등 전역으로 관리되고 참조되어야 하는 정보들에 사용 Vuex Store 옵션 state: 프로젝트 전체에서 공통으로 사용할 변수 정의, state로 관리되는 데이터는 반응형 mutations: state에 정의된 변수를 변경할 수 있는 역할(동기처리), state의 변수를 직접 접근해서 변경은 불가 getters: state 변수의 로직처리 결과를 조회하는 Getter actions: mutations과 비슷한 역할, 여러개의 mutations처리가 가능.. 2022. 4. 8. Vue.js Custom Directive 사용 vue 템플릿에서 많이 사용되는 내장된 디렉티브(ex. v-bind, v-for 등) 외에 사용자가 직접 Custom Directive를 생성해서 사용할 수 있다. Simple 예시 먼저 간단한 샘플코드는 아래와 같다. directives 옵션을 사용해서 focus라는 디렉티브를 선언해주고 input 엘리먼트에서는 v-focus로 사용을 하면 된다. 컴포넌트를 로딩하면 아래와 같이 input에 포커스가 자동으로 적용된다. 전역(Global) 설정 위에 방법은 컴포넌트 내에서 사용가능한 선언 방법이고 전역(Global) 설정을 위해서는 아래와 같이 main.js에 directive("focus", focus)로 선언을 해준다. 앞에 "v-"는 작성 할 필요없다. const focus = { mounted:.. 2022. 4. 4. Vue.js props 사용 샘플 props 부모컴포넌트에서 자식컴포넌트로 데이터를 전달할 때 사용 자식컴포넌트에서 전달받을 데이터를 "props"로 선언 부모컴포넌트에서 "v-bind:" 또는 ":" 를 사용하여 데이터 전달 // 부모컴포넌트 데이터 전달 // 자식컴포넌트 props 선언 props: { message: String, } 부모 컴포넌트 샘플 코드 자식 컴포넌트 샘플 코드 string: {{ message }} number: {{ number }} bool: {{ bool }} array: {{ array }} user: {{ user.name }}, {{ user.age }} valid: {{ valid }} 테스트 결과 화면 2022. 4. 2. 이전 1 다음 반응형
