본문 바로가기
React Typescript (CRA) 환경에서 Path Alias 설정하기 에러 발생, 그리고 해결 craco 라이브러리 설치 package.json 설정 tsconfig.paths.json 과 tsconfig.json 에러 발생, 그리고 해결 Vue 만 사용하다가 React 환경을 적응하려니까 영 어색했었는데, Typescript 도 실무에서 거의 처음쓰는거라 시간이 좀 걸렸다. 개인적으로 ../../ 덕지덕지 경로가 붙어있는게 싫어서 평소처럼 path alias 를 설정하려했다. 그런데 컴파일 에러가 뜨면서 안되기 시작 ... 분명 tsconfig.json 에 path 를 basePath 와 paths 를 설정해놨는데 ...! // tsconfig.json { "compilerOptions": { // ... "baseUrl": "./src", "paths": { "@/*".. 2024. 2. 13.
React, Deck.gl, Mapbox(react-map-gl) 와 함께 한국어(ko) 처리하기 Deck.gl 이란? Deck.gl 사용하기 Deck.gl 코드 MapboxLanguage 사용하기 MapboxLanguage 한국어 설정 코드 회사에서 지도를 활용하는 프로젝트를 진행중인데, Deck.gl, Mapbox에 한국어를 적용하는 문서들이 많이 없길래 ... 누군가에게 도움이 될 수 있을지도 모르니, 백업 차원에서 오랜만에 블로그로 작성한다. 참고로 사용하는 라이브러리들이 client side rendering 이 많아 사용하는 프레임워크는 단순 React, Typescript 로 진행하고있다. Deck.gl 은 React friendly 하며, 처음엔 Next.js 사용할까 했는데 페이지가 약 4개정도 밖에 되지 않는데 차트랑 Deck.gl 때문에 use client 덕지덕지 붙어있어서 그냥.. 2024. 2. 6.
231001 src 내부 image 파일 import 후 다운로드 하는 방법 src 내부 image 파일 import 후 다운로드 하는 방법 지난 포스팅에 이어서 이미지를 다루는 방법을 또 마주치게 되었다. 프레임워크의 src 디렉터리 내부에서 이미지 파일을 import 로 호출한 후, 다운로드 받을 수 있지 않을까 하는 생각이었는데, 이것저것 문서를 찾아보니 되었습니다! import * as imageURL from '~/assets/image/sample/sample.png' function downloadFile () { const img = document.createElement('img') img.style = { height: '25%', width: '25' } img.src = imageURL.default console.log('imported', imageUR.. 2023. 10. 1.
230930 Promise 객체로 image file 목록 모두 Base64 로 변환하기 사진 파일을 올린 후, 화면 미리보기 (Preview) 기능을 구현할 때 사용해야했는데, 개별적인 image 파일을 FileReader() 객체를 통해 base64로 변환하는 것은 이미 기존에 정리해둔바 있습니다. (링크) 한번 정리해둔적이 있어서 참고하면 편하더라구요. 그런데 개별적인 파일이 아닌, Array 형식의 image 파일인 경우는 onload 이벤트를 통해 비동기 형식으로 데이터를 반환하기 때문에, Promise 객체를 사용하지 않으면 안됐습니다 ...! async preview (files) { const promises = [] for (const file of files) { const promise = new Promise((resolve, reject) => { const reade.. 2023. 9. 30.
230722 pkg-size 라이브러리로 패키지 설치 전 사이즈 확인하기 pkg-size Find the true size of an npm package pkg-size.dev 프로젝트에 패키지를 설치하기 전, 해당 패키지의 사이즈가 프로젝트에 어떤 영향을 미칠지를 판단을 해야하는데, 의존성을 포함한 npm package 사이즈 를 확인할 수 있는 웹페이지가 생겨서 공유해봅니다. 첫 화면에 접근하면, package 이름을 입력하도록 되어있습니다. npm install 이라고 되어있는 UI 가 재밌더라구요 저는 현재 개인프로젝트에서 buefy 를 사용하고있어서, 테스트로 넣어봤습니다. package 이름을 입력하고 실행을 하면, 하단에 자세한 패키지 정보가 나옵니다. UI 가 너무 깔끔하고 퍼포먼스가 굉장히 빠르네요. 작동 방식과 자세한건 Hiroki Twitter 에서 확인.. 2023. 7. 22.
221128 Node.js 업데이트 방법 안녕하세요 또야입니다. 오늘은 오랜만에 포스팅으로 Node.js 업데이트를 하는 명령어를 가져왔습니다. 엄청 간단하긴 하지만 매번 잊어버려서 검색을 자주 하게되는 명령어라 정리했습니다. node -v # 현재 버전 확인 npm cache clean -f # npm 캐시 삭제 npm install -g n # node.js 버전을 관리할 수 있는 n 모듈 설치 # n 모듈을 사용해 node.js 설치 (n + 설치를 원하는 버전) n stable # 안정 버전 n latest # 최신 버전 n lts # lts 버전 n 14.15.4 # x.x.x 버전 2022. 11. 28.
220902 React Textarea 컨텐츠 높이 자동 설정 이벤트 없이 자동으로 Textarea 컨텐츠 높이 설정 import React, { useRef, useEffect } from 'react' const Chat = () => { const myRef = useRef(null) // textarea 자동 높이 설정 useEffect(() => { if (myRef.current !== null) { myRef.current.style.height = (myRef.current.scrollHeight) + 'px' } }, [myRef]) return ( { image } {name} ) } 결과물 컨텐츠 내용에 맞춰 높이 설정 완료 2022. 9. 2.
220801 Promise 를 이용한 값 대기 Promise 를 이용한 값 대기 /** * 파라미터로 받은 token에서 정보를 확인 하여 저장 * 데이터를 가져오는동안 token === null 이기 때문에, * 해당 구문이 동작하지 않기때문에 20ms 마다 가져오는 것으로 설정하였습니다. */ function promiseTimeout (token) { if (!token) return // promiseTimeout(token) return new Promise((resolve, reject) => { // token 이 들어올때까지 20ms 마다 체크하기 const interval = 20 // 임의로 20ms 로 설정 (20ms 마다 확인하기) let timeout = 1000 // 임의로 1s 로 설정 const intervalId = (.. 2022. 8. 1.
220801 Typescript Destructuring Typescript Destructuring Typescript Destructuring Array Destructing Tuple Destructing Object destructing Property Renaming 기본 값 함수 선언 (Function declarations) 함수 타입 선언 Spread 연산자 Array Destructing const input = [1, 2] const [first, second] = input console.log(first) // 1 console.log(second) // 2 function f ([first, second]: [number, number]) { console.log(first) // 1 console.log(second) // 2 } f(.. 2022. 8. 1.
220801 Typescript Handbook Typescript 핸드북 Typescript 핸드북 원시타입 (Primitives) : string, number, boolean Array any 변수의 Type 정의(Annotation) 함수 (Function) Parameter Type 정의 Return 타입 정의 익명 함수 (Anonymous Function) 오브젝트 타입 (Object) Parameter Type 정의 Optional Properties Union Types Union Type 정의 Union Types 사용하기 Type Aliases Interfaces Type Aliases 와 Interface 의 차이? 타입 단언 (Type Assertion) Literal Types null 과 undefined Non-null 단언.. 2022. 8. 1.
220630 목 GitLab Runner 설치 방법 GitLab Runner 설치 방법 GitLab 파이프라인을 사용하여 job을 생성했는데, 자꾸 failed 가 발생합니다. CI / CD > Jobs 를 확인해보면 활성화된 Runner 가 없다는 에러가 발생했다는 것을 확인할 수 있었습니다. This job is stuck because you don't have any active runners that can run this job. Go to project CI Settings 안내가 요구한 대로 Settings > CI / CD 메뉴에서 Runners 탭을 활성화 시켜줍니다. 그럼 Show runner installation instructions (설치 가이드) 버튼을 클릭하여, 현재 사용하고 있는 서버의 (또는 필요한 서버의) OS에 맞게 .. 2022. 7. 1.
220701 금 Python 문법 정리 Python 문법 정리 Python 문법 정리 변수 Input 함수 출력 계산 불 & 비교연산자 논리연산자 (and, or) 리스트와 튜플 시퀀스 자료형 Slice 딕셔너리 구문 if 조건문 for 과 range while 코딩테스트 준비하는데 파이썬을 다 잊어버려서 다시 정리하게 되었다. ㅎ 변수 # 변수 할당 x = 'Hello World!' # 변수 여러개 한 번에 할당 x, y, z = 10, 20, 30 x = y = z = 10 # 변수 여러 개를 만들 때 값이 모두 같아도 되는 경우 # 변수 서로 바꾸기 x, y = 10, 20 x, y = y, x # x :: 20, y :: 10 # 변수 삭제 del x # 빈 변수 만들기 x = None # 변수의 자료형 확인 type(x) # Inpu.. 2022. 7. 1.

티스토리툴바