2022/12 9

JavaScript의 배열 메서드

JavaScript의 배열에 관련된 메서드들입니다. 이들 메서드는 배열의 원소를 추가, 제거, 변경, 정렬, 조회 등의 작업을 수행할 수 있습니다. 배열에 요소를 추가 push() 배열의 끝에 요소를 추가합니다 const array = [1, 2, 3]; array.push(4); // 결과 [1, 2, 3, 4] unshift() 배열의 시작 부분에 요소를 추가합니다 const array = [1, 2, 3]; array.unshift(0); // 결과 [0, 1, 2, 3, 4] *push()와 unshift()는 배열의 길이를 반환합니다. const array = [1, 2, 3]; // Push const newLength = array.push(4); // 현재의 배열 = [1, 2, 3, 4]..

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을 기준으..

클릭과 드래그 구분하기

클릭이 가능한 카드형 박스지만, 내부 내용을 드래그해서 복사도 가능하게 하고 싶은 경우. 즉, 같은 박스이지만 내부에서 드래그와 클릭을 구분해서 실행해야 할 경우 사용하는 방법. (아무리 생각해도 사용자 친화적 UI는 아닌 거 같지만 하라면 해야지 뭘 어쩌겠는가...) 방법 1. 클릭 시간을 기준으로 정확하게는 드래그를 구분하는것이 아니라, 클릭 지속시간을 이용하여 판단하는 방법. 마우스를 누르고 있는 시간이 길다면 클릭이 아닌 것으로 판단. 방법 2. 드래그 거리를 기준으로 클릭을 시작한 지점으로부터, 클릭을 해제한 지점까지의 거리를 측정하여 클릭과 드래그를 구분.

Asustor - 나만의 웹사이트를 공개해보자.

나만의 웹페이지를 별도의 공간에 업로드 하지 않고, 나의 서버를 이용해 공개해보자. STEP 1. 웹페이지 준비 우선 자신의 홈페이지 파일(HTML, CSS, JavaScript 등) 을 준비한다. 여기선 그냥 접속 확인용 HELLO WORLD를 출력하는 페이지를 준비하였다. HELLO WORLD! STEP 2. EZ-Connect 활성화 설정 > EZ-Connect에서 EZ Connect를 활성화 시킨다 EZ-Connect를 활성화 하면 외부에서도 {클라우드ID}.ezconnect.to 라는 주소로 언제든지 자신의 NAS에 접속할 수 있게 된다. STEP 3. DDNS 설정 수동연결 > DDNS로 이동하여 DDNS 서비스를 활성화 해준다. 이것도 위와 같이 누구나 {클라우드ID}.myasustor.co..

VS Code - API 동작 확인하기(Thunder Client)

Thunder Client는 개발 하면서 API 요청과 요청에 대한 결과를 확인할수 있게 도와줍니다. # 어떻게 사용하는것인가 상황. 왼쪽과 같은 API 문서가 있고, 이메일 API가 정상적으로 작동하는지 확인을 해보자. (1) 우선 VS Code의 확장 마켓플레이스에서 Thunder Client를 설치한다. (2) 설치가 완료되면 왼쪽 메뉴 목록에 Thunder Client 아이콘이 등록되며 그 아이콘을 Thunder Client를 사용할 수 있다. (3) New Request 버튼을 눌러 테스트 하고 싶은 내용을 작성한후 Send를 보내면 끝. 아래와 같이 POST 요청은 주로 Body > Form에서, Get 요청은 Query에서 내용을 작성하면 된다. 토큰값이 필요한 경우도 있는데, api키 값을..

[JavaScript] 공백을 체크하는 방법

댓글, 게시물 작성 또는 다양한 인풋 창에서 해당 내용이 비어있는지 또는 스페이스만 입력해서 내용이 없는 공백만 입력되어있는 것들을 확인하고 제거하는 방법입니다. # 내가 원하는 결과 대충 아래와 같은 위지윅(WYSWYG)을 이용해 게시물을 작성한다고 했을때 제목과 내용이 비어있는 경우엔 글을 저장할 수 없게 하고 싶다. 1단계. JavaScript 제목의 문자열이 title에 저장된다고 가정했을 경우 입력된 내용이 있다면 문자열의 길이(length)가 0보다 길어지기 때문에 다음과 같은 방법으로 해결이 가능하다. if(!(this.title.length > 0)) { // title의 길이가 0보다 크지 않다면! alert(‘제목을 입력해 주세요’); return } sample. // 이런식으로 제목..

Vue3 - 떨어진 컴포넌트간에 데이터와 이벤트 주고받는 방법 mitt

mitt는 컴포넌트끼리 부모자식간의 관계가 아닌 멀리 떨어져 있어는 컴포넌트 간에도 데이터를 전송할 수 있도록 도와주는 라이브러리입니다. Vue2 시절엔 Event Bus라는것을 사용했었는데, Vue3에서는 mitt 또는 tiny-emitter를 사용합니다. 단 이렇게 컴포넌트끼리 서로 데이터를 주고받다보면 프로젝트가 커지면 커질수록 유지 관리에서 문제가 생기게 되므로, 공식적으로도 권장하는 방식은 아닙니다. 이러한 데이터 관리는 Pinia(구. Vuex)를 이용하는것이 좋지만, 상황에 따라서 필요할수도 있으니 필요에 따라 사용하시면 될거 같습니다. #1. 설치 npm install --save mitt #2. 등록 mitt 를 사용하기위해선 main.js 파일을 아래와 같이 수정해주면 됩니다. impo..

반응형