Never give up

압축 파일을 다룰일이 생겨서 간단하게 예제를 만들어봤습니다 먼저 클라이언트에서 압축파일을 사용하게 됐을 때의 장점으로는1. 클라이언트가 여러개의 파일을 다운로드 받지 않아도 된다2. 서버가 파일 리스트를 조회 한 후 넘겨주지 않아도 된다3. 네트워크 리소스를 적게 사용한다4. 별도의 서버작업 없이 파일 압축이 가능하다 정도 될거 같습니다 zipUtil.tsimport { saveAs } from "file-saver";import JSZip, { JSZipObject } from "jszip";export const zipUtil = { /** - extract file list from file url */ async extractFile(url: string) { const res = awa..

어드민 작업을 할 때, excel import, export기능이 필요한 경우가 많습니다 예를들어, 일괄등록, 엑셀로 추출해서 보기 등등 엣날에 서버쪽에서 작업하는 예제를 올렸었는데, 이번에는 클라이언트에서 구현 및 유틸로 만들어봤습니다 클라이언트에서 했을때 장점으로는1. 서버쪽에 굳이 excel 라이브러리를 설치 안해도 된다2. 서버쪽 리소스를 조금이나마 덜 쓸 수 있다3. 파일업로드 방식이 아닌, json으로 데이터 교환 하기 편하다정도 있을 수 있을거 같습니다 excelUtil.tsimport * as XLSX from "xlsx";export const excelUtil = { /** - generate json from excel file */ excelFiletoJson(file: File..

최근에 회사에서 다음과 같은 에러가 나타난다 라는 이야기를 들었는데 어떻게 해봐도 재연이 안됐었습니다(이유는 후술..) 먼저 발생한 에러를 보면index.js가 안불러와진다 라는 이야기인데, dynamic import를 보고 혹시 suspense가 빠져있었나? 하고 봤더니 그걸 빼먹으면 애초에 dev모드에서 에러를 마주쳤을것이고, 다음과 같은 에러를 봤었겠지요그래서 추측을 조금 해봤는데 보통 배포 이후에 발생하는것을 알게됐고 index-hash.js중 저 hash부분을 봤더니, 필자는 업데이트 대비를 하나도 안하고 있었다는것을 알게됐습니다.. 보통 배포하고 새로 url을 쳐서 들어가면 문제가 없지만 새로 번들되었을 때 index.html이 바라보던 index-hash.js가 다른것으로 변경되면서 발생한것..

최근 회사에서 swagger에 있는 api 및 타입 자동생성 도입을 고민해서 두가지를 시도해봤습니다 1. OpenAPI Generator https://www.npmjs.com/package/@openapitools/openapi-generator-cli 2. swagger-typescript-api https://www.npmjs.com/package/swagger-typescript-api 작동방식은 둘 다 swagger에 있는 yaml이나 json파일을 파싱해서 코드를 생성해주는 도구인데 1번은 java로 만들어져있어서 별도로 jdk를 설치해야돼고 상대적으로 무거웠습니다 다만 config파일을 직접 설정할 수 있는면에서 script 부분이 깔끔해지는 장점이 있습니다 이런식으로 말이죠 // packa..

마지막으로 코드에디터가 그냥 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 형태의..

최근에 이것저것 토이 프로젝트를 만들어봤는데 정리할 시간이 없어서 공유를 못해드리고 있는거 같습니다 일단 작업물들 간단히 gif 보여드리고 정리 후 하나씩 업로드 해보도록 하겠습니다 작업물1. Code editor(포스트 완료) jsfiddle, codepen 등 코드 에디터 및 화면에 결과 출력, console 출력 등 기능등이 들어간 예제 1. react component string을 렌더링 2. textarea에 highlight 3. iframe console을 parent에 표시 4. +@(textarea shortcut) 정도의 작업물인데, 생각보다 고민해야될 요소가 많은거 같았습니다 작업물2. 3D Earth thrree js, fiber를 이용해서 지구 구현 및 2d - 3d 좌표 맵핑 ..