> For the complete documentation index, see [llms.txt](https://simian114.gitbook.io/blog/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://simian114.gitbook.io/blog/undefined-1/diary/2021/january/20210121.md).

# 20210121(목)

## 2021-01-21

### 1. 학습 날짜

* 2020-01-21

### 2. 학습 시간

* 13:00 \~ 24:00

### 3. 학습 범위 및 주제

* 닌자 프로젝트
* 사이드바 구현 - 액티브 케이블 사용해서 동적으로 리스트 추가, 제거

### 4. 학습 목표

* 액티브 케이블을 이용해서 실시간으로 유저의 리스르를 추가, 제거하자

### 5. 학습 정리

* x

### 6. 상세 학습 내용

**닌자 프로젝트**

1. Yarn 을 이용한 JS 모듈 관리
   * Rails6는 webpacker 를 이용해서 자바스크립트를 실행한다.
   * 솔직히 webapackek는 잘 모른다. 일단 아는거만 적어보겠다.
   * JS파일에서 jquery를 사용하고 싶을 때 기존에는 CDN을 이용하거나 또는 jquery.js 를 다운받아서 이걸 import 해서 사용하는 방식을 사용했다.
   * 하지만 rails6에서는 더 세련되게 사용한다. 어떻게 하냐면, `yarn add jquery` 로 jquery를 설치해준다. 이제 `package.json` 파일을 보면 `jquery`가 추가되어있고 `node_modules` 폴더를 보면 `jquery` 관련 모듈이 설치되어있는걸 확인할 수 있다.
     * 이 다음에는 jquery를 실제로 어떻게 사용할지에 대해 정의를 해줘야하는데 이건 `environment.js` 파일에서 해준다. 일단 파일에 들어가자 마자 require 로 node\_modules 에 있는 `jquery`를 임포트 해주자. 그리고 `webpacker.plugin` 비스무리한 함수가 있는데 이 함수의 내부에 `jquery` 를 `어떻게` 부를 것인지를 선언해준다. 보통 `$` 를 이용해서 제이쿼리를 사용하므로 `$`로 제이쿼리를 부르겠다라고 선언해주면 된다.
   * 프로젝트에서 사용할 `underscore`와 `Backbonejs` 또한 똑같이 해준다. 언더스코어는 `_` 로 `Backbonejs` 는 `Backbone` 으로 선언해주면 됨
2. 액션케이블
   * 어제 아주 간단하게 적었는데, 일단 `rails g channel room` 명령어로 채널을 생성하고 서버를 실행한다음 웹에 접속하면 `무조건` 채널을 구독한다. 이 문제는 `application.js` 와 `index.js` 에서 `channel` 을 `import` 하는 순간 그 안에 선언되어 있는 함수가 실행이 되어버리기 때문(?) 인 것으로 이해를 했다.
   * 따라서 우리가 가장 먼저 해줘야할것은 웹에 접속하자마자 **채널을 구독하는 행위를 없애버리는것이다.**
     * 없애기 위해서는 위에서 이야기한 `application`과 `index` 파일에서 `require`, `import` 를 주석처리 또는 지우면 된다.
   * 자 이제 지웠으므로 웹에 접속하자마자 채널에 연결되는 일은 없다. 그러면 이게 끝인가? 아니다 이제 우리가 원하는 타이밍에, 원하는 채널 원하는 방을 구독할 수 있어야 한다.
   * 그렇게 하기 위해서는 먼저 프론트 단에서의 수정이 필요하다. `room_channel.js` 파일에 들어가서 `create subscription` 함수를 래핑하도록 하자. 이 함수를 실행하면 바로 채널을 구독한다. 하지만 이 함수는 단지 어떤 채널만 구독하는지가 디폴트로 정의되어있지 **어떤 방, 언제** 를 지정하지 못한다. 따라서 이 함수를 우리가 다루기 위해서 **래핑한다.** 래핑을 하면 우리가 원하는 타이밍에 채널을 구독할 수 있다. 물론 방도
   * 내가 원하는 타이밍은 `로그인`을 하는 그 순간이었다. 로그인을 하는 순간 채널을 구독한다. 채널을 구독하면 그 순간 서버에서 이를 감지하고 `subscribed` 에서 `stream_from` 로 모든 구독자에게 브로드 캐스팅을 날려서 어떤 유저가 로그인했는지를 알려주자. 정보가 브로드캐스팅으로 날려지면 모든 구독자들은 프론트단에서 `received` 함수를 통해 데이터를 전송받는다. 데이터를 전송 받으면 이제 사이드바의 요소를 추가, 제거 해야한다. 그럼 이건 어떻게 되냐? 바로 `collection`에 `listenTo` 이벤트를 걸어놓음으로써 해결된다. 이렇게 listenTo (add) 를 걸어놓으면 해당 컬렉션에 모델이 추가될 때 함수가 실행이 된다. remove는 반대로 삭제될 때 실행됨

### ​

### 7. 오늘 학습 내용에 대한 개인적인 총평

* 점점 더 재밌어 진다. 더 자세히 알고싶다.

### 8. 다음 학습 계획

* 액션 케이블