javascript/nodejs (17) 썸네일형 리스트형 서버가 static 파일을 보내는 방법 서버를 이용하여 파일을 전달하다 보니, 갑자기 static 파일이 어떻게 동작하는지에 대해 궁금해졌다. 사용자는 html 파일만 요청하는데, 그렇다면 css, js 파일 등 초기 페이지 이외의 정보는 대체 어떻게 서버로부터 가져가는 것일까? https://www.youtube.com/watch?v=SmE4OwHztCc 정보를 찾아보니, 내가 생각한 부분에는 아주 큰 오개념이 존재했다. 사실 사용자 측에서는 하나의 html 파일만 요청하지 않는다. 정확히 말하자면, 브라우저는 하나의 html 파일만 요청하지 않는다. 맨 처음 사용자가 html 파일을 받게 되면, 브라우저는 해당 내용을 분석하고 DOM 이라는 문서 구조로 파싱한다. 해당 작업을 통해 각각의 노드들은 객체로 간주되며, 사용자는 자바스크립트를 .. [error] Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html" 발생한 에러 생활 코딩 webpack 편을 듣는 도중, html 상에서 모듈을 이용할 때 다음과 같은 에러가 발생했다. 해당 에러가 발생한 환경은 이렇다. html 파일 : Hello, Webpack! express 서버 파일 : import express from 'express'; import {dirname, resolve} from 'path'; import { fileURLToPath } from 'url'; const url = new URL(import.meta.url).href; const __dirname = dirname(fileURLToPath(url)); const app = express(); app.use(express.urlencoded({extended:true})); app.. [nodejs] esmodule 사용 -> "type" : "module" npm init을 통해 package.json을 생성하면 require 및 exports을 이용한 CommonJS을 이용하게 된다. CommonJS 환경에서만 지원하는 환경변수들 (__dirname, __filename 등)이 있기도 하고, 기존 방식에 하자가 있어서 esmodule 방식이 나온 것은 아니기 때문에 굳이 esmodule 방식을 이용할 필요는 없으나, 최근 많이 이용하는 대부분의 프레임워크들이 esmodule 방식으로 사용되므로 프로젝트 내 일관성을 위해 채택하는 것도 좋다. 프로젝트 내에서 esmodule 방식을 이용하기 위해서는 package.json 내 type 설정을 변경해야 한다. { //some settings ... "type":"module" } type은 "module" 및.. [npm] errno -4092 | EACCES 에러 오늘 npm을 사용했는데, 어제까지는 발생하지 않았던 에러가 발생했다. 에러 내용은 아래와 같다. 마지막 실행 시점과 변경된 코드가 하나도 없는데 대체 이러한 에러가 왜 발생하는 것일까? 이를 알아보기 위해 우선 EACCES 에러가 무엇인지 먼저 알아보자. EACCES 에러 특정 모듈이 거의 모든 프로젝트에서 사용되는 경우, 우리는 해당 모듈을 전역적으로 설치한다. 이때 전역 모듈들이 설치되는 폴더는 따로 변경하지 않는 한 다음과 같은 경로에 존재한다. %USERPROFILE%\AppData\Roaming\npm\node_modules ~\AppData\Roaming\npm\node_modules : 위의 경로와 동일하게 처리된다. 이때 대부분의 운영체제에서는 특정 파일에 대한 접근 권한을 지정할 수 있.. Sequelize : 런타임 코드 생성을 활용하는 ORM~ Sequelize는 프로미스 기반의 ORM 으로, 일반적인 SQL 및 NoSQL 영역의 데이터베이스도 처리할 수 있다. 모델간의 관계를 지정 (Association) 하면 런타임에 코드가 생성되는 등 라이브러리 전반적으로 런타임 속성 할당이 많이 발생하기 때문에, 타입스크립트를 도입하여 사용하더라도 큰 메리트는 없으며, 모델간의 관계에 대응되는 함수들을 수동으로 declare 해야 하기 때문에 꽤 번거롭게 느껴진다. 물론 자동완성 기능이 크게 중요하지 않고, 자바스크립트 기반으로 ORM을 사용할 예정이라면 충분히 좋은 선택이 될 수 있다. 현재 글에서는 Sequelize ORM을 타입스크립트 환경에서 사용하는 경우에 대해 정리한다. https://github.com/blaxsior/web_study/tr.. [SQL] Object Relation Mapping 현대 사회에서는 짧은 시간에도 많은 데이터들이 오간다. 이러한 데이터들은 서버 기능을 하는 호스트에 의해 관리되는 경우가 많으며, 해당 서버에서는 데이터베이스 관리 시스템을 이용하여 데이터들을 체계적으로 관리하고 있다. 데이터베이스 관리 시스템으로 자주 사용되는 구조 중 하나인 RDBMS에서는 데이터를 개체간의 관계를 이용하여 관리하는데, 이러한 시스템은 통상적으로 SQL 언어를 사용하기 때문에, 만약 우리가 RDBMS 에 저장된 데이터를 호출하고 싶다면 SELECT와 같은 쿼리를 작성하여 여러 테이블에 저장된 데이터들을 불러올 수 있겠다. 실제 서버를 운영하는 경우에도 이러한 기조는 변하지 않는다. 클라이언트가 특정 url을 통해 데이터베이스 내에 존재하는 데이터를 요청하도록 구현하고 싶다면, 서버에서.. MYSQL & dotenv : errno 1045(Access denied) & dotenv 의 # 인식 ORM은 Object-Relational Mapping의 준말로, 기존 데이터베이스들에 저장된 데이터들에 대한 객체 매핑을 제공해준다. 따라서 ORM을 이용하면 기존의 SQL 혹은 NOSQL에 대한 쿼리 작업은 ORM 에게 맡기고, 사용자는 데이터베이스 내 각 데이터들을 객체 형태로 간단하게 관리할 수 있게 된다. Sequelize는 위에서 언급한 ORM의 일종으로, 각종 데이터베이스에 대한 객체 매핑을 제공한다. 사용법은 추후에 다룰 예정이고, 현재 글에서는 dotenv 내에서 #을 사용했을 때 발생한 문제 위주로 설명한다. 현재 프로젝트에서는 dotenv 라이브러리를 이용하여 .env 파일 내에 데이터베이스와 관련된 정보( DB_NAME, DB_ID, DB_PASSWORD ) 을 관리하고 있으며, 해.. dotenv - 환경변수 관리를 위한 라이브러리 우리가 사용하는 컴퓨터 내부에는 특정 경로를 저장해두는 PATH, 운영체제의 정보를 가지는 OS 등 다양한 정보를 가지는 환경변수가 있다. node 환경에서도 process.env를 통해 이러한 환경 변수들에 접근할 수 있다. process.env https://nodejs.org/dist/latest-v16.x/docs/api/process.html#processenv process.env은 유저의 환경 변수를 key-value 쌍으로 가지는 객체이다. 이때 해당 객체 내의 모든 키와 값의 쌍을 보고 싶다면 Object.entries 함수의 이용을 고려할 수 있다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects.. 이전 1 2 3 다음
