본문 바로가기
반응형

개발248

[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.
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.
docker permission denied 해결 서버에 Docker를 설치하고 Docker 명령어 확인을 위해 docker ps나 docker images 등을 실행하면 아래와 같이 docker permission denied 에러가 뜬다. 이에 대한 원인과 해결하기 위한 방법을 알아본다. 원인 docker 명령어를 사용하는 docker 데몬은 Unix 소켓을 통해서 실행이 된다. 에러 내용에서 확인할 수 있듯이 /var/run/docker.sock 파일은 root 사용자 권한으로 설정이 되어 있다. 따라서 이를 일반 사용자가 접근 할 수 있도록 하기 위해서는 docker 그룹을 만들고 여기에 일반 사용자를 추가해서 해결한다. 해결 docker 그룹에 사용자를 추가한다. # docker 그룹에 사용자 추가 sudo usermod -aG docker $.. 2024. 2. 12.
VSCode TypeScript 빨간줄 에러 VSCode에서 TypeScript 코드 작성 중인데 import문부터 코드 전체적으로 빨간줄 에러가 여기저기 나타났다. 실행에는 문제가 없었지만 계속 신경이 쓰여서 설정들을 살펴봤는데 원인은 설정된 TypeScript 버전 문제였다. 먼저 증상은 아래와 같이 시작됐다. 기본적인 import문인데 .ts파일로 작성하면 문제가 됐다 적용된 TypeScript 버전 변경을 위해 CMD + Shift + P 에서 '버전'을 검색하여 TypeScript 버전 선택 화면을 보니 언제적 버전인지 2.4.1이 설정이 되어있었고, 필자 같은 경우 작업 영역들에 있는 선택할 수 있는 다른 버전들 안나오는 상태였다. 일반적으로 레퍼런스들을 보면 다른 선택할 수 있는 버전들이 뜨고 그것을 선택해서 변경을 해주면 된다고 하는.. 2023. 11. 21.
GitHub Actions를 활용한 AWS S3 CICD 구성(React 어플리케이션) GitHub Actions는 GitHub에서 제공하는 CICD를 제공하는 서비스이다. 다른 CICD 툴 처럼 GitHub 소스에 Push가 되거나 Pull Request 등 이벤트 발생 시 자동 실행도 제공해주고 있다. GitHub Actions를 활용해서 React 프론트 소스를 AWS S3에 호스팅하는 CICD 샘플 구성을 진행한다. 1. GitHub Actions workflow 생성 React 소스가 있는 GitHub 리파지토리에서 Actions을 클릭하고 Node.js를 기본 workflow로 선택(Configure 클릭)한다. 아래와 같이 기본 설정 yml파일(node.js.yml 파일)에서 필요한 부분을 먼저 수정한다. 필자는 node-version을 나머지는 지우고 18버전만 남겼고, ru.. 2023. 11. 19.
반응형

티스토리툴바