Discourse의 Ember 5 업그레이드를 위한 준비

Discourse는 곧 Ember JavaScript 프레임워크 버전을 3에서 5로 업그레이드할 예정입니다. 준비 작업의 대부분이 완료되었으며, 이미 많은 사이트가 Ember 5에서 운영되고 있습니다(Meta 포함!). :ember:

이 업그레이드는 현재 기능 플래그(feature flag) 뒤에 숨겨져 있습니다! 1월 10일부터 자체 호스팅(self-hosted) Discourse 설치의 기본값이 됩니다. 초기에는 Ember 3 지원이 플래그를 통해 계속 사용 가능하지만, 2024년 1분기 내에 제거될 예정입니다.

관리형 discourse.org 호스팅에서는 향후 몇 달 동안 플래그를 단계적으로 배포할 것입니다:

:discourse: discourse.org 호스팅 등급 업그레이드 날짜
Basic 2023-12-07 :white_check_mark:
Free 2023-12-12 :white_check_mark:
Pro 2024-01-15 :white_check_mark:
Business 2024-01-22 :white_check_mark:
Enterprise (건별 처리)

:eyes: 나와 내 사이트에 이것이 무엇을 의미합니까?

추가 테마, 플러그인, 또는 테마 컴포넌트 없이 Discourse를 실행 중이라면… 준비가 끝났습니다! 아무것도 할 필요가 없으며, 걱정할 일도 없습니다.

또한 공식 테마/플러그인만 사용하는 경우에도 걱정하지 마세요! 모든 공식 테마, 테마 컴포넌트, 플러그인이 업그레이드를 위해 준비되도록 하겠습니다.

제3자(서드파티) 커스터마이징을 사용하는 경우, 해당 개발자들이 이러한 전환 과정에서 문제가 없도록 필요한 변경 사항을 적용해야 합니다.

그러나 자신의 사이트용으로 직접 제작하거나 의뢰한 자체 테마, 테마 컴포넌트, 또는 플러그인이 있다면 이 게시글이 당신을 위한 것입니다! 업그레이드 전에 문제를 식별하고 해결하는 방법을 안내해 드리겠습니다.

:face_with_monocle: 문제 식별

모든 Ember 5 관련 업그레이드 문제는 비추천(deprecated)된 API의 사용을 확인함으로써 업그레이드 전에 사전에 식별할 수 있습니다. 최근 Discourse 버전(Discourse 3.2.0.beta4-dev부터)에서는 이러한 중요한 비추천 사항이 트리거되면 관리자를 위한 경고 배너가 표시됩니다:

트리거된 비추천 사항에 대한 자세한 정보는 브라우저 개발자 콘솔에서 확인할 수 있습니다. 일반적으로 확인되는 모든 비추천 사항을 해결하는 것이 좋은 습관입니다. 하지만 이번 Ember 버전 업그레이드에서는 다음과 같은 핵심 항목들을 해결해야 합니다:

  • discourse.modal-controllers (자세한 정보는 이 토픽 참조)

  • 모든 Ember 비추천 사항 (즉, -discourse. ID가 아닌 것들)

비추천 사항을 콘솔에 출력할 때, Discourse는 관련 테마/플러그인을 식별하려고 시도합니다.

개발자 및 호스팅 제공업체를 위해 비추천 사항을 일괄적으로 식별할 수 있는 몇 가지 도구를 제공합니다:

  • QUnit 테스트를 실행할 때, 끝부분에 미해결된 모든 비추천 사항 목록이 포함된 보고서가 출력됩니다. GitHub Actions에서는 이 보고서의 마크다운 버전이 워크플로우 요약 페이지에 추가됩니다.

  • 호스팅 제공업체를 위해, 프로덕션 환경에서 비추천 사항이 발생될 때마다 prometheus 카운터를 증가시키는 discourse-deprecation-collector 플러그인이 있습니다.

:technologist: 비추천 사항 해결

일반적으로 콘솔 메시지는 문제의 설명과 해결에 필요한 단계를 포함합니다. 일부 경우에서는 Ember deprecations 웹사이트나 Discourse Meta와 같은 외부 리소스로 링크를 걸기도 합니다.

불분명한 부분이 있다면, 아래에 게시하거나 전용 Development 토픽에 질문해 주세요. 최선을 다해 도와드리겠습니다.

:rocket: Ember 5에서 테스트

로컬 개발 환경에서 Ember 5로 테스트하려면 EMBER_VERSION 환경 변수를 사용하여 ember-cli 헬퍼를 시작할 수 있습니다. 예를 들어:

EMBER_VERSION=5 bin/ember-cli -u

기대대로 작동하는지 확인하려면, Discourse가 브라우저 콘솔에 출력하는 Ember 버전을 확인하세요.

프로덕션 환경에서는 app.yml 파일의 env: 섹션에 EMBER_VERSION: 5를 추가하여 동일한 결과를 얻을 수 있습니다.

42개의 좋아요

팀원 여러분, 축하드립니다! 정말 많은 노력이 필요했을 것 같아요! :sweat_smile:

11개의 좋아요

데이비드, 해당 속성을 되돌리고 재빌드하면 완전히 되돌릴 수 있다고 이해해도 되나요?

5개의 좋아요

응, 완전히 되돌릴 수 있어요 :+1:

3개의 좋아요

좋은 작업이네요. 공식적으로 지원되는 테마/컴포넌트 목록을 어디서 찾을 수 있을까요? 플러그인 컴포넌트 중 3~4개가 공식적인 것임을 확인할 수 있었습니다. (토론에 “official” 태그가 표시되어 있습니다)

하지만 4번째 항목의 경우 이 URL만 찾을 수 있었습니다: GitHub - discourse/discourse-full-width-component: Make Discourse occupy the full browser width · GitHub

공식적인 것인지, 업그레이드 시 문제가 생기지 않을지 어떻게 알 수 있을까요?

수정: 여기서 필터링할 수 있는 것 같습니다: Topics tagged official

그 후 목록에서 특정 테마를 검색하면 됩니다. 이전에 포럼 우측 상단의 검색 기능을 시도해 보았지만, 토론 목록에서 검색할 때는 해당 항목이 표시되지 않습니다. 대신 GitHub 기여자 목록에서 스태프를 볼 수 있습니다:

4개의 좋아요

대략적인 기준으로는, URL이 github.com/discourse/로 시작하는 경우 우리가 처리합니다. discourse-full-width-component의 경우, 우려할 만한 원인은 보이지 않습니다. Ember 5에서 정상적으로 작동할 것입니다.

6개의 좋아요

관리자로 있는 Discourse 호스팅 사이트가 Ember 5를 사용 중인지 확인할 방법이 있을까요?

관리 페이지를 살펴봤는데, 이에 대한 표시를 찾지 못했습니다. 제가 관리자로 있는 사이트는 다음과 같습니다.

5개의 좋아요

현재 시점에서 Ember 5는 Meta와 ‘기본’ 호스팅 플랜에서 실행되고 있습니다.

최근 버전의 Discourse에서는 현재 버전 정보를 콘솔에 출력합니다. 따라서 개발자 도구 콘솔을 열고 첫 번째 줄을 확인하면 됩니다:

10개의 좋아요

인터넷의 모든 사이트에서 개발자 도구(dev-tools)에 접근할 수 있습니다! Windows/Linux 환경의 Chrome에서는 F12 키를 누르면 됩니다. Mac의 경우… 어떤 메뉴에 있죠.

8개의 좋아요

감사합니다.

운영체제 명령 프롬프트에서 사이트를 설치할 때 접근할 수 있는 Discourse 콘솔을 의미한다고 생각했습니다.


단계

  1. 인터넷 브라우저 열기 (이 예시에서는 Chrome)
  2. Discourse 사이트로 이동 (이 예시에서는 https://swi-prolog.discourse.group/)
  3. F12 키 누르기
  4. 상단의 Console 탭이 활성화되어 있지 않으면 Console 탭을 선택합니다.
  5. 첫 번째 줄에 Ember 버전이 표시되어야 합니다.

4개의 좋아요

아이패드에서 작업을 하려는 경우, 콘솔은 앱(사파리 전용)을 통해 찾을 수 있습니다:

https://apps.apple.com/app/id1064318327

아, 더 이상 이용 불가하네요. 실망스럽군요.

5개의 좋아요

이 추가 기능을 정말 좋아합니다. David와 ModernJS 팀, 훌륭한 작업입니다. :rocket:

하하. MacOS에서 Chrome을 실행하면 개발자 도구가 동일합니다. iOS와 터치스크린에서 사용이 어렵거나 거의 불가능한 수준입니다(예: 데스크톱 모드에서 실행 중인 iPad에는 웹 인스펙터 기능이 있지만 이상적이지 않음).

5개의 좋아요

F12를 눌러서요? 그게 작동하지 않는다고 알고 있었습니다.

5개의 좋아요

optioncommandJ

5개의 좋아요

F12보다 이게 왜 더 기억하기 어렵다는 건지 모르겠어요. 둘 다 사실 거의 찾아내기 힘든 단축키긴 하죠. 그리고 제가 제안한 메뉴에서 찾는 방법도 도움이 안 될 것 같습니다.

7개의 좋아요

option command J는 당신이 기억하기 쉬울 거예요 :laughing:

5개의 좋아요

제게는 항상 [우클릭] [요소 검사]가 표준입니다. 모든 브라우저/OS에서 동일한 방식이라고 생각합니다.

6개의 좋아요

맞아요!

아. 그게 쉽고 항상 잘 작동하네요. 좋네요. 그리고 보통 원하는 게 바로 그거라 클릭 수를 열두 번쯤이나 아껴주네요. 물론 이 #announcements를 제가 장악한 것 같네요. 죄송합니다.

7개의 좋아요

이 작업이 개발 시간을 꽤나 소모할 것임을 잘 알고 있습니다 :grimacing: (새로운 사이드바, 카테고리 배지 제거… 커스텀 테마를 사용하면 이런 일이 꽤 자주 발생하거든요!).

프로덕션 환경에서 모든 것이 깨지지 않고 포럼에 Ember 5를 적용하는 방법이 있을까요? 현재 호스티드 Business Plan을 사용하고 있습니다.

  • 미리 알려주셔서 감사합니다. 또한 비추천(deprecation) 메시지도 유용했습니다. 하지만 비추천 사항을 수정하려면 Ember 3과 Ember 5 모두를 지원하도록 테마를 코딩해야 하는 건가요?
  • 업그레이드를 할지 말지 선택할 수 있나요? 아니면 운영진 측에서만 결정하나요?

"preprod"나 “테스트” 환경이 있으면 좋겠다는 생각이 듭니다.

6개의 좋아요

다미앵, 안녕하세요 :wave:.

Discourse와 Ember는 즉시 사용할 수 있는 대안이 있을 때만 기능을 비추천(deprecate) 처리합니다. 따라서 변경이 필요한 부분이 있다면 바로 적용할 수 있으며, Ember 3 환경에서도 정상적으로 작동합니다.

우리는 Discourse 코어와 모든 공식 테마 및 플러그인에서 이러한 방식을 따르고 있습니다. Ember 3 / Ember 5를 위해 별도의 코드를 작성하지 않습니다.

불행히도 선택 사항이 아닙니다. 보안, 성능, 기능 측면에서 Discourse 코어의 의존성 업데이트는 우리에게 필수적입니다. Ember 5가 제공하는 기능들은 향후 Discourse 자체의 개선에 필수적이 될 것입니다.

좋은 질문입니다! 현재 우리는 이 전환 과정을 최대한 부드럽게 만들기 위해 많은 노력을 기울이고 있으며, 다양한 도구 개선 작업을 진행 중입니다.

그 중 하나가 몇 시간 전에 배포되어, 여기서 도움이 될 것입니다.

포럼의 /safe-mode 페이지를 방문하면 “Make Javascript deprecations raise an error”(자바스크립트 비추천 사항을 오류로 발생시킴)라는 체크박스가 추가되어 있습니다.

이 기능을 사용하면 모든 대기 중인 비추천 사항이 오류로 변환된 상태에서 사이트가 어떻게 작동하는지 안전하게 확인할 수 있습니다.

기술적으로 이는 "포럼에서 Ember 5 테스트"와 정확히 같은 것은 아닙니다. 하지만 완전히 분리된 스테이징 환경 없이도 다가오는 깨질 수 있는 변경사항(breaking changes)을 시뮬레이션하는 좋은 방법입니다.

8개의 좋아요