기술 팁 & 가이드 (Tech Tips & Guides) 21

Asustor NAS에서 Vue.js 앱 호스팅: 서버 측 라우팅 설정하는 방법

Asustor NAS를 웹 서버로 사용하고 있다면, Vue.js 앱을 호스팅하여 사용자에게 제공할 수 있습니다. 그러나 Vue.js 앱은 클라이언트 측에서 라우팅을 처리하기 때문에, 서버 측에서도 라우팅을 지원해야 합니다. 일반적으로 웹 서버는 요청된 경로에 해당하는 파일이나 디렉토리를 반환하는데, Vue.js 앱의 클라이언트 측 라우팅과 웹 서버의 동작이 일치하지 않아서 문제가 발생할 수 있습니다 예를들면, 메인 페이지를 거치지 않고 app.myasustor.com/switch와 같은 하위 경로로 직접 접근하는 경우 웹 서버는 해당 경로를 찾지 못하고 "페이지를 찾을 수 없음"과 같은 오류를 반환합니다. 이 문제를 해결하기 위해서는 서버 측에서도 라우팅 설정을 추가하여 모든 경로를 Vue.js 앱으로 ..

Asustor - 다른 사용자의 폴더에 접근하는 방법

기본적으로는 다른 사람의 정보에 접근하는것은 매너(?)상 좋지 않지만, 아래와 같이 NAS에 여러명의 일반 사용자가 있다고 가정할 경우. 혼자서 사용하는 NAS라면 여러 개정을 통해 용도를 분류 하는것도 괜찮은 방법입니다. #1 관리자 권한 엑세스 제한 해제 위에서 언급했다싶이 다른사람의 계정은 건들지 않는것이 좋기 때문에 기본적으로 다른 유저의 폴더는 관리자라도 보이지 않게 설정이 되어 있습니다. 일반 유저의 폴더에 접근하기 위해선, 제어판 > 공유폴더로 이동한 후 User Homes를 선택한 후 편집을 눌러, 관리자 권한으로 엑세스 제한의 체크를 해제해 줍니다. #2 파일 탐색기를 통해 접근 가능 제한을 해제 하였다면 파일 탐색기를 통해 User Homes로 이동하면 다른 유저들의 이름을 볼 수 있고..

Asustor - NAS를 사용할때 방화벽 설정은 필수입니다.

최근 누군가가 자꾸 저의 저장소에 노크를 해대는 바람에 적어보는 짧은 글입니다. 카페를 둘러보니 의외로 이거 설정 안하고, 털리는 분들이 많은거 같더군요. 이 글은 해킹을 막기위한 기본적인 NAS 방화벽 설정입니다. 01. 자동 블랙 리스트 우선 다른것들을 설정하기에 앞서 [설정 > ADM 방화벽의 Network Defender 탭]으로 이동한 후, 자동 블랙 리스트를 활성화 합니다. 자동 블랙 리스트는 특정 기간 내에 다수로그인 시도가 발생 시, 자동으로 해당 IP를 차단합니다. 예) 1분 내에 3번의 로그인 실패시 IP 차단. 아래 스크린샷을 보면 알겠지만, 어느 순간부터 누군가가 끝없이 자신의 NAS에 반복해서 찾아오게 될 것이기에 자동 블랙 리스트는 필수입니다. 도데체 누가 방문하는것인가 IP를 ..

Asustor - 웹 서버가 필요한 웹페이지를 배포해보자.

얼마전 작성한 Asustor - 나만의 웹사이트를 공개해보자 방식을 이용하면 일반 웹이나 빌드가 된 React, Vue는 배포할 수 있지만, 보여지기만 하는 페이지가 아닌 서버가 필요한 파일들은 실행을 할 수가 없습니다. 이번 글은 그러한 프로젝트들을 웹사이트를 통해 배포하는 방법입니다. STEP 1. SSH(Secure Shell) 서비스 > Terminal로 이동하여 SSH 서비스를 활성화 해 줍니다. 이제 SSH/SFTP를 통해 NAS에 로그인 할 수 있습니다. STEP 2. SSH를 통해 NAS에 접속 windows의 경우, 윈도우에서 SSH 클라이언트로 많이 사용되는 Putty나, 마이크로소프트 스토어에서 window terminal 등을 받아서 사용할수도 있지만, 이 글에선 MacOS을 기준으..

Asustor - NAS 처음 시작하면서 설정하는 것들

게시물 이동하였습니다. https://zenn.kr/setting-up-asustor-nas-for-beginners/ Asustor: NAS 처음 시작하면서 설정하는 것들이번에 NAS를 구매하게되어 이런저런 것들을 건들여 보면서 사용을 하고있는데…사용 방법에 대한 설명이 너무 부실하고 뭔가 많이 미묘해서 앞으로 간단하게나마나는 이렇게 사용하고 이렇게zenn.kr

[Windows] 마우스 포인터 추천 - ml.blau.3

이 게시물은 2021.12.01 타 블로그에 작성된 내용의 백업본입니다. 이건 필수는 아니지만, 맥처럼 마우스 포인터를 찾는게 편리하지 않다보니 이것도 조금이라도 가시성이 좋은 것으로 변경하는것을 추천합니다. DeviantArt라는 곳에서 maik라는 분이 제작한 ml.blau.3라는 포인터로 다운받기 위해서는 해당 사이트에 가입을 할 필요가 있습니다. #1. 다운로드 사이트 링크 다운로드 페이지로 이동 > #2. 마우스 포인터 샘플 #3. 설치 방법 (1) 위 사이트에서 파일을 다운 받고 다운 받은 파일의 압축을 해제합니다 (2) install 100 percent 파일을 마우스 오른쪽으로 클릭하여 설치를 선택합니다. *설치가 바로 나타나지 않을경우 더 많은 옵션 표시를 눌러 확인해 봅니다. (3) 설..

[Windows] 추천 이미지 뷰어 - 꿀뷰

이 게시물은 2021.11.30 타 블로그에 작성된 내용의 백업본입니다. 맥만 사용하다 윈도우를 사용하게되니 너무나 이미지를 검색하고 보는게 불편했다. 해외 사이트부터 유료 앱까지 수십가지를 사용해보고 내린 결론은... 국내 반디소프트에서 제작한 무료 이미지 뷰어인 '꿀뷰'가 최고인듯 하다. #1. 다운로드 사이트 링크 꿀뷰 다운로드 페이지로 이동 > #2. 사용 후기 꿀뷰 홈페이지에 나와있는 샘플 이미지이다. 처음 꿀뷰를 사용하기 꺼려졌던 부분이 상단의 '메뉴바'와 하단에 나와있는 '컨트롤바'의 디자인이 너무 올드하다는 느낌이 들어서였다. 막상 실행해보니 메뉴바와 컨트롤바는 마우스를 가져다 대지 않는 한 딱히 보이지 않았고, 매우 빠르고 가볍게 사용할 수 있어 좋았다. (아니 이미지를 하나 열었을때 동..

네이버 로그인 API 활용하여 로그인 기능 구현하기

#1 네이버 개발자 센터에 접속 네이버 개발자 센터에 접속한 후 로그인을 하고 오픈 API 이용 신청을 합니다. 다음은 네이버 아이디로 로그인 오픈 API 신청 페이지입니다. 하단의 [오픈 API 이용 신청]을 눌러 다음으로 진행합니다. https://developers.naver.com/products/login/api/api.md #2 애플리케이션 등록 (API 이용신청) 자신에게 맞는 형태로 이름과 로그인 제공 정보를 선택. 서비스 환경 설정 등을 진행해 줍니다. 서비스 URL은 자신의 홈페이지 주소를, 로그인 Callback URL은 이후에 생성할 callback페이지를 연결할 주소입니다. 모든 설정을 완료하고 등록을 하면 Client ID와 Client Secret 코드가 등록된 페이지가 나타납..

홈팟 자동연결 푸시알람 끄는 방법

홈팟이 있는 장소에서 애플 기기를 사용하게 되면, 좀 더 가까이 이동하거나 탭 하여 연결하라는 푸시 알람과 함께 진동이 발생합니다. 이게 음악을 듣거나 홈팟을 사용하게 될 경우엔 손쉽게 연동이 되는 부분이라 분명 매우 편리한 기능인데... 위와 같이 책상이나 주 활동공간에 홈팟이 있을 경우 작업을 하다 폰을 들 때마다 팝업창이 떠버리기 때문에, 오히려 매번 매우 불편한 상황이 발생합니다. 이럴 땐 다음과 같은 방법으로 홈팟의 푸시 알람을 끌 수 있습니다. 홈팟 자동 연결 푸시 알람 끄기 1. 홈팟 연결 푸시 알람은 위와 같이 나타납니다. 이 알람을 끄기 위해선 다음 절차를 따릅니다. 2. '설정 > 일반 > AirPlay 및 Handoff'로 이동합니다. 3. HomePod으로 전송을 OFF로 해줍니다.

구글 지도 API 사용하기

Google Maps API를 사용하기 전 알아두면 좋은 사전 정보 • Kakao 지도와는 달리 Google Maps를 사용하면 대한민국 외의 지역을 표시할 수 있습니다. • Google은 매달 200달러의 크레딧을 무료로 제공하며, 200달러를 초과할 경우 등록한 신용카드로 이용료가 청구됩니다. • 단, 처음 가입한 신용카드 정보의 경우 자동 가입 방지를 막기 위해서일 뿐, 유료 계정으로 직접 업그레이드하지 않았다면 이용료가 청구되지 않습니다. #1 구글 계정 만들기 기존에 사용하는 구글 계정이 있다면 그대로 사용하면 되고, 없다면 구글 계정 페이지로 이동하여 구글 계정을 생성해 줍니다. https://accounts.google.com/ #2 Google Maps Platform에서 API 키를 받기..

반응형