728x90
728x90
스프링에서 많이 사용되는 JSP, Mustache, Thymeleaf와 같은 템플릿 엔진이 express에도 있을 것이라 생각하였다. 그러던 중 강의에서 pug(구 jade)라는 템플릿 엔진을 알게 되었다. 그런데, pug는 마지막 커밋이 꽤나 오래전(약 2년전)이었고 좀 더 많이 사용되는 템플릿 엔진을 찾아보았다. handlebars나 nunjucks과 같은 템플릿 엔진도 찾을 수 있었지만, 가장 많이 사용되는 ejs를 간단하게 사용해보고 설정과 사용법을 남기도록 하였다. // ./index.js const express = require("express"); const app = express(); // ejs 설정 app.set("view engine", "ejs"); // ejs를 사용한다. ap..
브라우저가 인터넷에 연결되어 있는지는 기본적으로 navigator.onLine 변수를 확인할 수 있다. boolean값으로 인터넷에 연결되어 있는지 확인할 수 있다. 다만, 지속적으로 브라우저가 인터넷에 연결되어있는지 확인하기 위해서는 이벤트 핸들러의 연결이 필요하다. 브라우저에서 지속적으로 인터넷 연결을 확인하는 방법으로 eventListener를 사용할 수 있다. 다음과 같은 간단한 코드를 통해서 인터넷 연결을 확인할 수 있다. window.addEventListener("online", () => console.log("ONLINE! 🐥")); window.addEventListener("offline", () => console.log("OFFLINE... 😿")); 콘솔창에 위의 코드를 입력하고..
최단거리를 구하는 알고리즘은 다양한 방법으로 구현할 수 있다. 최단거리 알고리즘은 코딩테스트에서도 많이 사용되고, 생각보다 최단거리를 구해야할 경우가 종종 있기에 이번 기회에 정리하도록 하였다. 이번에는 자바스크립트로 가장 기본적인 최단거리 알고리즘 방법인 다익스트라(Dijkstra) 알고리즘을 구현해보도록 하였다. 🥩 다익스트라 알고리즘은 최단거리를 구하는데 사용되는 대표적인 알고리즘 중 하나이지만, 그 외에도 벨만-포드 알고리즘, A* 알고리즘, 플로이드-워셜 알고리즘 등 다양한 알고리즘을 통해서 최단거리를 구할 수 있다. 🧀 알고리즘의 선택은 문제의 제약사항과 성능 요구사항에 따라 달라질 수 있다. 다익스트라 알고리즘은 하나의 출발점에서 다른 모든 정점까지의 최단거리를 구하는 알고리즘으로 아래는 다..
webpack은 대표적인 자바스크립트 번들러이다. 이 번들러는 js 파일들을 최적화하고 하나의 파일로 만들어주는 역할을 하는데, 거기에 더해서 자바스크립트에서 번들링이 필요한 이유를 이해할 필요가 있다. webpack의 필요성 기본적으로 js파일은 script 태그를 통해서 html에 연결된다. 일반적인 html 파일 이 경우, js 파일이 하나라면 문제가 없지만 대부분의 경우 프로젝트가 조금만 커져도 js 파일은 여러개가 될 것이다. 위의 예에서 html에 사용된 js 파일은 각각 다음과 같다. // index.js let zombie = "one"; // hi.js zombie = 777; // bye.js window.alert(zombie); html 파일을 열어보면, 777 이라는 값을 보여주는..
타입스크립트에서 고정된 값을 주기위해서 다음과 같이 union을 활용할 수 있다. type Fruit = "Apple" | "Banana" | "Cocoa"; const fruit: Fruit = "Apple"; 위에서 fruit은 자동완성도 지원되고, Apple, Banana, Cocoa 셋 중 하나의 값만 가질 수 있게 된다. 다만, 다른 언어에 익숙한 사람이라면 enum을 사용하여 위의 고정된 선택지의 값을 표현하고 싶어할 수 있다. enum Fruit { Apple, Banana, Cocoa } const fruit: Fruit = Fruit.Apple; // 0 위의 타입스크립트는 다음과 같이 자바스크립트로 변환된다. "use strict"; var Fruit; (function (Fruit) ..
일단 yarn을 설치해야 하는데, corepack을 통해서 패키지 관리자의 버전을 관리할 수 있다. npm i -g corepack corepack prepare yarn@stable --activate yarn 설치 yarn -v yarn set version berry yarn version 설정 yarn init yarn 프로젝트 시작 (npm init과 같다) https://nodejs.org/api/corepack.html#corepack Corepack | Node.js v20.0.0 Documentation Corepack# Added in: v16.9.0, v14.19.0 Corepack is an experimental tool to help with managing versions of..