๐Ÿ’ป๊ธฐ์ˆ /NodeJS

    [ NodeJS ] Webpack + SASS ์„ค์ •ํ•˜๊ธฐ

    SASS ๊ธฐ์กด ์›นํŽ˜์ด์ง€์— ์Šคํƒ€์ผ์„ ์ ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” CSS๋กœ ํ•˜๋‚˜ํ•˜๋‚˜ ๋ณ€๊ฒฝํ•ด์ฃผ์–ด์•ผ ํ•˜๋Š” ๋ฒˆ๊ฑฐ๋กœ์›€์ด ์žˆ๋‹ค. ์ด ๊ฐ™์€ CSS์˜ ๊ฐœ๋ฐœ ํŽธ์˜์„ฑ์„ ๋†’์ด๊ธฐ ์œ„ํ•ด ๋“ฑ์žฅํ•œ SASS, ํ”„๋ฆฌํ”„๋กœ์„ธ์„œ ์Šคํฌ๋ฆฝํŠธ ์–ธ์–ด์ด๋‹ค. CSS์˜ ๊ฒฝ์šฐ HTMLํ™˜๊ฒฝ์— style ํƒœ๊ทธ๋งŒ ์ง€์ •ํ•ด์ฃผ๋ฉด ๋ฐ”๋กœ ๋กœ๋“œ๊ฐ€ ๋˜๋Š”๋ฐ ์ด SASS๋ž€ ๋…€์„์€ ๊ทธ๋ ‡์ง€๊ฐ€ ์•Š๋‹ค. ์‚ฌ์šฉํ•˜๊ธฐ ์ „์— CSS๋กœ ์ปดํŒŒ์ผํ•˜๋Š” ๊ณผ์ •์ด ํ•„์ˆ˜๋‹ค. ๊ทธ๋ž˜์„œ ๋ณดํ†ต ์›นํŒฉ๊ณผ ํ•จ๊ป˜ ์‚ฌ์šฉ๋œ๋‹ค. 1. ํ•„์š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์„ค์น˜ npm i webpack webpack-cli sass sass-loader style-loader mini-css-extract-plugin css-loader ์„ค์น˜๋ฅผ ์™„๋ฃŒํ•ด์ฃผ๋ฉด ์›นํŒฉ ์„ค์ •ํŒŒ์ผ์„ ๋งŒ๋“ค์–ด์ค€๋‹ค. 2. webpack.config.js import MiniCssExtract..

    [ NodeJS ] winston ์ฝ˜์†”์—์„œ ์ƒ‰์ƒ ์ง€์ •ํ•˜๊ธฐ

    winston ์„ค์น˜ ๋ฐ ์„ค์ • ์•„๋ž˜ ๋ช…๋ น์–ด๋ฅผ ์ž…๋ ฅํ•ด์„œ ์„ค์น˜ํ•ด์ค๋‹ˆ๋‹ค. npm i winston ์ฝ”๋“œ ์„ค์ • import winston from 'winston'; import dayjs from 'dayjs'; const messageSymbol = Symbol.for('message'); const colorset = { "INFO": "\x1b[34m[ %s ]\x1b[0m", "ERROR": "\x1b[31m[ %s ]\x1b[0m", "WARN": "\x1b[33m[ %s ]\x1b[0m" } export async function init () { winston.configure({ level: 'info', format: winston.format.combine( winston.format(func..

    [ ES6 ] webpack 5 ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋‚œ๋…ํ™”

    โš™๏ธ ๊ธฐ๋ณธ ์„ค์ • ๋‹ค์Œ๊ณผ ๊ฐ™์€ ํ™˜๊ฒฝ์„ ์‚ฌ์šฉํ•ด์„œ ๊ฐœ๋ฐœํ•ฉ๋‹ˆ๋‹ค. Es6 ๋ฌธ๋ฒ• webpack5 nodejs v17.5.0 ๐Ÿš€ ํ”„๋กœ์ ํŠธ ์„ธํŒ… ์›นํŒฉ 5์™€ javascript-obfuscator ๋ชจ๋“ˆ์„ ํ™œ์šฉํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ๋จผ์ € npm ๋ชจ๋“ˆ์„ ์„ค์น˜ํ•ฉ๋‹ˆ๋‹ค. npm install --save-dev webpack-cli javascript-obfuscator webpack-obfuscator package.json ์—์„œ ๋ฒˆ๋“ค๋ง ๊ตฌ๋ฌธ์„ ์„ค์ •ํ•ด์ค๋‹ˆ๋‹ค. { ... "scripts": { "start": "node app.js", "bundle:development": "webpack --mode=development", "bundle:production": "webpack --mode=production" }, ... } ๐Ÿ”Œ Web..

    [ NodeJS ] Express์—์„œ ๋‹ค์ค‘ ๋ผ์šฐํ„ฐ ์‚ฌ์šฉํ•˜๊ธฐ

    I. ๋ผ์šฐํŒ… ์†Œ๊ฐœ ๋ผ์šฐํŒ…์€ URI์˜ ์ •์˜์™€ ํด๋ผ์ด์–ธํŠธ ์š”์ฒญ์— ์‘๋‹ตํ•˜๋Š” ํ‘œํ˜„ ๋ฐฉ์‹์„ ๋งํ•œ๋‹ค. ๋ผ์šฐํŒ…์„ ์ž˜ ์‚ฌ์šฉํ•˜๋ฉด ๊ฒฌ๊ณ ํ•œ ํ”„๋กœ์ ํŠธ์™€ ๊ฐœ๋ฐœ ์ƒ์‚ฐ์„ฑ์ด ํ–ฅ์ƒ๋  ์ˆ˜ ์žˆ๋‹ค. ์ด ๊ธ€์—์„œ๋Š” ๋‹ค์ค‘ ๋ผ์šฐํŒ…์„ ์„ค์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๋ ค ํ•œ๋‹ค. ๊ธฐ๋ณธ ๋””๋ ‰ํ† ๋ฆฌ/ํŒŒ์ผ ํ˜•์‹์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค app.js - api/ - api.js - routes/ - users.js II. ์„ค์ • ๋ฐฉ๋ฒ• ๋ผ์šฐํŒ…์„ ์‚ฌ์šฉํ•ด์„œ ์•„๋ž˜์™€ ๊ฐ™์ด ์š”์ฒญ์„ ๋ณด๋‚ด๊ณ  ์‹ถ๋‹ค๋ฉด ์–ด๋–ป๊ฒŒ ํ•ด์•ผ ํ• ๊นŒ. GET /api/users/1 router.get('/api/users/:user_id', users.load); ์œ„์™€ ๊ฐ™์ด ๋ฌด์‹ํ•˜๊ฒŒ ํ•  ์ˆ˜ ๋„ ์žˆ์ง€๋งŒ ๋ผ์šฐํŒ…์œผ๋กœ ๋ถ„๋ฆฌํ•˜์—ฌ ๊ฐ ํŒŒ์ผ๋ณ„๋กœ ๊ธฐ๋Šฅ์„ ๋‚˜๋ˆŒ ํ•„์š”๊ฐ€ ์žˆ๋‹ค. app.js const express = require('expre..

    [ ์ฝ”๋“œ๋ณด๋ฉฐ ๋ฐฐ์šฐ๋Š” NodeJS ] EJS ์ดˆ๊ธฐ ์ฝ”๋“œ

    ๊ธฐ๋‹ค๋ฆด ์‹œ๊ฐ„๋„ ์—†์Šต๋‹ˆ๋‹ค. #002 "๊ธฐ๋‹ค๋ฆด ์‹œ๊ฐ„๋„ ์—†์Šต๋‹ˆ๋‹ค" ์‹œ๋ฆฌ์ฆˆ์˜ ๋‘ ๋ฒˆ์งธ ๊ฐ•์ขŒ์ž…๋‹ˆ๋‹ค. ์ฒซ๋ฒˆ์งธ ๊ฐ•์ขŒ์™€ ์ด์–ด์ง‘๋‹ˆ๋‹ค. https://devent.tistory.com/36 [ ์ฝ”๋“œ๋ณด๋ฉฐ ๋ฐฐ์šฐ๋Š” NodeJS ] ์ดˆ๊ธฐ ์ฝ”๋“œ ์„ธํŒ… ๊ธฐ๋‹ค๋ฆด ์‹œ๊ฐ„๋„ ์—†์Šต๋‹ˆ๋‹ค. #001 "๊ธฐ๋‹ค๋ฆด ์‹œ๊ฐ„๋„ ์—†์Šต๋‹ˆ๋‹ค" ์‹œ๋ฆฌ์ฆˆ์˜ ์ฒซ ๋ฒˆ์งธ ๊ฐ•์ขŒ์ž…๋‹ˆ๋‹ค. ๋‹ค๋ฅธ ๊ฐ•์ขŒ์™€๋Š” ๋‹ค๋ฅด๊ฒŒ ์ฝ”๋“œ๋งŒ ๋ณด์—ฌ์ฃผ๊ณ  ๋๋‚ฉ๋‹ˆ๋‹ค. ์„ค๋ช…์ด ์—†๋‹ค๊ณ ์š”? ํ•˜ํ•˜, ์ด ๊ฐ•์ขŒ๋Š” ์ด๋ก  ๋”ฐ์œˆ ์”น์–ด๋จน์Šต๋‹ˆ๋‹ค. ์ด๋ก ์€ ๋„๋ฆฌ.. devent.tistory.com views, pub 2๊ฐœ์˜ ๋””๋ ‰ํ† ๋ฆฌ๋ฅผ ์ƒ์„ฑํ•ด ์ค๋‹ˆ๋‹ค. views : ejs ํ…œํ”Œ๋ฆฟ์ด ์˜ฌ๋ผ๊ฐ€๋Š” ๋””๋ ‰ํ† ๋ฆฌ์ž…๋‹ˆ๋‹ค. pub : bootstrap ๊ณผ ๊ฐ™์€ css, js ๋“ฑ๊ณผ ๊ฐ™์ด ๊ณต๊ฐœ๋˜๋Š” ํŒŒ์ผ ์ž…๋‹ˆ๋‹ค. ejs ์„ค์น˜๋Š” npm install ejs ..

    [ ์ฝ”๋“œ๋ณด๋ฉฐ ๋ฐฐ์šฐ๋Š” NodeJS ] ์ดˆ๊ธฐ ์ฝ”๋“œ ์„ธํŒ…

    ๊ธฐ๋‹ค๋ฆด ์‹œ๊ฐ„๋„ ์—†์Šต๋‹ˆ๋‹ค. #001 "๊ธฐ๋‹ค๋ฆด ์‹œ๊ฐ„๋„ ์—†์Šต๋‹ˆ๋‹ค" ์‹œ๋ฆฌ์ฆˆ์˜ ์ฒซ ๋ฒˆ์งธ ๊ฐ•์ขŒ์ž…๋‹ˆ๋‹ค. ๋‹ค๋ฅธ ๊ฐ•์ขŒ์™€๋Š” ๋‹ค๋ฅด๊ฒŒ ์ฝ”๋“œ๋งŒ ๋ณด์—ฌ์ฃผ๊ณ  ๋๋‚ฉ๋‹ˆ๋‹ค. ์„ค๋ช…์ด ์—†๋‹ค๊ณ ์š”? ํ•˜ํ•˜, ์ด ๊ฐ•์ขŒ๋Š” ์ด๋ก  ๋”ฐ์œˆ ์”น์–ด๋จน์Šต๋‹ˆ๋‹ค. ์ด๋ก ์€ ๋„๋ฆฌ๊ณ  ๋„๋ ธ์œผ๋‹ˆ ์ง€๊ธˆ ๋ฐ”๋กœ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค. (๊ตฌ๊ธ€๋ง ์กฐ๊ธˆ๋งŒ ํ•˜์‹œ๋ฉด NodeJS ์„ค์น˜ํ•˜๋Š”๊ฑด ๊ธˆ๋ฐฉ ๋‚˜์˜ต๋‹ˆ๋‹ค) ์ฒ˜์Œ์—๋Š” npm install express ๋ฅผ NodeJS ์ปค๋ฉ˜๋“œ ์ฐฝ์— ์ž…๋ ฅํ•ฉ๋‹ˆ๋‹ค. var express = require('express'); var http = require('http'); var app = express(); var server = http.createServer(app); app.get('/', function(req, res) { res.send("Hello World")..

    NodeJS ๋ฅผ ๊ณต๋ถ€ํ•˜๋ฉด์„œ ๋“  ์ƒ๊ฐ

    ์•ˆ๋…•ํ•˜์„ธ์š” Dipokal HHJ ์ž…๋‹ˆ๋‹ค. ์ตœ๊ทผ ๋ฉฐ์น  ๋™์•ˆ NodeJS ์— ๋น ์ ธ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ์ƒ์šฉ ์„œ๋น„์Šค๋“ค์„ ๊ตฌํ˜„ํ•ด๊ฐ€๋ฉฐ ๋“  ์ƒ๊ฐ์„ ์ •๋ฆฌํ•ด๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ์ €๋Š” ์ค‘ํ•™์ƒ ์ž…๋‹ˆ๋‹ค. PHP ์“ฐ๋‹ค๊ฐ€ NodeJS ๊ฐ€ ์ข‹์•„๋ณด์—ฌ์„œ ์ƒ๊ฐ์„ ์ •๋ฆฌํ•˜๋ ค๊ณ  ์“ด ๊ธ€์ž„์„ ์•Œ๋ ค๋“œ๋ฆฝ๋‹ˆ๋‹ค..! NodeJS ์˜ ์žฅ์  PHP ์“ฐ๋‹ค๊ฐ€ NodeJS ๋ฅผ ์ฒ˜์Œ ์‚ฌ์šฉํ•ด๋ณด๋Š” ์ œ ์ž…์žฅ์—์„œ๋Š” ์ •๋ง ์ƒˆ๋กœ์šด ์„ธ๊ณ„๋ฅผ ๋งŒ๋‚œ ๊ธฐ๋ถ„์ด์˜€์Šต๋‹ˆ๋‹ค. ํŒŒ์ผ ์—…๋กœ๋“œ ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•ด์„œ, ๋กœ๊ทธ์ธ, ๋ณด์•ˆ.. ๊ทธ์•ผ๋ง๋กœ ์‹ ์„ธ๊ณ„์˜€๋‹ค๊ณ  ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ์„๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. PHP ์—์„œ๋Š” .php ํŒŒ์ผ๋‚ด์— html ์ฝ”๋“œ์™€ php ์ฝ”๋“œ๋ฅผ ๋ณ‘ํ•ฉํ•ด์„œ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š”๋ฐ, NodeJS ๋Š” EJS ๊ฐ€ ์žˆ์–ด์„œ ๋””๋ ‰ํ† ๋ฆฌ ๊ด€๋ฆฌ, ํŒŒ์ผ๊ด€๋ฆฌ๊ฐ€ ์œ ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค. ํŒŒ์ผ ์—…๋กœ๋“œ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•œ ๋’ค ๋Š๋‚€์ ์€ ๋ณด์•ˆ ์ž…๋‹ˆ๋‹ค. PHP ์ฒ˜๋Ÿผ ๊ทธ๋ƒฅ ..