FRONTEND67 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. 220627 월 TDD 정의 및 효과 TDD란? (Test Driven Development) TDD의 효과 TDD에 관한 편견과 실상 TDD는 무조건 해야 한다? TDD는 버그를 박멸한다? TDD는 항상 느리다? 테스트 기법의 종류와 장단점 테스트 주도 개발 프로세스 TDD 메인 프로세스 단위테스트시 참고사항 TDD란? (Test Driven Development) 테스트 주도 개발(TDD) 은 소프트웨어를 개발하는 여러 방법론 중 하나이다. 제품이 오류 없이 정상 작동하는지 확인하기 위해 모든 코드는 프로그래머가 작성하고 나서 테스트를 거치게 되는데, TDD에서는 제품의 기능 구현을 위한 코드와 별개로, 해당 기능이 정상적으로 움직이는지 검증하기 위한 테스트 코드를 작성한다. 이를 통해 테스트가 실패할 경우, 테스트를 통과하기 위한 최소.. 2022. 6. 27. 220503 화 Request Payload 를 숨기는 방법? Request Payload 를 숨기는 방법이 있나요? 먼저, 누구를 위한 포스팅인가? 해당 번역 포스팅은, 클라이언트 사이드에서 브라우저 개발자도구를 통하여 아이디/비밀번호를 전송하면서 발생하는 보안 정보 노출에 대해서 검색하다가 결과에 노출된 검색결과입니다. 참고로 이 포스팅은 생각보다 개발자에게 유용한 정보를 담고있지는 않았습니다. 정말 단순히 "크롬의 Network 탭을 닫는 방법", "Swagger 의 API 를 숨기는 방법" 등 방법적인것이 주를 이루어져있었기 때문에, 클라이언트 개발자들이 궁금해하고 필요해보이는, 명료한 내용만 번역하여 정리해보았습니다. 클라이언트사이드에서 암호화하여 데이터를 전송하는 방법은 추후에 다른 포스팅으로 다뤄보겠습니다. 목차 Request Payload 를 숨기는 .. 2022. 5. 3. 이전 1 2 3 4 ··· 6 다음
