# 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. 다음 학습 계획

* 액션 케이블


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://simian114.gitbook.io/blog/undefined-1/diary/2021/january/20210121.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.