Never give up

최근 회사에서 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 좌표 맵핑 ..

이번에 포트폴리오를 새로 만들면서 다국어 처리를 할 필요가 있었는데 라이브러리 없이 간단하게 만들어 봤습니다 상태관리 라이브러리를 사용하면 조금 더 코드가 간단해지는데 각각 사용하는 라이브러리가 다를테니 공용으로 사용할 수 있는 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 ..

플러터는 옛날에(?) package를 올려봤는데 웹 개발 시작하고 나서 라이브러리도 한번 만들어보고 싶다 라는 생각으로 이것저것 개발해봤는데 상대적으로 오래돼서 그런지 주제를 정하기가 쉽지 않았던거 같습니다 전 회사에서 개발하면서 라이브러리로 만들려고 했었던걸 미루다 미루다 이제야 업로드하게 되었습니다 서론이 길었는데 라이브러리 명은 feat에 적어놓은 것처럼 userevent-tracker입니다 (링크 : https://www.npmjs.com/package/userevent-tracker) 말 그대로 유저 이벤트를 트래킹 하는데 현재 페이지 이동 여부, 클릭, os, browser info 등등을 수집하고 있고 이 데이터들을 서버에 저장해놨다가 통계에 사용하면 좋을거 같습니다 현재 로컬 스토리지에 저..