코드

모든 앱은 진짜 React 코드이고, 에디터 맨 위에서 Preview 옆에 있는 Code가 그 전부를 보여 줘요. 코드를 열어 볼 필요는 전혀 없어요. 어떻게 만들어졌는지 보거나, 가리키거나, 직접 바꾸고 싶을 때를 위해 있어요.

Explorer

왼쪽에는 다음이 있어요.

• Search code는 모든 파일에서 단어를 찾아요.
• Open editors는 열려 있는 파일을 탭으로 보여 줘요.
• Files는 앱 전체예요. App.js, components에 있는 화면과 부품, lib에 있는 데이터가 들어 있어요.
• Images는 앱이 쓰는 이미지와 그 개수예요. 하나를 클릭하면 크게 볼 수 있어요. Draw는 그 위에 빨간색으로 표시해 무언가를 가리키고, Add to chat은 다음 메시지와 함께 보내 줘요.

에디터 왼쪽 위의 버튼은 더 넓게 쓰도록 Explorer를 숨겨요.

채팅에 코드 가리키기

어디에 있는지 설명할 필요는 없어요.

• 코드 위의 Reference file은 파일 전체를 채팅의 다음 메시지에 첨부해요.
• 줄 왼쪽의 + 버튼은 그 줄을 첨부해요. 여러 줄을 선택하면 모두 첨부돼요.

그다음에는 “목록이 비어 있을 때 이 부분이 잘못 동작해요” 같은 짧은 요청이면 충분해요.

요소의 줄 찾기

오른쪽 위의 두 칸 아이콘인 Split view는 미리보기를 코드 옆에 보여 줘요. 컴퓨터에서 Code를 열어 둔 동안 쓸 수 있고, 휴대폰은 한 번에 한 칸만 보여 줄 공간이 있어요. 열면 채팅이 좁아져 자리를 내주고, 닫으면 채팅이 원래 너비로 돌아와서, 읽는 내용에 대해 계속 물어볼 수 있어요.

Split view를 켜면 그 옆에 포인터 버튼(Click an element to find it in the code)이 나타나요. 켜면 미리보기에서 클릭해도 앱이 하던 동작이 일어나지 않고, 대신 그 요소를 만드는 파일이 그 줄에서 열려요. 끄면 미리보기를 다시 평소처럼 쓸 수 있어요. “저 제목”에서 그 뒤의 코드까지 가는 가장 빠른 방법이고, 그 줄은 왼쪽의 + 버튼으로 다음 메시지에 첨부할 수 있어요.

직접 수정하기

유료 요금제에서는 코드를 직접 바꿀 수 있어요. 코드에 직접 입력하면, 아래 바의 Auto-save on이 입력하는 대로 저장된다는 뜻이에요. 미리보기도 그에 따라 바뀌어요. Copy code는 보고 있는 파일을 복사해요.

무료 요금제에서는 코드를 읽고, 검색하고, 가리킬 수는 있지만, 바꾸거나 복사할 수는 없어요. 같은 바의 Upgrade to edit이 그 사실을 알려 줘요.