Atelier BiCute

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

나만의 웹페이지를 별도의 공간에 업로드 하지 않고, 나의 서버를 이용해 공개해보자. 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..

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키 값을..

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

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

특별히 뭔가 어려운걸 해야하는건 없으니 아래 순서대로, 진행하면 됩니다. 01. EZ-Connect 활성화 [설정 > EZ-Connect]로 이동하여 EZ Connect 활성화를 체크한다. 02. DDNS 설정 [설정 > 수동 연결 > DDNS] 로 이동하여 DDNS 서비스 활성화를 체크한다. 03. WebDAV 설정 [서비스 > WebDAV]로 이동하여 기능을 활성화 한다 04. 파일을 서버에 업로드 파일 탐색기를 열고 원하는 위치에 파일을 업로드 한다. 05. 앱 설정 앱을 이용해 서버와 연결한다. nPlayer: 네트워크 탭으로 이동한 후 + 를 눌러 WebDAV를 선택한 후 아래와 같이 세팅한다. (자신에게 맞는 정보는 위에서 이미 다 설정했으니 자신에게 맞는 호스트 / 사용자 계정 / 포트 번호..

NAS는 아주 예전에 시놀로지를 이용하여 순수하게 저장용으로만 사용했었는데, 이번에 저장공간도 필요하긴 하지만 웹 서버를 메인으로 사용할 겸 나스를 새로 장만하게 되었습니다. 제목 그대로 Asustor 사용한지 불과 몇일 지나지도 않았지만 그동안 개인적으로 느낀 단점들에 대해 작성해 봅니다. 치명적인 문제점들 실행 자체를 할 수 없는, 매우 중요한것이지만 방치되어있는 문제점들. 1. ACC 프로그램 설치 불가 처음 시작할때 연결 가능한 NAS를 찾아서 설정을 도와주는 프로그램이기에 처음 사용한다면 이걸 설치해야 하는데... 공식 홈페이지이에서 제공하는 다운로드 파일은 현재(2022.11.07) 문제가 있어 사용 할 수 없다. (윈도우용) ACC를 다운로드 받아 프로그램을 실행하면 아래와 같은 오류가 뜨면..

이번에 NAS를 구매하게되어 이런저런 것들을 건들여 보면서 사용을 하고있는데... 사용 방법에 대한 설명이 너무 부실하고 뭔가 많이 미묘해서 앞으로 간단하게나마 나는 이렇게 사용하고 이렇게 설정을 해서 쓰고있다 정도를 남겨볼까 합니다. 그 첫번째 글로 NAS를 연결하고나서 해야할 것들을 간단히 정리해 보았습니다. 1. 포트 번호 설정 HTTP/HTTPS port 번호가 기본값으로 8000, 8001로 지정되어있다. 이 번호는 보안에 취약하기 때문에 다른 번호로 변경하는것을 추천하고 있다. 포트 번호는 이 컴퓨터로 이어지는 매우 많은 길의 번호일뿐이니 원하는 번호로 지정해주면 된다. 2. 언어 세팅 (한국어로 변경) 기본 세팅은 영어로 되어있다. 알아보기 힘드니 한글로 표시 언어를 변경해주자. 언어 변경은..

웹이나 앱을 만들다보면 뭔가 묘한 느낌이 올때가 생기는데, 이게 뭔가 문제가 있는거 같긴 한데... 인터넷이 빨라서 괜찮은건가...? 싶을때 의도적으로 인터넷 속도를 느리게 해서 테스트 해볼 수 있는 방법입니다. 테스트 방법은 간단! 1. 크롬 브라우저에서 개발자 도구를 실행한 후 네트워크 탭으로 이동 2. 제한 없음이라고 되어있는 부분을 클릭한 후 원하는 속도를 지정하면 끝. 3. 옆에 아이콘(더 많은 네트워크 조건)을 눌러 조금 더 세밀한 설정도 가능 이거 몇번 사용하고 갑자기 인터넷이 느려졌다고 느낀다면, 테스트 후에 속도 제대로 돌렸는지 확인해 보도록 합시다.

Vue3 사용하면서 사용하기 가장 쉬웠던 원형 프로그래스 라이브러리 언젠가 또 사용하게 될 일이 있을지도 모르니 기록하기 위해 글을 남겨봅니다. 공식 페이지 Vue3 Radial Progress Official Website > 사용 방법 Step 1. 설치 npm install --save vue3-radial-progress // 또는 yarn add vue3-radial-progress Step 2. script 내부에 import import RadialProgress from 'vue3-radial-progress'; Step 3. import 했으니 components에 등록 components: { RadialProgress, }, Step 4. 진행률과 전체값 정의 data() { retu..