본문 바로가기
반응형

분류 전체보기323

[Google OAuth] 앱을 저장하는 중에 오류가 발생했습니다. 요청이 악용으로 분류되었으며 진행할 수 없습니다. 해결 방법 Google OAuth 사용을 위해 OAuth 동의를 하고, 앱을 등록하는 중에 다음 에러가 발생했다. 앱을 저장하는 중에 오류가 발생했습니다. 요청이 악용으로 분류되었으며 진행할 수 없습니다 앱 등록 정보는 아래와 같이 테스트를 위해 최대한 간단히 작성을 한 상태였다. 문제는 "앱 이름"에 있었다. 앱 이름에 'google' 이라는 단어가 포함이 되어 있으면 '요청이 악용으로 분류되었으며 진행할 수 없습니다.' 라는 에러가 뜨고 다음이 진행이 안된다. 앱 이름 'google'이라는 단어를 제거하고 '구글'로 수정하여 해결했다. 연관 내용: Vue.js Google 로그인 연동하기 Vue.js에서 Google 연동하는 방법을 알아본다.Google 계정 로그인은 OAuth 2.0 기반의 사용자 인증을 제공.. 2024. 3. 15.
[Google OAuth2] The given origin is not allowed for the given client ID 에러 해결 Google 로그인 연동 처리 중에 아래와 같은 에러가 발생했다. The given origin is not allowed for the given client ID 구글 연동을 위해 Google Cloud에서 등록한 클라이언트와 지금 호출하고 있는 도메인에 문제가 있었다. 처음에는 로컬에서 테스트를 위해서 구글에서 아래와 같이 'http://localhost:8080'으로 설정 했다. 그러니 위에 같은 에러가 발생하는 상황이었다. 해결방법은 다음과 같이 port를 제거한 도메인 "http://localhost" 를 함께 등록해주니 해결됐다 연관 내용: Vue.js Google 로그인 연동하기 Vue.js에서 Google 연동하는 방법을 알아본다.Google 계정 로그인은 OAuth 2.0 기반의 사용자.. 2024. 3. 15.
Vue.js 네이버 로그인 연동하기 vue에서 네이버 API를 활용하여 로그인 연동을 하는 샘플을 구현해본다 네이버 개발자 센터 오픈 API 이용 신청 네이버 개발자 센터에 접속하고 로그인 후 하단에 '네이버 로그인'을 클릭한다. 하단에 '오픈 API 이용 신청'을 클릭한다. '애플리케이션 이름' 항목과 사용 API에서 필요한 정보를 선택한다. 필자는 테스트를 위해 '연락처 이메일 주소'와 '별명'을 체크했다. 그리고 '서비스 URL'과 'Callback URL'은 로컬 접속 정보로 http://localhost:8080, http://localhost:8080/naverlogin 을 각각 입력하고 등록한다. 등록을 완료하면 내 애플리케이션 메뉴에서 다음과 같이 확인 가능하다. 개발 상태인 경우에는 검수요청이 별도로 필요하지 않지만 실제 .. 2024. 3. 14.
[독서] 얼 나이팅게일 위대한 성공의 시작 얼 나이팅게일은 나폴레온 힐과 함께 자기계발 분야의 거장 중 한 명이라고 알고 있다. 여러 자기계발 책에서 자주 등장해서 나도 모르게 이제는 이름이 익숙진 상태이다. 매번 다른 책들에서 인용된 문구만 보다가 이번에 처음으로 얼 나이팅게일의 이 책을 읽었다. 내용이 많이 딱딱하고 어려울 것이라고 예상했는데 전혀 그런거 없이 잘 이해가 되었고, 성공을 위해서는 명확하게 어떤 것들이 중요하고 어떻게 시작을 하면 되겠구나라는 것을 알 수 있었다. 결국, 성공을 위해서는 스스로의 정체성에 맞는 목표 설정이 가장 중요하고, 이 목표들을 위해 자기 자신을 믿고 흔들리지 않고 꾸준히 노력하면 반드시 성공할 수 있다. 힘들 때나 마음이 좀 혼란스러울 때 다시 시작할 수 있는 힘을 줄 수 있는 책이라고 생각한다. - 성공.. 2024. 3. 10.
[독서] 공자가 죽어야 나라가 산다 - 김경일 조선시대부터 우리의 문화적 정신적 핵심이라고 볼 수 있는 유교에 대한 역사와 여러가지 안타까운 비판들, 그리고 대안들에 대한 내용이다. 갑골문자 등을 통해 유교의 시작이 어떠했고, 정치적으로 어떻게 활용되어서 지금까지 우리에게 남아 있는지 알 수 있다. 공자의 도덕을 딛고 선 유교 문화는 ‘남성적 우월’, ‘젊음과 창의성 말살’, ‘수직 윤리’, ‘주검 숭배가 낳은 우울함’이 가득하다. 여러가지 비판들 중에는 공감이 되는 부분이 많았고, 변화하고 있는 현시점과 내 인지 범위의 한계 등으로 이해가 잘 안되거나 너무 극단적인 해석이 아닌가 하는 부분도 있었다. 전체적인 관점에서 앞으로 세계는 정치적으로 그어놓은 국경을 넘어, 한국인을 넘어서 ‘인간’의 삶이라는 관점에서 다양성을 인정하고 비판을 수용하여 함께.. 2024. 3. 9.
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.
반응형

티스토리툴바