Psychogrammer

전체 글 검색 결과

해당 글 143건

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

http -> https 리다이렉트 해결 (node js, helmet 모듈)

CSS, JS, 이미지 리소스 로드에 실패하여 화면이 깨지는 현상 node.js 웹서버를 배포, 기동 후 접속했는데, 위와 같은 현상이 발생할 때가 있다. (자바스크립트를 로드하지 못해서 웹페이지 자체가 작동을 안 하기도 한다) html코드를 검사해봤다. 모든 링크 파일이 https://로 연결되있었다. http://로 바꾸고 접속하니 이미지파일과 main.js파일이 잘 불러와졌다. 브라우저 개발자도구의 network탭을 보면, CSS, JS, 이미지 등을 모두 HTTPS로 요청하면서 리소스를 불러오지 못해 에러가 발생하는 케이스일 가능성이 있다. (ec2에서 모든 링크를 https로 변경해서 오류가 났다고 판단했다. ec2는 그런 권한이 없다.) node.js의 미들웨어에 helmet 모듈을 장착한건 ..

🚛 DevOps/📙 AWS 2021. 4. 8. 12:41

Amazone EC2를 이용한 배포 (인스턴스 생성 ~ 이슈 발생)

1. AWS EC2 인스턴스 생성1. 보안 그룹 추가: 인바운드 규칙에 ssh, http, https 추가2. pem키 생성 3. ssh 등록4. pem키 권한 변경chmod 400 EC2.pem맥 유저ssh -i [pem key 파일 경로] [사용자 이름]@[Public IP 주소 또는 DNS 이름]대부분의 Linux AMI의 경우, 기본 사용자 이름은 다음과 같다. Amazon Linux, CentOS, Red Hat Enterprise Linux (RHEL): ec2-user Ubuntu: ubuntu Debian: admin Fedora: fedorassh -i ~/Downloads/EC2.pem ubuntu@123.45.67.89윈도우 유저Putty-gen을 통해 pem파일을 pky파일로 변경한..

🚛 DevOps/📙 AWS 2021. 4. 1. 16:36

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

웹 스크립트 언어: PHP, JSP, ASP

세가지 언어는 모두 웹 스크립트 언어다. 스크립트 파일(a.asp, a.php, a.jsp)을 만들어 올리고 사용자가 해당 페이지를 엑세스 할때, 웹서버에서 즉시 컴파일하여 HTML로 돌려준다. OS: JSP와 PHP는 윈도우, 리눅스, 유닉스에서 돌아가지만 ASP는 Window에서만 운용이 가능하다. DB에 관한 것은 ASP의 경우에도 윈도우 서버에 한정되므로 대부분의 경우 MSSQL을 사용한다. 성능이 좋지만 비싸다. 일반적으로 PHP는 MySQL, JSP는 ORACLE을 사용합니다. 물론 PHP + MSSQL, JSP + MySQL로 구축된 시스템도 있다 PHP와 ASP는 소/중 규모, JSP는 각종 기술을 활용할 대규모 시스템에 알맞다. ASP는 비용이 가장 많이 들어가지만 Window와 IIS,..

🌕 Front/📑 Web Theory 2021. 3. 15. 13:40

JavaScript의 역사

출처: www.youtube.com/watch?v=wcsVjmHrUQg&t=629s 모자이크 웹 브라우저 등장 Netscape: UI 요소를 추가한 정적인 페이지 등장 시장 점유율 80%를 자랑했다. Script언어 추가를 추가한 동적인 페이지 등장 Java는 무겁고 어려워서 스킴 언어로 선택 Netscape Navigator안에 LiveScript를 이해하는 엔진(LiveScript Inrepreter)을 탐재함. 라이브스브립트 언어가 돔 요소를 조작함. 자바의 인기에 올라타서 이름을 자바스크립트라고 지음 자바스크립트 성공에 위기감을 느낀 MS가 역공학을 통해 IE를 만든다. 그대로 배낀 언어를 JScript라고 이름바꿔 시장에 내놓는다. IE와 넷스케이프 브라우저 IE브라우저 간에 호환문제가 생긴다...

🌕 Front/📑 Web Theory 2021. 3. 10. 16:41

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

블록체인

블록체인 1. only append 2. Decentalized 3. Hash 사용 핵심은 ‘온전하고 안전하게 저장되는’ 정보 블록체인에서도 기록물의 변조나 왜곡을 막기 위해 ‘블록(block)’ 단위로 생성되는 기록을 여러 장소에 나눠(분산) 저장한다. 덕분에 블록체인에선 정보가 온전하게 저장될 수 있다. 그런가 하면 “시간 순으로 기록을 남긴다”는 표현은 뒤집어 말하면 기록(물)이 순서를 지니고 있어 그걸 기록할 수 있단 얘기가 된다. 블록체인에 처음 만들어진 기록이 온전한 형태로, 안전하게 보관될 수 있는 이유다. 특정 기록물을 온전하고 안전하게 다룰 수 있는 기술이 갖는 영향력은 상당하다. 비트코인 사례에서 이미 확인했듯 금전 거래야말로 이 같은 기술 없인 불가능한 개념이다. 반면, 블록체인 기술..

📚 Theory/🛸 NewTech 2021. 3. 9. 11:59

Window 객체

Window 객체 브라우저의 요소들과 자바스크립트 엔진, 모든 변수를 담고 있다. 모든 객체를 포함하고 있는 전역객체(글로벌객체)이다. const really = 'Really?' really; // 'Really?' // 전역변수, 어디에서나 사용가능하다. window.really // undefined let과 const 키워드로 선언한 변수는 블록 스코프이기 때문에 window 객체 내부의 블록에서 선언된 것으로 평가되어 전역 객체의 프로퍼티로 활용할 수 없다. window의 메소드 & 프로퍼티 window.open(); window.close(); open메서드는 호출주체를 사용하지 않으면 전역객체로 받아들이기 때문에 window는 생략할 수 있다. 하지만 다른 함수와 헷갈릴 수 있기 때문에 wi..

🌕 Front/🌱 Vanilla JS 2021. 2. 23. 14:44

[GIT] 다른 아이디 사용시, "remote: Permission to 에러" (윈도우)

상황 1. A라는 github 아이디로 '최초' 글로벌 유저 등록한 상태 2. B라는 아이디로 다시 글로벌 유저등록해서 push를 진행하려 할 때 3. push의 시점은 여전히 A 라는 github 아이디를 찾고있다. 해결 1. B 라는 github 아이디로 push를 진행하고 싶을 때, 다음과 같이 설정을 바꿔준다. 2. 윈도우 > 제어판 > 자격 증명 관리자 > Windows 자격 증명 관리 3. 바꿔줄 깃허브 아이디를 넣고 저장 버튼을 누르기

🚛 DevOps/🟥 GIT 2021. 2. 14. 23:07

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

정규표현식(Regular Expression)

정규표현식을 해석하는 정규표현식 엔진이 언어 별로 다르게 구현되어 있으니 일부 표현이나 문법이 다를 수 있습니다. 본 포스트에서는 JavaScript를 기준으로 작성합니다. 정규표현식(Regular Expression) : 특정한 규칙을 가진 문자열의 집합을 표현하는데 사용하는 형식 언어이다. 정규식이 필요한 예시 각각 다른 포맷으로 저장된 엄청나게 많은 전화번호 데이터를 추출해야 할 때 사용자가 입력한 이메일, 휴대폰 번호, IP 주소 등이 올바른지 검증하고 싶을 때 코드에서 특정 변수의 이름을 치환하고 싶지만, 해당 변수의 이름을 포함하고 있는 함수는 제외하고 싶을 때 특정 조건과 위치에 따라서 문자열에 포함된 공백이나 특수문자를 제거하고 싶을 때 즉, 문자열의 검색과 치환을 위한 용도로 사용한다. ..

🌕 Front/📑 Web Theory 2021. 2. 14. 20:11

ES(ECMAScript) VS JS(JavaScripit) 차이점

세 줄 요약 1. Javascript는 프로그래밍 언어로써 하나의 개별된 대명사로 쓰인다. 2. ECMAScript는 표준화된 JavaScript를 말하며, 언어의 사양(Specification)을 뜻한다. 3. ES6, ECMAScripit6는 ECMA에서 2015년 6월 발행한 표준화한 범용 프로그래밍 언어 버전을 말한다. More About ECMAScript ECMA, (유럽 컴퓨터 제조업체 협회)는 기술 표준을 만드는 조직으로, 정보 통신에 대한 표준을 제정하는 비영리 표준화 기구다. ECMA 스크립트는 ECMA 인터내셔널에서 발행한 표준이다. 여기에는 범용 스크립팅 언어에 대한 사양이 포함되어 있다.ECMA 스크립트 규격을 준수하는 범용 스크립팅 언어다. 기본적으로 스크립팅 언어를 사용하는 방..

🌕 Front/🌱 Vanilla JS 2021. 2. 13. 11:40

쿠키(Cookie), 세션(Session)

출처: https://interconnection.tistory.com/74 HTTP의 특징과 쿠키와 세션을 사용하는 이유 HTTP 프로토콜의 특징이자 약점을 보완하기 위해서 사용한다. HTTP 프로토콜 환경에서 서버는 클라이언트가 누구인지 확인해야합니다. 그 이유는 HTTP 프로토콜이 connectionless, stateless한 특성이 있기 때문입니다. connectionless 클라이언트가 요청을 한 후 응답을 받으면 그 연결을 끊어 버리는 특징 HTTP는 먼저 클라이언트가 request를 서버에 보내면, 서버는 클라이언트에게 요청에 맞는 response를 보내고 접속을 끊는 특성이 있다. 헤더에 keep-alive라는 값을 줘서 커넥션을 재활용하는데 HTTP1.1에서는 이것이 디폴트다. HTTP..

카테고리 없음 2021. 2. 13. 10:50

웹팩(Webpack) 쓰는 이유 / 사용 방법

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

🌚 Back/🧩 Node.js 2021. 2. 13. 10:49

사용자 인증 미들웨어: PassportJS

6.0 passport js 사용자 인증 구현시켜주는 미들웨어 인증이란 브라우저 상에 쿠키를 설정해주면, 그 쿠키를 통해서 사용자 ID등을 알 수 있을 것이고, Passport가 브라우저에서 자동으로 쿠키를 가져와서 인증이 완료된 user object를 controller에 넘겨준다. 쿠키에는 모든 request에 대해 백앤드로 전송될 정보들이 담겨 있다. passport역할 쿠키 생성 브라우저에 저장 유저에게 해당 쿠키를 전달 pssport integration passport.autheriface('strategy')작동 후 req.user가 생기며, 그것은 현재로그인한 사용자가 된다. passport local mongoose npm install passport-local-mongoose 사용자 ..

🌚 Back/🧩 Node.js 2021. 2. 12. 20:17