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

  • 액션 케이블

Previous20210120(수)Next20210125(월)

Last updated