기술 블로그

프로젝트에서 정적 파일을 빌드 디렉토리로 복사하는 과정에서 발생하는 문제는 의외로 자주 겪는 이슈이다. 특히 esbuild처럼 최소한의 설정을 제공하는 도구를 사용할 경우, 정적 파일 복사 기능이 기본적으로 포함되어 있지 않기 때문에 직접 해결 방법을 구현해야 한다.나는 이 문제를 해결하기 위해 Node.js의 fs/promises 모듈을 활용한 간단한 스크립트를 작성했다. 이 글에서는 그 과정을 단계별로 설명한다.문제 상황esbuild를 사용하여 프로젝트를 빌드할 때, favicon.ico와 같은 정적 파일을 dist 폴더로 복사해야 했다. 그러나 esbuild 자체에는 public 폴더와 같은 정적 파일을 처리하는 기능이 없었다. 따라서 파일 복사를 수동으로 처리해야 했다.해결 방법1. Node.js..

React로 개발한 Single Page Application(SPA)의 빌드파일을 테스트할 때 문제 중 하나가 404 오류다. 특히 브라우저에서 URL을 직접 입력하거나 새로고침했을 때 이 문제가 발생할 가능성이 크다. 이 글에서는 그 원인과 이를 해결하는 방법을 다루며, serve를 활용한 간단한 해결책을 소개한다.404 오류의 원인SPA는 클라이언트 측 라우팅을 기반으로 동작한다. 예를 들어 http://localhost:3000/disks/list 경로로 이동하면 브라우저는 이를 서버에 요청한다. 하지만 서버는 해당 경로에 대응하는 파일을 찾으려고 하며, 결과적으로 404 Not Found 오류를 반환한다. 이는 정적 파일 서버가 동적 라우팅을 처리하지 못하기 때문이다.해결 방법: serve를 활..

리액트 프로젝트에서 SVG 파일을 사용할 때, svgr 플러그인을 사용해 SVG 파일을 리액트 컴포넌트로 변환하는 경우가 많다. 그러나 특정 SVG 파일은 크기가 커서 컴포넌트로 변환하면 번들 용량이 불필요하게 커지는 문제가 생길 수 있다. 이번 글에서는 esbuild와 svgr 설정에서 특정 SVG 파일만 외부 파일로 처리하는 방법을 다뤄보겠다.문제 상황esbuild와 esbuild-plugin-svgr를 사용하여 대부분의 SVG 파일을 리액트 컴포넌트로 변환해 사용했다. 하지만 일부 SVG 파일이 번들에 포함되어 용량이 크게 증가하는 문제가 발생했다. 예를 들어, assets/analysisfail.svg 파일이 번들 용량의 상당 부분을 차지하고 있었는데, 이 파일만 예외적으로 외부 파일로 처리하고 ..

현대 웹 개발에서 성능 최적화는 사용자 경험을 좌우하는 핵심 요소이다. 특히 폰트 파일은 웹 애플리케이션에서 상당한 용량을 차지하는 경우가 많아, 이들의 경량화는 빌드 파일 크기를 줄이는 데 큰 기여를 할 수 있다. 폰트를 경량화하는 방법으로는 사용하지 않는 글리프(glyph)를 제거하거나 필요한 문자 집합만을 포함하는 방법이 있으며, 이를 통해 프로젝트의 전체 파일 크기를 상당히 줄일 수 있다.폰트 경량화의 필요성폰트는 시각적 완성도를 높이는 데 중요한 역할을 하지만, 크기가 커지면 로딩 속도에 부정적 영향을 미친다. 특히 웹사이트나 애플리케이션이 여러 폰트를 사용하거나 다양한 스타일을 포함할 경우, 로딩에 소모되는 시간과 자원이 크게 늘어난다. 따라서 폰트를 경량화하면 불필요한 리소스를 줄이고, 최적..

작성중

정확한 알람 예약은 기본적으로 거부됨 https://developer.android.com/about/versions/14/behavior-changes-all?hl=ko 안드로이드 14부터 정확한 알람 권한이 비활성화 되어 사용자로 부터 권한을 받아야 한다. 사내에서 운영 중인 어플리케이션은 rn 서드파티 라이브러리를 통해 권한을 요청하고 관리해왔지만 현 시점 대응한 라이브러리가 없어 직접 네이티브 모듈을 구축해야했다. SCHEDULE_EXACT_ALARM은 선택적 권한이 아니기 때문에 알림상자로 권한 승인은 불가능하고 해당 앱의 설정으로 이동시켜주는것이 최선이다. // android/app/src/main/AndroidManifest.xml . . // android/app/src/main/java/..

axios와 fetch모두 데이터 패칭을 위한 도구이다. 가장 큰 차이점은 axios는 외부 라이브러이인 반면 fetch는 자바스크립트에서 기본으로 제공한다. fetch fetch('https://cataas.com/cat') .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.blob(); }) .then(blob => { document.getElementById('catImage').src = URL.createObjectURL(blob); }) .catch(error => { console.error('There was a problem with the fetc..

코테중 제곱수를 확인하는 문제가 있어 아래와 같이 구현했다. parseInt(parseInt(n).toString(2).split('').reverse().join(''))===1 2의 제곱수 특성을 활용해 2진수 문자열로 변환 후 리버스 후 1과 같은지 확인했다. 다른 아래와 같은 방법도 있다. 1.비트연산 위의 이진수를 활용한 개념와 유사하지만 더 명료하게 비트연산을 활용한다. function isSquare(n) { return n > 0 && (n & (n - 1)) === 0; } 만약 n이 8이라면 8 & 7의 and연산을 수행한다. 즉 1000과 0111의 and == 0000이므로 2의 제곱수가 맞다 만약 9일경우 1001 and 1000 = 1000 != 0이므로 2의 제곱수가 아니다. ..

const readline = require("readline"); const rl = readline.createInterface({ input: process.stdin, output: process.stdout }); let input = [] rl.on("line", function(line) { if(!line) { rl.close() } else { input.push(line) } }).on("close", function() { sol(input); process.exit(); }); function sol(input){ console.log(input+"hello") } https://forgottenknowledge.tistory.com/entry/%EC%95%8C%EA%B3%A0%EB..

코딩테스트 문제 복기 문제 조건 배열로 아이템이 제공된다. 각 아이템은 name, score 쌍의 데이터를 가진다. score을 기준으로 들어온 아이템을 정렬해야한다. score, 들어온 순으로 우선순위를 가진다. 만약 같은 name으로 기존보다 더 높은 score가 들어온다면 업데이트한다. score순으로 정렬되었을때 특정 갯수(이하 K) 안에서 순위에 변동(순위에 영향을 끼치지 못하는 정도의 score변동은 미해당)이 있을 때 count를 +1 한다. 알맞은 count를 반환하시오 분석 위 문제에 대해 주요 포인트는 2가지 이다. 중복된 name값을 가진 아이템은 업데이트 할것 score값에 따라 정렬할 것 이전 값과 비교하여 변화를 count 할것 3번의 경우에는 최신 업데이트한 rank값과 직전..