아무거나

기본구성 또는 커스텀 라이브러리 구성중 선택하여 사용하면 된다. log4js-node 로그 라이브러리 적용 기본구성 설치 // https://github.com/log4js-node/log4js-node $ npm install log4js 샘플 const log4js = require("log4js"); const logger = log4js.getLogger(); log4js.configure({ appenders: { test: { type: "file", filename: "test.log" } }, categories: { default: { appenders: ["test"], level: "info" } }, }); app.get(`/test`, async (req, res) => { try..

React + Typescript 에서 FC 를 사용하면 안되는 이유 먼저 React17 이하에서는 아래와 같이 React.FC 사용이 가능하며 React18 이상부터는 없어졌다고 한다. 참고 그러나 FC 를 사용하는건 좋은 방법이 아니며 CRA 에서는 여러가지의 이유로 FC 를 없애야 한다고 이슈가 올라왔었고 반영되었으며 이유는 아래 설명을 참고하자. children 을 암시적으로 가지고 있다. FC 를 이용한 컴포넌트 props 는 type 이 ReactNode 인 Children 을 암묵적으로 가지게 되며 이는 꼭 타입스크립트에 한정하지 않더라도 안티패턴이라고 한다. 왜냐하면 children 이라는 암묵적이었던 키워드는 자식노드가 필요한지 아닌지의 의도를 명확하게 드러낼 수 없다는, 타입의 관점에서..

S3 에 File Upload 기능 구현 라이브러리 설치 $ npm install multer $ npm install aws-sdk File Upload Util const fs = require("fs") const path = require("path") const multer = require("multer") /** * Save For File Upload (Use Multer Module) */ export const saveForFileUpload = multer({ storage: multer.diskStorage({ destination(req, file, done) { const dirPath = path.resolve("./") + "\\uploads" if (!fs.existsSyn..

node-schedule 을 활용한 스케쥴러 구현 module 설치 // https://www.npmjs.com/package/node-schedule $ npm i node-schedule 코드 [index.js or app.js] const schedule = require('node-schedule'); const express = require('express'); const app = express(); app.get('/', function (req, res) { res.send('Hello World'); }) app.listen(3000, function(){ console.log('Express start on port 3000!'); schedule.scheduleJob('* * * *..

Nodejs Express Document 기능 S3 에 File Upload 기능 구현 라이브러리 설치 $ npm install multer $ npm install aws-sdk File Upload Util const fs = require("fs") const path = require("path") const multer = require("multer") /** * Save For File Upload (Use Multer Module) */ export const saveForFileUpload = multer({ storage: multer.diskStorage({ destination(req, file, done) { const dirPath = path.resolve("./") + "\..

npx prisma generate 명령실행 후 애플리케이션 구동시에 DB/컬럼 관련 오류가 발생하는 경우 prisma 에서 마이그레이션은 schema.prisma 파일에 정의해놓은 스키마에 변화가 있을 경우 사용하고 있는 DB 에도 업데이트를 해주기 위해 사용하는 연산 그러나 여기서 히스토리가 꼬이는경우 즉, 스키마 파일을 수정 하기 전에 마이그레이션을 하지 않고 그냥 버전을 건너 뛰어서 마이그레이션을 할 때 발생함 해결하려면 기존 히스토리를 무시하고 새롭게 마이그레이션을 진행하고 이제 그 마이그레이션 부터 다시 마이그레이션을 적용하는 방법 (마이그레이션으로 인하여 DB도 초기화가 되어 데이터가 날아가므로 반드시 백업을 해야된다!) $ prisma migrate dev --name initial-mig..

Mocking 라이브러리를 활용하자 프론트엔드 개발시에 가장 이상적인 프로세스는 기획, 분석, 백엔드 개발, 프론트 개발들의 작업들이 서로 겹치지 않고 각각 진행되는 것이 좋다. 하지만 진행하는 과정에서 나오는 이슈 또는 요구사항의 변경등으로 인하여 번거롭게 작업을 진행해야되는 경우가 많다. 또한 프론트 엔드 영역과 백엔드 영역에 대한 일정이 서로 겹치게 동시 진행하는 경우도 많으므로 백엔드의 API 의 의존적이게 작업해야하는 프론트엔드의 경우는 백엔드 API 기능들이 개발서버에 배포되기 전까지 프론트엔드에서는 진행하기에 번거롭다. (물론 백엔드쪽에서 굳이 개발서버 배포를 안해도 로컬에서도 바로 확인 할 수 있는 다른 방법들이 있지만 인원이 많을 경우 변동성이 적은 개발서버 기준으로 작업하는것이 안정적이..

해당 글은 https://bkjeon1614.tistory.com/264 에 내용을 더 추가하여 작성하였다. Javascript var, let, const 개념 및 차이점 Key Point var, let: 변수를 선언하는 키워드이다. const: 상수를 선언하는 키워드이다. Example Code // 1. var는 값을 재 할당 가능하다. var name = "test"; name = "test2"; // 2. let은 var처럼 재 할당이 가능하다. let score = "1"; score = "2"; // 3. const는 값 재할당이 불가능하며 선언과 동시에 리터럴 값을 할당해야 한다. const PI = "3.14"; let, const는 ECMA6에 도입된 키워드이며 var 타입으로 인한 ..

computed vs watch computed 이미 정의된 계산식에 따라 결과값을 반환할 때 사용 종속 대상을 따라 저장(캐싱) 됨 (단, Date.now() 같이 아무곳에도 의존하지 않는 computed 속성의 경우 절대로 업데이트가 안됨 즉, 캐싱을 원하지 않을 때 메소드를 사용하면 된다.) [example vuejs code] computed: { now: function () { return Date.now() } } 샘플코드 [example html code] 뒤집힌 메시지: "{{ reversedMessage() }}" [example vuejs code] // 컴포넌트 내부 methods: { reversedMessage: function () { return this.message.spl..

Props? Emit? 그리고 Vuex, Eventbus Vue 에서 컴포넌트간 통신은 props 와 emit 을 통하여 전달한다. 먼저 비교하기전에 props 와 emit 에 대해 모르는 사람들이 있을 수 있으니 간단하게 정리하자면 아래와 같다. props: 상위 컴포넌트의 데이터를 하위 컴포넌트에 전달하는 특성이며 하위 컴포넌트에서 전달받기 위해서는 props 를 명시적으로 선언해야 한다. emit: 최상위 컴포넌트가 하나 이상인 경우, 이벤트를 직접 컴포넌트에 할당하는 것을 의미 앞서 말했듯이 props 와 emit 이 많아지면 관리가 복잡해져 사이드 이펙트가 발생할 확률이 높아지므로 이러한 문제점을 해결하기 위하여 주로 상태 관리 패턴 라이브러리를 활용하며 Vue 에서는 보편적으로 Vuex 나 E..