본문 바로가기
반응형

개발247

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.
Jenkins를 활용한 SpringBatch 스케줄러 구성 SpringBatch로 작성한 배치 어플리케이션을 주기적으로 실행시키기 위한 스케줄러로 Jenkins를 활용하는 방법을 알아본다. 다른 대안들도 많이 있지만 Jenkins 활용 시 오픈소스 무료로 GUI 기반 대시보드, 이력관리, 권한관리 등이 가능하다는 장점이 있다. 배치 스케줄러 JOB을 생성한다 생성한 JOB에서 좌측 "구성"을 클릭하고 설정을 시작한다. 스케줄러를 설정하는 것임으로 '소스코드 관리'는 None으로 선택하고, 하단에 빌드 유발에 crontab 표현식으로 설정을 한다. 아래 예시는 "월~금요일, 매일 1시, 05~30분 사이 실행"을 의미한다. 분까지 직접 설정하는 방식이 아닌 H 심볼을 사용하여 Jenkins가 내부적으로 범위 내(ex. 05~30분)에서 분을 결정하도록 하면 부하 .. 2023. 10. 18.
반응형

티스토리툴바