refactor: 함수내부에서 실행 시키도록 수정 (함수밖, 함수내부 유효성검사로 판별, 함수내부에 값이 있을때만 유효하게 … #16
Conversation
src/components/AppSidebar.tsx
Outdated
| const alterSidebarCommands = ( | ||
| commands: { | ||
| name: string; | ||
| functionCode: string; | ||
| }[] | ||
| ) => { | ||
| return commands.map((command) => ({ | ||
| title: command.name, | ||
| icon: Inbox, | ||
| command: command.functionCode, | ||
| })); | ||
| return commands.map((command) => { | ||
| const icon = | ||
| command.name === 'forward' | ||
| ? FaPersonWalkingArrowRight | ||
| : command.name === 'shoot' | ||
| ? FaPersonRifle | ||
| : Inbox; | ||
| return { | ||
| title: command.name, | ||
| icon, | ||
| command: command.functionCode, | ||
| }; | ||
| }); |
There was a problem hiding this comment.
이 컴포넌트의 변수에 의존하지 않는 함수 같은데 밖으로 꺼내도 되지 않을까요?
별개로 이렇게 매핑을 하는 것도 유효하지만 따로 어딘가에 객체로 정의를 해놔도 좋습니다. 그리고 name이랑 functionCode는 이름만 바꾸는 셈이고 icon만 덧붙이는 상황이니
{
fooCommand: FooIcon,
barCommand: BarIcon
}이렇게 객체를 만들어놓고 alteredSidebarCommand라는 배열을 만들지 않고 alteredSidebarCommand 사용하는 곳에 commands를 돌면서 내부에서 필요한 곳에 위 객체에서 아이콘을 꺼내 써도 괜찮을 것 같아요.
src/store/useQuiz.ts
Outdated
| const solutionRegex = /function\s+solution\s*\(\)\s*{([\s\S]*?)}/; | ||
| const match = userCode.match(solutionRegex); | ||
| const solutionFnBody = match ? match[1].trim() : null; | ||
| const codeOutsideBeforeSolution = | ||
| match && typeof match.index === 'number' | ||
| ? userCode.slice(0, match.index).trim() | ||
| : userCode.trim(); | ||
|
|
||
| const codeOutsideAfterSolution = match | ||
| ? userCode.slice((match.index ?? 0) + match[0].length).trim() | ||
| : ''; | ||
|
|
||
| if ( | ||
| codeOutsideBeforeSolution || | ||
| codeOutsideAfterSolution || | ||
| !solutionFnBody | ||
| ) { | ||
| if (codeOutsideBeforeSolution || codeOutsideAfterSolution) { | ||
| alert('함수내부에 코드를 입력 해주세요'); | ||
| return; | ||
| } | ||
| if (!solutionFnBody) { | ||
| alert('코드를 입력해주세요'); | ||
| } | ||
| } | ||
|
|
||
| try { | ||
| new Function( | ||
| `"use strict"; | ||
| const commands = arguments[0]; | ||
|
|
||
| function solution(){ | ||
| const { ${Object.keys(commandsForSolution).join(', ')} } = commands; | ||
| ${solutionFnBody} | ||
| } | ||
| solution(); | ||
| ` | ||
| )(commandsForSolution); | ||
| )(commandsForSolution); |
There was a problem hiding this comment.
runCode를 읽는 사람이 '코드 실행' 이외의 내용은 무슨 일을 하는지 더 쉽게 파악할 수 있도록 함수를 분리해주면 더 좋겠네요.
|
넵 addSidebarCommand 같은경우는 기존의 사이드바에서 클릭시 추가하는기능인데 실수로 삭제를 못했습니다. |
네 맞습니다 :) |
src/lib/codeASIUtils.ts
Outdated
There was a problem hiding this comment.
src/utils 디렉토리를 만들고 그 안에 유틸함수들을 담아보세요~
참고로 이렇게 도메인 로직이 들어가는 코드는 보통 유틸함수라고 보진 않습니다. 사용하는 곳과 조금 더 가까이 두면 좋을 거예요.
There was a problem hiding this comment.
src/utils디렉토리를 만들고 그 안에 유틸함수들을 담아보세요~ 참고로 이렇게 도메인 로직이 들어가는 코드는 보통 유틸함수라고 보진 않습니다. 사용하는 곳과 조금 더 가까이 두면 좋을 거예요.
도메인로직과 유틸함수는 다르다 라는 말씀이시고.
혹시 사용하는곳과 조금 더 가까이 둔다는말씀이 어떤말씀일까요??
원래는 runCode가 전역상태쪽에있어서 그쪽에 만드려고했더니 굳이 전역상태로 유지시킬필요는없는것같아서 분리했었는데요!
|
refactor: 함수내부에서 실행 시키도록 수정 (함수밖, 함수내부 유효성검사로 판별, 함수내부에 값이 있을때만 유효하게 코드 실행)