제출 페이지에서 코드 컴파일 기능 about boj-extended

[smartwe]

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

[joonas-yoon]

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

[joonas-yoon]

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

[smartwe]

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

[smartwe]

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

[joonas-yoon]

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

[smartwe]

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

[joonas-yoon]

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

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

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

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

[smartwe]

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

[joonas-yoon]

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

[smartwe]

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

[smartwe]

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

[smartwe]

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

[smartwe]

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 보시면 파일을 로드하도록 추가해두었습니다.

[smartwe]

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

[smartwe]

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

[joonas-yoon]

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

[smartwe]

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

[joonas-yoon]

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

boj-extended/src/js/features/problem.js

Lines 106 to 111 in 2a4035a

	function createTimerDropdown() {
	const li = Utils.createElement('li', {
	id: 'problem-timer',
	class: 'dropdown',
	});

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

[smartwe]

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

boj-extended/src/js/features/problem.js

Lines 106 to 111 in 2a4035a

	function createTimerDropdown() {
	const li = Utils.createElement('li', {
	id: 'problem-timer',
	class: 'dropdown',
	});

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

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

[joonas-yoon]

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

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

boj-extended/src/js/utils/index.js

Lines 17 to 32 in 2a4035a

	createElement: function (tag, attrs) {
	const keys = Object.keys(attrs || {});
	const el = document.createElement(tag || 'div');
	for (const key of keys) {
	const value = attrs[key];
	if (key == 'children') {
	const iteration = Array.isArray(value) ? value : [value];
	for (const child of iteration) {
	el.appendChild(child);
	}
	} else {
	el.setAttribute(key, value);
	}
	}
	return el;
	},

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 여기를 참고해보세요.