전체 글

React 빌드 후 정적 파일 서버에 올리기 (404 Error 해결)

CRA 등을 이용하여 열심히 개발한 React 프로젝트를 빌드한 뒤, 이를 서버에 전달하여 정적 호스팅을 할 수 있다. 이 경우 자주 등장하는 문제가 바로 라우팅 된 페이지에서 새로고침을 하거나, root 경로('/') 곧바로 그 페이지에 접근하면 페이지를 찾을 수 없는 문제가 발생하는 것이다. 이는, SPA 환경에서 필연적으로 발생하는 문제로 내부에 라우팅은 JS에 의해 처리되고 실제 html은 맨 처음 한 번만 제공받기에 이런 문제가 발생한다. 대부분의 경우 별도의 설정이 없으면, build 폴더 내부의 index.html이 '/' 경로와 매칭되기에 최초 진입이나 '/' 경로를 시작으로한 라우팅에는 문제가 없다. 그러나 그 이외의 경로, 예를 들면 '/about'에 접근한다고 하였을 때 서버에서는 이..

이미지 최적화하기 (img 태그 속성 알아보기)

프론트엔드 개발자로서, 웹페이지의 최적화를 위해서 번들링 사이즈를 최소화할 필요가 있다. 오늘날 웹 사이트에서 큰 비중을 차지하는 자바스크립트가 번들링으로 최적화되는 것 처럼, 이미지 역시 최적화할 필요가 있다. 따라서, 이미지 최적화를 위해서 여러 방법을 알아보았다. css의 background-img를 사용하는 것 보다는 html img 태그를 사용하자. 모던 브라우저에서 제공되는 고품질이면서도 용량이 작은 webp나 avif와 같은 최신 이미지 확장자를 사용하자. JPEG는 압축률과 이미지 품질을 조절할 수 있어 복잡한 이미지에 적합하다. 투명 배경을 사용하기 위해서 PNG를 사용할 수는 있지만, 품질이 좋은 만큼 많은 용량을 차지한다. 불필요하게 큰 이미지를 사용하지 않는다. 캐싱을 통해서 여러번..

자바스크립트 최단거리 알고리즘 (다익스트라 알고리즘, Dijkstra)

최단거리를 구하는 알고리즘은 다양한 방법으로 구현할 수 있다. 최단거리 알고리즘은 코딩테스트에서도 많이 사용되고, 생각보다 최단거리를 구해야할 경우가 종종 있기에 이번 기회에 정리하도록 하였다. 이번에는 자바스크립트로 가장 기본적인 최단거리 알고리즘 방법인 다익스트라(Dijkstra) 알고리즘을 구현해보도록 하였다. 🥩 다익스트라 알고리즘은 최단거리를 구하는데 사용되는 대표적인 알고리즘 중 하나이지만, 그 외에도 벨만-포드 알고리즘, A* 알고리즘, 플로이드-워셜 알고리즘 등 다양한 알고리즘을 통해서 최단거리를 구할 수 있다. 🧀 알고리즘의 선택은 문제의 제약사항과 성능 요구사항에 따라 달라질 수 있다. 다익스트라 알고리즘은 하나의 출발점에서 다른 모든 정점까지의 최단거리를 구하는 알고리즘으로 아래는 다..

URI와 URL

URL(Uniform Resource Locator)과 URI(Uniform Resource Identifier)은 웹에서 리소스를 식별하는 데 사용되는 용어다. 🍅 둘 다 리소스를 가리키는 문자열로 생각할 수 있지만, 약간의 차이점이 있다. URI는 리소스의 고유 식별자로서, 리소스의 위치, 이름 또는 두 가지의 조합으로 구성될 수 있다. 즉, URI는 리소스를 식별하기 위한 일반적인 개념으로, URI는 더 넓은 범위의 개념이기 때문에 URL도 URI에 포함된다. URL은 URI의 하위 집합으로 URL은 리소스의 위치를 나타내는 특정한 형식의 문자열이다. 즉, URL은 리소스의 주소로 생각할 수 있고, URL은 프로토콜(예: HTTP, FTP)을 포함하여 도메인 이름 또는 IP 주소, 경로 등으로 구성..

프로그래머스 코딩테스트 연습 - 무인도 여행 JavaScript

이번 문제는 이차원 배열을 방문하면서, 연결된 유효한 값의 범위와 값을 구하는 문제이다. 기본적으로 dfs방식을 사용하였으며, 방문했는지 확인할 수 있는 값을 설정하여 문제를 해결하였다. function solution(maps) { // X는 바다, 숫자는 무인도 // 상하좌우로 연결된 무인도의 숫자의 합은 머물 수 있는 날짜 수 const answer = []; const checkValid = (x, y) => maps.length - 1 >= x && x >= 0 && maps[x].length - 1 >= y && y >= 0; const mapDfs = (visited, x, y) => { // x, y 방문 let sum = parseInt(maps[x][y]); visited[x][y] =..

canvas 태그 사용하기

canvas 태그는 HTML5에서 도입된 요소이다. 자바스크립트를 사용하여 동적으로 그래픽을 컨트롤할 수 있게 해준다. canvas 태그를 사용하면, 자바스크립트로 선, 도형, 이미지, 텍스트를 그리고 스타일을 지정할 수 있다. 프레임 기반 애니메이션 및 인터랙티브 기능(마우스 클릭, 키보드 입력 등)을 제공한다. 기본적인 사용법은 다음과 같다. 위와 같은 HTML 파일을 아래의 자바스크립트 코드로 조작한다. const canvas = document.getElementById("test-canvas"); const ctx = canvas.getContext("2d"); ctx.fillStyle = "#ccc"; // top left width height ctx.fillRect(10, 10, 50, 1..

Typescript에서 Error 처리하기

자바스크립트는 Error 객체를 통해서 에러를 발생시킬 수 있다. throw new Error("Error !!!"); // or throw Error("에러 !!!"); ➡️ new 키워드 없이 Error 객체를 호출해도, new 키워드를 사용한 것과 동일한 결과가 나타난다. 자바스크립트에서 발생한 에러는 try catch문을 통해서 에러를 탐지하고, 핸들링할 수 있다. function errorTest() { throw new Error("에러입니다. 🍌"); } try { errorTest(); console.log("성공!"); // 미출력 } catch(error) { console.log(error, "발생!"); // 출력 } finally { console.log("성공/실패 상관없이 반드..

Typescript 제네릭(Generics) 사용하기

제네릭은 타입을 동적으로 설정할 수 있게 해주는 문법이다. 외부에서 타입을 주입하여, 동적으로 타입을 설정할 수 있기에 재사용이 가능한 컴포넌트를 구현하는데 있어서 핵심이다. 타입스크립트에서 가장 간단한 제네릭의 예이다. // typescript v5.0.4 function printf(i: T): void { console.log(i); } printf("Hi ~"); printf(123); printf("Zombie~"); // 제네릭 타입도 추론이 가능하다. printf 함수의 인자는 어떤 타입의 변수든 인자로 받아 출력한다. 만약 제네릭을 사용하지 않았다면 인자인 변수 i의 타입은 any가 되었거나, 가능한 모든 타입을 union을 통해서 엮어내야 한다. function printf(i: any)..