타닥타닥 민타쿠

AI 가 바라본 윤석열 대통령의 계엄령 선포 목적과 이로 인한 탄핵 가능성

민타쿠 — Wed, 4 Dec 2024 11:20:32 +0900

2024년 12월 3일. 초유의 사태가 발생했다. 윤석열 대통령의 계엄령 선포.
윤석열 대통령은 무슨 목적으로 이를 진행했을까. 이번 일을 벌여서 탄핵 가능성이 높아지진 않았을까.
편파적인 관점을 배제하기 위해 AI 에게 물어보자.

1. 윤석열 대통령의 계엄령 선포 목적

윤석열 대통령의 계엄령 선포 목적

인터넷 뉴스를 통해 사태에 대해 간략한 설명을 해준다. 진짜 목적을 추측해보라 하자.

윤석열 대통령이 계엄령을 선포한 진짜 목적

AI 에 따르면,
윤석열 대통령이 계엄령을 선포한 진짜 목적은 아래 네 가지일 가능성이 높다.

정치적 위기 극복
권력 강화
국민적 위기감 조성
경제적, 사회적 문제 전환

결론적으로, 정치적 생존과 권력 유지를 위한 의도라는 종합적 판단을 내리는 것을 볼 수 있다.
물론 이는 명백히 입증된 것은 아니라는 말도 당연히 덧붙였지만 말이다.

2. 계엄령 선포 사태로 인한 탄핵 가능성

계엄령 선포 사태로 인한 탄핵 가능성

마찬가지로 간략한 설명만 해준다.
계엄령 선포에 대한 절차적 정당성에 대해선 의견이 분분할테니, 정당하지 않을 경우의 탄핵 가능성만 물어보자.

정당하지 않은 계엄령 선포의 법률 위반점과 이에 따른 탄핵 가능성

헌법재판소는 탄핵 사유를 판단할 때, 대통령이 헌법과 법률을 얼마나 준수했는지 확인하는데,
타당한 이유 없이 계엄령을 선포했다면 명백한 권한 남용으로 간주되며 헌법 제77조, 형법 제123조, 내란죄 등의 중대한 법적 문제에 해당 되어 탄핵 사유가 되기 충분하다는 말을 한다.
역시나 그만큼 이번 사태는 굉장히 심각하며 계엄령 선포의 정당성 판단이 가장 중요할 것으로 보인다.

C# 윈폼(Winform) 자식(하위) 노드까지 한번에 체크하기

민타쿠 — Sat, 23 Jul 2022 10:01:28 +0900

트리뷰의 자식 노드까지 전체 체크, 전체 체크해제 기능은 AfterCheck 이벤트를 통해 간단히 만들 수 있는데,
친절하게도 공식 문서의 TreeView.AfterCheck Event 페이지에 자식 노드의 체크 기능까지 같이 나와있다.

코드는 아래와 같다.

// Updates all child tree nodes recursively.
private void CheckAllChildNodes(TreeNode treeNode, bool nodeChecked)
{
   foreach(TreeNode node in treeNode.Nodes)
   {
      node.Checked = nodeChecked;
      if(node.Nodes.Count > 0)
      {
         // If the current node has child nodes, call the CheckAllChildsNodes method recursively.
         this.CheckAllChildNodes(node, nodeChecked);
      }
   }
}

// NOTE   This code can be added to the BeforeCheck event handler instead of the AfterCheck event.
// After a tree node's Checked property is changed, all its child nodes are updated to the same value.
private void node_AfterCheck(object sender, TreeViewEventArgs e)
{
   // The code only executes if the user caused the checked state to change.
   if(e.Action != TreeViewAction.Unknown)
   {
      if(e.Node.Nodes.Count > 0)
      {
         /* Calls the CheckAllChildNodes method, passing in the current 
         Checked value of the TreeNode whose checked state changed. */
         this.CheckAllChildNodes(e.Node, e.Node.Checked);
      }
   }
}

https://docs.microsoft.com/en-us/dotnet/api/system.windows.forms.treeview.aftercheck?redirectedfrom=MSDN&view=windowsdesktop-6.0

TreeView.AfterCheck Event (System.Windows.Forms)

Occurs after the tree node check box is checked.

docs.microsoft.com

C# Winform(윈폼) 트리뷰 체크박스 더블클릭 버그 방지 해결책

민타쿠 — Fri, 22 Jul 2022 10:48:50 +0900

윈폼에서 제공해주는 트리뷰(TreeView) 의 체크박스를 더블클릭해보면 정상적으로 동작하지 않는 모습을 볼 수 있다.

public class NewTreeView : TreeView {
protected override void WndProc(ref Message m) {
 if (m.Msg == 0x203) { m.Result = IntPtr.Zero; }
 else base.WndProc(ref m);
 }
}

이 때, Designer.cs 파일에 위와 같이 트리뷰를 상속받는 NewTreeView 클래스를 만들고

// this.treeView1 = new System.Windows.Forms.TreeView();
this.treeView1 = new SCL_Editor.Dialogs.AddFCDAForm.NewTreeView();

//private System.Windows.Forms.TreeView treeView1;
private NewTreeView treeView1;

이와 같이 기존 TreeView 를 NewTreeView 로 바꿔주면 해결 가능하다.

C# 객체 복사 (Deep Copy) 클래스

민타쿠 — Tue, 19 Jul 2022 01:15:42 +0900

결론부터 말하자면, 아래 클래스 저장 후 ObjectExtensions.Copy(객체) 의 형태로 쓰자.
깊은 복사가 된 객체를 반환 받을 수 있다.
다만 조금 느릴 수 있다.

public static class ObjectExtensions // Deep Copy Class. Use 'ObjectExtensions.Copy(object)'.
    {
        private static readonly MethodInfo CloneMethod = typeof(Object).GetMethod("MemberwiseClone", BindingFlags.NonPublic | BindingFlags.Instance);

        public static bool IsPrimitive(this Type type)
        {
            if (type == typeof(String)) return true;
            return (type.IsValueType & type.IsPrimitive);
        }

        public static Object Copy(this Object originalObject)
        {
            return InternalCopy(originalObject, new Dictionary<Object, Object>(new ReferenceEqualityComparer()));
        }
        private static Object InternalCopy(Object originalObject, IDictionary<Object, Object> visited)
        {
            if (originalObject == null) return null;
            var typeToReflect = originalObject.GetType();
            if (IsPrimitive(typeToReflect)) return originalObject;
            if (visited.ContainsKey(originalObject)) return visited[originalObject];
            if (typeof(Delegate).IsAssignableFrom(typeToReflect)) return null;
            var cloneObject = CloneMethod.Invoke(originalObject, null);
            if (typeToReflect.IsArray)
            {
                var arrayType = typeToReflect.GetElementType();
                if (IsPrimitive(arrayType) == false)
                {
                    Array clonedArray = (Array)cloneObject;
                    clonedArray.ForEach((array, indices) => array.SetValue(InternalCopy(clonedArray.GetValue(indices), visited), indices));
                }

            }
            visited.Add(originalObject, cloneObject);
            CopyFields(originalObject, visited, cloneObject, typeToReflect);
            RecursiveCopyBaseTypePrivateFields(originalObject, visited, cloneObject, typeToReflect);
            return cloneObject;
        }

        private static void RecursiveCopyBaseTypePrivateFields(object originalObject, IDictionary<object, object> visited, object cloneObject, Type typeToReflect)
        {
            if (typeToReflect.BaseType != null)
            {
                RecursiveCopyBaseTypePrivateFields(originalObject, visited, cloneObject, typeToReflect.BaseType);
                CopyFields(originalObject, visited, cloneObject, typeToReflect.BaseType, BindingFlags.Instance | BindingFlags.NonPublic, info => info.IsPrivate);
            }
        }

        private static void CopyFields(object originalObject, IDictionary<object, object> visited, object cloneObject, Type typeToReflect, BindingFlags bindingFlags = BindingFlags.Instance | BindingFlags.NonPublic | BindingFlags.Public | BindingFlags.FlattenHierarchy, Func<FieldInfo, bool> filter = null)
        {
            foreach (FieldInfo fieldInfo in typeToReflect.GetFields(bindingFlags))
            {
                if (filter != null && filter(fieldInfo) == false) continue;
                if (IsPrimitive(fieldInfo.FieldType)) continue;
                var originalFieldValue = fieldInfo.GetValue(originalObject);
                var clonedFieldValue = InternalCopy(originalFieldValue, visited);
                fieldInfo.SetValue(cloneObject, clonedFieldValue);
            }
        }
        public static T Copy<T>(this T original)
        {
            return (T)Copy((Object)original);
        }
    }

    public class ReferenceEqualityComparer : EqualityComparer<Object>
    {
        public override bool Equals(object x, object y)
        {
            return ReferenceEquals(x, y);
        }
        public override int GetHashCode(object obj)
        {
            if (obj == null) return 0;
            return obj.GetHashCode();
        }
    }

    namespace ArrayExtensions
    {
        public static class ArrayExtensions
        {
            public static void ForEach(this Array array, Action<Array, int[]> action)
            {
                if (array.LongLength == 0) return;
                ArrayTraverse walker = new ArrayTraverse(array);
                do action(array, walker.Position);
                while (walker.Step());
            }
        }

        internal class ArrayTraverse
        {
            public int[] Position;
            private int[] maxLengths;

            public ArrayTraverse(Array array)
            {
                maxLengths = new int[array.Rank];
                for (int i = 0; i < array.Rank; ++i)
                {
                    maxLengths[i] = array.GetLength(i) - 1;
                }
                Position = new int[array.Rank];
            }

            public bool Step()
            {
                for (int i = 0; i < Position.Length; ++i)
                {
                    if (Position[i] < maxLengths[i])
                    {
                        Position[i]++;
                        for (int j = 0; j < i; j++)
                        {
                            Position[j] = 0;
                        }
                        return true;
                    }
                }
                return false;
            }
        }
    }

얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)에 대한 짧은 설명

코드를 짜다보면 참조를 공유하지 않고 완전히 똑같지만 새로운 객체가 필요한 경우가 생긴다. 내가 그랬다.

보통

Object something = new Something();
something = originObject;

위와 같은 방식으로 새로운 객체를 만들어 냈다고 생각하는 경우가 있는데,

이는 새로운 객체가 기존의 객체를 바라보는 형태이므로 originObject 가 수정되면 something 도 같이 변한다.
(정확히는 변하는 것이 아닌 같은 주소를 참조하기 때문에 같은 것이라 할 수 있다)

이를 얕은 복사(Shallow Copy)라 부른다.

물론 얕은 복사가 필요한 경우가 있겠지만, 지금은 값은 같지만 새로운 주소를 가지게 하는 깊은 복사(Deep Copy)가 필요했다.

일일이 객체 속을 낱낱히 뒤져가며 해야 하나 싶었지만 다행히 그리고 고맙게도 Stack Overflow 에서 해결책을 찾았다.
https://stackoverflow.com/questions/129389/how-do-you-do-a-deep-copy-of-an-object-in-net

How do you do a deep copy of an object in .NET?

I want a true deep copy. In Java, this was easy, but how do you do it in C#?

stackoverflow.com

Git LFS 무료 사용량 제한, 사용량 확인 방법

민타쿠 — Mon, 18 Jul 2022 01:03:55 +0900

깃허브에는 100MB 단일 파일 업로드 제한이 있다. (50메가가 넘어가면 warning, 100메가가 넘어가면 error)

따라서 단일 파일이 100 메가 바이트가 넘어가는 파일을 업로드 하는 것을 지양하는 것이 좋다.

하지만 어쩔 수 없거나 편의성의 문제로 업로드 해야할 경우, Git LFS 라는 것을 이용해야 한다.

https://mintaku.tistory.com/14

Git LFS 깃허브 대용량(100MB) 파일 올리기

깃허브 저장소에는 용량 제한이 없지만, 파일 하나당 100메가의 제한이 있다. 따라서, 파일이 50메가만 넘어가도 warning 메시지가 뜨고, 100메가가 넘어가는 파일을 push 하려는 경우에 다음과 같은

mintaku.tistory.com

위 링크의 방법을 따라하면 무리 없이 업로드할 수 있다.

다만, 한 가지 의문이 든다.

이 Git LFS 의 무료 허용량은 얼마나 될까?

결론은 현재 2022년 기준 1GB 의 용량과 1GB 의 전송량이 한 개의 무료 계정에 허용되는 양이라 한다.

다만, 전송량은 업로드할 때는 계산되지 않고 다운로드할 때에만 계산된다고 한다.

현재 내 Git LFS 사용량 수치를 보려면, 그 과정은 아래와 같다.

GitHub 홈페이지에 로그인 후 우측 상단 내 계정 아이콘을 누르고
Settings 클릭
좌측 Access 탭에서 Billing and plans 클릭
아래로 스크롤하여 Usage this month 의 Git LFS Data 항목을 확인

Git LFS Data 사용량

윈폼 테이블 변경이 느릴 때(C# Winform TableLayoutPanel Suspend)

민타쿠 — Fri, 10 Sep 2021 14:17:16 +0900

윈폼에서 보여지는 테이블에 행을 추가하는 등의 변경이 일어날 때, 굉장히 느리다.

표가 깜빡이면서 열심히 하나하나 그리는 것처럼 보이는데, 성능이 이렇게 안좋나 싶다.

테이블의 Visible 속성을 false 로 하고 작업 후 True 로 되돌려도 약간의 속도가 빨라진 기분만 들었다.

다행히 이것은 테이블을 중단시키고 변경 후 재개시키면 된다.

table1.SuspendLayout();

// 테이블 행 추가 등의 변경 작업

table1.ResumeLayout();

깜빡이던 것이 없어지고 속도가 훨씬 향상됐다.

20행 추가할 때 10초정도 걸리던 것이 2초정도로 줄었다.

이 정도면 쓸만한데.. 더 빨라졌으면 좋겠다.

Nodejs 파일명, 라인 나오게 로깅하기 (tracer 모듈)

민타쿠 — Tue, 24 Aug 2021 20:29:17 +0900

Nodejs 에서 로깅 모듈로 유명한 winston 모듈은 성능 등의 이슈로 추적(tracing) 기능을 지원하지 않는다고 한다.
일부 유저들이 winston 을 쓰면서 파일명, 라인(몇째 줄인지)까지 나오게 하는 시도들이 있는 것 같지만,
불안정하고 성능이 좋지 못하다는 공식 입장을 보고도 그러한 방법을 써볼 필요는 없는 것 같다.

따라서, tracer 라는 편리한 모듈을 써서 쉽고 간편하게 파일명과 라인 출력을 해보았다.

npm install tracer
프로젝트 경로에서 명령어를 통해 모듈 설치

tracer.js

var fs = require('fs');

var logger = require('tracer').colorConsole({
  transport: function(data) {
    console.log(data.output);
    // logs 폴더에 로그 파일을 생성할 것이므로 폴더를 미리 만들어 놓아야 한다!
    fs.appendFile('logs/'+getTodayFormat()+'.log', data.rawoutput + '\n', err => {
      if (err) throw err
    });
  }
});

function getTodayFormat() {
  let today = new Date();

  let year = today.getFullYear(); // 년도
  let month = today.getMonth() + 1;  // 월
  let date = today.getDate();  // 날짜
  // let day = today.getDay();  // 요일

  let format = year + '-' + (((month+'').length === 1)?'0':'')+month + '-' + (((date+'').length === 1)?'0':'')+date; // ex) 2021-08-24

  return format;
}

module.exports = logger;

app.js

const express = require('express');
const app = express();

const logger = require('./pages/assets/js/tracer'); // tracer.js

// 로컬 변수로 사용
app.use(function(req, res, next) {
  res.locals.logger = logger;
  next();
});

cognito.js (router)

const express = require('express');
const router = express.Router();

router.get('/login', function(req,res){
  res.locals.logger.error('GET /login !?!?!');
  res.render('login');
});

로그 출력 확인
- 콘솔
tracer 모듈로 로깅된 콘솔 로그

- 파일
tracer 모듈로 생성된 로그 파일

tracer 모듈로 로깅된 로그 파일 내용

파일명은 위 format 에서 직접 설정해주었고
날짜, 시간, 로그 레벨, 파일명, 라인, 로깅 내용까지 잘 출력 및 저장되었다.

참고로 로그 레벨은
log, trace, debug, info, warn, error 가 있고, 세부적인 설정방법은 아래 모듈참조페이지 링크를 통해서 알 수 있다.
모듈참조페이지

GitHub - baryon/tracer: A powerful and customizable logging library for node.js

A powerful and customizable logging library for node.js - GitHub - baryon/tracer: A powerful and customizable logging library for node.js

github.com

Ajax 통신시 제한시간 설정 및 로딩 아이콘 표시하기

민타쿠 — Sat, 14 Aug 2021 17:08:06 +0900

ajax 통신시 제한시간 설정 및 로딩 아이콘 표시하기

로딩 아이콘 CSS 설정(샘플 참고 사이트)

/* <style> (css) */
.loading {
	display: inline-block;
	width: 30px;
	height: 30px;
	border: 3px solid rgba(255,255,255,.3);
	border-radius: 50%;
	border-top-color: #fff;
	animation: spin 1s ease-in-out infinite;
	-webkit-animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
	to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
	to { -webkit-transform: rotate(360deg); }
}

- style 태그 혹은 css 파일에 loading 클래스를 정의한다.

Javascript ajax 통신 설정

$.ajax({
	url: '/login',
	type: 'post',
	contentType: 'application/json:chrset=utf-8',
	data: JSON.stringify({data: sendData}),
	success: function(resData) {
		alert('성공!');
	},
	beforeSend: function() {
		$('#btnLogin').html('<div class="loading"></div>');
		$('#btnLogin').attr('disabled',true);
	},
	complete: function() {
		$('#btnLogin').text('Log in');
		$('#btnLogin').attr('disabled',false);
	},
	error: function(request, status, error) { // 오류가 발생했을 때 호출된다.
		if(error === 'timeout'){
			alert('서버 응답 제한시간 초과');
		}else{
			alert('아이디 혹은 비밀번호를 확인해주세요.');
		}
	}
	,timeout: 5000 // 서버 응답 제한시간 5초
});

- beforeSend : 요청에 대한 응답을 받기 전에 실행된다.
- complete : 요청에 대한 응답이 오면 실행된다.
- timeout : 서버 응답 제한시간을 밀리초로 설정하여 제한시간이 초과하면 timeout 오류를 발생시킨다.
- 따라서 beforeSend 에서 loading 클래스를 가진 div 를 보여주고, complete 에서 다시 안보이게 하면 된다.
- 응답 제한시간은 timeout 으로 설정한다.

예제 코드처럼 작성할 경우, 응답을 5초간 기다리며

돌아가는 로딩 아이콘

위와 같이 나오며 클릭이 제한되고, 응답 제한시간이 초과되거나 응답이 도착하면 기존처럼 돌아간다.

기존, 완료된 모습

HTML CSS 글자(폰트)에 테두리, 그림자 넣기

민타쿠 — Fri, 6 Aug 2021 19:41:19 +0900

각종 태그에서 border 속성을 통해 테두리를 넣을 수 있듯이 글자에도 비슷한 속성이 있다.
text-shadow 속성인데, 이를 이용하여 그림자는 물론이고 테두리까지 넣을 수 있다.

글자 테두리 넣는 방법

<span style="text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;">
	테두리 스타일
</span>

- 각각 순서대로 왼쪽, 아래, 오른쪽, 위쪽을 그려준다.
- 'x축 position / y축 position / 색상' 혹은 '가로 위치 / 세로 위치 / 색상' 으로 이해하면 되겠다.
- 추가로, 색상 전에 픽셀 단위를 한번 더 적어서 번짐 정도를 지정할 수 있다. 아래 그림자 넣는 방법에서는 번짐도 이용한다.

글자 그림자 넣는 방법

<span style="text-shadow:1px 1px 1px #000;">
	그림자 스타일
</span>

- 똑같이 'x축 position / y축 position / 색상' 혹은 '가로 위치 / 세로 위치 / 색상' 에서 번짐 정도를 추가한 것이며 오른쪽 아래로 한쪽 방향에만 그린 것이다. 다시 말해, '가로 위치 / 세로 위치 / 번짐 정도 / 색상 순서이다.

결과

배경색과 글자 색상이 비슷하여 가독성에 문제가 생겼다. 흰색 바탕에 노란색의 경우이다.

기존 글자

기존 노란색에서 색을 더 어둡게 하였지만 만족스럽지 않았다.

테두리를 추가한 글자

테두리를 넣으니 확실히 가독성이 좋아졌다.

그림자를 추가한 글자

테두리 만큼은 아니지만 구분은 되는 것 같다.

Nodejs node-schedule 로 간단히 스케줄러 구현하기(기간 반복, 날짜 반복)

민타쿠 — Wed, 4 Aug 2021 19:30:22 +0900

node-schedule 사용법

npm install node-schedule
- 프로젝트 경로에서 cmd 명령어로 node-schedule 모듈을 설치한다.

스케줄러 선언 및 반복 규칙 지정하기

var nodeschedule = require('node-schedule');

// nodeschedule rule 지정. 
// '초 분 시 일 월 요일(0 과 7 은 일요일)'
// ex) '0 0 15 1 * *' <- 매월 1일 오후 3시 정각
const rule = '0 0 9 * * 1'; // 매주 월요일 오전 9시 정각

- 초, 분, 시, 일, 월, 요일을 원하는 대로 표현하여 규칙을 지정할 수 있다.
- * 표시는 매번 반복을 나타내고, 요일은 0을 일요일로 본다.

스케줄러 실행하기
```
nodeschedule.scheduleJob(rule, function(){
	// 수행할 작업
});
```
- 원하는 작업을 구현하면 된다.
- 주기적으로 데이터베이스에 특정 쿼리를 실행하거나, exe 파일을 실행해줄 수도 있고, cmd 명령어로 파이썬 파일을 실행할 수도 있다.

node-schedule 을 통해 매주 리포트 pdf 파일을 생성하고
리포트 수신인에게 pdf 파일을 메일에 첨부하여 전송한 후
해당 pdf 파일을 삭제하는 리포트 서버를 만든 적이 있는데,
이 모듈 덕분에 과정과 결과가 만족스러웠다.

Nodejs nodemailer 로 이메일 보내기(파일 첨부)

민타쿠 — Mon, 2 Aug 2021 19:26:54 +0900

Nodejs nodemailer 모듈로 이메일 보내는 방법

npm install nodemailer (npm install nodemailer fs)
프로젝트 경로에서 cmd 명령어로 nodemailer 모듈을 설치한다.
(pdf 파일 첨부할 경우 fs 모듈도 함께 설치)

모듈 선언 및 transporter 생성

const nodemailer = require('nodemailer');
// const { readFileSync, unlinkSync, stat, readdirSync } = require('fs'); // 파일을 다룰 경우

let transporter = nodemailer.createTransport({
	// 사용하고자 하는 서비스
	// service: 'gmail',
	host: senderSmtp, // 'smtp.gmail.com'
	port: senderPort, // 587
	auth: {
		user: senderEmail, // 'myemail@gmail.com'
		pass: senderPass, // 'password486!'
	}
});

- 파일을 첨부할 경우 fs 모듈까지 추가로 선언한다.
- SMTP 호스트, 포트, 발신자 이메일과 패스워드를 입력한다.

메일 보내기

// await 을 사용하려면 async function 안에 있어야 한다.
await transporter.sendMail({
	// 보내는 곳의 이름과, 메일 주소를 입력
	from: `"`+senderName+`" `+senderEmail, // `"ME" myemail@gmail.com`
	// 받는 곳의 메일 주소를 입력
	to: receivers, // ['one@gmail.com', 'two@gmail.com']
	// 보내는 메일의 제목을 입력
	subject: emailSubject, '제목입니다.'
	// 보내는 메일의 내용을 입력
	// text: 일반 text로 작성된 내용
	// text: 'just test text',
	// html: html로 작성된 내용
	html: emailHtml, // `<p>내용입니다.</p>`
	// 첨부파일 정보 객체를 입력
	attachments: attachList
    // [
    //     {
	// 	       filename: pdfFile1, // 'file1.pdf'
	// 	       content: new Buffer(readFileSync('./pdfPath/' + pdfFile1), 'base64'), // fs 노드 모듈 사용
	// 	       contentType: 'application/pdf'
	//     },
    //     {
	// 	       filename: pdfFile2, // 'file2.pdf'
	// 	       content: new Buffer(readFileSync('./pdfPath/' + pdfFile2), 'base64'), // fs 노드 모듈 사용
	// 	       contentType: 'application/pdf'
	//     }
    // ]
});

- 실제 메일을 전송하는 단계이다.
- 발신자의 이름과 이메일 형식에 주의한다. (`"Name" account@gmail.com`)
- 수신자는 리스트의 형태로 여러명에게 전송 가능하다.
- 내용은 일반 문자로 적는 text 와 html 태그로 작성하는 html 옵션을 골라서 사용할 수 있다.
- 첨부 파일도 여러개를 보낼 수 있지만, 용량 제한이 있다. (gmail smtp 의 경우 한 번에 총 25MB 이하만 첨부 가능)

전체 예시 코드

const nodemailer = require('nodemailer');
const { readFileSync, unlinkSync, stat, readdirSync } = require('fs');

const pdfFolderPath = "./pdfPath/";

const emailSubject = "제목입니다.";
const emailHtml = 
`<b>내용입니다.</b>
<br/>
<b>첨부된 PDF 파일들을 다운로드하세요.</b>`;

// PDF 파일을 메일에 첨부하여 보낸 뒤 삭제.
async function sendPDFMail(senderName,senderEmail,senderPass,senderSmtp,senderPort,receivers,matchedFileList){

	let matchedFileList = ['one.pdf','two.pdf'];
	// 첨부파일 리스트
	let attachList = [];
	for (let j = 0; j < matchedFileList.length; j++) { 
		const matchFile = matchedFileList[j];
		attachList.push({
			filename: matchFile,
			content: new Buffer(readFileSync(pdfFolderPath + matchFile), 'base64'),
			contentType: 'application/pdf'
		});
	}

	// 수신자에게 메일 전송
	let transporter = nodemailer.createTransport({
		// 사용하고자 하는 서비스
		// service: 'gmail',

		host: senderSmtp,
		port: senderPort,
		auth: {
			user: senderEmail,
			pass: senderPass,
		}
	});

	await transporter.sendMail({
		// 보내는 곳의 이름과, 메일 주소를 입력
		from: `"`+senderName+`" `+senderEmail,
		// 받는 곳의 메일 주소를 입력
		to: receivers,
		// 보내는 메일의 제목을 입력
		subject: emailSubject,
		// 보내는 메일의 내용을 입력
		// text: 일반 text로 작성된 내용
		// text: 'just test text',
		// html: html로 작성된 내용
		html: emailHtml,
		// 첨부파일 정보 객체를 입력
		attachments: attachList
	});
			

	// PDF 파일 삭제
	for (let j = 0; j < matchedFileList.length; j++) {
		const matchFile = matchedFileList[j];
		stat(pdfFolderPath + matchFile,(err,stat)=>{
			if(err == null){
				unlinkSync(pdfFolderPath + matchFile);
				console.log('PDF deleted');
			}else if(err.code === 'ENOENT'){
				console.log('---Delete Error! NO PDF FILE---');
			}else {
				console.log('Delete error code : ' + err.code);
			}
		});
	}
}

이해를 돕기 위한 주석과 예시 코드이다.

SMTP 메일 설정에 대해서는 되어 있다고 가정하고 따로 기록하지 않는다.

유닉스(에포크) 시간 변환 사이트(epochconverter.com)

민타쿠 — Sun, 1 Aug 2021 11:18:34 +0900

유닉스 시간 변환 사이트

Epoch Converter

Convert Unix Timestamps (and many other date formats) to regular dates.

www.epochconverter.com

종종 유닉스 시간을 변환하여 날짜가 언제인지 알아보거나, 반대로 특정 날짜와 시간을 유닉스 시간으로 변환해보고 싶을 때 간편하게 이용할 수 있는 웹 사이트이다.

www.epochconverter.com

페이지에 들어가면 바로 현재 시간이 유닉스 시간으로 변환되어 나타나고 바로 그 아래에 유닉스 시간을 변환하는 입력창과 버튼이 있다. 물론 그 아래에는 반대의 경우를 할 수 있는 창과 변환 버튼이 존재한다.

그리고 그 아래엔 순서대로 특정 날짜 기준 년, 월, 일의 시작과 끝의 유닉스 시간을 볼 수 있는 메뉴와
초 단위를 일, 시간, 분 단위로 계산해주는 메뉴가 있다.

그 다음 아래로는 유닉스 시간이란 1970년 1월 1일 자정부터 경과한 초를 의미한다는 등의 간단한 소개 글이 있다.

마지막으로 아래에 각 프로그램 언어 환경별 현재 유닉스 시간 얻는 법, 유닉스 시간으로 변환 방법, 유닉스 시간을 날짜로 변환하는 법에 대해 안내해준다.

간편하게 이용하기에 정말 유용한 사이트인데다가, 유닉스 시간 또는 에포크 또는 유닉스 타임스탬프 등등 부르는 이름도 많은 이것에 대한 개념을 이해하기에도 좋은 웹 사이트라고 생각한다. (번역이라도 활용해 한번쯤 읽어보자)

Nodejs 로그 저장하기(winston 모듈)

민타쿠 — Sat, 31 Jul 2021 00:02:00 +0900

로깅을 위해 Nodejs 에서 가장 많이 사용되는 winston 모듈을 적용 및 테스트하였다.

winston 모듈로 로깅하면 로그 레벨별로 색상을 구분하여 출력할 수 있으며,
레벨별, 날짜별로 저장하고 보관 기간 등 원하는 설정을 할 수가 있다.

winston 모듈 적용 방법

npm install winston winston-daily-rotate-file
프로젝트 경로에서 cmd로 winston 과 winston-daily-rotate-file 모듈 설치 명령어를 입력한다.

winston.js 작성

const winston = require('winston');
const winstonDaily = require('winston-daily-rotate-file');

const logDir = 'logs';  // 로그 파일 저장 경로 설정
const { combine, timestamp, printf } = winston.format;

// Define log format
const logFormat = printf(info => {
  return `${info.timestamp} ${info.level}: ${info.message}`;
});

/*
 * Log Level
 * error: 0, warn: 1, info: 2, http: 3, verbose: 4, debug: 5, silly: 6
 */
const logger = winston.createLogger({
  format: combine(
    timestamp({
      format: 'YYYY-MM-DD HH:mm:ss',
    }),
    logFormat,
  ),
  transports: [
    // info 레벨 로그를 저장할 파일 설정
    new winstonDaily({
      level: 'info',
      datePattern: 'YYYY-MM-DD',
      dirname: logDir,
      filename: `%DATE%.log`,
      maxFiles: 30,  // 30일치 로그 파일 저장
      zippedArchive: true, 
    }),
    // error 레벨 로그를 저장할 파일 설정
    new winstonDaily({
      level: 'error',
      datePattern: 'YYYY-MM-DD',
      dirname: logDir + '/error',  // error.log 파일은 error 폴더를 만들어 저장 
      filename: `%DATE%.error.log`,
      maxFiles: 30,
      zippedArchive: true,
    }),
  ],
});

// Production 환경이 아닌 경우(dev 등) 
if (process.env.NODE_ENV !== 'production') {
  logger.add(new winston.transports.Console({
    format: winston.format.combine(
      winston.format.colorize(),  // 색깔 넣어서 출력
      winston.format.simple(),  // `${info.level}: ${info.message} JSON.stringify({ ...rest })` 포맷으로 출력
    )
  }));
}

module.exports = logger;

로거를 사용할 위치에서 import 하기

const logger = require('./winston.js의 경로/winston');

로깅하기

logger.info('GET /index !');

logger.error('Get index error occurred!');

로그 확인
winston 로그 저장 폴더

텍스트 파일 및 폴더가 잘 생성된다.

MSSQL 서버 초기 설정(5.로그 데이터 용량 자동 축소)

민타쿠 — Fri, 30 Jul 2021 00:03:28 +0900

DB 로그 데이터 용량 자동 축소 설정

SSMS(Microsoft SQL Server Management Studio)에서 DB 서버에 로그인 후 에이전트에서 새 작업을 추가한다.
SSMS 연결 – [SQL Server 에이전트] – [작업] 우클릭 – [새 작업]
작업 이름 입력 후 범주에서 데이터베이스 유지 관리 선택
이름 입력 – 범주 [데이터베이스 유지 관리]
[단계] 탭에서 [새로 만들기]
[단계] 탭 – [새로 만들기]
단계 이름 입력 및 [데이터베이스] 선택 후 명령 창에 아래의 쿼리 입력하고 [확인]
단계 이름 입력 – [데이터베이스] 선택 – 명령 창에 shrink 쿼리 입력 후 [확인]
```
use DB명
alter database DB명 Set recovery simple
go
dbcc shrinkdatabase ('DB명', 10)
go
dbcc shrinkfile ('DB명_log', 1)
go
alter database DB명 set recovery full
go
```
- dbcc shrinkdatabase('DB명', 10) 는 데이터베이스를 축소한 후 데이터베이스에 남겨둘 여유 공간의 비율을 10%로 설정한다는 의미이다.
- dbcc shrinkfile('DB명_log', 1) 은 로그 파일을 1MB 크기로 축소한다는 의미이다.
[일정] 탭에서 [새로 만들기]
[일정] 탭 – [새로 만들기]
일정 이름 입력 후 되풀이 간격 및 수행할 시간을 설정하고 [확인] - [확인]
이름 입력 - 되풀이 [일별] – 매 [1] – 한 번 수행 [오전 9:10:00] – [확인] – [확인]

MSSQL 서버 초기 설정(4.백업 파일 자동 삭제)

민타쿠 — Thu, 29 Jul 2021 19:20:31 +0900

백업 파일 자동 삭제 설정

SSMS(Microsoft SQL Server Management Studio) 에서 서버에 로그인 후 유지 관리 계획 마법사 실행
SSMS 연결 – [관리] – [유지 관리 계획] 우클릭 – [유지 관리 계획 마법사]
[다음]
[다음]
이름 입력 – 일정 [변경]
이름 입력 – 일정 [변경]
되풀이 간격 및 시간 설정 – [확인] – [다음]
되풀이 [일별] – 매 [1] – 한 번 수행 [오전 9:10:00] – [확인] – [다음]
[유지 관리 정리 태스크] 체크 – [다음] – [다음]
[유지 관리 정리 태스크] 체크 – [다음] – [다음]
파일 보존 기간 설정 – [다음] – [다음] – [마침] – 성공 확인 후 [닫기]
백업폴더경로 지정 – 확장명 bak 입력 - 파일 보존 기간 [3] [일] – [다음] – [다음] – [마침] – 성공 확인 후 [닫기]

MSSQL 서버 초기 설정(3.DB 자동 백업)

민타쿠 — Wed, 28 Jul 2021 00:58:08 +0900

자동 백업 설정

SSMS(Microsoft SQL Server Management Studio)에서 DB 서버에 로그인 후
유지 관리 계획 마법사 실행
SSMS 연결 – [관리] – [유지 관리 계획] 우클릭 – [유지 관리 계획 마법사]
[다음] 클릭
[다음]
이름 입력 후 일정 [변경] 클릭
이름 입력 – 일정 [변경]
1일마다, 2주마다 등 되풀이할 단위 간격을 정하고, 시간을 정한다.
되풀이 [일별] – 매 [1] – 한 번 수행 [오전 9:10:00] – [확인] – [다음]
데이터베이스 백업(전체)에 체크 후 [다음] 클릭. [다음] 한번 더 클릭.
[데이터베이스 백업(전체)] 체크 – [다음] – [다음]
대상 데이터베이스를 선택해주고 확인 클릭.
[데이터베이스] – [모든 데이터베이스] – [확인]
[대상] 탭에서 백업파일을 저장할 경로 선택 후 [다음] 클릭.
[대상] 탭 – […] 클릭 및 저장 폴더 선택 - 확장명 bak 입력 – [다음] – [다음] – [마침] – 성공 확인 후 [닫기]
[다음] – [마침] – 성공 확인 후 [닫기]

MSSQL 서버 초기 설정(2.에이전트 자동 실행)

민타쿠 — Wed, 28 Jul 2021 00:38:55 +0900

SQL Server 에이전트 자동 실행 설정

SQL Server Configuration Manager(구성 관리자) 실행
SQL Server 서비스에서 에이전트 시작 및 시작모드 자동 설정
[SQL Server 서비스] – SQL Server 에이전트 우클릭 – [시작] – SQL Server 에이전트 우클릭 – [속성] – 서비스 탭 – 시작 모드 자동
SSMS(Microsoft SQL Server Management Studio) 에서 DB 서버 로그인

[새 쿼리] 클릭 후 입력

sp_configure 'show advanced options', 1;

GO

RECONFIGURE;

GO

sp_configure 'Agent XPs', 1;

GO

RECONFIGURE;

GO

실행

MSSQL 서버 초기 설정(1.서버 메모리 할당 제한)

민타쿠 — Wed, 28 Jul 2021 00:31:01 +0900

DB 서버 메모리 할당 제한 설정

서버 우클릭 - [속성]

SSMS(Microsoft SQL Server Management Studio) 에서 DB 서버에 로그인 후 속성에 들어간다.

[메모리] 탭 - 최대 서버 메모리 입력

메모리 탭에서 MB 단위로 최대 서버 메모리를 입력하여 메모리 제한 설정을 한다.
500~2000MB 정도면 적당하다.

MSSQL SQL Server 구성 관리자를 찾을 수 없는 경우

민타쿠 — Tue, 27 Jul 2021 16:59:06 +0900

SQL Server Configuration Manager(구성 관리자) 를 실행하려는 경우에

시작 메뉴에서 Microsoft SQL Server 20-- 폴더 안에서 찾거나

윈도우키 누르고 sql 까지만 쳐도 검색으로 나와서 쉽게 실행하지만,

나타나지 않을 때 찾아가야 할 경로이다.

C:\Windows\Sys\WOW64

해당 폴더 내에 SQLServerManager--.msc 라는 파일을 찾아 실행하면 된다.

다른 방법으로는,

윈도우 키 + R (실행) 로 실행창을 열고 SQLServerManager--.msc 라는 파일 명을 입력 후 확인을 누르면 실행된다.

SQL Server 버전별 구성 관리자 파일명

버전명은 위를 참고하면 되고 버전을 모른다면,

SSMS(Microsoft SQL Server Management Studio) 에서 DB 서버에 로그인하고 [새 쿼리] 버튼을 누른 후

select @@version

이라고 입력 후 [실행]을 누르면 결과로 볼 수 있다.

Nodejs 파일 선택하면 저장하기(multer 미들웨어)

민타쿠 — Tue, 27 Jul 2021 00:12:32 +0900

파일 선택창

사용자가 input 태그를 통해 이미지 파일 선택을 하면, 해당 이미지 파일을 저장하는 업로드 기능을 구현하는 방법이다.

파일 선택하면 저장하는 법

npm install multer

HTML - form 태그로 감싼 input 태그 만들기(name 중요)

<form id="imgForm" method="POST" enctype="multipart/form-data", action="/uploadImg">
  <input type="file" id="inputImg" name="myImg" accept=".jpg,.png">
</form>

스크립트 - input 태그로 파일 선택을 하면 form 태그 submit 시키기

$('#inputImg').on('change',submit);

function submit() {
  $('#imgForm').submit();
}

app.js - multer 를 이용해 라우팅 처리하기

// app.js

var multer = require('multer');

var imgStorage = multer.diskStorage({
  destination: function(req, file, callback) {
    callback(null, 'public/img'); // 저장할 파일 경로
  },
  filename: function(req, file, callback) {
    fName = file.originalname; // 저장할 파일명 = 원래 파일명
    callback(null, fName);
  }
});

var imgUpload = multer({
  storage: imgStorage,
  fileFilter: function(req, file, callback) {
    var ext = path.extname(file.originalname);
    console.log('ext : '+ ext);
    if (ext !== '.png' && ext !== '.jpg' && ext !== '.JPG' && ext !== '.PNG') {
      console.log('not png, jpg');
      //return callback(null, false);
    } else {
      console.log('correct png, jpg');
      callback(null, true);
    }
  }
});

app.post('/uploadImg', imgUpload.single('myImg'), function(req, res) { 
  res.json({done:1}); // 파일 업로드 후의 작업 작성
});

- 주석으로 적어둔 파일 저장 경로와 파일명 그리고 파일 업로드 후의 작업을 상황에 맞게 작성하면 되겠다.
- single() 함수는 단일 파일을 저장할 때 쓰이며, 파일이 여러개일 경우 array(), fields() 이라는 함수를 쓴다.
- single() 의 파라미터로 input 태그의 name 을 입력해야 한다.

이전에 포스팅한 이미지 파일 미리보기 기능과 연계하여, 미리보기 확인 후 업로드하는 기능을 만들어도 좋을 것 같다.

[개발/Nodejs] - jQuery 이미지 파일 선택시 보여주기

자바스크립트 비동기 실행순서 보장 그냥 간단히 따라하기

민타쿠 — Mon, 26 Jul 2021 00:08:23 +0900

순서를 지켜라

처음에 자바스크립트의 비동기적 특성 때문에 내가 원하는 순서대로 실행되지 않는다는 것을 깨달았을 때,
실행 순서는 보장 받고 싶지만 동기, 비동기, Promise, then, async, await 다 무슨 말인지 모르겠고 무서웠다.
아니면 콜백함수로 다 처리해버리면 된다는데 또 콜백지옥 얘기를 꺼내며 다들 안좋단다.
그래서 그 때의 나에게 해결책을 제시해주듯이 간단히 따라할 수 있도록 정리해보겠다.

Play() 함수 안에서,
showFirst() -> showSecond() -> showThird() 의 순서로 실행되기를 원하는데
showFirst() -> showThird() -> showSecond() 의 순서로 실행되고 있는 상황으로 가정한다.

해결책 1. async await 그냥 따라하기

async 붙이고 await 붙이기
```
// 기존 함수
function Play() {
	showFirst();
    showSecond();
    showThird();
}

// async
async function Play() {
	showFirst();
    await showSecond();
    showThird();
}
```
- Play 함수 선언 전에 async 를 붙이고 문제의 showSecond 함수 사용 전에 await 을 붙인다.
- 이 상태로는 showSecond 가 일반 함수라면 아무런 효과가 없다. showSecond 를 Promise 함수로 바꿔줘야 한다.

Promise 함수로 바꾸기

// 기존 함수
function showSecond() {
  alert("Second!");
}

// Promise
function showSecond() {
  return new Promise(function(resolve,reject){
    alert("Second!");
    resolve(); // resolve("second") 처럼 값을 return 시킬 수 있다.
  });
}

- 기존 함수의 실행 부분을 return new Promise(function(resolve,reject){ }); 이것으로 감싼다.
- 함수를 종료시킬 resolve() 는 필수이며, 이것은 파라미터 값을 return 한다.

끝
- 생각보다 쉽다.

해결책 2. async.waterfall 노드 모듈 사용하기

npm install async
- 프로젝트 경로에서 cmd 명령어로 async 모듈을 설치한다.

waterfall 로 감싸기

// 기존 함수
function Play() {
	showFirst();
    showSecond();
    showThird();
}

// waterfall
function Play() {
  async.waterfall([
      showFirst,
      showSecond,
      showThird,
  ], function (err, result) {
      if(err)
          console.log(err);
      else
          console.log("작업 완료");
  });
}

- async.waterfall([ ], function (err, result) { }); 의 대괄호에 순서대로 함수 이름을 적는다.

끝
- 쉽다.

Git LFS 깃허브 대용량(100MB) 파일 올리기

민타쿠 — Sun, 25 Jul 2021 08:45:21 +0900

깃허브 저장소에는 용량 제한이 없지만, 파일 하나당 100메가의 제한이 있다.
따라서, 파일이 50메가만 넘어가도 warning 메시지가 뜨고,
100메가가 넘어가는 파일을 push 하려는 경우에 다음과 같은 에러 메시지가 나온다.

remote: Resolving deltas: 100% (3/3), completed with 3 local objects.
remote: error: GH001: Large files detected. You may want to try Git Large File Storage - https://git-lfs.github.com.
remote: error: Trace: 51efcb860cd7c76aa349c5f931ebc96bedfc30763349d284be7278a271fb56ae
remote: error: See http://git.io/iEPt8g for more information.
remote: error: File ***/***.exe is 144.19 MB; this exceeds GitHub's file size limit of 100.00 MB
To https://github.com/***/***.git
! [remote rejected] main -> main (pre-receive hook declined)
error: failed to push some refs to 'https://github.com/***/***.git'

50메가는 넘고 100메가는 넘지 않아 뜨는 warning 메시지는 상관 없지만,
위와 같이 100메가가 넘어서 error 메시지가 발생할 경우 메시지가 안내하는 것과 같이 Git LFS 익스텐션을 이용한 작업이 필요하다. 원리는 대용량 파일을 잘게 쪼개 관리한다는 내용이다.

해결방법

Git LFS 설치(링크 : Git LFS 다운로드 페이지)
Git LFS download page
git lfs install
- 로컬 프로젝트 경로에서 cmd 로 설치 명령을 입력한다.
git lfs track "***.exe"
- 100MB 이상의 파일을 lfs 로 관리 등록을 한다.
git commit -m "메시지"
- 다시 커밋한다.
- 이전에 100MB 이상 파일을 커밋한 적이 없다면 이대로 push 하면 된다.
BFG Repo-Cleaner 다운로드 (링크 : BFG-Repo-Cleaner 다운로드 페이지)
- LFS 적용 이전에 100MB 이상 파일을 커밋한 적이 있다면 LFS 적용 후에도 여전히 에러 메시지가 발생하기 때문에,
bfq-***.jar 파일의 도움을 받아 없애기 위해 다운로드한다.
BFG Repo-Cleaner download page
java -jar bfg-***.jar --strip-blobs-bigger-than 100M .git
- 다운로드 받은 jar 파일을 로컬 프로젝트 경로로 옮기고 명령어를 실행한다.
- 만약 아래와 같은 메시지가 나온다면,

Using repo : C:\***\***\.git

Scanning packfile for large blobs: 2555
Scanning packfile for large blobs completed in 65 ms.
Warning : no large blobs matching criteria found in packfiles - does the repo need to be packed?
Please specify tasks for The BFG :
bfg 1.***.0
Usage: bfg [options] [<repo>]

git repack && git gc 라고 명령어 입력 후, 다시 명령을 실행한다.
git push
- 이제 100MB 넘는 파일도 깃허브에 업로드 할 수 있다!

포토샵 대체 웹 사이트(pixlr.com)

민타쿠 — Sat, 24 Jul 2021 15:30:41 +0900

온라인 사진 에디터

온라인 사진 에디터 - Pixlr.com

무료 & 프리미엄 온라인 사진 에디터를 만나보세요. 효과, 필터, 오버레이, 간단한 기능부터 고급형 기능까지 모두 담았어요. 대부분의 파일 형식 (PSD, PXD, JPeg, PNG - 투명, webP, SVG 등)을 지원해요.

pixlr.com

종종 이미지 편집을 간단히 하고 싶을 때, 유용한 웹 사이트이다.

pixlr.com 메인 화면

메인 화면에서 PIXLR E 버튼과 PIXLR X 버튼을 볼 수 있는데, 둘 다 무료이다.
다만 E 는 포토샵처럼 기능이 많은 버전이고 X 는 기능이 적고 빠르고 쉽게 초심자가 작업할 수 있는 버전이라 한다.
두 버전 간의 이동은 자유롭다. E 에서 작업하던 것을 X 에서 작업할 수 있고 그 반대 또한 가능하다.

6일 전에 만들었던 그림

히스토리, 최근 작업 파일을 볼 수 있어 좋다.

무엇보다 그림판으로는 할 수 없는 배경을 투명으로 만드는 일이 가능하다는 것이 가장 큰 장점인 것 같다.
게다가 무료이며, 설치가 필요하지 않다.

더 바랄 것이 없다!

jQuery 이미지 파일 선택시 보여주기

민타쿠 — Fri, 23 Jul 2021 00:13:29 +0900

마우스 커서를 가져가면 파일 선택 버튼이 보이고, 이미지 파일을 선택하면 해당 이미지를 화면에 보여주는 미리보기 기능을 구현하는 방법에 대해 알아보겠다.

HTML 레이아웃

<div id="imgBox" style="min-height: 400px; min-width: 580px;">
	<div id="imgTag" style="min-height: 400px; min-width: 580px; position: absolute;"></div>
	<input type="file" id="inputImg" name="outo" accept=".jpg,.png" style="position: absolute; top:181px; left: 63px; font-size: x-large;" onchange="loadFile(this)">
</div>

id 기준으로,
- imgBox : 마우스 오버를 감지할 곳이다.
- imgTag : 이미지 미리보기를 나타낼 곳이다.
- inputImg : 파일을 입력 받을 input 태그이다.
jpg, png 형식만 accept 로 지정해 해당 확장명의 파일 선택을 유도한다.
onchange 시 파라미터로 this 를 넘겨주며 loadFile 함수를 실행한다.

아무것도 보이지 않는 기본 상태

마우스 오버 감지

$('#imgBox').on('mouseover', function() {
  $('#inputImg').show();
});
$('#imgBox').on('mouseout', function() {
  $('#inputImg').hide();
});

- 마우스 커서를 올리면 파일선택 버튼 보여주고, 커서가 벗어나면 숨긴다.

마우스 커서를 올린 상태

미리보기 출력 함수

function loadFile(input) {
  var file = input.files[0];
  $('#imgTag').html(" <img src='"+URL.createObjectURL(file)+"' style='max-height:432px; max-width:925px;'/> ");
}

- 파일을 선택하면 실행되는 함수이다. 선택된 이미지를 나타낸다.

파일 선택한 상태

Git 특정 버전으로 되돌렸다가 돌아오기(혹은 아예 되돌리기)

민타쿠 — Thu, 22 Jul 2021 00:20:48 +0900

이전 버전 보고 돌아오기

이전 커밋의 소스를 확인하고 싶을 경우, 두 가지 방법이 있다.

커밋 메시지 보고 특정 커밋으로 되돌리기
- git log
  - 명령 입력 후, 위 아래 방향키로 원하는 버전 커밋 찾기
  - 'commit' 문구 뒤의 해시코드 앞에서 4자리 이상 복사
  git log 예시
- git checkout 복사한 4자리 이상 해시코드
  - 현재 소스가 해당 버전으로 돌아간다.
- git checkout 브랜치 이름
  - 되돌아오기(해당 브랜치의 최신 커밋으로 돌리기)
단계별로 되돌아가기
- git checkout head~1
  - 최신 커밋으로부터 한단계 전으로 되돌린다.
  - 1에 해당하는 부분을 바꿔서 원하는 단계만큼 지정할 수 있다.
- git checkout 브랜치 이름
  - 되돌아오기(해당 브랜치의 최신 커밋으로 돌리기)

이전 버전으로 되돌리기

되돌렸다가 돌아오지 않고 아예 되돌리고 싶은 경우에도 두 가지 방법이 있지만,
웬만하면 revert 를 권장한다.

되돌리는 버전을 새로 커밋하기(권장 O)
- git revert head~1 혹은 git revert 커밋해시코드
  - 앞서 설명한 checkout 의 두 가지 방법 모두 똑같이 revert 에 적용 가능하다.
  - revert 명령시 해당 커밋 버전으로 새로 커밋하게 되므로, 커밋 메시지 입력창이 나타난다.
- (i 입력 후 커밋메시지 수정하기. :wq 입력하여 저장 후 종료하기.)
되돌리는 버전 이후의 커밋을 삭제하기(권장 X)
- git reset --hard head~1 혹은 git reset --hard 커밋해시코드
  - 앞서 설명한 checkout 의 두 가지 방법 모두 똑같이 reset 에도 에 적용 가능하다.
- 남아있는 추가됐던 파일 지우기

AWS Cognito user pools(사용자 풀) 사용법

민타쿠 — Wed, 21 Jul 2021 00:10:08 +0900

Nodejs 환경 기준으로 작성하지만, 혹여 다른 환경일지라도 아마존 코그니토 사용자 풀을 처음 써보려는 사람에게는 이 글이 분명 도움될 것이라 생각한다.
처음부터 끝까지 세세한 설명보다는, 길어보이지만 짧은 이 글을 읽고 나면 스스로 코그니토 API 를 찾고 사용하여 개발할 수 있게끔 설명하는 것이 목적이다.
생각보다 자세하거나 쉽게 설명한 글이 보이지 않아서 직접 알아보고 시행 착오를 겪으며 시작이 오래 걸렸지만, 이 글을 읽는 누군가는 금방 시작할 수 있다거나, 한줄기 희망으로 느껴졌으면 한다.

참고로 sns 연동은 다루지 않았다. 추후에 이를 다룬 포스팅을 업로드할 생각은 있다.

기본 사용 환경 구축

AWS Cognito user pools(사용자 풀) 생성
- 링크 참조 : (코그니토 사용자 풀 생성 가이드 페이지)
사용자 풀 정보 확인
- 사용자 풀 ID, (사용자 풀 ID에 포함된)지역을 확인한다.
AWS - Cognito - 사용자 풀 관리 - 생성한 사용자 풀 - 일반 설정

- 클라이언트 ID 를 확인한다.
AWS - Cognito - 사용자 풀 관리 - 생성한 사용자 풀 - 앱 클라이언트
AWS 계정 액세스 키 생성 및 정보 확인
AWS - 내 보안 자격 증명 - 액세스 키 - 새 액세스 키 만들기

- 액세스 키를 생성하면 한번만 다운로드 받을 수 있다. 분실할 경우, 새 액세스 키를 만들어 사용해야 한다.
- '액세스 키 ID' 와 ‘액세스 키’ 를 확인한다.
프로젝트 내에 npm 모듈 설치
- npm install aws-sdk
- npm install jwk-to-pem
- npm install jsonwebtoken
- npm install request

npm 모듈 import

const AWS = require("aws-sdk");
const jwkToPem = require('jwk-to-pem');
const jwt = require('jsonwebtoken');
const request = require('request');

계정, 사용자 풀 접근 정보 저장

const CLIENT_ID = '3olbmrmgsip34dtj**********';
const ACCESS_KEY_ID = 'AKIAW5QD3C**********';
const SECERET_ACCESS_KEY = 'VIOJgaq6WUxL1BnjENSChkmMF3sVAi**********';
const REGION = 'ap-northeast-2';
const USERPOOL_ID = 'ap-northeast-2_hJ*******';

- 암호화 후, 별도 저장이 더 좋은 방법으로 보이나, 우선 코드 내 상수로 저장하였다.

접근 정보 설정 업데이트 및 CognitoIdentityServiceProvider 생성

REST API 사용법

API Documents 확인
- 링크 참조 : (코그니토 API 문서 페이지)
원하는 기능 조회
AWS - Documentation - Amazon Cognito - API Reference

- Actions 페이지 혹은 좌측 내비게이션 바에서 원하는 항목을 찾거나, 상단 검색창에서 검색한다.
- 관리자의 사용자 생성 기능을 예로, AdminCreateUser 를 조회할 수 있다. ‘create user’ 등의 검색어로 검색해서 찾을 수도 있다.
기능 확인
AWS - Documentation - Amazon Cognito - API Reference - AdminCreateUser

- 조회한 api 가 원하던 기능인지 확인한다. 페이지 첫 문단이 해당 api 에 대한 설명이므로, 읽어보며 생각했던 기능이 맞는지 확인해야 한다.
특성 및 속성 확인
AWS - Documentation - Amazon Cognito - API Reference - AdminCreateUser

- 페이지 우측에 내비게이션 바가 생긴 것을 알 수 있다.

- Request Syntax : 요청 구문의 형식을 확인할 수 있다.
- Request Parameters : 요청 구문에 들어가는 속성의 형식과 필수 여부를 확인할 수 있다.
- Response Syntax : 응답 구문의 형식을 확인할 수 있다.
- Response Elements : 성공시 응답 요소가 무엇인지 확인할 수 있다.
- Errors : 발생하는 Exception을 확인하여 에러 처리를 할 수 있다.

api 사용

cognitoIdentityServiceProvider.<API이름>(<API의 Request Syntax 객체>,function(err,data){
  if(err)
  {
    console.log(err);
  }
  else
  {
    console.log(data);
  }
});

실제 사용

//createUser
router.post('/createUser',function(req,res){
  req.on('data', function(chunk) {
    var datalist = JSON.parse(chunk).data;
    var userName = datalist[0];
    var email = datalist[1];
    var givenName = datalist[2];
    var familyName = datalist[3];
    var phoneNumber = datalist[4];
    const createUserParams =
    {
      "UserPoolId": USERPOOL_ID,
      "DesiredDeliveryMediums": [ "EMAIL" ],
      "Username": userName,
      "UserAttributes":
      [
        {
          "Name": "email",
          "Value": email //이 메일로 인증메일이 가기 때문에 잘 적어줘야 한다.
        },
        {
          "Name": "given_name",
          "Value": givenName
        },
        {
          "Name": "family_name",
          "Value": familyName
        },
        {
          "Name": "phone_number",
          "Value": "+82"+phoneNumber
        },
        {
          "Name": "email_verified",
          "Value": "true"
        }
      ]
    };
    cognitoIdentityServiceProvider.adminCreateUser(createUserParams,function(err,data){
      if(err)
      {
        console.log(err);
        if(err.message.startsWith('User account already exists')){
          res.json({code:-1, msg:'이미 존재하는 아이디입니다.'});
        }else if(err.message.startsWith('An account with the email already exists')){
          res.json({code:-2, msg:'이미 등록된 이메일 주소입니다.'});
        }
      }
      else
      {
        console.log(data);
        res.json({code:0, msg:'계정 생성 안내 이메일이 발송되었습니다.'});
      }
    });
  });
});

에러 처리에 관한 참고 사항
- API Document 에서 Errors 항목을 보면 Exception 을 확인하여 에러 처리를 할 수 있다고 언급하였다.

cognitoIdentityServiceProvider.confirmForgotPassword(confirmForgotPwdParams, function(err,data){
  if(err)
  {
    console.log('confirmForgotPassword Err : ');
    console.log(err);
    if(err.code === 'CodeMismatchException'){
      res.json({code:-2, msg:'유효하지 않은 확인코드입니다.'});  
    }else if(err.code === 'ExpiredCodeException') {
      res.json({code:-3, msg:'만료된 확인코드입니다.'});
    }else if(err.code === 'LimitExceededException') {
      res.json({code:-4, msg:'시도 횟수 초과입니다. 나중에 다시 시도하십시오.'});
    }else {
      res.json({code:-1, msg:'비밀번호 변경에 실패하였습니다.'});
    }
  }
  else
  {
    console.log('confirmForgotPassword OK : ');
    console.log(data);
    res.json({code:0, msg:'비밀번호가 변경되었습니다.'});
  }
});

- 위와 같이 Documents에 나오는 Exception 코드만으로 원하는 처리를 할 수 있는 경우도 있었지만,
앞서 api 사용법 설명을 위해 예를 들었던 ‘AdminCreateUser’ 같은 경우는, 같은 Exception 코드에서도 다른 경우를 구분해야 원하는 처리를 할 수 있었다.- 이처럼 err.code(Exception 코드) 가 아닌 err.message(에러 메세지)로 구분하여 처리를 해야할 수도 있다.

cognitoIdentityServiceProvider.adminCreateUser(createUserParams,function(err,data){ if(err) { console.log(err); if(err.message.startsWith('User account already exists')){ res.json({code:-1, msg:'이미 존재하는 아이디입니다.'}); }else if(err.message.startsWith('An account with the email already exists')){ res.json({code:-2, msg:'이미 등록된 이메일 주소입니다.'}); } } else { console.log(data); res.json({code:0, msg:'계정 생성 안내 이메일이 발송되었습니다.'}); } });

깃허브(GitHub) 입문자를 위한 간단 사용법(간단히 협업)

민타쿠 — Tue, 20 Jul 2021 02:34:35 +0900

본 글에서는 깃, 그리고 깃허브 입문자가 버전 관리, 단순 협업을 할 수 있도록 하기 위해
최대한 당장 필요한 것만 설명할 예정이다.

1. Git & GitHub

깃과 깃허브가 있다.
깃은 분산형 버전 관리 시스템이고,
깃허브는 이를 사용하는 프로젝트를 지원하는 웹호스팅 서비스이다.
쉽게 말해 백업과 협업을 위한 클라우드라고 보면 된다.

2. 작업환경 세팅

깃허브 회원가입(깃허브 홈페이지)
깃 다운로드 및 설치(깃 다운로드 페이지)
cmd(terminal) 창에서 커맨드 입력
git config --global user.email "내 이메일"
git config --global user.name "내 이름"
깃허브 로그인 요구시 로그인하기
(윈도우는 최초 1번, 맥과 리눅스는 설정 필요)
(윈도우 기준 [제어판]-[사용자 계정]-[자격 증명 관리자]-[Windows 자격 증명]-[일반 자격 증명] 에 로그인 정보가 저장된다.)

3. Git 사용법

깃을 쓰는 방법에는
CLI(Command Line Interface) 환경과
GUI(Graphical User Interface)에서 쓰는 방법 두 가지가 있는데,
여기서는 CLI 환경에서 커맨드 입력을 통한 방법을 설명할 것이다.
이유는 아래에 작성한 괄호 안의 내용과 같다.

(
깃은 CLI 환경이 기본이지만 사용자 편의를 위해 다양한 GUI 가 존재한다.
CLI 에서는 모든 기능이 가능하지만, GUI 에서는 일부 불가능일 수 있다.
게다가 CLI 로 입문하여 쓰던 사람은 GUI 를 원활하게 사용할 수 있지만,
GUI 로 입문하여 쓰다가 CLI 환경에서 쓰려면 거의 불가능에 가깝기 때문에
CLI 기준으로 기본 사용법을 이해한 후 GUI 사용을 권장한다.
)

git init
깃으로 관리하겠다는 선언.
깃으로 관리할 프로젝트 폴더 경로에서 커맨드라인으로 입력.
해당 폴더 내에 숨김 폴더로 .git 이라는 폴더가 생성된다.

.gitignore 파일 생성
깃에서 제외시킬 파일 및 폴더 정보를 담는 설정 파일.
.gitignore 라는 이름의 텍스트 파일.

.gitignore 문법 예시

# : 주석

# .a 확장자 파일 무시
*.a

# lib.a 파일은 .a 확장자 파일이더라도 무시 X
!lib.a

# 현재 폴더의 TODO 파일만 무시 subdir/TODO는 무시 X
/TODO

# build 폴더의 모든 파일 무시
build/

# doc/notes.txt 는 무시, doc/server/arch.txt 는 무시 X
doc/*.txt

# doc 폴더의 모든 .pdf 확장자 파일 무시
doc/**/*.pdf

git add 파일명
스테이지 단계로 스테이징 시키는 명령어.
파일명 대신 점(.)을 쓰면 변경사항이 있는 모든 파일을 스테이징한다.
git commit -m "메시지"
커밋 명령어.
스테이징된 파일들의 변경사항을 적용하여 새로운 버전으로 저장.
메시지와 함께 저장되기에 이력 관리에 용이.

이 중 .gitignore 파일 생성은 필수가 아니니, 결국 세 단계만 알면 깃으로 버전 관리를 할 수 있게 된다.
게다가 git init 명령어를 통한 초기화는 한번이기에, 결국
add 와 commit 두 명령어의 반복만 해도 기본적인 버전 관리를 하게 된다.

git init
코드 수정
git add .
git commit -m ‘bla bla’
코드 수정
git add .
git commit -m ‘bla bla’
...

위와 같이 하면 기본 버전 관리가 된다. 생각보다 간단하다.
물론 여기서 log 명령어로 커밋한 기록을 살펴보고 checkout 명령어로 버전을 전환하고 되돌아오고 하는 것 등의 작업을 할 수 있어야 진짜 버전 관리를 한다 할 수 있겠지만, 그것은 나중에 필요할 때 하면 된다. 쉽고, 구글링 하면 다 나오니까 말이다. 그러한 깃의 기능들에 대해서는 추가 포스팅을 할 예정이다.

4. GitHub 사용법

깃허브 로그인(깃허브 홈페이지)
Repository(저장소) 생성
로그인 후 좌측에 보인다

저장소 이름 정하고, 공개or비공개, readme파일 추가 여부, .gitignore 추가 여부, 라이센스 선택 여부를 정한다
보유 프로젝트 Repository 에 연결 후 업로드
빈 저장소 페이지는 가이드가 보인다. cmd로 프로젝트 경로에서 빨간 박스 부분을 따라해보자.
Collaborator(협업자) 초대
저장소 - 설정탭 - Manage access - Invite a collaborator - ID 혹은 이메일로 검색 후 초대 메일 전송
(초대 받은 경우) 초대 메일 확인 및 수락
(초대 받은 경우) Repository 주소 복사
[Code]버튼 - 주소 복사 버튼
(초대 받은 경우) cmd로 프로젝트를 위치시킬 경로에서 [git clone 주소] 입력 -> 프로젝트 다운로드(폴더 자동생성)
각자 작업 시작
깃 사용법과 동일하게 진행하지만 앞, 뒤로 명령어 하나씩만 추가하면 된다.
작업 전에 git pull, 작업 후에 git push 명령을 입력하면 되겠다.

git pull

코드 수정
git add .
git commit -m ‘bla bla’

git push

위와 같은 방식으로, 기존 깃으로 버전 관리만 하는 것에서 협업으로 나아갈 수 있다.
git pull 은 현재 깃허브에 있는 최신 소스의 변경 내용을 다운로드 받아 자신의 로컬 프로젝트와 병합하는 기능이고,
git push 는 현재 자신의 로컬 프로젝트를 깃허브에 업로드하는 기능이다.
따라서 다운로드(병합) - 작업 - 버전 저장 - 업로드 의 과정이 수행되는 것이다.

5. Conflict(충돌) 발생시

세상사 100프로는 존재하지 않는다는 말처럼 안타깝게도 깃과 깃허브가 100프로 모든 것을 알아서 해줄 수는 없다.
바로 충돌이 발생하는 경우인데, 간단히 말하면 동시에 같은 파일의 같은 행을 수정하면 발생한다.

철수와 영희가 작업을 한다고 가정하겠다.
철수가 A라는 버전을 수정해서 push 하여 깃허브에 B버전이 있다.
영희는 B버전을 pull 하여 B-1버전을 만들어 push 했지만,
그 사이 철수가 추가 작업을 통해 B-2버전을 만들었다.
그래서 철수도 push를 하려 했지만 pull 을 받지 않아 push를 할 수 없다는 에러를 보게 되었다.

이 때, 영희가 수정한 부분과 철수가 수정한 부분이 겹치지 않는다면 철수는 pull 명령 후 push 를 하여 자연스럽게 넘어갈 수 있다.
하지만 둘의 수정 내용에서 같은 파일의 같은 행의 수정이 있을 경우, 철수는 pull 명령에서 Conflict 메시지를 받게 된다.

해결 방법은 깃이 알려주는 충돌이 발생한 파일을 살펴보고 수정하여 commit 후 push 하는 것이다.

충돌 발생 파일 열기
메시지에서 충돌이 발생한 파일을 알려준다.
사용하는 IDE(개발툴)에서 표시될 수도 있다.
Conflict(충돌) 메시지 예시
충돌 부분 수정 후 저장
충돌 수정 전

충돌 수정 후
커밋 후 푸시

6. 그 외 명령어

깃에는 굉장히 유용하고 사용자를 편하게 해주는 많은 기능과 그 명령어가 있다.
그러나 당장은 필요가 없을 것이고 그때 그때 검색을 통해 차차 알아가는 편이 좋을 것이다.
일단은 이 정도만 알아도 충분하지 않을까.

git init : 현재 경로를 Git프로젝트로 관리하기
git clone 레포지토리 주소 : 프로젝트 복제(다운로드)
git status : 상태 보기
git pull : (fetch+merge) 깃허브에서 최신버전 다운로드(병합)
git add . : 변경사항 다 스테이징
git commit -m "메시지" : 커밋(현재 버전 저장)
git push : 깃허브에 현재 커밋 업로드
git log : 로그(버전 이력) 보기
git checkout 커밋코드4자리 : 원하는 버전으로 코드 돌려보기
git branch 브랜치이름 : 브랜치 만들기(가지치기)
git checkout 브랜치이름 : 해당 브랜치의 최신버전으로 코드 돌려보기
git merge 브랜치이름 : 해당 브랜치 변경내용을 현재 브랜치에 병합하기

7. 마치며.

회사내 교육 진행을 위해 만들었던 24개의 ppt 슬라이드에서도 내용을 간추렸지만,
글로써 설명하다보니 글이 길어져서 아쉽다.
그래도 막상 사용법은 간단하다는 말을 강조하고 싶어, 교육 마지막에 넣었던 문구로 마치도록 하겠다.

“당기고(pull), 더하고(add, commit), 미세요(push).”

백업,
버전 관리,
협업을
빠르고 간편하게.
Github.

JSON 비교 웹 사이트(jsondiff.com)

민타쿠 — Tue, 20 Jul 2021 00:01:58 +0900

JSON 비교 사이트

JSON Diff - The semantic JSON compare tool

jsondiff.com

JSON 끼리 비교해야할 경우가 있는데, 그럴 때 유용한 사이트이다.

간단 명료한 화면

왼쪽에 복사 붙여넣기, 오른쪽에도 복붙.

마지막으로 [Compare] 버튼만 누르면 끝!

결과 예시

물론 영어, 한글 등 다양한 언어를 지원한다.

굉장히 유용하다!

텍스트 비교 웹 사이트(text-compare.com)

민타쿠 — Mon, 19 Jul 2021 23:01:02 +0900

텍스트 비교 사이트

Text Compare! - An online diff tool that can find the difference between two text files

text-compare.com

단순 텍스트를 비교해야할 경우가 종종 있는데, 그럴 때 유용한 사이트이다.

군더더기 없는 화면

왼쪽에 복사 붙여넣기, 오른쪽에도 복붙.

마지막으로 [Compare!] 버튼만 누르면 끝!

결과 예시

영어, 한글 등 다양한 외국어도 물론 지원한다.

jQuery 깜빡임 없이 동적 페이지 전환 구현하기(뒤로가기, 새로고침 지원)

민타쿠 — Sun, 18 Jul 2021 15:43:17 +0900

두괄식으로 말해서,

1. movePage 함수 선언

function movePage(navigator) {
        var pageUrl = $(navigator).attr("url");

        if (pageUrl !== location.pathname) {
            history.pushState({ path: pageUrl }, null, pageUrl);
            var popStateEvent = new PopStateEvent('popstate', { state: null });
            dispatchEvent(popStateEvent); // event 발생시키기
        }
    }

이동하려는 url 정보를 받아 path 라는 이름으로 history.state 에 저장하고,
popstate 이벤트를 발생시킨다.

2. onclick 에 movePage 함수 사용

<a class="dropdown-item" href="javascript:void(0);" url="/cognito/settings" onclick="movePage(this)">정보수정</a>

url 이라는 속성에 이동하고자 하는 페이지 url path를 적어주고, 클릭시 해당 태그 자체를 파라미터로 movePage 함수를 실행시킨다.

3. onpopstate 이벤트(url 변경) 발생시 페이지 처리

onpopstate = function (e) {
        // 페이지 GET 요청
        $.ajax({
            type: "GET",
            url: history.state.path,
            data: { type: "get" },
            success: function (data) {
                if(data.startsWith('<!--login-->')){
                    // 세션 만료로 인한 로그인 페이지 data
                    alert('세션이 만료되었습니다. 다시 로그인하세요.');
                    location.href = '/cognito/login';
                }else{
                    var bodyData = data.substring(data.indexOf('<!--body start-->'),data.indexOf('<!--body end-->')) + ' '
                    + data.substring(data.indexOf('<!--script start-->'),data.indexOf('<!--script end-->'));
                    $('#body').html(bodyData);
                }
            }
        });
    }

movePage 함수에서 이벤트를 발생시키면 페이지가 state 정보로 ajax 요청을 하고,
받은 데이터를 통해 html 태그를 변경한다.
위 코드에서 받은 데이터를 가공할 때, 커스텀으로 작업해둔 flag 기능의 주석 태그를 바탕으로 데이터를 가공한다.
if(data.startsWith('') ~ 부분은 이 프로젝트 내에서 세션 만료시 로그인 페이지로 이동하도록 되어있기 때문에 작성한 것으로, 이러한 작업을 한다면 참고할 부분이고 아니라면 필요하지 않다.

4. 페이지마다 주석 태그로 flag 달기

<!--body start-->
~
~
<!--body end-->
~
~
<!--script start-->
~
~
<!--script end-->

예시1

예시2

예시3

각 페이지마다 전달하고자 하는 부분만 지정해주기 위함이다.
이렇게 substring을 통해 html 에 넣어주지 않고 데이터 통째로 넣으면 header 와 footer 안에 또 header 와 footer 가 생길 것이고, 각 페이지마다 header footer 등을 지우고 원하는 태그만 저장해두면 해당 페이지에서 새로고침할 때 문제가 생긴다. 새로고침을 막는 것은 키보드를 통한 방법만 막을 수 있으며 브라우저 자체의 새로고침은 페이지를 팝업창처럼 만들지 않는 이상 막기가 불가능하다.
그래서 이렇게 수작업이 들어가는 방법을 선택했고... 다른 방법이 있을지 모르겠지만 찾지 못하였고 그렇게까지 불편한 작업은 아니라고 생각한다.

웹 페이지 이동시 화면 깜빡임 없이 그대로 유지하고
body 에 원하는 페이지만 렌더링하고 싶었다.
알아보니 ajax 비동기 통신을 통해 요청으로 받은 페이지 데이터로 html 태그를 변경하는 방법이 있었지만,
단순히 그 방법만으로는 뒤로가기, 앞으로가기, 새로고침을 지원할 수 없었고
window.history 객체(IE버전 10이상) 혹은 History.js 라는 제이쿼리 플러그인을 함께 사용해야 했다.
따라서 IE버전 10 이상을 쓸 것이라는 가정 하에 따로 제이쿼리 플러그인을 사용하지 않고
history 객체를 이용하여 구현해보았다.

express-ejs-layouts(공통 부분 레이아웃 공유) include에서 한 발 더 나아간 코드 작성 간소화

민타쿠 — Sun, 18 Jul 2021 14:22:35 +0900

ejs 에서는 include 를 통해 공통되는 부분의 작성을 대신 하는데,
한 발 더 나아가서 전체 레이아웃을 작성해놓을 수가 있었다.
(동적 페이지 전환은 아니다)

1. npm install express-ejs-layouts
프로젝트 경로에서 위 cmd 명령어 쳐서 모듈 설치

2. app.js

const expressLayouts = require('express-ejs-layouts');

app.use(expressLayouts);

app.set('layout','layout');
app.set('layout extractScripts', true);

app.js 에서 4줄 추가.
(layout 은 html을 layout.ejs로, layout extractScripts 는 script 태그를 layout.ejs로 불러오게 설정하는 것)

3. layout.ejs 파일 생성

<!DOCTYPE html>
<html lang="ko" dir="ltr">

// head ~~~
// header ~~~

<%- body %>

// footer ~~~

<%- script %>

</html>

이런 식으로 작성만 하면 된다.
그리고 각 페이지 ejs 에 body 에 해당하는 html 태그와 script 태그만 작성하면 끝.
그냥 작성해도 되고, header.ejs, footer.ejs 와 같이 나누어서 파일로 생성한 후에 include 를 써도 좋다.

이런 방식으로

HTML 코드, ASCII(아스키) 코드, URL 인코딩 디코딩 웹 사이트(ascii.cl)

민타쿠 — Wed, 14 Jul 2021 17:57:57 +0900

https://ascii.cl/

ASCII Codes - Table of ascii characters and symbols

ASCII Hex Symbol 01234567 89101112131415 01234567 89ABCDEF NULSOHSTXETXEOTENQACKBEL BSTABLFVTFFCRSOSI ASCII Hex Symbol 1617181920212223 2425262728293031 1011121314151617 18191A1B1C1D1E1F DLEDC1DC2DC3DC4NAKSYNETB CANEMSUBESCFSGSRSUS ASCII Hex Symbol 3233

ascii.cl

ascii.cl 좌측 내비게이션 바

HTML 코드, 아스키 코드를 표로 정리.

입력 후 버튼 클릭으로 URL 인코딩, 디코딩.

JSON.stringify() 실행시 큰따옴표(")가 &#34 로 나올 때

민타쿠 — Wed, 14 Jul 2021 17:52:49 +0900

두괄식으로 말하자면, 두 가지 방법은 아래와 같다.

방법1.

let userList = '<%=JSON.stringify(userList)%>';

userList = userList.replaceAll('&#34;', '\"');
userList = JSON.parse(userList);

방법2.

let userList = '<%-JSON.stringify(userList)%>';

userList = JSON.parse(userList);

해당 문제는 요청으로 받은 JSON 데이터를 ejs 템플릿에서 처리하는 과정 중에 발생하였다.

" 와 같은 형태는 HTML Code 이다.

(HTML Code 정리 사이트 : https://ascii.cl/htmlcodes.htm)
이것이 HTML Code 의 한 종류임을 알지 못하는 사람으로서는 난감할 수 있을 법한 게,
이를 복사해서 웹에서 붙여넣기하면 자동으로 큰따옴표(")로 출력된다. 즉, 구글링을 실수할 수 있다. ㅎㅎ

이것은 방법1과 같이 replaceAll() 을 통해 큰따옴표(\")로 모두 치환하는 방법과,

방법2와 같이 <%= 가 아닌 <%- 의 형태인 이스케이프 태그를 쓰는 방법이 있다.