전체 글 170

[ Error ] - ReferenceError: __dirname is not defined in ES module scope

설정을 module로 해두고 아래와 같이 작업 중 에러가 발생하였다. import path from 'path'; const directoryPath = path.join(__dirname, "../router/api"); 위의 에러는 es 모듈 환경에서는 __dirname이 존재하지 않기 때문에 발생하는 문제이다. 이를 해결할 수 있는 두가지 방안이 있다. 1. import path from 'path'; import { fileURLToPath } from "url"; const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); const directoryPath = path.join(__di..

ERROR 2022.08.15

[ Node.js ] - lodash 사용하기

lodash lodash는 자바스크립트 내에서 배열, 문자열, 객체, 숫자 등의 작업을 더욱 손쉽게 할 수 있도록 해주는 라이브러리이다. 사용법 > npm i lodash import { createRequire } from 'module'; const require = createRequire(import.meta.url); const _ = require('lodash'); // lodash를 require()를 통해 가져와 사용할 수 있다. 예시 _.assignIn() _.assignIn({}, [리소스])와 같은 형식으로 사용하며, 인자값으로 준 것들을 새로운 객체로 생성하여 할 때 이용된다. import { createRequire } from "module"; const require = cr..

Javascript/Node.js 2022.08.15

유용한 함수 padStart/padEnd/flat

padStart / padEnd string.padStart( [인자1], [인자2] ) 형태로 사용된다. 인자1로 주어진 수만큼의 여백을 앞에서부터 인자2로 채운다. const phoneNumber = "12345678"; console.log(phoneNumber.padStart(11, "010")); //01012345678 string.padEnd( [인자1], [인자2] ) 형태로 사용된다. 인자1로 주어진 수만큼의 여백을 뒤에서부터 인자2로 채운다. const height = "153"; console.log(height.padEnd(5, "cm")); // 153cm flat 2차원 배열을 1차원으로 만들어 준다. const arr = [ [1, 2], [3, 4], [5, 6], ]; co..

Javascript/etc 2022.08.15

es6 문법 알아보기

Default Parameters 함수에 기본값을 줄 수 있다. 함수에 인자값을 주면 해당 인자를 사용하고, 인자값을 넣지 않으면 기본값을 사용하게 된다. const makeLatte = (shot = 1) => { return `milk1 + shot${shot}`; }; const adult = makeLatte(); console.log(adult); // milk1 + shot1 const child = makeLatte(0); console.log(child); // milk1 + shot0 const programmer = makeLatte(2); console.log(programmer); // milk1 + shot2 Conditional Operator (삼항 연산자) 문법은 [ 조건식 ..

Javascript/etc 2022.08.15

구조 분해 할당 (Destructuring assignment)

구조 분해 할당 : Destructuring assignment 배열이나 객체의 속성을 쉽게 해체하여 변수에 담아주는 javascript 표현식이다. 구조 분해 할당은 크게 배열 구조 분해와 객체 구조 분해로 나뉘게 된다. - 배열 구조 분해 배열에 담긴 요소들을 순서대로 해당 변수에 담아준다. const numbers = ["one", "two", "three"]; const [a, b, c] = numbers; console.log(`one: ${a} | two: ${b} | three: ${c}`); // one: one | two: two | three: three 각각의 변수에 배열을 통해 값을 할당하여 줄 수 있다. let a, b; [a, b] = [1, 2]; console.log(`a: ..

Javascript/etc 2022.08.15

[ Node.js ] - winson이용하여 로그 남기기

winston 로그 관리를 위해 사용되는 모듈의 일종이다. 사용법 > npm i winston winston-daily-rotate-file - winston이 실질적인 로그를 남기는 모듈이고, - winston-daily-rotate-file 모듈을 로그를 일자별로 파일로 관리할 수 있도록 해주는 모듈이다. 기본 틀 import winston from "winston"; import wistonDaily from "winston-daily-rotate-file"; const { combine, printf, label, timestamp } = winston.format; const logFormat = printf((level, message, label, timestamp) => { return `..

Javascript/Node.js 2022.08.14

[ Node.js ] - compression으로 데이터 압축하기

Compression 많은 양의 데이터가 네트워크 전송시 네트워크에 부담을 줄 수 있는데, compression은 서버에서 데이터를 압축하여 준다. 이를 통해 서버는 클라이언트로 데이터를 전송할 때, 압축된 데이터를 보냄으로써 네트워크 전송 속도를 높이고, 비용을 줄일 수 있다. 사용법 > npm i --save compression compression을 이용하여 데이터 압축하기 전 import express from "express"; const app = express(); app.get("/", (req, res) => { const payload = "dkssdjssdjfkalsjfklasjklfjlkakssdjfkalsjfklasjklfjlkasjfsjfkalsjfklasjklfjlkakssd..

Javascript/Node.js 2022.08.14

[ ERROR ] - next error (Unhandled Runtime Error)

Unhandled Runtime Error Error: Rendered more hooks than during the previous render. 위와 같은 에러가 나는 이유는 조건에 따라 hook을 요청할 때 발생하는 에러이다. 이를 해결하기 위해서는 hook을 조건 내부가 아닌 최상단위에 작성하여 주면 된다. 예를 들면 아래와 같은 경우 위의 에러가 난다. import {useEffect, useState} from 'react'; const Home = ({auth}) => { if (auth) { const [ count, setCount ] = (0); useEffect(()=>{ console.log('welcome to home') },[]) } return ( count : {count..

ERROR 2022.08.03

[ JAVA ] - 기본 개념

JAVA 자바는 객체 지향 프로그래밍 언어로 자바 가상 머신 (JVM: Java Virtual Machine)을 통해 실행 가능하다. * 자바 애플릿 (Java Applet) : 웹에서도 자바를 실행가능하게 해주는 도구로, 현재는 보안상의 이유로 사용이 권장되지 않는다. 자바 특징 자바는 JAM을 통해 실행되어 운영체제와 상관없이 독립적으로 실행되며 같은 결과를 출력한다. 가비지 컬렉터를 통해 자동 메모리 관리를 지원하여 준다. 자바는 상속성, 캡슐화, 다형성의 특징을 가지고 있는 객체 지향언어이다. 자바는 멀티스레드를 지원한다. * 이클립스 : 통합 개발 환경(IDE: integrated development environment)을 제공하는 대표적인 자바 개발도구이다. * JSP ( Java Serv..

JAVA 2022.07.27

vercel로 프론트 배포하기

vercel? https://cocobi.tistory.com/105 [Next.js] Vercel로 프론트 배포하기 ❔ Vercel 이란 Vercel 은 Next.js 에서 제공하는 배포플랫폼으로 [빌드 + 배포 + 호스팅] 서비스를 제공한다. Next.js 공식문서에서는 Vercel를 통한 Front Project 배포를 권장하고 있으며, github의 레파지토.. cocobi.tistory.com Vercel 은 Next.js 에서 제공하는 배포플랫폼으로 [빌드 + 배포 + 호스팅] 서비스를 제공해준다. 1. github repository 생성 2. 프로젝트 생성 > npx create-react-app my-app --template typescrip 위의 명령어로 설치안되는 경우 먼저 yarn..

Javascript/etc 2022.07.27