javascript (72) 썸네일형 리스트형 [자바스크립트] setTimeout이 정확한 시간을 보장하지 않는 이유 setTimeout() - Web API | MDN 전역 setTimeout() 메서드는 만료된 후 함수나 지정한 코드 조각을 실행하는 타이머를 설정합니다. developer.mozilla.org 자바스크립트는 특정 시간 이후, 또는 시간 간격으로 작업을 진행할 수 있도록 setTimeout, setInterval과 같은 함수를 대부분의 환경에서 지원한다. 이러한 함수들은 지연 시간 및 콜백을 입력받으며, 지연 시간 이후 콜백을 실행하는 동작 방식을 가지고 있다. 이때 콜백 함수는 정확히 지연 시간 이후에 실행되는 것이 아니라, 최소 지연시간을 대기한 후 실행되는 특성을 가지고 있다. 그렇다면 자바스크립트는 왜 정확한 지연 기능을 제공하지 않을까? const start = Date.now(); conso.. [React] 개발 환경 프록시 설정 개발 환경에서 프록시를 설정하지 않는 경우 CORS 에러가 발생할 수 있다. 실제 배포 환경에서는 nginx 등 웹 서버에 빌드 된 파일들을 올리기 때문에 이런 문제를 고민할 필요가 없으나, 개발 환경은 그렇지 않다. 다행히도 CRA 또는 Vite을 이용하는 경우 개발 환경에서 프록시를 설정할 수 있도록 기능을 지원하고 있다. CRA(Create-React-App)를 사용하는 경우 https://create-react-app.dev/docs/proxying-api-requests-in-development 두가지 방법이 존재하나, 후자가 좀 더 정밀한 사용이 가능하다. package.json 파일 내에 "proxy" 정의 http-proxy-middleware 을 설치한 후, src 폴더 내에 setup.. [React] 타입스크립트와 children 사용 리액트18 이전까지는 React.FunctionComponent 인터페이스가 children 프로퍼티를 가지고 있었다. 반면 React.FC 인터페이스에는 해당 프로퍼티가 없기 때문에 React.FunctionComponent 인터페이스를 사용했다. 그런데 리액트18 이후부터 React.FunctionComponent에서도 children 프로퍼티가 제거되었기 때문에 이를 사용하고 싶다면 타입이나 인터페이스 안에 children 프로퍼티를 만들어 따로 정의해야 한다. type props = { children: React.ReactNode; } https://blog.logrocket.com/using-react-children-prop-typescript/ 17 버전에서는 잘만 되던 동작이 갑자기 안되.. [오늘의 삽질] web-tree-sitter 과 emscripten https://tree-sitter.github.io/tree-sitter/ Tree-sitter｜Introduction Introduction Tree-sitter is a parser generator tool and an incremental parsing library. It can build a concrete syntax tree for a source file and efficiently update the syntax tree as the source file is edited. Tree-sitter aims to be: General enough to par tree-sitter.github.io tree-sitter은 C언어 기반의 파서 생성기? 로 의존성을 최소화하여 다양한 환경에서 .. [nodejs] __filename & __dirname / join & resolve 때로는 파일 혹은 폴더의 절대 경로가 필요할 때가 있다. nodejs에서는 __filename 및 __dirname을 통해 현재 작업중인 폴더 및 파일의 절대 경로를 알 수 있도록 지원하고 있다. console.log(`dirname : ${__dirname}`) console.log(`filename : ${__filename}`) 앞서 언급한 것처럼 __dirname 및 __filename 은 해당 파일의 현재 위치와 관련된 정보를 반환하므로, 다른 파일에서 특정 파일의 절대 경로를 이용할 수도 있다. # index.cjs const folderDir = require('./fol2/myfile.cjs'); console.log(folderDir.basedir); # fol2/myfile.cjs co.. 서버가 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.. node redis : 노드 환경에서 사용하는 redis 데이터베이스 인터넷 강의를 들으면서 공부하다 보니 redis 데이터베이스를 사용하는 상황이 생겼다. 해당 강의에서는 레디스를 노드 환경과 연결하기 위해서 npm의 redis 패키지를 이용했고, 이 글에서도 해당 패키지에 대해 간단하게 정리할 것이다. 주소는 다음과 같다. https://www.npmjs.com/package/redis 공식문서가 약간 이미 v3 이하를 사용했음을 전제하고 설명하지 않는 부분이 좀 있는 것 같다. v3 문서는 여기. https://www.npmjs.com/package/redis/v/3.1.2 이 글을 쓰는 시점에 해당 패키지의 최신 버전 은 v4이다. 클라이언트 생성 시 설정하는 부분이나 async 코드의 사용 가능 여부, pub/sub 구조에서의 이벤트의 비중 등 몇몇 부분에서 자질.. 이전 1 2 3 4 5 6 7 ··· 9 다음
