Psychogrammer

🌚 Back 검색 결과

해당 글 33건

자바스크립트 런타임과 엔진의 차이점: 이벤트 루프는 어디에?

자바스크립트 엔진? 런타임? 이 두 용어의 차이에 대해 햇갈리시는 분이 계실겁니다. 이 글에서는 자바스크립트의 엔진과 런타임을 비교해보고 이벤트 루프의 역할, 추상적 구조를 살펴보겠습니다.   1. 엔진역할ECMAScript(ECMA-262 표준)코드를 파싱하고 실행한다.메모리 관리, 가비지 컬렉션을 수행한다.구성요소파서: 소스 코드를 AST(Abstract Syntax Tree)로 변환.컴파일러: AST를 최적화된 바이트코드 또는 네이티브 코드로 컴파일.가상 머신 (VM): 컴파일된 코드를 실행. JIT(Just-In-Time) 컴파일링을 통해 성능 최적화.주요 엔진V8: Google Chrome, Node.js에 사용SpiderMonkey: Mozilla Firefox에 사용JavaScriptCore..

🌚 Back/🧩 Node.js 2024. 10. 24. 20:41

Node.js 비동기 처리 모델 이해하기 - 실시간 대규모 처리에 적합한 이유

Node.js는 싱글 스레드에서 동작하지만, 놀랍게도 동시성과 효율적이고 빠른 응답 시간을 유지할 수 있는 비동기 처리 모델을 제공합니다. 오케스트라의 지휘자처럼 Node.js는 메인 스레드에서 비동기 작업을 관리하고, 백그라운드에서 실행되는 I/O 작업(네트워크 요청, 파일 시스템 작업)들이 완료되면 그 결과를 처리하는 방식으로 작동하죠. 이 글에서는 Node.js의 비동기 처리 모델과 이를 가능하게 하는 libuv 라이브러리의 역할을 설명하고, 대규모 데이터를 처리할 때 스레드 풀과 외부 API 호출이 어떻게 동작하고 성능을 최적화하는지 알아보겠습니다.   1. Node.js의 이벤트 루프와 비동기 논블로킹 I/O 모델Node.js는 단일 스레드 기반의 자바스크립트 런타임이지만, 모든 작업을 직접 처..

🌚 Back/🧩 Node.js 2024. 10. 2. 15:16

[Node js의 특징] 싱글스레드의 NodeJS가 서버사이드에서 쓰일 수 있는 이유

0. 왜 싱글 스레드야? 스레드는 프로세스 내에서 실행되는 실행 단위를 말한다. 그럼 스레드가 많으면 좋은 게 아닐까? 브라우저도 그렇고, Node도 그렇고, 왜 싱글 스레드를 사용할까? 이유는 바로 쉬.워.서.다. 만약 자바스크립트가 멀티 쓰레드로 실행되는 언어였다면 웹페이지에서 발생하는 동시성 문제에 대해 해결해야 했다. 실제로 멀티 쓰레드로 구현된 서비스에서는 이 동시성 문제에 대해 정말 많은 신경을 쓴다. 하지만 자바스크립트는 단일 쓰레드로 실행되므로 인해 교착 상태와 같은 다중 쓰레드 환경에서 발생할 수 있는 복잡한 시나리오를 신경 쓸 필요가 없으며 비동기 처리를 통해 쉽게 여러 요청을 처리할 수 있다. 실제로 구글의 Chrome 브라우저 마저도 기존 웹 페이지에서 엄청난 동시성 문제를 일으킬 ..

🌚 Back/🧩 Node.js 2022. 2. 21. 15:48

[npm] Node의 패키지 관리 도구, 자주 쓰는 명령어 모음

npm 이란? NPM은 Node.js를 위한 패키지 매니저와 설치 관리자로, 수많은 오픈소스 라이브러리와 도구들이 업로드되는 저장소입니다. NPM CLI를 사용하여 필요한 라이브러리나 도구를 쉽게 설치할 수 있으며, 프로젝트 관리를 위한 다양한 명령어를 제공합니다. Node.js를 설치하면 자동으로 NPM도 설치되며, 이는 패키지를 서로 공유하기 위함입니다. NPM은 세계에서 가장 큰 소프트웨어 라이브러리이며, 800,000개 이상의 코드 패키지를 보유하고 있습니다. 오픈소스 개발자들은 NPM을 사용하여 소프트웨어를 공유하며, 많은 기업들도 NPM을 이용하여 개인적인 개발을 관리합니다. NPM은 무료로 사용할 수 있습니다. npm을 이용해 패키지 설치하기 1. package.json 프로젝트의 정보와 ..

🌚 Back/🧩 Node.js 2021. 8. 21. 11:08

Firebase Cloud Function Deploy

파이어베이스 Cloud Function 사용법 1. funcions 폴더 생성(코딩 컨벤션) 2. Local 환경 내 firebase cli 설치 $ npm install -g firebase-tools $ firebase login --no-localhost $ firebase init //구성 파일을 모두 구비했으면 생략 가능 $ firebase deploy firebase deploy 오류 발생 구글 클라우드 플랫폼 함수 세부정보 로그에서 다음과 같은 오류가 계속 발생하고 있는 것을 발견했다. internal/modules/cjs/loader.js:1085:14) 세 가지 가설이 있다. 첫째. npm 꼬여서 문제가 발생했다? 1) npm 캐시삭제와 npm과 관련된 파일과 폴더를 모두 삭제하고 다시 ..

🌚 Back/✨ Firebase 2021. 8. 20. 14:33

[Firbase] 입문, 사용하는 이유

언제써? 1. 아이디어를 빠르게 테스트해야할 때 2. 서버, DB에 시간과 돈을 낭비하고 싶지 않을 때 백앤드 기능 포괄 기능 제공한다. = AWS amplify Firebase는 모든 플렛폼을 프로젝트 구축 시 자동적으로 만들어 준다. 또한 서버를 구축하기 위해서 리눅스 명령어를 알 필요도 없으며 도메인을 구입할 필요도 없고 개발하는 동안에는 서버를 구입할 필요 없다. 이를 통해 프론트엔드 개발자와 백엔드 개발의 경계가 모호해 질 것이며 적은 비용으로 매우 좋은 앱을 만들 수 있다. FireBase의 대표적인 기능 인증, 데이터베이스, 스토리지, 원격 구성, 푸시 알람이 있다 FireBase의 장점 1) 인증 시스템을 지원합니다. 인증은 Firebase 에서 로그인을 담당하는 부분입니다. 로그인을 담당..

🌚 Back/✨ Firebase 2021. 7. 23. 16:21

SPA(single page app)에서 webpack을 사용하는 이유

2000년대 초반의 웹페이지는 각 페이지마다 새로운 html을 요청해서 화면을 다시 그리는 방식이었다. 자바스크립트는 DOM을 조작하는 간단한 역할만 했었기 때문에 html의 script태그에 넣는 것으로도 충분했다. ajax가 유행했을 때는 자바스크립트의 비중이 조금 더 커졌지만 그래 봐야 페이지당 자바스크립트 파일 몇 개면 충분했다. SPA(single page app)는 하나의 html에 수십, 수백 개의 자바스크립트 파일을 포함하기 때문에 더 이상 기존 방식이 통할리 없었다. ... 위의 방식으로는 계속 늘어나는 자바스크립트 파일을 관리하기 힘들다. 또한 선언되는 순서도 신경 써야 하고, 기존에 생성된 전역 변수를 덮어쓰는 위험도 존재한다. 모듈 시스템이 필요하다. 자바스크립트는 태생이 브라우저에..

🌚 Back/🧩 Node.js 2021. 5. 20. 13:59

body-parser: HTTPpost put 요청시 request body 에 들어오는 데이터값을 읽을 수 있는 구문

Parser는 무엇을 의미하는가? 가지고 있는 데이터를 내가 원하는 형태의 데이터로 ‘가공'하는 과정을 parsing 이라 하며 그 과정을 수행하는 모듈 혹은 메소드를 parser 라 일컫는다. 내가 모르는 언어를 내가 원하는 언어의 구조로 바꿔주는 일종의 구문 해석기라고 말할 수도 있다. parser는 구문 해석을 할 뿐 번역을 하진 않는다. 번역의 역할은 compiler에서 담당한다. 내가 원하는 형식에 맞춰 해석하는 용도이므로 bodyParser 뿐만 아니라 cookieParser, JSON.parse, JSON.stringify ..등 파서의 종류는 셀 수 없이 많다. 그렇다면 bodyParser는 무엇을 파싱하는가? Contains key-value pairs of data submitted i..

🌚 Back/🧩 Node.js 2021. 5. 20. 13:13

MongoDB Atlas 등록&사용 (무료 mongoDB Cloud 서비스)

0. 회원가입 https://www.mongodb.com/cloud/atlas Managed MongoDB Hosting | Database-as-a-Service Host MongoDB in the cloud with MongoDB Atlas, the official database-as-a-service, on AWS, Azure and GCP. Try free! www.mongodb.com 1. 프로젝트명 입력 2. 공유 유저 설정 : 프로젝트 생성 이후에도 수정 할 수 있다. 3. Cluster 생성 사용될 데이터베이스를 Cluster라고 부른다. 4. User 정보 설정하기 다시 Clusters 대시보드로 넘어가서 Connect를 클릭하자. UserID를 설정하면된다. UserId와 비밀번호는 ..

🌚 Back/🍃 MongoDB 2021. 5. 18. 17:55

[바벨&웹팩] IE, Safari에서 Javascript가 작동하지 않았던 이유

최종 배포까지 완료했는데, IE와 Safari에서 javascript가 작동하지 않아 시작하기 버튼이 눌리지 않았다. 문제 원인 1. 웹팩에서 바벨 설정값으로 번들링할 때 target값을 구버전까지 명시하지 않았던 점 2. 정규표현식을 바벨이 es5코드로 변환하지 못했던 점 1번 해결책 세 가지 파일에서 수정이 필요하다. 1) .babelrc { "presets": [ [ "@babel/preset-env", { "targets": "> 0.25%, not dead", "useBuiltIns": "entry", "corejs": 3, "debug": true } ] ], "plugins": [["@babel/plugin-transform-runtime", { "corejs": 3 }]] } targets..

🌚 Back/🧩 Node.js 2021. 5. 18. 17:20

504 Gateway Timeout 오류 발생(Nginx)

504 Gateway Timeout(504 게이트웨이 시간 초과 오류) 웹 서버에서 페이지 로드시 정보를 요청한 다른 서버로부터 시기 적절한 응답을받지 못한 것을 의미한다. 가장 일반적인 두 가지 이유는 서버에 요청이 너무 많거나 유지 관리가 수행되고 있기 때문이다. 인터넷 서핑 중에 504 게이트웨이 시간 초과 오류가 한 번 이상 발생했을 가능성이 90 %입니다. 나같은 경우는 페이지를 리다이렉트 해줄 때, 스펠링 실수로 엉뚱한 곳으로 리다이렉트 해줘 발생했다. 엉뚱한 곳으로 리다이렉트 해주는데, 오류가 났을 때 error를 출력하는 것 이외에 어떠한 코드도 작성하지 않아, 계속 응답을 기다리는 상태가 되었고, 그러는 동안 timeout상태가 길어져 504오류를 발생시켰다. 일반적인 504에러는 ngi..

🌚 Back/🧩 Node.js 2021. 5. 18. 16:27

Helmet: contentSecurityPolicy(외부 js스크립트) 오류 해결

오류1. 카카오 SDK 스크립트 파일 import 실패 오류2. 구글 애드센스 스크립트 파일 import 실패 Refused to load the script 'https://developers.kakao.com/sdk/js/kakao.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback. result:1 Refused to run the JavaScript URL because it violates the following Cont..

🌚 Back/🧩 Node.js 2021. 4. 30. 11:05

PM2: 배포 후 백그라운드에서 계속 실행되게 하기

pm2 설치 npm install pm2 -g pm2 -version pm2 kill pm2 monit pm2 start example.js //package.json node build/init.js 대신 pm2 start build/init.js 1) Nodejs에 사용성을 200% 높여주는 천금같은 패키지 매니저로 npm이 있다면, Nodejs를 Express와 같은 프레임 워크를 이용해 Back-End에서 사용하고 있는 개발자들에게 사용성을 20000% 높여준다 할 수 있는 한 줄기 빛인 프로세스 매니저가 바로 PM2이다. 2) PM2 사용 이유 Nodejs를 서버로서 Back-End에서 사용할 때 (1) 서비스를 제공하고 있는 도중 갑자기 서버가 중지되면 어떡하지? (2) Nodejs는 싱글 스..

🌚 Back/🧩 Node.js 2021. 4. 9. 11:40

Babel, Webpack오류 해결 모음

1. babel이 없습니다. babel-node가 없습니다. babel-cli 설치 2. The 'mode' option has not been set, webpack will fallback to 'production' for this value Set 'mode' option to 'development' or 'production' to enable defaults for each environment 모드가 전달되면서 오류가 난 게 아니라, 웹팩 설정이 코드를 추가를 안했다. package.json에 script: assets 부분에 옵션 코드추가 --config src/webpackconfigjs 3. wepback_env찾을 수 없습니다 cross-env 설치 후 package.json에 넣어..

🌚 Back/🧩 Node.js 2021. 4. 1. 13:57

웹팩 MAP 파일: js파일 작동하게 하기

webpack.config.js파일 module.exports = { ... devtool: "source-map", } MAP파일은 디버깅에 필요한 파일 입니다. JS파일을 배포할때 압축이나 난독화해서 배포하면 파일사이즈가 줄어듭니다. 이는 성능향상에는 도움이 될지는 몰라도 코드가 읽기 어려워져서 디버깅에 애로사항이 발생하죠. map파일을 사용할경우 압축된 js파일일지라도 원본 소스처럼 디버깅 가능하게 됩니다. https://stackoverflowcom/questions/48047150/chrome-extension-compiled-by-webpack-throws-unsafe-eval-error이 옵션을 안쓰고 HTML에서 static\js파일을 불러오면 오류가 난다.

🌚 Back/🧩 Node.js 2021. 3. 23. 11:31

웹팩 이미지 불러오기 실패 이유: 아웃풋 폴더(static)

Q. src\images에 넣으면 html에서 로딩이 안되는데 static에 넣으면 로딩이 된다. 왜지? 똑같은 폴던데? A. 웹팩 빌더를 이용하기 때문에 아웃풋파일에서 나온 것만 불러올 수 있다. static파일을 아웃풋으로 설정했기 때문에 src/images에 있는 파일(이미지파일), 기타 다른 로컬파일을 참조할 수 없는 것이다. 해결방법 1) 이미지 파일을 그냥 아웃풋 디렉토리에 넣는다. 2) webpack.config.js파일에 'file-loader' 추가 웹팩이 이미지 확장자 파일을 발견하면 파일 로더를 실행한다. 로더가 작동하면 아웃풋에 설정한 경로로 이미지가 복사된다. file-loader코드 flamingotiger.github.io/frontend/DevEnv/webpack-image/..

🌚 Back/🧩 Node.js 2021. 3. 22. 16:08

EJS: Node js 뷰엔진 (html랜더링)

1. 쓰는 이유 node.js에서 html을 랜더링하면 오류가난다. ESJ엔진을 통해 랜더링 해준다. 2. EJS(Embedded Javascript) 템플릿 엔진 중 하나이다. 템플릿에 보여주고 싶은 데이터가 있을 때 템플릿 엔진이 이 둘을 합쳐 결과 페이지를 생성해낸다. 즉, 요청에 따라 전체적인 템플릿은 동일하지만 세부적인 값들을 동적으로 바꿀 수 있다. JSP 방식과 비슷하다고 한다. EJS는 Node에서 가장 인기있는 템플릿 엔진이다. 3. 코드 npm install ejs app.set('views', __dirname + '/views'); // 경로설정, views변수는 정해져 있는 듯 app.set('view engine', 'ejs'); // 서버가 HTML 렌더링에 EJS엔진을 사용하..

🌚 Back/🧩 Node.js 2021. 3. 18. 21:06

[npx] npm 명령어랑 뭐가 달라?

npm은 관리 툴, npx는 npm에 있는 실행 툴이다. npm 패키지를 설치하지 않고 사용할 수 있게 해주는 도구로, 프로젝트에 추가하거나 전역 패키지로 추가하지 않고, npx를 이용하여 바로 실행할 수 있다. npx is CLI tool. npx는 패키지 관리 모듈이 아니다. 자바스크립트 패키지 관리 모듈인 npm(Node Package Module)의 5.2.0 버전부터 새로 추가된 CLI 도구다. npm을 좀 더 편하게 사용하기 위해서 npm에서 제공한다. 따라서 npm@5.2.0 이상 버전만 깔려 있다면 npx 명령어를 사용할 수 있다. npx는 npm 레지스트리에 올라가있는 패키지를 쉽게 설치하고 관리할 수 있도록 한다. npm을 좀 더 편하게 사용하기 위해 탄생한 npx는 npm을 통해 설치..

🌚 Back/🧩 Node.js 2021. 3. 15. 14:00

Aws s3

Aws s3 드랍박스같은 저장소 버킷 폴더 같은 것 multer을 이용해서 aws에 접근 programatic acess add user하고 나서 주어진 키를 .env파일에 저장해두는 것이 매우 중요함 npm설치 amazone softared development kit 1) npm install aws-sdk 2) multer-s3 설정 1. 서버에 직접 저장하는 것보다 싸다 2. 서버에 유저의 파일을 저장하지 말아야 하는 이유 1) 바이러스 서버를 망가뜨림 2) 트래픽이 많아짐 많은 서버를 필요로 하게됨 그럼 여러 서버에 복사해야 함 3) 서버하나는 동부, 유럽, 아시아에 있다면 같은 파일을 3군데에 넣고 싶지 않ㅇ므 몽고랩 = 몽고 atlas 몽고데이터베이스에 접속 클러스터

🌚 Back/🧩 Node.js 2021. 3. 9. 15:46

Multer: 파일 저장 미들웨어

mongoDB에 file 원본을 저장하지 않고, file의 location을 저장할 것이다. Multer라는 middleware를 통해 중간에 upload하려는 파일의 정보를 가지고 올 수 있다. Multer을 통해 반환받은 file의 URL을 mongoDB에 저장한다. multer multer는 파일 저장을 위해 사용되는 node.js middleware입니다. multer를 이용해서 파일을 저장하면 파일명이 임의로 바뀌고 문서형태로 변환되게 됩니다. npm install multer upload.pug form(action=`/videos${routes.upload}`, method="post", enctype="multipart/form-data") label(for="file") Video Fil..

🌚 Back/🧩 Node.js 2021. 2. 14. 22:23