제출 페이지에서 코드 컴파일 기능

[ruk13xa]

내용

https://github.com/smartwe/BOJ-CR 의 main.js와 같은 방식으로하면 괜찮을 것 같기도 합니다

Related #110

[joonas-yoon]

main.js 가 어떻게 동작하는 지 전혀 모르겠습니다.

[ruk13xa]

Tio라는 시스템을 이용한 것 입니다.

[joonas-yoon]

네. 저도 그건 알 수 있는데, TIO 라는 시스템이 무슨 동작을 하는 지 모르겠네요.

TIO.run(code, "123 1", lang).then(n=>console.log(n[0] + "\n" + n[1]))

이슈에 다른 repo의 한 파일을 링크 없이 주시고 이렇게 정보가 없으면, 저도 무엇을 말씀하시는 건지 알 수 없습니다 ^^;

최근에 좀 바빠서 제가 직접 구글링할 시간은 없어서요.

[ruk13xa]

제가 지금 핸드폰으로 요청 드린거라 양해부탁드립니다 ㅠㅠ 간략하게 설명드리면 TIO라는 온라인 컴파일러의 API를 모아서 TIO.run 은 언어, 입력, 코드로 실행하는 코드입니다. 저는 저부분을 이용하면 편리할거 같아 기능 요청 해봅니다~!

[ruk13xa]

https://github.com/AviFS/tio-api 참고하시면 이해가 되실듯 합니다.

[joonas-yoon]

오 신기하네요. 별도로 브랜치를 만들어서 천천히 진행해보겠습니다.

[ruk13xa]

https://github.com/smartwe/BOJ-CR/blob/master/lang.json 와 같이 json파일이 필요한데 어떤 경로에 배치하면 되나요?

[joonas-yoon]

@smartwe 확장 프로그램 내에서 json 을 로드하기는 어렵고, main.js 에서 하셨던대로 JSON 객체로 선언하셔서 사용하시면 될 것 같습니다.

[ruk13xa]

@joonas-yoon 혹시 타이머처럼 창을 띄우는 코드를 찹고할 수 있을까요?

[joonas-yoon]

네, 확장 프로그램 내 어떤 소스든지 참고하셔도 좋습니다 :)

[ruk13xa]

다른 js 파일을 불러오는 방법이 무엇인가요? import()를 사용하면 될까요?

[ruk13xa]

TIO.run() 를 사용해야하는데 js파일을 불러오는 방법을 모르겠네요

[joonas-yoon]

아뇨 import/require 구문은 경험상 동작하지 않았어요.

외부 파일을 불러오는 게 확장 프로그램 내에서는 조금 복잡합니다. 별도의 chrome api를 통해서 경로를 얻어야해서... 3가지 방법이 있을 것 같은데요,

1. HTTP 통해서 파일을 비동기로 가져오고, JSON.parse로 object화
2. 스토리지에 string으로 저장하여 (1)과 같이 parsing
3. 처음부터 object로 선언하여 사용

3번은 일반적으로 객체를 정의하는 방법과 같습니다.

const table = {
  "key": "value",
  ...
}

const val = table["key"]

[joonas-yoon]

그거라면 이미 작업해두었습니다. TIO 로 바로 호출하시면 동작할거에요.

manifest.json 보시면 파일을 로드하도록 추가해두었습니다.

[ruk13xa]

아!! 그래요? 작업하다보니 안되서 고쳤는데 ㅋㅋ 잘 못 만지다가 바뀌어졌나봐요

[ruk13xa]

혹시 드롭다운 설명 가능하신가요?

[joonas-yoon]

어떤 드롭다운을 말하시는걸까요?

[ruk13xa]

타이머처럼 창이 떠서 값을 입력하는 구조요!

[joonas-yoon]

아래 함수를 참고하시면 생성할 수 있습니다. 동작 방식은 HTML 태그를 생성해서 각 버튼마다 이벤트를 붙이고, 버튼 아래에 위치시키는 게 전부입니다.

https://github.com/joonas-yoon/boj-extended/blob/2a4035a84d5c086c9fb51472d530ef20422c16c2/src/js/features/problem.js#L106-L111

그런데 컴파일 기능에서 드롭 다운이 필요한가요? 언어를 선택하는 부분이 이미 있는데, [컴파일] 버튼 외에 어떤 것을 추가하시려는 걸까요?

[ruk13xa]

실행할 때 필요한 인풋이요!

[ruk13xa]

아래 함수를 참고하시면 생성할 수 있습니다. 동작 방식은 HTML 태그를 생성해서 각 버튼마다 이벤트를 붙이고, 버튼 아래에 위치시키는 게 전부입니다.

https://github.com/joonas-yoon/boj-extended/blob/2a4035a84d5c086c9fb51472d530ef20422c16c2/src/js/features/problem.js#L106-L111

그런데 컴파일 기능에서 드롭 다운이 필요한가요? 언어를 선택하는 부분이 이미 있는데, [컴파일] 버튼 외에 어떤 것을 추가하시려는 걸까요?

코드가 잘이해가 안되서 ㅎㅎ

[joonas-yoon]

어떤 부분이 이해가 안 되시는 지 알려주셔야 제가 설명드릴 수 있을 것 같네요..

Utils.createElement 함수는 document.createElement 를 확장해서 만든 함수입니다. React 에서 JSX Component를 만드는 것과 유사하게 동작하도록 작성했습니다.

https://github.com/joonas-yoon/boj-extended/blob/2a4035a84d5c086c9fb51472d530ef20422c16c2/src/js/utils/index.js#L17-L32

javascript에서 동적으로 DOM Element를 생성하고, inputH.addEventListener('change', (evt) => {...} 처럼 DOM Element에 이벤트를 붙이는 게 전부인 코드입니다.

아래와 같이 여러 개의 element를 코드로 생성하다보니 코드가 길어진 것일뿐입니다.

<div>
  <div>
    <div> ... </div>
    ...

https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement 여기를 참고해보세요.

[ruk13xa]

코드를 따라해서도 드롭다운이 안떠서요 ㅎㅎ 다시 한번 보겠습니다!