Atelier BiCute

Vue에서는 사용자 지정 이벤트를 사용하여 서로 다른 컴포넌트 간에 통신할 수 있습니다. 템플릿에서 사용자 지정 이벤트를 내보내려면 $emit메서드를 사용하여 이벤트 이름과 이벤트에 포함할 페이로드를 전달할 수 있습니다. 아래는 $emit 메서드를 이용하여 자식 컴포넌트가 부모 컴포넌트에게 데이터를 전달하거나 데이터를 변경하도록 요청하는 방법들입니다. # 템플릿에서 이벤트를 요청 $emit 메서드를 사용하여 이벤트 이름과 이벤트에 포함할 페이로드를 전달할 수 있습니다. // 자식 컴포넌트의 템플릿에서 사용자 지정 이벤트를 요청 Click me # 스크립트에서 이벤트를 요청 this.$emit 메서드를 사용하여 컴포넌트의 스크립트 태그에서 사용자 지정 이벤트를 내보낼 수도 있습니다 . // 자식 컴포넌트의..

버튼 예를 들어, 위와 같은 버튼이 있을 경우 여러 번 클릭해도 한 번만 실행되도록 하고 싶을 경우 아래와 같은 방법들을 사용할 수 있습니다. # removeEventListener를 사용 const button = document.querySelector('button'); // 이벤트 핸들러를 생성 button.addEventListener('click', handleClick); function handleClick() { console.log('Button clicked!'); button.removeEventListener('click', handleClick); } 내부 함수 작동 후 removeEventListener를 이용하여, 더이상 함수가 호출되지 않도록 이벤트 핸들러를 제거해 줍니다...

# 주어진 범위 내에서 임의의 정수를 생성하는 방법 function getRandomInt(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min; } console.log(getRandomInt(1, 10)); 작동 방식 1. 입력받은 최소값(min)을 올림(Math.ceil), 최대값(max)을 내림(Math.floor)한다. 이는 min과 max가 소수일 경우 소수 자리를 제거하기 위함입니다. 2. Math.random 함수를 이용해 0과 1 사이의 임의의 실수를 생성한다. 3. 생성한 임의의 실수에 (max - min + 1)을 곱한다. 이는 min과..

# 숫자로 UUID 만들기 function generateUUID() { const digits = []; for (let i = 0; i < 16; i++) { digits.push(Math.floor(Math.random() * 10)); } return `${digits[0]}${digits[1]}${digits[2]}${digits[3]}-${digits[4]}${digits[5]}-${digits[6]}${digits[7]}-${digits[8]}${digits[9]}-${digits[10]}${digits[11]}${digits[12]}${digits[13]}${digits[14]}${digits[15]}`; } console.log(generateUUID()); for 반복문을 16번 반복하..

# Reduce const data = ['1', '3', '5', '7', '9']; function useReduce() { const sum = data.reduce((acc, element) => acc + parseInt(element), 0); console.log('reduce() = ', sum); } useReduce() // "reduce() = " 25 동작 방식 reduce() 메서드는 데이터 배열의 각 요소에 대해 reducer 함수를 호출하는데, 첫 번째 반복에서 acc는 초기값 0으로 설정되고 element는 데이터 배열의 첫 번째 요소인 '1'로 이 들어옵니다. reducer 함수는 parseInt()를 호출하여 요소를 숫자로 변환하고 현재 0인 acc에 더합니다. Reduc..

# 합자(Ligature)란? 합자(合字, Ligature)는 둘 이상의 글자를 합하여 한 글자를 만드는 것. 또는 그 글자. 자주 쓰이는 주요 합자들의 모양은 대게 비슷하며, 꼭 어떻게 해야한다고 정해진것이 아니기에 폰트에 따라 독자적인 형태를 가지고 있는것 또한 존재한다. # VS CODE에서 합자를 사용하는 방법 (1) 합자를 지원하는 폰트를 설치한다. 우선 아무 폰트나 가능한것이 아니기에, 합자를 지원하는 폰트를 설치해야합니다. 종류는 너무나 많으니 유료, 무료 등 원하는 합자를 지원하는 폰트를 설치합니다. (2) VS Code 설정 ① 설정을 열고(cmd + ,) 글꼴이라고 검색한 후, Editor: Font Family에 합자로 사용할 폰트를 가장 앞쪽에 작성해 줍니다. ② Font Ligat..

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]..

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

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

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