[앱빌더] 코드 생성 불가, 일정 문의

안녕하세요?

데우스를 사랑하는 개발자입니다. 피그마에서 이사온지 얼마 안되었는데여. 열심히 다 만들고 나서 코드 복붙으로 개발 완료 하려고 했더니.. 그건 안되더라구요.

리엑트 코드를 보려고 하면,

// 코드를 불러오는데 실패했어요.
// React 코드는 사내망(VPN) 환경에서만 사용할 수 있어요.
// 계속 실패한다면 #ux-platform-디자인플랫폼요청 채널에 제보해주세요.

이런 메세지가 뜨거나 다른 복잡한 화면에서는 멍청하게 코드를 만들어 버립니다.

TDS doc을 보기위한 IP는 등록된 상태입니다. 작동만 하면 개꿀인데 언제쯤 안정적인 사용이 가능해 질까요?

안녕하세요 :slight_smile:
앱빌더의 코드젠 기능은 TDS v2 를 기반으로 동작하여, 현재 사용하시는 TDS 버전과 차이가 있을 수 있어요.
TDS 2.1.0 버전으로 업데이트 후 사용해주실 수 있을까요 ?

앱빌더의 TDS 버전을 바꿀 수 있는 곳이 있나요?

복붙할 코드 자체가 아예 안보여집니다.

** 어떤거는 보여지고 어떤것은 안보여집니다!
예) 안보여지는 부분.

앱빌더는 기본적으로 TDS v2기반이구요
사용하시는 프레임워크에서 TDS버전을 v1에서 v2로 업그레이드해주셔야해요

참고자료 첨부해드립니다

계속 같은 이야기를 하게 되는데 혹시 제가 잘못 알고 있는 것이라면 사과드립니다.

하고 싶은일

  1. 앱빌더에서 UI 작성
  2. 앱빌더 코드 생성기에서 코드를 복사
  3. 제작중인 코드에 붙여넣기
  4. 실행/빌드

지금 2번이 안되는 상황입니다. 앱 빌더에서 위와 같은 메세지가 나오고 앱빌더에서 코드 생성 자체가 안되어서, 제가 작성 중인 코드에 넣지를 못했으며, 에디터에 병합하여 발견 할 수 있는 빌드나 syntax 에러도 없었습니다. 제가 로컬에서 사용 중인 라이브러리 버전과는 관계가 없는 것으로 보입니다. 개발환경은 TDS v2 사용 중입니다.

메세지와 다르게 VPN 문제라기 보다는 제가 앱빌더를 통해 만든 화면의 한 부분이 어떤 오류로 인해(과거에 만들어진 형식이나 리소스, 혹은 그냥 생성 버그) 앱빌더에서 코드 생성이 안되고 있는 것 같습니다.

1개의 좋아요

저도 현재 동일한 상태입니다. 앱빌더 컴포넌트 클릭시 기존에는 React Webview 코드가 보였으나 현재 보이지 않습니다.

안녕하세요, 코드젠 패널이 혹시 아래 사진처럼 보여지는지 스크린샷 공유를 부탁드려도 될까요?

새로고침을 해도 동일하게 보여지는지 확인 부탁드려요.

오락가락합니다. 지금은 모든 컴퍼넌트에서 안나옵니다. 새로 고침해도 마찬가지 입니다.

속성 탭을 제외한 모든 탭이 빈내용입니다.

데브툴에서 xhr 요청 에러 같은 것은 보이지 않습니다.

엘레멘트 클릭시 이 주소로 요청이 한번씩 갈 뿐입니다. https://o467065.ingest.us.sentry.io/api/450834026…

@minsoo-web

네 확인 후에 안내 드리겠습니다. 잠시 시간 소요될 수 있는 점 양해 부탁 드립니다!

@Line1 님, 템플릿으로 만들어진 프로젝트에서도 코드젠이 되는지 확인 부탁드려도 될까요?

요청 또한

https://common-fe.toss.im/dst-code-generator/api/dst/convert

으로 POST 요청이 보내져야 합니다

링크따라 들어가도, 직접 만들었거나 기존에 있던 가이드 모두 시도해도 결과가 나오지 않습니다.

이동하면서 이것저것 클릭했을때 화면.

안녕하세요. 관련하여 원인 파악하여 최대한 빠르게 수정 중이며, 빠르면 오늘 중으로 수정 완료될 예정입니다.

수정 완료 이후 별도로 안내 드리겠습니다. 이용하시는 데에 불편을 드려 죄송합니다.

1개의 좋아요

@line1 현재 앱빌더 개발자 모드 통해 코드 확인하실 수 있도록 수정 되어 새로 고침 하여 주실 경우 정상적으로 확인 가능하실 것으로 보입니다.

특이사항 있으실 경우 말씀 하여 주시면 확인해 보겠습니다!

이제 대부분 잘 됩니다.

아직 안되는 부분이 있는데요. 제일 처음 글을 작성할 때 겪었던 문제가 지속되고 있습니다.
이건 이번 모든 코드젠이 안되는 이슈 전에 있었던 것이에요.

A. 아예 생성 안되는 경우

  1. 페이지 => 신규 가이드 & 템플릿 => 인트로 및 서비스 시작 => 인트로 => 2번 화면 => 최저가 옆 badge 클릭
  2. 코드 생성 안됨. 요청이 아예 안나가는 듯. 리엑트 아이콘과, 리엑트 RN 모두 결과 안나옴.
  3. layer의 parent (최저가, 가격) 을 선택해도 badge 부분은 포함되어 코드가 생성되지 않습니다.

B. 오류 메세지가 나오는 경우

이건 개인 프로젝트에서 확인할 수 있는데요. /projects/4324

  • (리엑트 아이콘)은 잘 나옴

C. 추가 질문

  • (리엑트 아이콘)과 (리엑트 아이콘) RN은 무슨 차이일까요? rn을 사용하지 않고 리엑트만으로 만드는 경우가 있나요?

  • from ‘(at)tossteam/tds-rn’;이게 아니라 from ‘(at)toss-design-system/react-native’; 로 생성해 주면 안될까요? 다른 패키지를 보고 있으니 복붙시 뭔가 안 맞는 것이 종종 나오는 것 같아요. 어떤 이슈인지 디테일하게 필요하시면 발생시 다시 포스팅 하겠습니다.

@Soyung

네 확인 후 안내 드리겠습니다!

문의 주신 내용에 대하여 확인 후 안내 드립니다.

A. 아예 생성 안되는 경우

현재 신규 가이드 & 템플릿 에서 제공하여 드리고 있는 컴포넌트의 경우 현재 앱빌더 내에서 인서트 하셔서 사용하실 수 있는 코드 컴포넌트가 아닌 별도로 제공해드린 컴포넌트로, 죄송하게도 코드 확인이 어려우신 점이 맞습니다.

B. 오류 메세지가 나오는 경우

확인하여 주신 내용 처럼 앱빌더 내에서 인서트 하신 퀵스타트의 경우 코드 확인이 가능하시지만, 별도로 직접 제공하여 드린 컴포넌트들은 코드 확인이 어려우신 상황입니다.

현재 앱빌더 내에서 인서트를 통해 만들어지는 컴포넌트는 모두 코드 확인이 가능하실 것으로 보입니다.

C. 추가 질문

(리엑트 아이콘) 은 웹뷰 환경에서 사용하실 수 있도록 제공하여 드리고 있고, (리엑트 아이콘) RN 은 React Native 환경에서 사용하실 수 있도록 제공하고 있습니다. 보통 두 가지 중 하나를 선택하셔서 사용하시는 경우가 많은 점으로 알고 있습니다.

from 문 개선은 유관 부서 담당자께서 개선을 하시고 계신 상황으로 확인하여서, 불편하시겠지만 시일 양해를 부탁 드려도 될까요?

@Line1

답변 감사합니다.

A. 이런 경우 “// 코드젠을 제공하지 않는 컴포넌트에요.” 표시 부탁드립니다. 일부 코드젠이 안되는 컴포넌트는 이렇게 표시되기도 하더라구요.

B. 에서 문의드린 부분은 A의 “신규 가이드 & 템플릿” 에서 복사 붙여넣기(인서트) 해서 만든 “별도” 컴포넌트가 아니라 “커스텀” 탭에서 컴포넌트들을 넣어 조합한 경우에 발생하는 경우입니다.

재현 방법

  1. 아무 신규 레이어에서 시작
  2. 커스텀 => 그래픽 => 그래픽, 아이콘 넣기
  3. 커스텀 => 텍스트 => 기본 텍스트
  4. 두 가지 선택 후 column 이나 row로 합치기
  5. 코드 안보여짐.

되는 경우

  1. 아무 신규 레이어에서 시작
  2. 커스텀 => 텍스트 => 기본 텍스트
  3. 커스텀 => 텍스트 => 기본 텍스트
  4. 두 가지 선택 후 column 이나 row로 합치기
  5. 코드 보여짐

그래픽, 아이콘 image asset이 포함될 경우 문제가 되는 것으로 보입니다.

팔로우업 감사합니다.

네, 코드 확인이 어려운 컴포넌트의 경우 안내 문구를 개선하여 볼 수 있도록 내부적으로 검토 요청 드리겠습니다.

B. 에서 문의 주신 부분은 추가로 확인 후 안내 드리겠습니다!

안녕하세요

문의 주신 현상 (그래픽, 아이콘 이미지 에셋이 포함될 경우 (리액트 아이콘) RN 코드가 보이지 않는 부분) 은

내부적으로 인지 후 대응 중인 상황으로 확인하였습니다.

이용에 불편을 드려 죄송합니다. 빠르게 개선 할 수 있도록 하겠습니다.

@Line1

1개의 좋아요