stimulus.js 사용기 - action(click event, global event like document, window.resize)



stimulus.js 를 사용해봤다. Rails 에서는 javascript 폴더 안에 controller 폴더를 만들고 xxxxx_controller.js 라는 js파일을 만들어 사용한다.

import {Controller} from "stimulus"

export default class extends Controller {
functionName(){
}
}

그 다음 위와 같이 js 파일을 구성하고 사용한다.

이제 이걸 사용하는 방법은 아래와 같이 사용한다. 아래에서의 gallery 는 위의 xxxxx이고 click은 trigger고, gallery#next 는 xxxxx_controller.js 에 정의해놓은 함수(위 사진에선 functionName같은)이다.

좀 더 쉽게 설명하면 클릭하면 xxxxx_controller 파일의 functionName() 함수를 호출해라와 같은 것이다.

<div data-controller="gallery">
  <button data-action="click->gallery#next">…</button>
</div>

click이 아닌 "window의 크기가 변화하면, 문서가 준비되면" 같은 global event도 사용할 수 있다.

<div data-controller="gallery"
     data-action="resize@window->gallery#layout">
  …
</div>
위의 예제는 window의 크기가 resize되면 함수를 호출하는 것 아마 ready@document 와 같은 것도 되지 않을까 싶다.

라고 썼었는데 해보니 안됨 load@window 로 하면 됨 ... jQuery는 안되는건가... 아무튼 그럼.

다른 xxxx_controller.js 파일에 정의해놓은 함수를 불러와서 사용하고 싶다면 아래 링크를 참고하면 좋다. 써보려다 쓸 이유가 없어져서 안써봤다.

https://github.com/stimulusjs/stimulus/issues/94

참고 링크

https://github.com/stimulusjs/stimulus/blob/master/docs/reference/actions.md

https://discourse.stimulusjs.org/t/can-i-use-load-event/518/2

댓글

댓글 쓰기

이 블로그의 인기 게시물

부트스트랩 사용 시 버튼 오른쪽 정렬하는 방법 (How to use float-right for right align in bootstrap)

Bootstrap 사용 시 버튼을 오른쪽 정렬하는 방법 버튼 클래스에 float-right 해준다. 예시) Bootstrap v4.0 <div class = "row" > <div class = "col-12" > One <input type = "button" class = "btn float-right" value = "test" ></div> <div class = "col-12" > Two <input type = "button" class = "btn float-right" value = "test" ></div> </div> 참고 링크 https://getbootstrap.com/docs/4.0/utilities/float/#responsive https://stackoverflow.com/questions/15446189/how-can-i-get-my-twitter-bootstrap-buttons-to-right-align
자세한 내용 보기

맥(Mac)에서 MySql 사용 시 Error: Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2) 오류가 발생하는 경우 해결 방법

## 맥(Mac)에서 MySql 사용 시 Error: Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2) 오류가 발생하는 경우 해결 방법 mysql 사용 시 간혹 Error: Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2) 라는 오류를 마주하게 될 때가 있다. mysql 이 비정상적으로 종료를 하게 되면 나타나는 현상이라고 하는데 어떻게 해결해야 하는지 알아봅니다. 저의 경우는 아래와 같이 2줄을 해당 프로젝트 폴더 위치에서 터미널을 실행하면 해결이 되었습니다. ```shell brew services stop mysql brew services start mysql ``` 그 다음 해결이 되었는지 확인할 때 아래와 같이 확인하고, 비밀번호를 입력합니다. ```shell mysql -u root -p ``` 비밀번호 설정이 되어있지 않은 경우 아래와 같이해도 무방합니다. ```shell mysql ``` 참고: https://postitforhooney.tistory.com/entry/MACDBError-Cant-connect-to-local-MySQL-server-through-socket-tmpmysqlsock-2 [PostIT]
자세한 내용 보기

AWS Lambda + CloudWatch 를 이용해 주기적으로 AWS RDS 중지, 시작하는 방법(How to stop and start AWS RDS periodically using AWS Lambda + CloudWatch)

이미지
## AWS Lambda + CloudWatch 를 이용해 주기적으로 AWS RDS 중지, 시작하는 방법(How to stop and start AWS RDS periodically using AWS Lambda + CloudWatch) 가끔씩 사용하는 **AWS EC2 + RDS** 가 있다. 그래서 평소에는 중지해놓고, 필요할 때만 실행시키고 싶은데 **RDS** 가 문제다. 왜 그런지는 모르겠는데~~(AWS가 돈을 많이 벌고 싶어서 인 것 같은데... 왜 그런지 아시는 분은 알려주세요...)~~ 중지 후 7일마다 스스로 시작이 된다. 그래서 깜빡하고 나면 비싸도 너무 비싼 RDS 요금이 왕창 나온다. 그래서 매 주 미리 알림을 맞춰놓고, 콘솔에 들어가 중지를 하는데 가끔씩 까먹기도 하고, 너무 귀찮기도 해서 나를 대신할 방법을 찾아봤다. 크게 방법이 2가지 있는데, 아래와 같다. 1. [AWS Instance Scheduler](https://aws.amazon.com/ko/solutions/implementations/instance-scheduler/) 를 이용하는 방법 2. AWS Lambda + CloudWatch 를 이용하는 방법 그런데 검색해보니 1번 방법은 적어도 5달러 이상 나올 것 같아서, 2번 방법으로 시도해봤다.~~(내 돈은 아니지만 5달러도 아까ㅇ...)~~ 서두가 길었는데, 이제 AWS Lambda + CloudWatch 를 이용해 주기적으로 AWS RDS 중지, 시작하는 방법을 알아보자. ### AWS Lambda + CloudWatch 설정 먼저 크게 1. AWS Lambda 설정 2. IAM 정책 설정, 3. CloudWatch 설정 순으로 나눠서 설정해보자. #### 1. AWS Lambda 설정 AWS 계정은 있다고 가정하고, AWS에 로그인하고 들어가 서비스에서 **AWS Lambda** 를 클릭한다. 그 다음 **함수 생성**을 클릭. **새로 작성** 을 선택하고(그대...
자세한 내용 보기