Never give up

마지막으로 코드에디터가 그냥 textarea에 밋밋한 text를 그대로 사용할 수는 없으니 higlighting을 어떻게 처리하는지 확인해볼텐데 일단 옵션이 여러가지가 있는거 같았습니다 필자가 사용한 Prism.js https://www.npmjs.com/package/prismjs 그리고 Highlight.js https://www.npmjs.com/package/highlight.js 기타 등등... 뭐 사용방법은 크게 다르지 않으나 필자는 Prism.js를 사용했는데 이유는 조금더 작은 번들 크기, 더 많은 다운로드수, 기타 등등인데 어떤것을 사용하셔도 무방합니다 이번 예제는 조금 tricky한 작업이 있다보니 자료찾는데 고생을 조금했습니다 먼저 참고한 자료를 공유해드리자면 https://css-t..

이번에는 iframe에서 어떻게 구현하는지 알아보도록 하겠습니다 (iframe 태그에 대한 설명들은 타 블로그에 자주 잘 정리되어있어서 굳이 정리는하지 않겠습니다) src/hooks/useEditor.ts const useEditor = () => { const resultRef = useRef(null); const [text, setText] = useState(testString); const [printText, setPrintText] = useState(); const debounce = useRef(); const isLoaded = useRef(false); const currentScript = useRef(); useEffect(() => { initIframe(); initConsol..

바빴던 일들이 어느정도 마무리 돼가고 있어서 여유가 조금 생겼습니다 고로 이전 포스트에서 언급한 코드 에디터를 공유해보고자 합니다 포스트 3개로 나눠서 포스트 할 예정인데 1. babel standalone으로 string jsx를 js로 변환 후 createRoot의 render를 이용해서 구현 2. iframe 내부에 head의 script 부분을 변경시켜가면서 화면에 보여주는 부분 3. prism을 이용해서 textarea를 그럴싸하게(?) 보여주는 작업 및 간단한 키보드 처리 및 결과 정도로 진행해볼까 합니다 먼저 babel standalone을 살펴보면 https://babeljs.io/docs/babel-standalone node 환경이 아닌 곳에서 사용할 수 있는 standalone 형태의..

이번에 포트폴리오를 새로 만들면서 다국어 처리를 할 필요가 있었는데 라이브러리 없이 간단하게 만들어 봤습니다 상태관리 라이브러리를 사용하면 조금 더 코드가 간단해지는데 각각 사용하는 라이브러리가 다를테니 공용으로 사용할 수 있는 context api를 사용해서 해봤습니다 (ps. 필자는 zustand를 좋아합니다) src/localization/provider.tsx import React, { createContext, useState } from "react"; import { CONTEXT_TYPE, LANG_CODE, LANG_TYPE } from "src/utils/constants"; export const LocalizationContext = createContext( undefined )..

최근에 이미지 사이즈 처리용도로 개발 해놓은 유틸을 만들었고 정리 + 포스팅용도 예제코드를 간단하게 만들어봤습니다 예제 필요없이 변환 부분만 필요하신 분들은 바로 아래 util부분만 확인하시면 되겠습니다 src/utils/imageResizeUtil.ts export interface ImgSize { width: number; height: number; } export interface ImgInfo extends ImgSize { src: string; } const imageResizeUtil = () => { const readImageInfo = async (img: File | string): Promise => { if (typeof img === "string") { const size ..

전에 언급한 Fiber를 한번 사용해봤는데 생산성이 어마어마하게 올라갈 수 있겠다는 생각이 들었습니다 그럼 바로 예제로 들어가보겠습니다 index.tsx import { Canvas } from "@react-three/fiber"; import React from "react"; import Box from "./Box"; import Camera from "./Camera"; const FiberExample = () => { return ( ); }; export default FiberExample; Fiber에 정의되어있는 Canvas 태그 내부에 Camera, light, Box(mesh) 등을 넣어주면 되는데 scene에 add하는것과 동일한 맥락으로 보시면 됩니다 Camera.tsx imp..

이번에는 mesh에 이벤트를 넣어주는 작업을 해봤는데 html에서 사용하던 onClick이나 mouseEnter 같은 이벤트를 따로 걸어줄 수 없어서 eventListener를 걸어서 사용했고, 3d에서는 조금 더 복잡한 방법으로 사물의 위치를 추적해야되는거 같습니다 그래서 raycaster를 사용할텐데 자세한 내용은 아래 링크를 참고해주세요 (링크 : https://threejs.org/docs/#api/en/core/Raycaster) 화면부분은 간단한 div에 ref만 할당하는 부분으로 동일합니다 use_raycasting.ts import { useEffect, useRef } from "react"; import * as Three from "three"; const useRaycasting =..

이번에는 계기판을 한번 만들어봤는데 계기판을 영어로 뭐라 표현하면 좋을까 고민하다가 그냥 게이지로 했습니다 index.tsx import React, { useEffect } from 'react'; import util from 'src/util/common_util'; import CommonBtn from 'src/components/common_btn/common_btn'; import { useGauge } from 'src/custom_hooks'; const Gauge = () => { const { ref, setValue, resetCamera } = useGauge(); useEffect(() => { const interval = setInterval(() => { setValue(u..