본문 바로가기
반응형

NodeJS, NPM, Koa16

NodeJS Handlebars 레이아웃 분리하기: Navigation과 Bottom 웹디자인을 적용할 때,모든 페이지마다 네비게이션과 bottom의 카피라이트 영역의 코드를 작성하는 것은,매우 비효율적인 방법입니다.그래서, 이러한 레이아웃 영역을 분리해서 코딩을 하게 되는데요.오늘은 NodeJS의 뷰템플릿엔진인 Handlebars를 사용할 때,Navigation과 Bottom영역등의 레이아웃을 분리하는 방법에 대해서 정리해 보겠습니다. 참고로 Handlebars에 대한 기본적인 사항은 아래 글을 참조해 주세요.>> Handlebars 사용방법의 모든 것: Nodejs 뷰 템플릿 엔진 1. 파일 구성 및 nodejs 설정1-1. 파일 구성직접 코딩 작업을 하기 전에,각각의 레이아웃들을 어떻게 폴더로 나누어서 저장하는지에 대해서 먼저 보겠습니다.handlebars의 파일들은 보통 '/vie.. 2024. 9. 16.
tailwind css 와 handlebars 함께 사용하기 오늘은 NodeJS에서 많이 사용하는 handlebars 뷰템플릿 엔진과,tailwind css를 함께 사용하는 방법에 대해 알아보겠습니다. 1. tailwind와 handlebars의 설치tailwind는 개발환경에서 css작성 후,최종적으로 css로 컴파일 된 파일만,production 레벨에서 사용하게 됩니다. 따라서, Production레벨에서는 tailwindcss모듈을 설치할 필요가 없습니다.그래서 설치할 때, 개발 의존성으로 -dev를 붙여줍니다. npm install tailwindcss --save-dev  handlebars는 설치와 설정이 조금 더 복잡한데요.이에 관해서는 아래 글을 참조해 주세요.>> Handlebars 사용방법의 모든 것: Nodejs 뷰 템플릿 엔진 2. tail.. 2024. 9. 13.
Handlebars 사용방법의 모든 것: Nodejs 뷰 템플릿 엔진 NodeJS와 함께 널리 사용하는 뷰템플릿 엔진인 Handlebars에 대해 정리하겠습니다. 1. Handlebars Handlebars는 JavaScript 템플릿 엔진입니다. 웹 애플리케이션에서 동적으로 HTML을 생성하는 데 사용되는데요. 중괄호'{{ }}'를 사용하여 템플릿 내에 변수, 조건문, 반복문 등을 삽입해 줍니다. HTML형식을 해치지 않으면서도, 서버에서 데이터를 가져와 동적인 HTML을 생성하는 데 유용합니다. 2. Handlebars 설치 아래는 npm을 이용해서, handlebars의 모듈을 설치하는 코드입니다. npm install express-handlebars --save 3. 중괄호 문법 handlebars 를 설정하고 사용하기 전에, 핵심이 되는 중괄호 문법을 보겠습니다.. 2024. 4. 2.
NodeJS Import 방법 정리 # CommonJS ES 오늘은 Nodejs에서 사용되는 import 을 정리해 보도록 하겠습니다. 그중에서도 가장 오랫동안 사용되어온 CommonJS의 모듈화 방식과, 최신의 ES방식에 대해서 정리해 보도록 하겠습니다. 먼저 CommonJS의 방법을 정리해 보도록 하겠습니다. 1. CommonJS 1-1. export 예를 들어, 프로젝트의 폴더에서 /util 폴더에 아래와 같이 코딩하고, hello.js 파일을 만들었다고 가정해 보겠습니다. export 할 변수명이나 함수명을 module.exports = 다음에 넣어주면 됩니다. function hello(name) { return `Hello World, I'm, $name`; } module.exports = hello; 2023. 4. 19.
서버가 되는 맥컴퓨터의 IP Address 보기 # Mac NodeJS등을 이용해서 간단한 테스트서버를 맥컴퓨터에 띄어서 안드로이드나 다른 컴퓨터에서 접속을 시험할 때, 해당 컴퓨터의 접속할 IP주소를 찾을 때 사용하는 명령어를 알아야 합니다. 오늘은 이 때 사용할 명령어에 대해서 정리해 보겠습니다. 1. IP주소 찾기 서버를 Localhost로 띄어 놓고 간단히 테스트를 하는 경우가 많은데요. 이 서버에 접속할 Android 나 다른 컴퓨터에서는 'localhost:3000' 나 '127.0.0.1:3000' 과 같은 주소로는 접속할 수 없어서, 서버가 되는 컴퓨터의 IP주소를 찾아야 합니다. 아래 명령어를 안드로이드 스튜디오의 터미널에서 실행해 주면, 접속할 수 있는 인터넷 주소가 191.x.x.x 과 같이 나오므로, 테스트 서버와 연결해서 안드로이드를 테스.. 2023. 4. 18.
NodeJS 에서 CSV 읽어들이기 # JS 오늘은 NodeJS에서 CSV 파일을 읽어들이는 방법에 대해서 정리해 보도록 하겠습니다. 1. 큰 그림 어떤 방식으로 csv파일을 읽어들일지 정리해보면 다음과 같습니다. csv파일은 row는 "\n" 또는 "\r"로 구분되어 있구요. Column은 ","으로 구분되어 있습니다. 그러므로, NodeJS파일핸들 모듈을 이용해서 파일을 읽어들인다음, 먼저 "\n" 또는 "\r"로 텍스트데이터를 분리해서 list에 넣어주구요. 각 list에 들어간 아이템들을 다시 ","으로 분리해서 Column으로 읽어들이는 것 입니다. 2. fs 모듈 제일 먼저 필요한 것은 fs 모듈인데요. NodeJS에 이미 포함되어 있으므로 따로 설치하거나 할 필요는 없습니다. require로 해당 모듈을 사용할 수 있도록 해 줍니다. .. 2022. 5. 5.
Pug (구 Jade) 설치 및 기본 문법들 정리 # NodeJS NodeJS의 UI템플릿 엔진으로 pug를 사용하고 있는데요. Jade로 알려져 있던 것이, 이름에 대한 권리 때문에 Pug로 바뀐것으로 알고 있습니다. 오늘은 이 pug의 문법을 기초부터 하나씩 정리하기보다는, 자주 사용하는 것들을 위주로정리하고, html변환기의 도움을 받아서 빠르게 문법을 작성하는 방향으로 정리해 보겠습니다. 다만, NodeJS와 Express등에 대한 사용법은 이 글에서 생략되어 있습니다. 1. Pug설치하기 본격적으로 pug에 대해서 알아보기 전에, 간단히 설치하는 방법에 대해서 정리해 보도록 하겠습니다. 먼저 아래 명령어로 pug를 설치해 줍니다. npm install pug --save 프로젝트로 폴더에서 views디렉토리에 index.pug라는 이름의 파일을 생성해 줍니다... 2021. 11. 25.
Cheerio 와 Bent 이용한 HTML 파싱과 Scraping NodeJS에서 HTML을 파싱하여서 Scraping하기 위한 모듈로 Cheerio가 있습니다. 오늘은 이 모듈을 이용해서 HTML을 파싱해서 가져오는 방법에 대해서 정리해 보도록 하겠습니다. 1. Cheerio와 Request 모듈 설치 아래 코드를 터미널에 입력해서 해당 프로젝트내에서 Cheerio모듈이 설치되도록 해 줍니다. npm install cheerio --save 이번에는 bent 모듈을 설치해 보겠습니다. 사실 예전에는 request모듈을 사용하였습니다. 그렇지만, request는 deprecated되었구요. 개발자는 bent를 새로운 프로젝트로 개발하고 있다고 하여서, bent로 작업을 해 보았습니다. 이제 설치한 모듈을 해당 파일내에서 import해 주어야 하는데요. 아래와 같이 해 .. 2021. 10. 15.
Dotenv 로 관리하는 환경변수 # NodeJS 오늘은 NodeJS를 개발하면서 Dotenv로 환경변수를 관리하는 방법에 대해서 정리해 보도록 하겠습니다. 1. Dotenv 와 NodeJS의 환경변수 환경 변수는 Production 모드, Dev 모드 전환, DB 비밀번호, API 액세스 키 등 중요한 정보를 저장하는 데 사용합니다. NodeJS에서는 Dotenv 모듈을 활용하여 이러한 환경 변수를 .env 파일에 저장하고, process.env를 통해 쉽게 불러올 수 있습니다. 이렇게 해서 보안을 강화하고 설정을 간편하게 관리할 수 있습니다. 2. 모듈 설치 모듈을 설치하기 위해서 다음 명령어를 입력해 줍니다. npm install dotenv --save 3. '.env' 파일 생성과 환경변수 저장 제일 먼저 할 일은 프로젝트의 루트에 '.env'.. 2021. 5. 1.
Koa JS FrameWork을 이용한 RestAPI 만들기 # NodeJS 오늘은 Koa JS 프레임웍을 이용해서, UI없이 Get과 Post를 구현한 RestAPI서버를 만드는 방법에 대해서 알아보도록 하겠습니다. 먼저, Koa에 대해서 알아보도록 하겠습니다. 1. Koa Koa는 Express를 만들던 팀에서 개발한 새로운 웹프레임워크입니다. 좀더 경량의, 빠른 웹앱과 API를 지향한다고 하는군요. 공식페이지의 소개에도 나와있지만, Koa는 async function을 이용해서, 콜백헬에서 벗어나고, error핸들링을 원활하게 해준다고 합니다. Babel없이도 이용할 수 있는 async function과 await, 그리고 ES6를 바로 사용할 수 있는 프레임워크라는 점에서 매력적이라고 할 수 있을 것 같습니다. 위에서 언급한 것처럼, Expresss를 만들던 팀에서 만들었.. 2021. 5. 1.
WebStorm NodeJS Coding Assistance 활성화 방법 WebStorm을 이용해 프로젝트를 생성할 경우, NodeJS프로젝트로 생성할 때도 있지만, 그냥 Empty 프로젝트에 app.js만 생성해서 시작하는 경우도 있는데요. 이 때, NodeJS Coding Assistance 를 활성화하지 못하고 사용하는 경우는 어떻게 해야할까요? 오늘은 Coding Assistance를 활성화하는 방법에 대해서 정리해 보겠습니다. 1. Alt + Enter JetBrain 프로덕트들에서 가장 유용하게 쓰이는 단축키가 "alt+enter" 인데요. 이를 이용해서 CodingAssistance를 활성화 시킬 수 있습니다. 아래와 같이 모듈을 require해 주면되는데요. 꼭 path가 아니여도 되지만, 개인적으로 path를 많이 사용합니다. 자주 require하는 모듈중 하.. 2021. 4. 29.
NodeJS Get 과 Post 의 Parameter 와 QueryString 전달 방법 오늘은 NodeJS의 Get 과 Post의 Parameter를 전달하는 방법에 대해서 정리해 보도록 하겠습니다. 테스트시에는 Chrome Extention에 있는 postman을 사용하구요. NodeJS와 express가 설치되어 있다고 가정하겠습니다. NodeJS만 설치되어 있으신 분들은 아래 명령어로 express를 설치해 주세요. npm install express --save 1. Post Parameter받아오기 postParameter를 받아오기 위해서, body-parser를 사용합니다. >> https://github.com/expressjs/body-parser 아래 명령어를 터미널에 입력해서 body-parser를 설치해 줍니다. npm install body-parser --save .. 2021. 4. 28.
Babel 을 Webstorm 과 터미널 에 적용하는 방법 # Compiler ES6 오늘은 Babel에 대해서 알아보구요. 이것을 Webstorm에 적용하는 방법에 대해 정리하려고 합니다. 먼저 Babel이 무엇인지부터 알아보도록 하겠습니다. 1. Babel Babel은 ES6로 작성된 파일을 예전버전의 브라우저나 환경에서 사용이 가능하도록, 컴파일해주는 Compiler입니다. 아래는 공식문서에 나오는 예 인데요. 아래와 같이, Lambda식으로 사용한 함수를 예전버전으로 컴파일 해주는 것 이지요. //Input [1, 2, 3].map((n) => n + 3); //Output [1, 2, 3].map(function(n) { return n + 3; }); 특히나 예전버전 브라우저에 대한 호환성을 만들어주는 코드로 컴파일해준다는 면에서, 저같은 개인개발자에게는 꼭 필요한 것이기도 합.. 2021. 4. 28.
JWT(Json Web Token)와 세션관리에 대해서 알아보자 오늘은 JWT(Json Web Token)와 세션관리에 대해서 정리보겠습니다. 1. JSON Web Token(JWT) JWT는 토큰 정보와, 해당 토큰이 유효함을 증명할 수 있는 signature가 포함되어 있는 토큰인데요. JWT는 Header, Payload, 그리고 Signature로 구성되어 있습니다. 1-1. Header Header에서는 토큰의 유형과 사용된 서명 알고리즘을 지정합니다. 비대칭인 'RS256'과 같은 알고리즘을 쓸 수도 있고, 'HS256'을 쓸 수도 있겠지요. 아래에서는 'HS256'알고리즘을 사용하였습니다. { "alg": "HS256", "typ": "JWT" } 1-2. Payload Payload에는 토큰이 전달하고자 하는 실제 데이터가 담겨 있습니다. 이 부분에는 .. 2020. 5. 18.
A Record와 CNAME Record의 차이를 알아보자 AWS나 Firebase를 다루다가 보면 DNS서버와 관련해서, A record같은 용어를 접하게 되는데요. 오늘은 이 A record와 CNAME에 대해서 정리해 보도록 하겠습니다. 1. A Record A는 Address약자로 주소 기록이라고 할 수 있는데요. Domain 이름에 IP주소를 매핑시켜서 연결시킬 때 사용합니다. 32bit IPv4어드레스를 반환 하구요. 128bit IPv6어드레스타입의 ip주소를 반환하는 경우는 aaaa타입이라고 합니다. 아래와 같이 하나의 도메인에 하나의 IP주소가 연결되어 있습니다. testous.com => 113.232.132.13 2. CNAME Canonical name의 약자인데요. 우리말로 하면 기본형 혹은 원형의 이름이란 뜻이 될 것 같네요. 필요에 의.. 2020. 4. 2.
NPM 의 package.json 을 이용한 효율적 설치 방법 #NodeJS NPM을 이용해서 express 같은 모듈을 설치하게 되는데요. 프로젝트를 생성할 때마다 자주 쓰는 모듈들을 일일이 설치하는 것이 여간 번거로운 일이 아닙니다. 오늘은 NPM의 기본명령어들을 살펴보고, package.json을 이용해서, 자주 쓰는 모듈을 한 번에 설치하는 방법에 대해서 정리해 보겠습니다. package.json 을 이용한 설치방법을 바로 보고 싶은 분들은, 3번 로 바로 이동하시면 됩니다. 1. npm 기본 명령어들 1-1. 버전 체크 먼저 npm --version 을 통해서, npm버전은 확인해 주시어야 합니다. npm --version 현재 버전은 9.6.7 이 나오는군요. 2020. 3. 21.

티스토리툴바