Light Dev

[JavaScript] ️ 이미지 src 변경하는 방법

Light9639 — Wed, 5 Jul 2023 23:26:56 +0900

자바스크립트로 이미지 src 변경하기

바닐라 자바스크립트를 이용한 방법

우선 바닐라 자바스크립트를 이용하여 이미지의 src를 바꾸는 방법을 작성해 보겠다.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="mainBanner">
    	<img src="./main01.jpg" alt="메인배너" title="메인배너">
    </div>
</body>

</html>

위의 HTML 코드에서 이미지 태그의 src를 변경하려면 querySelector 메소드를 이용하면 된다.

JavaScript

// JavaScript
let img = document.querySelector(".mainBanner > img");

img.src = "./main02.jpg";

위의 코드를 이용하면 해당 메소드를 사용하여 img DOM 객체를 가져올 수 있으며, 해당 DOM 객체에서 src를 바꿀 수 있다.

JQuery를 이용한 방법

만약 Jquery를 사용하여 src를 변경하려고 한다면, 한 줄로 작업을 실행할 수 있다.

JavaScript

$(".mainBanner > img").attr({ src: "./main02.jpg" });

참고 문헌

[CSS] 말풍선 디자인 만드는 법

Light9639 — Mon, 3 Jul 2023 17:47:13 +0900

말풍선 생성하기 사이트

맨 밑의 링크에 접속하면 간단하게 말풍선 스타일링을 바로 만들 수 있는 말풍선 생성 사이트에 접속할 수 있다.

말풍선 꼬리표 위치(Side) 와 모양(Pointer triangle)과 크기(Pointer size)를 지정해주고 옆의 CSS 코드를 붙여넣으면 말풍선 스타일링을 쉽게 생성할 수 있다.

실제 사용방법은 밑의 코드를 참고하면 쉽게 사용할 수 있을 것이다.

HTML

<div class="speech-bubble">
  <h1>Bubbly</h1>
  <h2>CSS speech bubbles made easy!</h2>
</div>

CSS

.speech-bubble {
  position: relative;
  background: #00aabb;
  border-radius: .4em;
}

.speech-bubble:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-top-color: #00aabb;
  border-bottom: 0;
  border-left: 0;
  margin-left: -10px;
  margin-bottom: -20px;
}

Bubbly — CSS speech bubbles made easy

projects.verou.me

[JavaScript] ️ 마우스 우클릭을 금지하는 2가지 방법

Light9639 — Thu, 29 Jun 2023 22:26:24 +0900

마우스 오른쪽 클릭 금지하기

마우스 우클릭을 하게 되면 Context 메뉴가 나오게 된다. 이번 포스팅에서는 마우스 오른쪽 버튼을 클릭했을 때, 이 Context 메뉴가 뜨지 않도록 하는 방법에 대해서 알아보도록 하자.

return false 하기

HTML

<div oncontextmenu='return false'>
  여기서 마우스 오른쪽 클릭해보세요.
</div>

oncontextmenu 이벤트는 마우스를 우클릭했을 때 발생한다.
oncontextmenu가 호출되었을 때 return false를 하게 되면, 마우스 우클릭을 해도 context 메뉴가 열리지 않는다.

preventDefault() 활용하기

HTML

<body>
  <div id='test'>
    여기서 마우스 오른쪽 클릭해보세요.
  </div>
  <script>
    document.getElementById('test').addEventListener('contextmenu', event => event.preventDefault());
  </script>
</body>

우선 'test' div에 contextmenu 이벤트를 등록한다.
이 때 호출되는 event.preventDefault() 함수를 호출하면, 해당 이벤트가 발생했을 때 발생했어야 하는 동작이 멈춰지게 된다. 즉, 위의 예제를 보면 원래는 contextmenu 이벤트가 발생하면 context 메뉴가 열렸어야 하지만 위의 코드에서는 preventDefault()를 호출하였기 때문에 context 메뉴가 열리지 않게 된다.

참고 문헌

[JavaScript] '==' 연산자와 '===' 연산자의 차이점 총정리

Light9639 — Thu, 29 Jun 2023 22:11:32 +0900

'=='와 '==='의 차이

'=='는 비교하는 두 개의 값(피연산자)을 강제로 같은 형으로 변환한 후, 비교작업을 한다. 즉, 두 값의 타입이 다르더라도 형 변환된 값이 같다면 true를 리턴한다.
'==='는 비교하는 두 개의 값(피연산자)의 타입과 값이 모두 같을 경우에는 true를 리턴한다.

JavaScript

console.log(1 == '1'); // true
console.log(1 === '1'); // false

console.log(false == 0); // true
console.log(false === 0); // false

위 첫번째 예제에서 숫자 1과 문자열 '1'을 비교하였다. '==' 연산자를 사용하여 비교하면, 두 피연산자의 타입이 달라도 true를 리턴하는 것을 확인할 수 있다. 그렇지만, '===' 연산자를 사용하여 비교하면, 둘 다 1이지만, 타입이 다르기 때문에 false를 리턴한다.

두 번째 예제에서는 boolean 값이 false와 숫자 0을 비교하였다. '==' 연산자를 사용하여 비교하면, 숫자 0을 false로 취급하여 true를 리턴한다. 그러나, '===' 연산자를 사용하여 비교하면, 두 개의 타입이 다르므로 false를 리턴한다.

보통, 정확한 비교를 하려 '==' 보다는 '===' 연산자를 사용하여 비교하는 것이 좋다.

'=='연산자와 '==='를 이용한 unll, undefined 비교

이번에는 '=='와 '===' 연산자를 이용하여 null, undefined 값을 체크했을 경우 나오는 값은 밑의 코드와 같다.

JavaScript

console.log(undefined == null); // true
console.log(undefined === null); // false

위의 코드를 보면 '==' 연산자를 이용하여 두 값(null과 undefined)을 비교하면 true를 리턴한다. 그러나, '===' 연산자를 이용하여 두 값을 비교하면 타입이 다르기 때문에 false를 리턴한다.

'==' 연산자를 이용한 null, undefined 비교 예제

JavaScript

let a; // undefined
let b = null; // null

console.log(a == null); // true
console.log(a == undefined); // true
console.log(b == null); // true
console.log(b === undefined); // false

변수를 선언하고 값을 할당하지 않으면 변수는 undefined 값을 가지게 된다. 따라서 변수 a는 undefined 값을 가지게 되며, 변수 b에는 null 값을 할당하였다.

'==' 연산자를 사용하여 null 값과 비교할 경우, 변수값이 null 이든 undefined이든 모두 true를 리턴한다. 마찬가지로, '==' 연산자를 사용하여 undefined 값과 비교를 하면, 변수값이 null 이든, undefined 이든 모두 true를 리턴한다.

'===' 연산자를 이용한 null, undefined 비교 예제

JavaScript

let a; // undefined
let b = null; // null

console.log(a === null); // false
console.log(a === undefined); // true
console.log(b === null); // true
console.log(b === undefined); // false

'===' 연산자를 이용하여 비교할 경우, 정확하게 두 값이 일치할 경우에만 true를 리턴한다.

참고 문헌

[JavaScript] ️ Array.prototype.at() 사용법

Light9639 — Thu, 29 Jun 2023 20:24:18 +0900

자바스크립트 at() 메소드

2022부터 Array.prototype.at()이 표준 메소드로 채택되면서, 파이썬과 같이 간단하게 음수 인덱스를 사용하는 것이 가능해졌다. 메소드 at()의 추가는 성능적인 문제로 인해 개발되었다기 보다, 가독성면에서의 장점을 위해 추가된 기능이다.

at() 메소드는 정수 값을 받은 후, 배열에서 해당 값에 해당하는 인덱스의 요소를 반환하게 된다. 양수와 음수를 모두 지정할 수 있으며, 음수 값의 경우 배열의 뒤에서부터 인덱스를 센다.

또한 at() 메소드의 존재가 대괄호 표기법을 부정하는 것은 아니다. 예를 들어 array[0]은 문제 없이 배열의 첫 요소를 반환한다. 그러나 맨 마지막 요소를 가져오고 싶을 때는 length 속성을 사용해 array[array.length - 1]을 하는 대신, 짧게 array.at(-1)을 사용할 수 있다.

기존 방법

JavaScript

// 마지막 값을 얻기
const arrays = ['a','b','c','d'];

// array.length에서 1을 빼 마지막 인덱스 얻어서 사용
arrays[arrays.length - 1]; // 'd'

// 음수 인덱스를 지원하는 slice메소드 간접 사용
arrays.slice(-2, -1); // 'd'Copy

2022 표준 메소드

JavaScript

const arrays = ['a','b','c','d'];

console.log(arrays.at(-1)); // 'd

참고 문헌

[HTML] ️ <!DOCTYPE>이란 무엇인가?

Light9639 — Wed, 28 Jun 2023 21:46:01 +0900

<!DOCTYPE> 이란?

DOCTYPE은 document type의 약자로, 웹 문서가 어떠한 형식으로 작성되었는지 또는 최상단에 문서의 형식을 선언하는 것을 의미한다. DOCTYPE 선언의 형식은 HTML 태그는 아니지만, HTML 문서의 버전을 웹 브라우저에 알리며, 대소문자를 구분하지는 않지만 보통은 대문자로 사용하며, 일반적으로 HTML 태그보다 먼저 선언된다.

<!DOCTYPE> 선언의 목적

DOCTYPE을 선언하지 않으면 같은 내용의 HTML 문서라도 각 브라우저의 따라 전혀 다른 결과물을 출력하는 경우가 발생한다. 이 때문에 브라우저가 HTML 문서를 동일하게 인식할 수 있도록 하고, 문서 간의 호환성을 높이기 위해 선언을 해야 한다.

HTML5 버전과 그 이전버전의 차이

HTML5 이전에는 DOCTYPE을 선언하는 코드가 길고 간결하지 않아서 무슨 의미인지 파악이 힘들었지만, 현재는 HTML5의 등장으로 웹 표준으로 정착해서 사용하고 있으며, DOCTYPE을 간단하게 선언할 수 있다.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>에스제이 티스토리에 오신걸 환영합니다.</title>
</head>
<body></body>
</html>

[HTML4와 XHTML]의 DOCTYPE 선언 방법은 코드가 길고 문서 유형에 맞지 않게 HTML 코드를 사용할 경우 오류가 발생하기도 한다. 또한 각 브라우저마다 다르게 해석하여 다른 결과물 출력하는 경우가 발생한다. 각 DOCTPYE 선언 방법은 밑의 코드를 참고하면 된다.

HTML

<!-- STATIC MODE(엄격모드) : 문법을 정확하게 준수해야 하며, 문법에 안맞을 경우 오류 발생-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML

<!-- TRANSITIONAL MODE(호환모드) : HTML 문법에 오류가 있어도 허용한다 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML

<!-- FRAMESET MODE(프레임셋 모드) : FRAMESET를 사용할 경우 선언 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

HTML5 이전버전을 폐지하지 않는 이유

최신 버전으로 통일하여 HTML을 사용하면 좋다고 생각할 수 잇다. 그러나 HTML5 이전 버전을 폐지하지 않고 유지하는 이유는 과거에 작성된, 웹 자료의 보존이 필요하기 때문에 유지하고 있다고 한다.

참고 문헌

[JavaScript] var, let, const 차이점 총정리

Light9639 — Thu, 22 Jun 2023 18:07:54 +0900

자바스크립트에서의 변수

JavaScript

var Name = 'Kim';

자바스크립트에서 변수는 자료를 임시로 저장하는 공간이다.

var이라는 키워드 오른쪽에 작명을 하시고, 변수에 저장할 자료를 등호로 집어넣어주시면 됩니다.
오브젝트, 어레이, 함수 등 모든 자료들을 담을 수 있습니다.
그리고 var 이름이라는 부분은 선언, Name = Kim 이라는 부분은 값 할당이라고 전문 용어로 표현합니다. 보통 변수만들 땐 두개를 동시에 사용합니다.
그리고 변수를 만들 땐 var, let, const라는 3개 키워드를 이용가능합니다.

3개 키워드마다 특징이 있습니다. 변수의 선언, 할당, 범위에서 차이가 존재하는데 자세한 내용은 밑에 나와있다.

변수의 선언

JavaScript

var Name;
let Age;
const Gender;

이렇게 var, let, const 키워드를 이용하여 변수를 선언할 수 있다. 등호를 사용하지 않아도 변수를 만들 수 있다.

그런데 var 키워드는 재선언이 가능하고 let, const 키워드는 재선언이 불가능하다.

JavaScript

let Age;
let Age; //에러

const Gender = '여자';
const Gender = '남자'; //에러

let, const로 변수를 선언하면 같은 이름의 변수를 두번 이상 재선언할 시에 에러가 발생한다. 이 때문에 나중에 변수 이름을 실수로 중복해서 만드는 것을 방지할 수 있다.

변수의 값 할당

변수에 값을 할당한다는 것이 무슨 의미냐면, 밑의 코드 중 둘째줄에서 이렇게 만들어놓은 변수에 'Kim' 이라는 값을 집어넣는걸 할당이라고 한다.

JavaScript

var Name;
Name = 'Kim';

또한 할당도 선언과 동시에 할 수 있는데, 밑의 코드가 선언과 할당을 동시에 하는 방법이다.

JavaScript

var Name = 'Kim';

그런데 변수를 var, let으로 만들면 재할당이 가능하고 const로 만들면 값 재할당이 불가능하다. const로 변수 만들면 나중에 등호를 이용하여 값을 변경하는 것이 불가능하다 의미이다.

JavaScript

let Name = 'Kim';
Name = 'Park';  //가능

const Age = 30;
Age = 40; //에러

const는 애초에 constant의 약자로 바뀌지 않는 일정한 값을 뜻한다. 그래서 변경되면 안 될 값을 저장하고 싶을 때 사용하면 좋다.

다만 const 변수에 오브젝트를 담으면 오브젝트 내의 데이터는 변경 가능합니다.

JavaScript

const Object = { Name : 'Kim' }
Object.Name = 'Park'; //가능

위의 예제는 변수를 재할당한 것이 아니기 때문에 가능하다. 만약 완전히 변경이 불가능한 오브젝트를 만들고 싶다면 Object.freeze()라는 자바스크립트 기본함수를 사용하면 된다.

Object.freeze() 소괄호에 오브젝트를 담으시면 불변의 Object가 완성됩니다. 하지만 오브젝트 내의 오브젝트까지 freeze 해주진 않는다.

변수의 범위

변수를 만들면 존재범위가 있다. var 변수는 존재범위가 function이지만, let, const 변수는 존재범위가 거의 모든 {중괄호}이다. for, if, function 등등.

JavaScript

function Func(){
  var Name = 'Kim';
  console.log(Name); //가능
}

console.log(Name); //에러

위의 예제처럼 var 변수는 function 내에서 만들면 function 내에서만 쓸 수 있다. 만약 function 바깥에서 부르면 값이 없다고 나온다.

JavaScript

if ( 100 == 100 ){
  let Name = 'Kim';
  console.log(Name); //가능
}

console.log(Name); //에러

위의 예제처럼 let 변수는 {} 중괄호 내에서 만들면 중괄호 내에서만 쓸 수 있고, 중괄호 바깥에서 부르면 값이 없다고 나온다.

참고 문헌

[JavaScript] Math 메소드 총 정리

Light9639 — Wed, 21 Jun 2023 21:59:33 +0900

Math 객체

Math 객체는 수학에서 자주 사용하는 상수와 함수들을 미리 구현해 놓은 자바스크립트 표준 내장 객체이다.

Math 객체는 다른 전역 객체와는 달리 생성자(constructor)가 존재하지 않는다.

따라서 따로 인스턴스를 생성하지 않아도 Math 객체의 모든 메소드나 프로퍼티를 바로 사용할 수 있다.

Math 메소드

자바스크립트는 웹 브라우저상에서 수학적 작업을 손쉽게 할 수 있도록 다양한 Math 메소드를 제공하고 있다.

그 중에서 가장 많이 사용되는 대표적인 Math 메소드는 다음과 같다.

Math.min()
Math.max()
Math.random()
Math.round()
Math.floor()
Math.ceil()
Math.sin()

대부분의 Math 메소드는 웹 브라우저마다 다른 결과값을 얻을 가능성이 높다. 심지어 같은 자바스크립트 인터프리터라도 운영체제가 다르면 다른 결과값을 반환할 수 있다.

따라서 아주 정확한 결과값이 필요한 작업에는 Math 메소드는 사용하지 않는 것이 좋다.

Math.min() 메소드

Math.min() 메소드는 인수로 전달받은 값 중에서 가장 작은 수를 반환한다. 인수가 전달되지 않으면 Infinity를 반환하며, 인수 중에 비교할 수 없는 값이 포함되어 있으면 NaN을 반환한다.

JavaScript

Math.min();                              // Infinity
Math.min(1, 10, -100, -10, 1000, 0);     // -100
Math.min(1, 10, -100, -10, "-1000", 0);  // -1000
Math.min(1, 10, -100, -10, "문자열", 0); // NaN

Math.max() 메소드

Math.max() 메소드는 인수로 전달받은 값 중에서 가장 큰 수를 반환한다. 인수가 전달되지 않으면 -Infinity를 반환하며, 인수 중에 비교할 수 없는 값이 포함되어 있으면 NaN을 반환한다.

JavaScript

Math.max();                              // -Infinity
Math.max(1, 10, -100, -10, 100, 0);      // 100
Math.max(1, 10, -100, -10, "1000", 0);   // 1000
Math.max(1, 10, -100, -10, "문자열", 0); // NaN

Math.random() 메소드

Math.random() 메소드는 0보다 크거나 같고 1보다 작은 무작위 숫자(random number)를 반환한다.

JavaScript

var min = 10, max = 20;
Math.random();                     // [0, 1)
Math.random() * (max - min) + min; // [min, max)

위의 예제에서 사용된 '['기호는 '크거나 같은'을 나타내며, ']'기호는 '작거나 같은'을 나타내는 기호이다. 또한, '('기호는 '보다 큰'을 나타내며, ')'기호는 '보다 작은'을 나타내는 기호이다.

Math.round() 메소드

Math.round() 메소드는 인수로 전달받은 값을 소수점 첫 번째 자리에서 반올림하여 그 결과값을 반환한다.

JavaScript

Math.round(10.49);  // 10
Math.round(10.5);   // 11
Math.round(-10.5);  // -10
Math.round(-10.51); // -11

Math.floor() 메소드

Math.floor() 메소드는 인수로 전달받은 값과 같거나 작은 수 중에서 가장 큰 정수를 반환한다.

JavaScript

Math.floor(10.95);  // 10
Math.floor(11.01);  // 11
Math.floor(-10.95); // -11
Math.floor(-11.01); // -12

Math.ceil() 메소드

Math.ceil() 메소드는 인수로 전달받은 값과 같거나 큰 수 중에서 가장 작은 정수를 반환한다.

JavaScript

Math.ceil(10.95);  // 11
Math.ceil(11.01);  // 12
Math.ceil(11);     // 11
Math.ceil(-10.95); // -10
Math.ceil(-11.01); // -11

Math.sin() 메소드

Math.sin() 메소드는 인수로 전달받은 값의 사인(sine) 함숫값을 반환한다.

JavaScript

Math.sin(0);           // 0
Math.sin(Math.PI / 2); // 1

자바스크립트에서 제공하는 삼각 함수에 관한 모든 메소드는 각도의 단위로 라디안(radian)을 사용한다. 이때 라디안 단위와 60분법 단위를 서로 변환하기 위해서는 다음과 같은 공식을 사용한다.

JavaScript

라디안값 = 60분법값 * (Math.PI / 180)

Math.PI는 수학에서 사용하는 파이(π)값을 나타내는 자바스크립트 상수입니다. 따라서 대략적인 값으로 3.145159를 나타낸다.

자바스크립트 Math 메소드

메소드설명

메소드	설명
Math.min(x, y, ...)	인수로 전달받은 값 중에서 가장 작은 수를 반환함.
Math.max(x, y, ...)	인수로 전달받은 값 중에서 가장 큰 수를 반환함.
Math.random()	0보다 크거나 같고 1보다 작은 랜덤 숫자(random number)를 반환함.
Math.round(x)	x를 소수점 첫 번째 자리에서 반올림하여 그 결과를 반환함.
Math.floor(x)	x와 같거나 작은 수 중에서 가장 큰 정수를 반환함.
Math.ceil(x)	x와 같거나 큰 수 중에서 가장 작은 정수를 반환함.
Math.abs(x)	x의 절댓값을 반환함.
Math.cbrt(x)	x의 세제곱근을 반환함.
Math.sqrt(x)	x의 제곱근을 반환함.
Math.clz32(x)	x을 32비트 이진수로 변환한 후, 0이 아닌 비트의 개수를 반환함.
Math.exp(x)	ex 의 값을 반환함. (e : 오일러의 수)
Math.expm1(x)	1 - ex 의 값을 반환함.
Math.fround(x)	x와 가장 근접한 32비트 부동 소수점 수(single precision float)를 반환함.
Math.hypot(x, y, ...)	인수로 전달받은 값들을 각각 제곱한 후 더한 총합의 제곱근을 반환함.
Math.imul(x, y)	인수로 전달받은 두 값의 32비트 곱셈의 결과를 반환함.
Math.log(x)	x의 자연로그 값을 반환함. (ln x)
Math.log1p(x)	ln(1 + x)의 값을 반환함.
Math.log10(x)	x의 10을 밑으로 가지는 로그 값을 반환함.
Math.log2(x)	x의 2를 밑으로 가지는 로그 값을 반환함.
Math.pow(x, y)	x의 y승을 반환함.
Math.sign(x)	x의 부호 값을 반환함.
Math.trunc(x)	x의 모든 소수 부분을 삭제하고 정수 부분만을 반환함.
Math.sin(x), Math.cos(x), Math.tan(x),Math.asin(x), Math.acos(x), Math.atan(x), Math.asinh(x), Math.acosh(x), Math.atanh(x), Math.atan2(x)	x의 해당 삼각 함숫값을 반환함.

자바스크립트 Math 프로퍼티

프로퍼티	설명	값
Math.E	오일러의 수(Euler's constant)라고 불리며, 자연로그(natural logarithms)의 밑(base) 값	2.718
Math.LN2	2의 자연로그 값	0.693
Math.LN10	10의 자연로그 값	2.303
Math.LOG2E	오일러 수(e)의 밑 값이 2인 로그 값	1.443
Math.LOG10E	오일러 수(e)의 밑 값이 10인 로그 값	0.434
Math.PI	원의 원주를 지름으로 나눈 비율(원주율) 값	3.14159
Math.SQRT1_2	2의 제곱근의 역수 값	0.707
Math.SQRT2	2의 제곱근 값	1.414

참고 문헌

[Git] 자주 쓰는 Git 명령어 총 정리

Light9639 — Mon, 19 Jun 2023 14:52:53 +0900

시작하며

자주 쓰는 git 명령어를 git commands cheat sheet를 참고하여 정리해보자. 자세한 내용은 git-scm 공식 사이트가 더 정리가 잘 되어있다.

Git

git-scm.com

git으로 새로운 프로젝트를 시작하려고 하면 프로젝트 생성하기로 이동하면 된다. 또는 필요한 명령어나 자주 쓰는 명령어만 찾아서 프로젝트에 사용하면 된다.

자주 쓰는 Git Command

Shell

# 현재 directory 의 모든 파일을 Staging Area 로 이동
git add .

# file 들의 tracking 상태 보기
git status

# Staging 의 파일들 commit 하기
git commit -m "messsage"

# 저장소에 commit 반영하기
git push

# 저장소에서 commit 가지고 오기
git pull

# remote origin의 development branch merge
git merge origin/development

# 한 줄로 그래프 형태로 commit 히스토리 보기
git log --oneline --graph

# remote에서 삭제된 brach를 local 에서도 깔끔하게 삭제
git fetch origin --prune

Setup 초기 설정

사용자 이름, Email 설정

시작 전에 사용자 이름과 Email을 설정한다.

Shell

git config --global user.name “[firstname lastname]”
git config --global user.email “[valid-email]”

출력 색상 변경

출력되는 command line를 읽기 쉽도록 자동으로 색상을 설정한다.

Shell

git config --global color.ui auto

사용자 설정 정보 확인

전체 설정 정보 확인을 위해 아래 명령어를 실행하거나 혹은 .gitconfig 파일을 확인한다.

Shell

git config --list

사용자 정보는 아래와 같이 확인한다.

Shell

git config --global user.email
git config --global user.name

Git 프로젝트 생성하기, 가져오기

아래 두 가지 방법 중 한가지로 Git 저장소를 시작할 수 있다.

아직 버전관리를 하지 않는 로컬 디렉토리 하나를 선택해서 Git 저장소를 적용하는 방법
다른 어딘가에서 Git 저장소를 Clone 하는 방법

git init: 기존 디렉토리를 Git 저장소로 만들기

프로젝트 directory로 가서 git init을 실행하면 새로운 Git 저장소가 만들어진다.

Shell

# 프로젝트 directory로 이동
cd [my_project path]

# README 파일 생성
echo "# my_project" >> README.md

# git 저장소로 등록
git init

# 관리할 file을 Staging Area 추가
git add README.md

# Staging Area 에 추가된 파일 commit
git commit -m "first commit"

# 최초 등록된 master branch 대신 main branch 사용하도록 변경
git branch -M main

# 원격 remote repository에 추가
git remote add origin [git URL]

# git push
git push -u origin main

git clone: git repository 가져오기

기존에 사용 중인 저장소를 clone 해서 가져올 수 있다.

Shell

git clone [url]

Snapshot 스냅샷 다루기

Git 스냅샷 즉 특정 상태의 버저닝을 생성한다. Staging Area에 파일을 추가하고 commit, push 정도만 알면 된다.

git add

working directory에서 파일/폴더를 Staging Area(“index”)에 등록하여 git으로 관리를 시작한다.

Shell

git add [file]

git status

Git의 현재 상태 확인한다. Staging Area, UnStage Area 에 있는 파일 및 Untracked 상태의 파일을 확인 할 수 있다.

Shell

git status

git diff

git diff 명령은 두 트리 개체의 차이를 보고 싶을 때 사용한다.

Shell

# stage 되지 않은 변경 비교
git diff

# stage 되어 있으나 아직 commit 되지 않은 변경 비교
git diff --staged

git commit

git commit 명령은 Staging Area의 모든 파일을 커밋한다. 저장소에는 하나의 스냅샷으로 기록된다. 그 뒤 현재 Branch가 새 커밋을 가리키게 한다.

Shell

git commit -m “[커밋 상세 메시지]”

--amend 옵션으로 최근 커밋을 재작성할 수 있다.

Shell

git commit --amend

아래와 같이 commit에 깜박한 파일이 있으면 아래와 같이 수정 가능하다. 이렇게 --amend 옵션으로 커밋을 수정하는 작업은 이전의 커밋을 완전히 새로 고쳐서 새 커밋으로 변경하는 것을 의미한다. 이전 커밋은 일어나지 않은 일이 되는 것이고 당연히 히스토리에도 남지 않는다.

Shell

git commit -m 'initial commit'
git add forgotten_file
git commit --amend

git reset

git reset 명령은 되돌리는(Undo) 명령이다. git reset 명령은 기록이 없어질 수 있어서, 위험하므로 주의하여 사용해야 한다.

Shell

# Staged 상태의 파일을 Unstage 로 변경
git reset

# staging area가 초기화되고 working tree를 특정 커밋시점으로 덮어쓰기 
git reset --hard [commit]

# 이전 Head 시점으로 초기화. working directory, 최근 commit 이력이 삭제된다.
git reset --hard HEAD^

git rm

Staging Area나 Working directory에 있는 파일을 삭제한다.

Shell

git rm [file]

git mv

파일/폴더의 이름을 변경한다.

Shell

git mv [existing-path] [new-path]

mv 명령어는 사실 아래와 같이 동작한다. 즉, 이름이 변경된 파일을 삭제하고 다시 add 하는 것과 똑같다.

Shell

mv README.md README
git rm README.md
git add README

git clean

working directory에서 필요 없는 파일을 삭제한다. 충돌로 생긴 파일이나 build artifact 파일을 삭제할 때 편리하다.

Shell

git clean

Branch와 Merge

git branch

branch를 관리하는 명령어이다.

Shell

# branch 목록 조회, *가 현재 branch 
git branch

# 원격 branch 목록 조회
git branch -r 

# 전체 branch 목록 조회
git branch -a

신규 branch를 생성한다.

Shell

# branch 생성
git branch [branch-name]

Branch를 변경하고 해당 파일을 Working directory로 복사한다.

Shell

# branch checkout
git checkout

git merge

다른 Branch를 현재 Checkout된 Branch에 Merge 한다. Merge 하고 나서 현재 Branch가 Merge 된 결과를 가리키도록 옮긴다.

Shell

# 특정 branch를 현재 checkout 된 branch에 merge
git merge [branch]

# remote origin의 main branch merge
git merge origin/main

# local 저장소의 main branch merge
git merge main

log

git log

commit 히스토리를 시간의 역순으로 보여준다.

Shell

# 커밋 히스토리를 시간 순으로 조회
git log

# 최근 number개만 노출
git log -[number]

# oneline 으로 히스토리 노출
git log --oneline

# graph 로 출력
git log --graph

공유 & 업데이트

git fetch

로컬 저장소에 있는 것을 뺀 remote 저장소의 모든 것을 가져온다.

Shell

git fetch [remote]

--prune 옵션으로 remote 저장소에 지워진 브랜치를 local 반영하여 local의 불필요한 branch를 삭제한다.

Shell

git fetch --prune

git pull

remote의 commit을 가져오고 병합한다. git fetch와 git merge 명령을 순서대로 실행하는 것과 같다.

Shell

git pull

git push

로컬 저장소의 commit 내역을 remote 저장소로 전송한다. -u 옵션은 upstream repository를 설정해준다. 즉, 한번 설정한 후로는 git push, git pull 만 간단히 사용할 수 있다.

Shell

git push [remote] [branch]

git push -u origin main

git remote

원격 저장소 설정 관리 도구를 의미한다.

Shell

#  현재 프로젝트에 등록된 리모트 저장소를 확인
git remote

# 단축이름과 URL을 함께 조회
git remote -v

# git url 에 remote(저장소) 이름으로 등록한다.
git remote add [remote] [url]

git remote add origin https://github.com/cusbert/TIL.git

임시 저장

git stash

git stash은 현재 작업을 임시 저장할 때 사용한다.

예를 들어 A라는 작업을 진행하다가 잠깐 다른 B 작업을 우선 할 일이 생겼을 때 A를 커밋하지 않고 Stash 했다가 B를 끝낸 후 다시 A라는 작업을 진행 할 수 있다. 즉, Branch에 관계없이 아직 끝나지 않은 수정사항을 스택에 잠시 임시로 저장했다가 나중에 다시 적용하는 방식이다.

Shell

# modified, staged 변경 내용 임시 저장 
git stash

# stashed 조회
git stash list

# stash 내역 working directory로 추가
git stash pop

# stash file 제거
git stash drop

참고 문헌

[Node.js] ️ Babel 소개 및 사용법

Light9639 — Sun, 18 Jun 2023 17:25:56 +0900

Babel 이란?

Babel이란 최신 ES6, ES7 버전의 JavaScript 코드를, ES5버전의 코드로 바꾸어주는 Node.js 패키지를 의미한다.

Babel을 사용해야 하는 이유

계속해서 변화하는 JavaScript의 최신 코드를 이해하지 못하는 웹 브라우저의 문제를 해결하기 위하여, 또는 컴퓨터만이 아니라, 스마트폰에서 사용하는 브라우저에서도 자바스크립트 코드를 작동되도록 만들어주기 때문에 사용해야 한다.

Babel 작동방식

Babel은 여러개의 플러그인이, 자신이 이해할 수 있는 ESNext 문법만 골라, 컴파일하는 방식으로 작동된다.

ESNext 구문을 Babel 플러그인으로 보낸다.
여러개의 Babel 플러그인이 파이프라인 형태로 차례대로 실행한다.
Babel 플러그인이 이해할 수 있는 구문을 ES5 코드로 컴파일한다.

Babel 설치

Babel을 설치하는 방법은 밑의 코드를 참고하여 따라하면 된다.

Shell

# @babel/node : Node.js 커멘드 라인에서 사용하는 명령어를 사용할 수 있게 해준다 ( node > babel-node )

npm install @babel/node


# @babel/core : 바벨의 핵심기능이 담겨있는 기본 라이브러리 

npm install @babel/core


# @babel/cli : 커맨드 라인에서 바벨을 실행할 수있는 라이브러리

npm install @babel/cli


# @babel/preset-"" : ESNext코드를 컴파일 해주는 플러그인 모음 설치

npm install @babel/preset-env (기본 js코드 검사)

npm install @babel/preset-flow (플로우 코드 검사)

npm install @babel/preset-typescript (타입스크립트 코드 검사)

npm install @babel/preset-react (리액트 코드 검사)

Shell

// 바벨 핵심기능, Node.js 명령줄 모드, 기본 js코드 검사 규칙 설치하기
npm install -D @babel/core @babel/node @babel/preset-env

Babel 사용법

Babel 설정 파일 만들기

.bablerc 파일을 생성한 뒤 밑의 코드대로 작성한다.

JavaScript

// .babelrc

{
    "presets" : ["@babel/preset-env"]
}

// 기본 javascript 방식으로 바꾸어준다.

Babel 사용해 ES5 코드로 바꾸기

JavaScript

babel src/js -w -d dist/js


// "src/js" 폴더에 있는 모든 ES6+ 파일들을 번들로 만들어, 그 결과를 "dist/js"폴더에 저장
// -w : 폴더에 있는 모든 파일 변경감지, 자동 변경 (--watch)
// -d : 결과 출력 폴더 지정 (--out-dir)


babel script.js -o compiled.js -s

// -o : 결과를 파일로 출력 (--out-file)
// -s : 난독화된 코드를 다시 읽기 좋게 바꾸는, 소스 맵 파일을 추가 (--source-maps)
// -s inline : 인라인(한줄씩) 소스 맵 사용


// --ignore "src/*" : "src폴더 안에 있는 모든 파일을 무시한다.
// --plugins=@babel/proposal-class : 컴파일 할때 사용할 플러그인 불러오기


// --copy-files --no-copy-ignored : 컴파일 안되는 파일 복사?
// --out-file "*.js" < "*.js" : 파이핑?

Babel 사용해, Node.js 서버 실행하기

Shell

babel-node <Node서버>

// Node.js 서버의 최신 js코드를, es5 같은 호환성좋은 코드로 변환후, 서버까지 실행해준다.

Babel 사용시 발생오류 해결법

Shell

// browserslist: caniuse-lite is outdated

npx browserslist@latest --update-db

참고 문헌

[Node.js] package.json 이란❓

Light9639 — Sun, 18 Jun 2023 17:13:12 +0900

package.json이란?

package.json이란 현재 프로젝트에 관한 정보와 패키지 매니저(npm, yarn)을 통해 설치한 모듈들의 의존성을 관리하는 파일이다.

JavaScript

{
  "name": "tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

이름처럼 JSON 포맷으로 이루어져 있다.

생성방법

package.json을 생성하려면 다음 명령어를 통해 생성할 수 있다.

Shell

npm init // 프로젝트명, 설명 등 작성할 내용이 있을 경우
npm init -y // 입력할 내용없이 package.json 생성


yarn init
yarn init -y

package.json의 기본 정보

기본 정보란 package.json을 자동으로 생성할 때(npm init), -y를 명령어를 붙이지 않은 경우 입력하게 되는 것들을 나타낸다.

name, version, description, author, license 등을 입력할 수 있는데, 프로젝트에 대한 간략한 내용을 입력할 수 있다. 처음 생성할 때 입력하지 않은 경우에 추후에 package.json을 변경하여 입력할 수 있다.

버전관리

의존성 모듈을 설치하게 되면 dependencies안에 해당 모듈의 버전과 이름이 추가된다.

JavaScript

{
  "name": "tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "dependencies": {
    "react": "^17.0.2", // react 설치 결과
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

특정 버전인 경우

JavaScript

"react": "17.0.2"

Tilde Ranges(~)

JavaScript

"react": "~17.0.2"

Tilde Ranges(~)의 경우에는 마이너 버전이 명시되어 있으면 패치버전만 변경하며 버전을 적용한다.

예를 들어 ~17.0.2인 경우, 17.0.9까지 버전을 갱신한다. ~0일 경우는 0.0.0부터 0.9.9까지 버전을 갱신한다.

Caret Ranges(^)

JavaScript

"react": "^17.0.2"

Caret Ranges(^)의 경우에는 정식버전에서 마이너버전과 패치버전을 변경하며 버전을 적용한다.

예를 들어 ^17.0.2인 경우, 17.9.9까지 버전을 갱신하다. ^0일 경우는 0.0.0부터 0.0.9.까지 버전을 갱신한다.

의존성 모듈 설치

package.json은 의존성을 모듈로 관리하는 하나의 파일이다. 즉, 모듈들이 차곡차곡 쌓일 수록 dependencies에는 다양한 내용들이 추가된다. 이 파일 하나로 프로젝트에 필요한 모듈들을 한번에 설치할 수 있다.

Shell

npm install

위의 명령어를 통해 package.json - dependencies에 명시되어 있는 모듈들의 버전에 따라 설치를 진행하게 된다.

참고 문헌

[Git] git add * git add .

Light9639 — Sun, 18 Jun 2023 17:09:00 +0900

**git add * / git add . 차이점**

둘다 현재 디렉토리에 있는 모든 파일을 스테이징 하는 것이지만, 사소한 차이가 있다.

git add * 는 .gitignore 파일에 있는 파일들도 stage로 올리는 것
git add . 는 ..gitignore 파일에 있는 파일명들은 제외하고 stage에 올리는 것

Tip

따라서 .gitignore를 사용한다면 git add .를 사용하면 된다.

참고 문헌

[Git] git push -u 옵션 이란❓

Light9639 — Sun, 18 Jun 2023 17:03:42 +0900

git push -u

파일을 깃허브에 반영하기 위해 git push 를 이용할 때 git push -u "원격저장소" "현재 브랜치명"와 같이 -u 옵션을 쓸때가 있다.

Shell

$ git push -u origin masterCopy

-u 옵션을 적어주면 앞으로, master 라는 현재 브랜치를 자동으로 origin 이라는 원격저장소의 master 브랜치로 연결할 수 있다.

간단히 git push 만 입력하여 반영하거나 git pull 을 입력할 때 origin이라는 원격저장소의 master 브랜치를 로컬 저장소의 master 브랜치로 merge 할수 있게 해주겠다는 의미이다.

따라서 이제 간단히 아래와 같은 식으로 원격저장소와 로컬 저장소를 자동 연결하여 사용할수 있다.

Shell

$ git push

$ git pullCopy

[Node.js] bcrypt 모듈 암호화 사용법.

Light9639 — Sun, 18 Jun 2023 16:45:00 +0900

Bcrypt란?

hash 함수를 이용해 정보를 암호화 할 수 있도록 해주는 Node.js 패키지가 바로 Bcrypt이다.

Bcrypt의 필요성

MD5 방식의 해시함수는 빠르기는 하지만 보안이 약하기 때문에 해킹이 취약하다. SHA 방식의 해시함수는 안전하기는 하나, 암호화하는데 시간이 너무 오래 걸린다. 공유 메시지 ( salt )를 입력값에 추가하는 방식은 무차별 대입 공격을 막아주지는 못한다. bcrypt는 사용자가 보안도와 속도를 유동적으로 정할 수 있다.

해시 함수 별 성능 비교
해시 함수	MD5	bcrypt	느림
보안	약함	중간	느림
속도	빠름	중간	느림

Bcrypt 사용법

Bcrypt 설치하기

Shell

npm i bcrypt

비밀번호 만들고 암호화 하기

JavaScript

//index.js

// bcrypt 불러오기 - commonjs
const bcrypt = require("bcrypt")

// 해시 함수로 비밀번호 암호화해서 변수에 저장하기
const encrypted = bcrypt.hash("비밀번호", 해시함수 반복 횟수)

// 암호화된 내용 확인하기
console.log(encrypted)

비밀번호 맞는지 확인하기

JavaScript

// index.js

//위의 내용과 이어짐...

// 새로 입력한 비밀번호가, 암호화 된 비밀번호와 일치하는지 확인하기
const passwordOk = bcrypt.compare("비밀번호", encryted)

// 비밀번호가 일치하면 true, 일치하지 않으면 false를 반환한다.
console.log("비밀번호 일치 여부 : ",passwordOk)

그 외의 기능

JavaScript

// 랜덤 공유메시지 생성하기
bcrypt.genSalt(반복횟수, bcrypt버전)

// 비동기 방식으로 hash 함수 사용하기
bcrypt.hashSync("비밀번호", 반복 횟수)

참고 문헌

[Markdown] ️ 마크다운 작성 문법 총 정리

Light9639 — Fri, 16 Jun 2023 16:55:58 +0900

개요

일반적으로 널리 사용되는 워드프로세서는 마이크로소프트 오피스의 워드(Word)이다. 하지만 이런 워드 파일을 복사 (Ctrl + C) 해서 텍스트(일반적인 메모장) 문서에 붙여넣기 (Ctrl + V) 하게 되면 기존에 적용된 서식 등이 모두 사라지게 되는 문제가 있다.

하지만 이 마크다운을 사용하여 작성을 하게 되면 일반적인 텍스트 기호를 사용하여 서식 등이 적용되기 때문에 플랫폼간 가공이 매우 용이하다는 장점이 있으며, .md 확장자로 저장하면 보관도 매우 쉬운 편이다.

마크다운 장점

단순하고 간결한 편이다.
에디터 없이 어디서든 작성이 가능하다.
텍스트 기반으로 사용할 수 있다.
- 용량이 작고 백업이 간편 합니다.
- 버전 관리 시스템(Git, svn 등)에서 사용이 용이 합니다.
마크다운으로 작성한 글을 다양한 포맷으로 손쉽게 변경 할 수 있습니다.
사용 범위가 점점 더 확대 되고 있다.

마크다운 단점

표준 문법으로 존재하지 않는다.
- 기본 마크다운 서식과 추가된 서식이 같이 존재하고 이 또한 정해진 규약이 없다.
- 그래서 어느 곳에서는 사용이 가능하고 반대로 어느 곳에서는 사용이 되지 않는 상황이 발생할 수 있다.
- 동일한 문법이지만 아예 다른 방식으로 출력되는 경우도 종종 발생한다.
모든 HTML의 문법을 대신할 수는 없다.
- 색상 코드를 적용 할 수 없는 등 완벽하게 지원되지 않는다.
추가적인 마크다운 기호를 입력해야 하기 때문에 누군가에게는 번거롭다고 느껴질 수 있다.

텍스트 관련 문법

제목 강조(Headers)

Html의 h1~h6와 유사한 문서의 제목등을 강조할 때는 # ~ ###### 처럼 맨앞에 #의 갯수로 조절합니다.

사용 방법

Markdown

# 이것은 h1과 유사합니다.
## 이것은 h2과 유사합니다.
### 이것은 h3과 유사합니다.
#### 이것은 h4과 유사합니다.
##### 이것은 h5과 유사합니다.
###### 이것은 h6과 유사합니다.

실행 결과

문장의 중간을 강조 방법 (bold와 italic)

문장의 중간에 강조하는 방법이 두가지가 있는데 두껍게(Bold) 하는 방법과 기울리기(italic)의 방법이 있습니다.

사용 방법

Markdown

별표 한개로 강조할 문자를 감싸면 *기울림꼴*이 됩니다.
언더바 한개를 사용해도 _기울림꼴_로 만들 수 있습니다.
별표 두개로 강조할 문자를 감싸면 **두껍게** 됩니다.
언더바 한개를 사용해도 __두껍게__ 만들 수 있습니다.
_그리고  **이 두가지를** 섞어서 _ 사용할 수 있습니다.

실행 결과

별표 한개로 강조할 문자를 감싸면 기울림꼴이 됩니다.
언더바 한개를 사용해도 _기울림꼴_로 만들 수 있습니다.
별표 두개로 강조할 문자를 감싸면 *두껍게** 됩니다.
언더바 한개를 사용해도 두껍게 만들 수 있습니다.
**그리고 이 두가지를 섞어서 사용할 수도 있습니다.

취소선(Strike) 사용

문장 중간에

~~취소선을~~

넣을 수 있습니다.

사용 방법

Markdown

물결 두개로 취소할 문자들을 감싸면 ~~취소선~~이 생깁니다.

실행 결과

물결 두개로 취소할 문자들을 감싸면

~~취소선~~

이 생깁니다.

하이퍼링크(Link)를 거는 방법

문서 중간에 http://~의 링크를 파악하면 자동으로 걸리기는 하지만 텍스트로 변환하여 걸수도 있습니다.

사용 방법

Markdown

[여기를 클릭](https://light9639.tistory.com)하면 제 홈페이지로 이동하지요 :)

실행 결과

여기를 클릭하면 제 홈페이지로 이동하지요 :)

텍스트 관련 문법 두번째

인용구 (Quote)

다른 문구나 외부를 참고할 때 사용하라는 목적으로 만든 인용구를 사용할 수 있습니다. 인용구로 적은 부분은 왼쪽에 라인이 생기며 글자색이 회색으로 변경됩니다.

사용 방법

Markdown

> 여기에 인용된 문구를 적습니다

실행 결과

여기에 인용된 문구를 적습니다.

코드 블럭

프로그램 소스 코드를 입력하다보면 다양한 기호 때문에 원치않는 내용이 출력 될수 있습니다. 이 방법을 사용하면 입력된 문자열 그대로를 사용합니다.

단, 작은 따옴표 기호가 아님에 주의하세요. 숫자 1키 옆에 있는 기호입니다.

사용 방법

실행 결과

Markdown

#include<stdio.h>
int main(){
  printf("hello world");
}

프로그래밍 구문 강조

프로그래밍 언어별 Syntax를 강조해 주는 기능도 있습니다. 첫번째 라인 기호 바로 뒤에 강조할 프로그래밍 언어를 적으면 된다.

사용 방법

실행 결과

Markdown

#include<stdio.h>
int main(){
  printf("hello world");
}

:information_source: 강조되는 언어 목록은 다음 링크를 참고해 주세요

문장 중간 코드 블럭

위와 같은 코드 블럭을 중간 중간에도 사용합니다. 깃허브를 보면 Ctrl+A와 같이 단축키에도 많이 쓰입니다.

사용 방법

Markdown

문구 중간에도 사용이 `이렇게 하면` 가능합니다.

실행 결과

문구 중간에도 사용이 이렇게 하면 가능합니다.

리스트와 테이블

리스트

크게 순서가 있는 목록과 없는 목록으로 나뉩니다.

사용 방법

Markdown

1. 이것은
2. 순서가
3. 있는
4. 목록입니다

- 이것은
- 순서가
- 없는
- 목록입니다

1. 이것은
2. 두개의
  - 목록을
  - 섞어서
  - 사용할 수
3. 있음을
4. 보여줍니다

실행 결과

이것은
순서가
있는
목록입니다

이것은
순서가
없는
목록입니다

이것은
두개의
- 목록을
- 섞어서
- 사용할 수
있음을
보여줍니다

체크 리스트

마크다운 문법에서는 조금 더 독특한 형태의 체크박스 형식의 리스트도 만들 수 있다.

사용 방법

Markdown

- [ ] 아이폰
- [x] 안드로이드
- [x] 블랙베리
- [ ] 윈도우폰

실행 결과

아이폰
안드로이드
블랙베리
윈도우폰

테이블

마크다운에서는 조금 더 복잡한 테이블의 형태도 작성이 가능하다.

사용 방법

Markdown

Header1 | Header2 | Header3
------- | ------- | -------
 C1-1 | C1-2 | C1-3
 C2-1 | C2-2 | C2-3
 C3-1 | C3-2 | C3-3

실행 결과

Header1	Header2	Header3
C1-1	C1-2	C1-3
C2-1	C2-2	C2-3
C3-1	C3-2	C3-3

이미지와 이모티콘 사용하기

이미지 추가하기

외부 이미지를 표시하고 싶을 경우에 링크와 비슷한 문법을 사용하여 이미지를 나타낼 수 있다.

사용 방법

Markdown

![홈페이지 로고](http://sbsoft.kr/home/images/logo_l.png)

실행 결과

이모티콘 사용하기

개인적인 이미지 이외에 미리 준비된 이모티콘을 사용할 수 있다. 콜론으로 준비된 이모티콘의 별칭을 묶어서 입력하면 가능하다.

사용 방법

Markdown

나는 :kr:에서 :satisfied:를 사용하는 :alien:입니다

실행 결과

나는 에서 를 사용하는 입니다

마크다운 에디터

마크다운 문법은 메모장을 켜서 작업을 해도 무리없이 작성 가능하지만 작업 속도 향상을 위해 에디터를 사용하는 것이 좋다.

에디터는 사용한 마크다운을 랜더링하여 에디터 상에 실시간으로 보여주며, 단축키 등을 사용하여 마크다운 문법을 빠르게 사용할 수 있다.

Typora

Typora — a markdown editor, markdown reader.

Readable & Writable Typora gives you a seamless experience as both a reader and a writer. It removes the preview window, mode switcher, syntax symbols of markdown source code, and all other unnecessary distractions. Instead, it provides a real live preview

typora.io

일일히 타이핑했던 문법을 자동으로 완성해줘서 작업시간이 엄청 단축되는 것을 확인할 수 있다. 그리고 군더더기 없는 디자인도 이 에디터를 쓰게 하는 이유 중 하나이다. 무료로 사용할 수 잇으니 마크다운을 처음 사용하는 사람들에게 매우 유용하다.

VSCode - Dark Github Markdown Pack

Dark Github Markdown Pack - Visual Studio Marketplace

Extension for Visual Studio Code - Replaces VS Code's Markdown preview with GFM's rendering & dark theme.

marketplace.visualstudio.com

VsCode에서 바로 마크다운 미리보기 기능을 사용할 수 있는 확장프로그램이다.

참고 문헌

[Markdown] ️ 마크다운 emoji 이모티콘 사용법

Light9639 — Tue, 13 Jun 2023 19:06:09 +0900

마크다운 Emoji 이모티콘

마크다운 문서에서 이모티콘을 이모지를 이용하여 표현할 수 있다.
깃허브 문서에도 문제없이 사용이 가능하다.
마크다운 문법에 : : 사이에 이모티콘명을 넣으면 자동으로 인식된다.

마크다운 이모지 종류 표

밑의 작성된 표들을 참고하거나, 아래 사이트에서 이모지를 참고해 사용해도 된다.

Emoji Cheat Sheet

Emoji codes used by GitHub, Basecamp, Slack and other services. Searchable. With emoji meanings.

www.webfx.com

People

`:bowtie:`	`:smile:`	`:laughing:`
`:blush:`	`:smiley:`	☺️ `:relaxed:`
`:smirk:`	`:heart_eyes:`	`:kissing_heart:`
`:kissing_closed_eyes:`	`:flushed:`	`:relieved:`
`:satisfied:`	`:grin:`	`:wink:`
`:stuck_out_tongue_winking_eye:`	`:stuck_out_tongue_closed_eyes:`	`:grinning:`
`:kissing:`	`:kissing_smiling_eyes:`	`:stuck_out_tongue:`
`:sleeping:`	`:worried:`	`:frowning:`
`:anguished:`	`:open_mouth:`	`:grimacing:`
`:confused:`	`:hushed:`	`:expressionless:`
`:unamused:`	`:sweat_smile:`	`:sweat:`
`:disappointed_relieved:`	`:weary:`	`:pensive:`
`:disappointed:`	`:confounded:`	`:fearful:`
`:cold_sweat:`	`:persevere:`	`:cry:`
`:sob:`	`:joy:`	`:astonished:`
`:scream:`	`:neckbeard:`	`:tired_face:`
`:angry:`	`:rage:`	`:triumph:`
`:sleepy:`	`:yum:`	`:mask:`
`:sunglasses:`	`:dizzy_face:`	`:imp:`
`:smiling_imp:`	`:neutral_face:`	`:no_mouth:`
`:innocent:`	`:alien:`	`:yellow_heart:`
`:blue_heart:`	`:purple_heart:`	❤️ `:heart:`
`:green_heart:`	`:broken_heart:`	`:heartbeat:`
`:heartpulse:`	`:two_hearts:`	`:revolving_hearts:`
`:cupid:`	`:sparkling_heart:`	✨ `:sparkles:`
⭐ `:star:`	`:star2:`	`:dizzy:`
`:boom:`	`:collision:`	`:anger:`
❗ `:exclamation:`	❓ `:question:`	❕ `:grey_exclamation:`
❔ `:grey_question:`	`:zzz:`	`:dash:`
`:sweat_drops:`	`:notes:`	`:musical_note:`
`:fire:`	`:hankey:`	`:poop:`
`:shit:`	`:+1:`	`:thumbsup:`
`:-1:`	`:thumbsdown:`	`:ok_hand:`
`:punch:`	`:facepunch:`	✊ `:fist:`
✌️ `:v:`	`:wave:`	✋ `:hand:`
✋ `:raised_hand:`	`:open_hands:`	☝️ `:point_up:`
`:point_down:`	`:point_left:`	`:point_right:`
`:raised_hands:`	`:pray:`	`:point_up_2:`
`:clap:`	`:muscle:`	`:metal:`
`:fu:`	`:walking:`	`:runner:`
`:running:`	`:couple:`	`:family:`
`:two_men_holding_hands:`	`:two_women_holding_hands:`	`:dancer:`
`:dancers:`	‍♀️ `:ok_woman:`	`:no_good:`
`:information_desk_person:`	`:raising_hand:`	‍♀️ `:bride_with_veil:`
:person_with_pouting_face: `:person_with_pouting_face:`	:person_frowning: `:person_frowning:`	`:bow:`
`:couplekiss:`	`:couple_with_heart:`	`:massage:`
`:haircut:`	`:nail_care:`	`:boy:`
`:girl:`	`:woman:`	`:man:`
`:baby:`	`:older_woman:`	`:older_man:`
:person_with_blond_hair: `:person_with_blond_hair:`	`:man_with_gua_pi_mao:`	‍♂️ `:man_with_turban:`
`:construction_worker:`	`:cop:`	`:angel:`
`:princess:`	`:smiley_cat:`	`:smile_cat:`
`:heart_eyes_cat:`	`:kissing_cat:`	`:smirk_cat:`
`:scream_cat:`	`:crying_cat_face:`	`:joy_cat:`
`:pouting_cat:`	`:japanese_ogre:`	`:japanese_goblin:`
`:see_no_evil:`	`:hear_no_evil:`	`:speak_no_evil:`
‍♂️ `:guardsman:`	`:skull:`	`:feet:`
`:lips:`	`:kiss:`	`:droplet:`
`:ear:`	`:eyes:`	`:nose:`
`:tongue:`	`:love_letter:`	`:bust_in_silhouette:`
`:busts_in_silhouette:`	`:speech_balloon:`	`:thought_balloon:`

Nature

☀️ :sunny:	☔ :umbrella:	☁️ :cloud:
❄️ `:snowflake:`	⛄ `:snowman:`	⚡ `:zap:`
`:cyclone:`	`:foggy:`	`:ocean:`
`:cat:`	`:dog:`	`:mouse:`
`:hamster:`	`:rabbit:`	`:wolf:`
`:frog:`	`:tiger:`	`:koala:`
`:bear:`	`:pig:`	`:pig_nose:`
`:cow:`	`:boar:`	`:monkey_face:`
`:monkey:`	`:horse:`	`:racehorse:`
`:camel:`	`:sheep:`	`:elephant:`
`:panda_face:`	`:snake:`	`:bird:`
`:baby_chick:`	`:hatched_chick:`	`:hatching_chick:`
`:chicken:`	`:penguin:`	`:turtle:`
`:bug:`	`:honeybee:`	`:ant:`
`:beetle:`	`:snail:`	`:octopus:`
`:tropical_fish:`	`:fish:`	`:whale:`
`:whale2:`	`:dolphin:`	`:cow2:`
`:ram:`	`:rat:`	`:water_buffalo:`
`:tiger2:`	`:rabbit2:`	`:dragon:`
`:goat:`	`:rooster:`	`:dog2:`
`:pig2:`	`:mouse2:`	`:ox:`
`:dragon_face:`	`:blowfish:`	`:crocodile:`
`:dromedary_camel:`	`:leopard:`	`:cat2:`
`:poodle:`	`:paw_prints:`	`:bouquet:`
`:cherry_blossom:`	`:tulip:`	`:four_leaf_clover:`
`:rose:`	`:sunflower:`	`:hibiscus:`
`:maple_leaf:`	`:leaves:`	`:fallen_leaf:`
`:herb:`	`:mushroom:`	`:cactus:`
`:palm_tree:`	`:evergreen_tree:`	`:deciduous_tree:`
`:chestnut:`	`:seedling:`	`:blossom:`
`:ear_of_rice:`	`:shell:`	`:globe_with_meridians:`
`:sun_with_face:`	`:full_moon_with_face:`	`:new_moon_with_face:`
`:new_moon:`	`:waxing_crescent_moon:`	`:first_quarter_moon:`
`:waxing_gibbous_moon:`	`:full_moon:`	`:waning_gibbous_moon:`
`:last_quarter_moon:`	`:waning_crescent_moon:`	`:last_quarter_moon_with_face:`
`:first_quarter_moon_with_face:`	`:moon:`	`:earth_africa:`
`:earth_americas:`	`:earth_asia:`	`:volcano:`
`:milky_way:`	⛅ `:partly_sunny:`	`:octocat:`
:squirrel: `:squirrel:`

Objects

:bamboo:	:gift_heart:	:dolls:
`:school_satchel:`	`:mortar_board:`	`:flags:`
`:fireworks:`	`:sparkler:`	`:wind_chime:`
`:rice_scene:`	`:jack_o_lantern:`	`:ghost:`
`:santa:`	`:christmas_tree:`	`:gift:`
`:bell:`	`:no_bell:`	`:tanabata_tree:`
`:tada:`	`:confetti_ball:`	`:balloon:`
`:crystal_ball:`	`:cd:`	`:dvd:`
`:floppy_disk:`	`:camera:`	`:video_camera:`
`:movie_camera:`	`:computer:`	`:tv:`
`:iphone:`	☎️ `:phone:`	☎️ `:telephone:`
`:telephone_receiver:`	`:pager:`	`:fax:`
`:minidisc:`	`:vhs:`	`:sound:`
`:speaker:`	`:mute:`	`:loudspeaker:`
`:mega:`	⌛ `:hourglass:`	⏳ `:hourglass_flowing_sand:`
⏰ `:alarm_clock:`	⌚ `:watch:`	`:radio:`
`:satellite:`	➿ `:loop:`	`:mag:`
`:mag_right:`	`:unlock:`	`:lock:`
`:lock_with_ink_pen:`	`:closed_lock_with_key:`	`:key:`
`:bulb:`	`:flashlight:`	`:high_brightness:`
`:low_brightness:`	`:electric_plug:`	`:battery:`
`:calling:`	`:email:`	`:mailbox:`
`:postbox:`	`:bath:`	`:bathtub:`
`:shower:`	`:toilet:`	`:wrench:`
`:nut_and_bolt:`	`:hammer:`	`:seat:`
`:moneybag:`	`:yen:`	`:dollar:`
`:pound:`	`:euro:`	`:credit_card:`
`:money_with_wings:`	`:e-mail:`	`:inbox_tray:`
`:outbox_tray:`	✉️ `:envelope:`	`:incoming_envelope:`
`:postal_horn:`	`:mailbox_closed:`	`:mailbox_with_mail:`
`:mailbox_with_no_mail:`	`:door:`	`:smoking:`
`:bomb:`	`:gun:`	`:hocho:`
`:pill:`	`:syringe:`	`:page_facing_up:`
`:page_with_curl:`	`:bookmark_tabs:`	`:bar_chart:`
`:chart_with_upwards_trend:`	`:chart_with_downwards_trend:`	`:scroll:`
`:clipboard:`	`:calendar:`	`:date:`
`:card_index:`	`:file_folder:`	`:open_file_folder:`
✂️ `:scissors:`	`:pushpin:`	`:paperclip:`
✒️ `:black_nib:`	✏️ `:pencil2:`	`:straight_ruler:`
`:triangular_ruler:`	`:closed_book:`	`:green_book:`
`:blue_book:`	`:orange_book:`	`:notebook:`
`:notebook_with_decorative_cover:`	`:ledger:`	`:books:`
`:bookmark:`	`:name_badge:`	`:microscope:`
`:telescope:`	`:newspaper:`	`:football:`
`:basketball:`	⚽ `:soccer:`	⚾ `:baseball:`
`:tennis:`	`:8ball:`	`:rugby_football:`
`:bowling:`	⛳ `:golf:`	`:mountain_bicyclist:`
`:bicyclist:`	`:horse_racing:`	`:snowboarder:`
`:swimmer:`	`:surfer:`	`:ski:`
♠️ `:spades:`	♥️ `:hearts:`	♣️ `:clubs:`
♦️ `:diamonds:`	`:gem:`	`:ring:`
`:trophy:`	`:musical_score:`	`:musical_keyboard:`
`:violin:`	`:space_invader:`	`:video_game:`
`:black_joker:`	`:flower_playing_cards:`	`:game_die:`
`:dart:`	`:mahjong:`	`:clapper:`
`:memo:`	`:pencil:`	`:book:`
`:art:`	`:microphone:`	`:headphones:`
`:trumpet:`	`:saxophone:`	`:guitar:`
`:shoe:`	`:sandal:`	`:high_heel:`
`:lipstick:`	`:boot:`	`:shirt:`
`:tshirt:`	`:necktie:`	`:womans_clothes:`
`:dress:`	`:running_shirt_with_sash:`	`:jeans:`
`:kimono:`	`:bikini:`	`:ribbon:`
`:tophat:`	`:crown:`	`:womans_hat:`
`:mans_shoe:`	`:closed_umbrella:`	`:briefcase:`
`:handbag:`	`:pouch:`	`:purse:`
`:eyeglasses:`	`:fishing_pole_and_fish:`	☕ `:coffee:`
`:tea:`	`:sake:`	`:baby_bottle:`
`:beer:`	`:beers:`	`:cocktail:`
`:tropical_drink:`	`:wine_glass:`	`:fork_and_knife:`
`:pizza:`	`:hamburger:`	`:fries:`
`:poultry_leg:`	`:meat_on_bone:`	`:spaghetti:`
`:curry:`	`:fried_shrimp:`	`:bento:`
`:sushi:`	`:fish_cake:`	`:rice_ball:`
`:rice_cracker:`	`:rice:`	`:ramen:`
`:stew:`	`:oden:`	`:dango:`
`:egg:`	`:bread:`	`:doughnut:`
`:custard:`	`:icecream:`	`:ice_cream:`
`:shaved_ice:`	`:birthday:`	`:cake:`
`:cookie:`	`:chocolate_bar:`	`:candy:`
`:lollipop:`	`:honey_pot:`	`:apple:`
`:green_apple:`	`:tangerine:`	`:lemon:`
`:cherries:`	`:grapes:`	`:watermelon:`
`:strawberry:`	`:peach:`	`:melon:`
`:banana:`	`:pear:`	`:pineapple:`
`:sweet_potato:`	`:eggplant:`	`:tomato:`
`:corn:`

Places

:house:	:house_with_garden:	:school:
`:office:`	`:post_office:`	`:hospital:`
`:bank:`	`:convenience_store:`	`:love_hotel:`
`:hotel:`	`:wedding:`	⛪ `:church:`
`:department_store:`	`:european_post_office:`	`:city_sunrise:`
`:city_sunset:`	`:japanese_castle:`	`:european_castle:`
⛺ `:tent:`	`:factory:`	`:tokyo_tower:`
`:japan:`	`:mount_fuji:`	`:sunrise_over_mountains:`
`:sunrise:`	`:stars:`	`:statue_of_liberty:`
`:bridge_at_night:`	`:carousel_horse:`	`:rainbow:`
`:ferris_wheel:`	⛲ `:fountain:`	`:roller_coaster:`
`:ship:`	`:speedboat:`	⛵ `:boat:`
⛵ `:sailboat:`	`:rowboat:`	⚓ `:anchor:`
`:rocket:`	✈️ `:airplane:`	`:helicopter:`
`:steam_locomotive:`	`:tram:`	`:mountain_railway:`
`:bike:`	`:aerial_tramway:`	`:suspension_railway:`
`:mountain_cableway:`	`:tractor:`	`:blue_car:`
`:oncoming_automobile:`	`:car:`	`:red_car:`
`:taxi:`	`:oncoming_taxi:`	`:articulated_lorry:`
`:bus:`	`:oncoming_bus:`	`:rotating_light:`
`:police_car:`	`:oncoming_police_car:`	`:fire_engine:`
`:ambulance:`	`:minibus:`	`:truck:`
`:train:`	`:station:`	`:train2:`
`:bullettrain_front:`	`:bullettrain_side:`	`:light_rail:`
`:monorail:`	`:railway_car:`	`:trolleybus:`
`:ticket:`	⛽ `:fuelpump:`	`:vertical_traffic_light:`
`:traffic_light:`	⚠️ `:warning:`	`:construction:`
`:beginner:`	`:atm:`	`:slot_machine:`
`:busstop:`	`:barber:`	♨️ `:hotsprings:`
`:checkered_flag:`	`:crossed_flags:`	`:izakaya_lantern:`
`:moyai:`	`:circus_tent:`	`:performing_arts:`
`:round_pushpin:`	`:triangular_flag_on_post:`	`:jp:`
`:kr:`	`:cn:`	`:us:`
`:fr:`	`:es:`	`:it:`
`:ru:`	`:gb:`	`:uk:`
`:de:`

Symbols

1️⃣ :one:	2️⃣ :two:	3️⃣ :three:
4️⃣ `:four:`	5️⃣ `:five:`	6️⃣ `:six:`
7️⃣ `:seven:`	8️⃣ `:eight:`	9️⃣ `:nine:`
`:keycap_ten:`	`:1234:`	0️⃣ `:zero:`
#️⃣ `:hash:`	`:symbols:`	◀️ `:arrow_backward:`
⬇️ `:arrow_down:`	▶️ `:arrow_forward:`	⬅️ `:arrow_left:`
`:capital_abcd:`	`:abcd:`	`:abc:`
↙️ `:arrow_lower_left:`	↘️ `:arrow_lower_right:`	➡️ `:arrow_right:`
⬆️ `:arrow_up:`	↖️ `:arrow_upper_left:`	↗️ `:arrow_upper_right:`
⏬ `:arrow_double_down:`	⏫ `:arrow_double_up:`	`:arrow_down_small:`
⤵️ `:arrow_heading_down:`	⤴️ `:arrow_heading_up:`	↩️ `:leftwards_arrow_with_hook:`
↪️ `:arrow_right_hook:`	↔️ `:left_right_arrow:`	↕️ `:arrow_up_down:`
`:arrow_up_small:`	`:arrows_clockwise:`	`:arrows_counterclockwise:`
⏪ `:rewind:`	⏩ `:fast_forward:`	ℹ️ `:information_source:`
`:ok:`	`:twisted_rightwards_arrows:`	`:repeat:`
`:repeat_one:`	`:new:`	`:top:`
`:up:`	`:cool:`	`:free:`
`:ng:`	`:cinema:`	`:koko:`
`:signal_strength:`	`:u5272:`	`:u5408:`
`:u55b6:`	`:u6307:`	️ `:u6708:`
`:u6709:`	`:u6e80:`	`:u7121:`
`:u7533:`	`:u7a7a:`	`:u7981:`
️ `:sa:`	`:restroom:`	`:mens:`
`:womens:`	`:baby_symbol:`	`:no_smoking:`
️ `:parking:`	♿ `:wheelchair:`	`:metro:`
`:baggage_claim:`	`:accept:`	`:wc:`
`:potable_water:`	`:put_litter_in_its_place:`	㊙️ `:secret:`
㊗️ `:congratulations:`	Ⓜ️ `:m:`	`:passport_control:`
`:left_luggage:`	`:customs:`	`:ideograph_advantage:`
`:cl:`	`:sos:`	`:id:`
`:no_entry_sign:`	`:underage:`	`:no_mobile_phones:`
`:do_not_litter:`	`:non-potable_water:`	`:no_bicycles:`
`:no_pedestrians:`	`:children_crossing:`	⛔ `:no_entry:`
✳️ `:eight_spoked_asterisk:`	✴️ `:eight_pointed_black_star:`	`:heart_decoration:`
`:vs:`	`:vibration_mode:`	`:mobile_phone_off:`
`:chart:`	`:currency_exchange:`	♈ `:aries:`
♉ `:taurus:`	♊ `:gemini:`	♋ `:cancer:`
♌ `:leo:`	♍ `:virgo:`	♎ `:libra:`
♏ `:scorpius:`	♐ `:sagittarius:`	♑ `:capricorn:`
♒ `:aquarius:`	♓ `:pisces:`	⛎ `:ophiuchus:`
`:six_pointed_star:`	❎ `:negative_squared_cross_mark:`	️ `:a:`
️ `:b:`	`:ab:`	️ `:o2:`
`:diamond_shape_with_a_dot_inside:`	♻️ `:recycle:`	`:end:`
`:on:`	`:soon:`	`:clock1:`
`:clock130:`	`:clock10:`	`:clock1030:`
`:clock11:`	`:clock1130:`	`:clock12:`
`:clock1230:`	`:clock2:`	`:clock230:`
`:clock3:`	`:clock330:`	`:clock4:`
`:clock430:`	`:clock5:`	`:clock530:`
`:clock6:`	`:clock630:`	`:clock7:`
`:clock730:`	`:clock8:`	`:clock830:`
`:clock9:`	`:clock930:`	`:heavy_dollar_sign:`
©️ `:copyright:`	®️ `:registered:`	™️ `:tm:`
❌ `:x:`	❗ `:heavy_exclamation_mark:`	‼️ `:bangbang:`
⁉️ `:interrobang:`	⭕ `:o:`	✖️ `:heavy_multiplication_x:`
➕ `:heavy_plus_sign:`	➖ `:heavy_minus_sign:`	➗ `:heavy_division_sign:`
`:white_flower:`	`:100:`	✔️ `:heavy_check_mark:`
☑️ `:ballot_box_with_check:`	`:radio_button:`	`:link:`
➰ `:curly_loop:`	〰️ `:wavy_dash:`	〽️ `:part_alternation_mark:`
`:trident:`	:black_square: `:black_square:`	:white_square: `:white_square:`
✅ `:white_check_mark:`	`:black_square_button:`	`:white_square_button:`
⚫ `:black_circle:`	⚪ `:white_circle:`	`:red_circle:`
`:large_blue_circle:`	`:large_blue_diamond:`	`:large_orange_diamond:`
`:small_blue_diamond:`	`:small_orange_diamond:`	`:small_red_triangle:`
`:small_red_triangle_down:`

참고 문헌

[Node.js] PM2 모듈 사용법 - 클러스터 / 무중단 서비스

Light9639 — Sun, 11 Jun 2023 22:27:23 +0900

PM2란?

PM2는 'Production Process Manager for Node.js'의 줄임말로 Node.js를 통해서 만든 프로그램을 관리해주는 프로그램을 뜻한다.

PM2를 사용하는 이유

PM2를 사용하지 않을 경우, 에러가 발생하여 프로그램이 중지 되는 경우가 있다. 그러나 PM2를 사용할 경우, 프로그램 동작이 중지되면 PM2가 프로그램 동작을 다시 실행 시켜 주기 때문에 매우 유용하다.
PM2를 사용하면서 코드를 수정 할 때, 서버를 끄고 다시 시작하는 번거로움 없이, 코드를 저장하고 웹 새로고침만 해주면 수정사항이 반영되기 때문에 매우 유용하다.

PM2 설치

프로젝트 파일 터미널 창에서 아래 코드 입력

Shell

npm install pm2 -g

위 코드가 실행이 안될 경우 아래 코드를 입력하여 관리자 권한으로 설치하면 된다.

Shell

sudo npm install pm2 -g

위의 코드 입력한 후, 컴퓨터 비밀번호를 입력해주시면 설치할 수 있다.

PM2 실행법

PM2를 시작한 후 아래 코드를 입력한다.

Shell

pm2 start 파일이름.js --watch

PM2 시작 후, 소스코드 변경시 자동으로 서버를 껐다 켜준다.

PM2 그 외의 명령어

현재 실행중인 프로세스 리스트 보기

Shell

pm2 list

현재 실행중인 프로세스 중지하기

Shell

pm2 stop 프로세스 이름

프로세스 이름은 PM2 List에서 Name란이 프로세스 이름을 뜻한다.

터미널창에 수정 사항/ 에러 등 바로 보여주기

Shell

pm2 log

모든 PM2 관련 서비스 중지

Shell

pm2 kill

참고 문헌

[Node.js] Express.js 설치 및 사용법

Light9639 — Sat, 10 Jun 2023 22:30:26 +0900

Express.js는 무엇인가?

Expresss는 Node.js의 프레임워크로, Node.js를 이용하여 웹 개발을 할 때, Expresss 프레임워크를 사용하면 훨씬 간편하게 개발을 할 수 있게 도와주는 프레임워크이다.

Expresss 프레임워크의 특징을 다음과 같다.

프레임워크중 점유율이 가장 높다.
많은 개발자들이 사용하고 있어 정보들을 많이 얻을 수 있다.
확장 모듈이 많이 있고 추가하기 용이하게 되어있다.

Express 설치 방법

Express를 설치하기 위해서는 Node.js가 설치되어 있어야 한다. Express 설치는 NPM과 Yarn을 이용하여 설치하면 된다.

Shell

npm install express
# or
yarn add express

Hello World 띄우기

그럼, Express 프레임워크를 사용해 Hello World를 표시하는 예제를 만들어보자. 우선 예제 소스를 만들기 위한 폴더를 생성합니다.

우선 server 폴더를 만든 다음, 생성한 폴더를 NPM이나 Yarn 명령어를 사용하여 프로젝트 초기화한다.

Shell

npm init -y
# or
yarn init -y

프로젝트를 초기화하면 package.json 과 node_modules 폴더가 생성된다. 이후 프로젝트 폴더에 server.js를 생성한 후 밑의 코드를 작성한다.

JavaScript

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

app.get('/', function (req, res) {
    res.send('Hello World Express'); 
}); 

app.listen(8080);

Express을 Node.js에서 사용할 수 있게 require()로 호출을 합니다. 이것으로 Node.js에서 Express 프레임워크를 사용할 수 있게 됩니다.

get method를 사용해 루틴과 표시할 내용을 설정할 수 있습니다. 예제에서는 Home 디렉토리를 설정하기 위해 /를 지정했습니다. 표시 내용으로는 Hello World를 문자열로 지정했습니다. 포트는 8080으로 설정했습니다.

커맨드 창에서 프로젝트 폴더로 이동해 Node.js 실행합니다.

Shell

node server.js

코드를 커맨드 창에서 실행시킨 후 브라우저에 http://localhost:8080 포트로 이동한다.

접속이 완료되었다면 화면에 Hello World가 띄워진 것을 확인할 수 있다.

참고 문헌

[JavaScript] ️ 마우스 wheel & scroll 이벤트 멈춤 감지하기

Light9639 — Sat, 10 Jun 2023 21:37:53 +0900

마우스 휠 & 스크롤 멈춤 감지 방법

사용자가 문서를 스크롤 하면 이벤트를 발생시키는데, 스크롤을 멈추면 이를 감지하여 스크립트 처리를 하고 싶은 상황이 있다.

마우스 스크롤을 감지하는 이벤트는 두가지가 있는데, 문서를 스크롤하면 발생하는 "scroll" 이벤트와 그냥 마우스 가운데 휠 버튼을 내리면 발생하는 "wheel" 이벤트가 있다. 이 이벤트들에 setTimeout() 메서드와 조합해서 종단 지점을 감지하는 로직을 구현 할수가 있다.

JavaScript

let scrolling; // setTimeout() 메서드를 할당하는 전역 변수

window.addEventListener('scroll', (e) => {
    if (!scrolling) {
    	console.log('start scrolling!');
    }
    
    // 일정시간(250ms) 뒤에 스크롤 동작 멈춤을 감지
    clearTimeout(scrolling);
    scrolling = setTimeout(() => {
        console.log('stop scrolling!');
        
        scrolling = undefined;
    }, 250);
})

JavaScript

let wheeling; // setTimeout() 메서드를 할당하는 전역 변수

window.addEventListener('wheel', (e) => {
    if (!wheeling) {
    	console.log('start wheeling!');
    }

    // 일정시간(400ms) 뒤에 스크롤 동작 멈춤을 감지
    clearTimeout(wheeling);
    wheeling = setTimeout(() => {
        console.log('stop wheeling!');
        
        wheeling = undefined;
    }, 400);
})

Tip

mousewheel은 deprecated 된 구형 이벤트로서 최신 이벤트 스펙인 'wheel' 사용을 권장한다.

참고 문헌

[JavaScript] 화면 스크롤 맨 아래 / 맨 위 감지하기

Light9639 — Sat, 10 Jun 2023 21:34:47 +0900

스크롤 맨 아래 맨 위 감지하기

스크롤 맨 아래와 맨 위를 감지하는 이유는, 사용자가 웹 페이지를 다 읽었는지를 판단하여 다른 액션을 이어가고자 할 때. 또는 꼭 읽어야 하는 글이 있을 경우에 글의 맨 아래에서 버튼 상태를 활성화 시킬 때 유용하게 사용할 수 있다.

이를 구현하기 위해서는 "스크롤 되어 내려온 위치"와 "브라우저에 표시된 높이"를 더한 값이 "페이지의 전체 높이 값"과 같거나 클 경우를 비교하여 코드를 짜면 된다.

맨 아래까지 왔다고 판단하는 로직

"스크롤 되어 내려온 위치"와 "브라우저에 표시된 높이"를 더한 값이 "페이지 전체 높이 값"과 같거나 크면 맨 아래까지 왔다고 판단하는 코드이다.

JavaScript

function detectBottom() {
    var scrollTop = $(window).scrollTop();
    var innerHeight = $(window).innerHeight();
    var scrollHeight = $('body').prop('scrollHeight');
    if (scrollTop + innerHeight >= scrollHeight) {
        return true;
    } else {
        return false;
    }
}Copy

맨 위를 감지하는 방법

"스크롤 된 위치"가 0이라면 판단할 수 있다. 이를 활용하면 본문의 위치를 나타내는 프로그레스바를 쉽게 구현할 수도 있다.

JavaScript

function detectTop() {
    var scrollTop = $(window).scrollTop();
    if (scrollTop == 0) {
        return true;
    } else {
        return false;
    }
}

참고 문헌

[JavaScript] ⛔ sleep, wait 함수를 이용하여 프로그램의 실행을 지연시키기

Light9639 — Sat, 10 Jun 2023 21:25:36 +0900

Sleep, Wait 함수 만들기

코딩을 하다 보면 여러 가지 이유로 프로그램의 실행을 잠시 멈추거나 일정 시간동안 실행을 지연시키고 싶을 때가 있다. 예를 들어, 자바에서는 Thread.sleep() 함수를 사용하고 파이썬에서는 time.sleep() 함수를 사용하여 의도된 지연 효과를 줄 수가 있다.

다른 프로그래밍 언어들에서는 이러한 API를 쉽게 찾아볼 수 있지만 자바스크립트에선 따로 sleep()함수가 존재하지 않기 때문에, 직접 개발자가 구현해주어야 한다. 이를 구현하기 위해서는 while 문과 Promise 를 사용해야 하는데, 프로그램의 실행을 일정 시간동안 지연시키는 코드는 다음과 같다.

while문 활용

시간날짜를 얻는 함수 Date() 와 while문 조건으로 3초 지난걸 확인하는 방법으로 sleep문을 구현.

JavaScript

function sleep(sec) {
    let start = Date.now(), now = start;
    while (now - start < sec * 1000) {
        now = Date.now();
    }
}

console.log(11)
sleep(3);
console.log(22)

waait

웹 개발을 하던 중 일정 시간을 기다렸다가 다시 실행해야하는 프로그램이 많이 사용해야 할 경우, 라이브러리를 사용하는 방법도 있다.

이를 구현해주는 대표적인 라이브러리가 waait로 위에서 작성한 코드와 크게 다르지 않다. 아래 코드와 같이 waait 패키지에서 wait 함수를 가져와 동일한 방법으로 사용하면 된다.

JavaScript

import wait from "waait";

async function test() {
  console.log("before");
  await wait(3000);
  console.log("after");
  console.log("done!");
}

Promise 객체 활용

우선 Promise 객체를 만들고 setTimeout으로 시간 ms 후에 resolve하게 한다. 이 비동기 Promise 함수를 await으로 동기처리를 해주면 sleep과 같은 기능을 하게 된다.

JavaScript

function sleep(sec) {
  return new Promise(resolve => setTimeout(resolve, sec * 1000));
} // 함수정의


(async () => {
  ... 코드1
  await sleep(2); // 2초대기
  ... 코드2
})();

JavaScript

// 최근 추가된 Top-Level Await 문법으로 인해 바로 await를 사용할수도 있다.
... 코드1
await sleep(2); // 2초대기
... 코드2

참고 문헌

[JavaScript] insertAdjacentHTML와 innerHTML 차이점 정리

Light9639 — Sat, 10 Jun 2023 20:28:33 +0900

insertAdjacentHTML와 innerHTML 차이점

insertAdjacentHTML와 innerHTML은 둘 다 JS를 사용해서 HTML 코드를 DOM에 넣어 조작하는 메서드다. 그럼 이 두가지 함수를 어떻게 사용하는지에 대해서 포스팅해보겠다.

innerHTML 사용법

innerHTML 속성은 JavaScript를 통해서 html의 content를 가져와서 그 값을 화면상에 보여주거나 직접 변경하여 보여주는 것을 뜻한다. <span>로 둘러쌓인 텍스트를 <button>클릭 시 <p>태그로 바꾸는 JS를 작성해보자.

HTML

<button>click</button>
<span id="el">안녕하세요, 지금은 'span' 태그입니다.</span>

라이브 서버로 확인해보면 클릭 버튼 옆에 텍스트가 나란히 나오는 것을 확인할 수 있다.

JavaScript

const btn = document.querySelector("button");
const el = document.querySelector("#el");

btn.addEventListener('click', e => {
  el.innerHTML = "<p>지금은 'p'태그로 변경되었습니다.</p>"
})

클릭하는 순간 <span>태그에서 <p>태그로 덮어씌워진다. 이것은 innerHTML의 특징 중 하나로, 기존 노드는 삭제되면서 새로 값이 되어 나타난다.

insertAdjacentHTML 사용법

insertAdjacentHTML도 innerHTML과 비슷하지만 innerHTML을 사용하게 되면 기존에 있던 것은 덮어쓰기가 되어버려서 기존의 값이 보이지 않게 된다. 하지만 insertAdjacentHTML은 기존의 값을 건드리지 않고, 새롭게 내가 입력하고 싶은 값을 어떤 위치에 놓을지를 설정할 수 있다는 차이가 있다.

position에는 4가지의 옵션이 있는데, 어떤 값을 넣느냐에 따라 html 요소 위치를 설정 할 수 있다.

그럼, C라는 텍스트가 있는 span 태그를 넣어서 기준점을 정해보자.

HTML

<span id="el">C</span>

JavaScript

const el = document.querySelector("#el")

el.insertAdjacentHTML('beforebegin', '<span>A-</span>'); 
// 타켓 요소 전(형제레벨)에 생성- 시작 태그의 앞(형제 레벨로) 

el.insertAdjacentHTML('afterbegin', '<span>B-</span>'); 
// 타켓 요소 다음(자식요소)에 생성 - 시작 태그의 뒤(자식 요소로) 

el.insertAdjacentHTML('beforeend','<span>-D</span>'); 
// 타켓 요소 '끝나는 태그' 바로 직전(자식요소로)에 요소를 생성 - '종료 태그' 앞(자식 요소로) 

el.insertAdjacentHTML('afterend','<span>-E</span>'); 
// 타켓 요소의 '끝나는 태그' 바로 다음(형제레벨)에 요소를 생성 - '종료 태그' 뒤(형제 레벨로)

위의 코드와 같이 작성하면 브라우저 화면에 A - B - C - D - E 순으로 결과가 나오는 것을 확인 할 수 있다.

또한, 개발자 도구를 열어서 확인해보면 C 기준으로 정확한 위치를 확인할 수 있다.

insertAdjacentHTML와 innerHTML 차이점 정리

innerHTML은 기존 요소를 파싱하기 때문에 비싼 DOM 작업을 필요로 한다.
따라서 기존 요소를 파싱하지 않는 insertAdjacentHTML을 사용하면 작업을 빠르게 완료할 수 있다.
파싱 작업을 아예 배제하고, createElement와 insertAdjacentElement를 사용하면 더 빠르게 완료할 수 있다.
innerText 대신 textContent를 쓰면 더 빠르게 완료할 수 있다.

참고 문헌

[React] Redux와 Redux-Toolkit 문법 비교.

Light9639 — Sat, 15 Apr 2023 21:49:56 +0900

Redux 문법

TypeScript

import { Provider } from 'react-redux';
import { createStore } from 'redux';

interface Counter {
  count : number
}

const initialState :Counter  = { count: 0 };

function reducer(state = initialState, action :any) {
  if (action.type === 'increase') {
    return { count : state.count + 1 }
  } else if (action.type === 'decrease'){
    return { count : state.count - 1 }
  } else {
    return initialState
  }
}

const store = createStore(reducer);

// store의 타입 미리 export 해놓기
export type RootState = ReturnType<typeof store.getState>

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
)

문법에서의 사용방법

TypeScript

import React from 'react';
import { useDispatch, useSelector } from 'react-redux'
import { Dispatch } from 'redux'
import {RootState} from './index'

function App() {
  const Redux = useSelector( (state :RootState) => state );
  const dispatch :Dispatch = useDispatch();

  return (
    <div className="App">
      { Redux.count }
      <button onClick={()=>{dispatch({type : 'increase'})}}>버튼</button>
      <Profile name="kim"></Profile>
    </div>
  );
}

Redux-Toolkit 문법

TypeScript

import { createSlice, configureStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';

const 초기값 = { count: 0, user : 'kim' };

const counterSlice = createSlice({
  name: 'counter',
  initialState : initialState,
  reducers: {
    increment (state){
      state.count += 1
    },
    decrement (state){
      state.count -= 1
    },
    incrementByAmount (state, action :any){
      state.count += action.payload
    }
  }
})

let store = configureStore({
  reducer: {
    counter1 : counterSlice.reducer
  }
})

//state 타입을 export 해두는 것
export type RootState = ReturnType<typeof store.getState>

//수정방법 만든 부분 export
export let {increment, decrement, incrementByAmount} = counterSlice.actions

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
)

사용방법

TypeScript

import { useDispatch, useSelector } from 'react-redux'
import {RootState, increment} from './index'

function App() {

  const Redux = useSelector( (state :RootState) => state);
  const dispatch = useDispatch();

  return (
    <div className="App">
      {Redux.counter1.count}
      <button onClick={()=>{dispatch(increment())}}>버튼</button>
    </div>
  );
}

[React] Class 문법에서의 LifeCycle hook 사용법.

Light9639 — Wed, 12 Apr 2023 17:29:40 +0900

React의 LifeCycle은 무엇인가

React로 웹개발을 하다 보면 컴포넌트에 Lifecycle이라는 개념이 있다. 컴포넌트는 생성이 될 수도 있고 (전문용어로 mount), 재렌더링이 될 수도 있고 (전문용어로 update), 삭제가 될 수도 있습니다. (전문용어로 unmount)

컴포넌트의 Lifecycle을 알아야 하는 이유는, 이걸 알아야 "컴포넌트의 인생 중간중간에 실행할 코드"를 삽입할 수 있기 때문이다. 컴포넌트가 장착이 될 때 특정 코드를 실행할 수도 있고 컴포넌트가 업데이트될 때 특정 코드를 실행할 수 있는 것이다.

Class 문법에서의 LifeCycle hook 사용법

주로 사용되는 LifeCycle hook

TypeScript

class App extends React.Component {
  componentDidMount(){
    //App 컴포넌트가 로드되고나서 실행할 코드
  }
  componentDidUpdate(){
    //App 컴포넌트가 업데이트 되고나서 실행할 코드
  }
  componentWillUnmount(){
    //App 컴포넌트가 삭제되기전에 실행할 코드
  }
}

componentDidMount

컴포넌트가 마운트 된 후 호출됩니다.
브라우저에서 한 번만 실행됩니다.
axios, fetch 등을 사용하여 외부 라이브러리 연동 및 네트워크 요청을 보내는데 적절합니다.

componentDidUpdate

컴포넌트가 갱신된 후 호출됩니다.
즉, 컴포넌트의 state가 변경되었을 경우 실행됩니다.
갱신이 일어난 후 호출되므로 최초 렌더링에서는 호출되지 않습니다.

componentWillUnmount

컴포넌트가 마운트 해제되어 제거되기 직전에 호출된다.
컴포넌트가 마운트 해제되면 다시 렌더링 되지 않으므로 state를 변경하는 setState()를 사용해서는 안된다.

그 외의 LifeCycle hook

위의 3개의 생명 주기 이외에도 더 이상 사용하면 안 되는 UNSAFE_componentWillUpdate, UNSafe_componentWillReceiveProps 그리고 잘 사용하지 않는 shouldComponentUpdate, getDerviedStateFromProps 등등 여러 가지의 생명주기 메소드가 존재한다.

하지만, React Hook은 자주 사용되는 그리고 꼭 필요한 생명주기 메소드인 componentDidMount, componentDidUpdate, componentWillUnmount를 하나의 API인 useEffect로 통합하였다.

그러면 useEffect에서 클래스 컴포넌트의 생명 주기 메소드 componetDidMount, componentDidUpdate, componentWillUnmount를 구현하고 useEffect와 비교해 보는 코드를 작성하겠습니다.

React Hook에서 componentDidMount

밑의 코드는 클래스 컴포넌트에서 componentDidMount를 구현한 코드이다.

TypeScript

import React from "react";

class App extends React.Component {
    componentDidMount() {
        console.log('App componentDidMount()');
    }
    
    render() {
        return <h1>App Component Life Cycle</h1>;
    }
}

밑의 코드는 함수형 컴포넌트에서 useEffect를 사용하여 componentDidMount를 사용한 코드입니다.

TypeScript

import React, { useEffect } from "react";

const App = () => {
    useEffect(() => {
        console.log('App componentDidMount()');
    }, []);
    
    return <h1>App Component Life Cycle</h1>;
}

useEffect에 두 번째 매개변수로 빈 배열( [] )을 전달하여 컴포넌트가 마운트된 직후 한 번만 실행된다.

React Hook에서 componentDidUpdate

밑의 코드는 클래스 컴포넌트에서 componentDidUpdate를 사용한 코드이다.

TypeScript

import React from "react";

class App extends React.Component {
    componentDidUpdate() {
        console.log('App componentDidUpdate()');
    }
    
    render() {
        return <h1>App Component Life Cycle</h1>;
    }
}

밑의 코드는 함수형 컴포넌트에서 useEffect를 사용하여 componentDidUpdate를 사용한 코드입니다.

TypeScript

import React, { useEffect } from "react";

const App = () => {
    useEffect(() => {
        return() => {
            console.log('App componentWillUnmount()');
        }
    });
    
    return <h1>App Component Life Cycle</h1>;
}

componentDidMount와 유사하지만 useEffect에 두 번째 매개변수가 존재하지 않다는 차이점이 있다.

React Hook에서 componentWillUnmount

밑의 코드는 클래스 컴포넌트에서 componentWillUnmount를 사용한 코드이다.

TypeScript

import React from "react";

class App extends React.Component {
    componentWillUnmount() {
        console.log('App componentWillUnmount()');
    }
    
    render() {
        return <h1>App Component Life Cycle</h1>;
    }
}

밑의 코드는 함수형 컴포넌트에서 useEffect를 사용하여 componentWillUnmount를 사용한 코드이다.

TypeScript

import React, { useEffect } from "react";

const App = () => {
    useEffect(() => {
        return() => {
            console.log('App componentWillUnmount()');
        }
    }, []);
    
    return <h1>App Component Life Cycle</h1>;
}

이 또한 componentDidMount와 유사하지만 useEffect 내부에 return문이 존재한다. useEffect 내부의 return문은 해당 컴포넌트가 DOM에서 제거될 때만 호출된다.

참고 문헌

[React] Class 문법을 이용한 Components 사용법.

Light9639 — Wed, 12 Apr 2023 17:27:58 +0900

클래스형 컴포넌트는 무엇인가?

클래스형 컴포넌트는 함수형 컴포넌트와 React Hook이 등장하기 이전에 사용하던 컴포넌트 형태로 ES6(ECMA Script 2015)부터 추가된 JavaScript Class를 바탕으로 컴포넌트를 작성한다.

함수형 컴포넌트

성능이나 메모리 사용에 있어 약간의 이점이 있음
Hook을 통해 state, lifeCycle을 구현함
클래스형 컴포넌트에 비해 표현이 간결함

클래스형 컴포넌트

ES6(ECMA Script 2015)부터 추가된 Class를 통해 컴포넌트 선언
함수형 컴포넌트와 Hook이 등장하기 전에 폭넓게 사용되었기 때문에, 레거시 코드에서 자주 발견할 수 있는 형태
표현방법이 좀 더 명시적이고, 함수형 컴포넌트 보다 약간 기능이 더 많음

클래스형 컴포넌트 생명주기

마운트 단계 (Mounting)

컴포넌트 객체가 최초로 생성되어 DOM에 삽입될 때 한 번 실행된다.

업데이트 단계 (Updating)

props, state가 변경될 때 마다 수행되며 변경사항을 화면에 표시한다.

소멸 단계 (Unmounting)

컴포넌트가 DOM상에서 제거될 때 한 번 호출된다.

오류 처리

위 생명주기에 나타나지 않았지만 오류가 발생하면 아래 메서드가 순차적으로 호출됨

static getDerivedStateFromError()
componentDidCatch()

실제 사용 예제

TypeScript

class Modal2 extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      name : 'kim',
      age : 20
    }
  }

  render(){
    return (
      <div>
          <div>안녕 { this.state.age }
            <button onClick={()=>{ this.setState({age : 21}) }}>버튼</button>
          </div>
          <div>안녕 { this.props.프롭스이름 }</div>
      </div>
    )
  }

}

class는 변수, 함수를 보관하는 박스와 같습니다. extends는 기존 class안에 있던 변수나 함수를 복사해주는 문법이다.

React.Component라는 class안에 있던 변수와 함수들을 복사해야 컴포넌트라고 인정해주기 때문에 class 어쩌구 extends React.Component라고 쓰는 것이다.

state를 변경하고 싶으면 this.setState라는 기본함수를 가져다가 사용하면 된다. 소괄호안에 새로운 state 넣으면 그 값으로 기존 state를 업데이트한다. 완전히 값을 바꾸는 것이 아니라 차이점만 비교해서 잘 변경해준다.

만약, 부모가 보낸 props를 출력하고 싶다면.

constructor, super에 props 파라미터를 등록하고.
this.props 쓰면 props가 나온다.

클래스형 컴포넌트의 한계

클래스형 컴포넌트가 명시적이고 기능이 더 많음에도 불구하고 함수형 컴포넌트로 대체된 데에는 몇가지 이유가 있습니다.

의례적으로 작성해야하는 코드량이 많음. 클래스형 컴포넌트는 React Component를 상속해야하며 라이프사이클 메서드를 정의해야하며 준수해야하는 규칙이 상대적으로 더 많습니다. 아래는 함수형 컴포넌트와 클래스형 컴포넌트의 차이를 보여줍니다.
성능상 불리함. 컴파일러가 코드 압축과 최적화를 진행하기에 약간 더 어려운 어려운 구조이며 , 메모리 사용량도 좀 더 높습니다.
공통로직 관리가 어려움. 클래스형 컴포넌트에서는 공통로직을 관리하기 위해 Higher Order Component 패턴이나 Render Props 패턴을 주로 사용하며, 이러한 패턴들은 대체로 복잡성이 높습니다. 함수형 컴포넌트는 그 자체가 함수이기 때문에 공통로직 관리가 간편합니다.

참고 문헌

[SCSS] ️ React, Vue에서 SCSS 사용하는 방법.

Light9639 — Thu, 23 Feb 2023 15:21:31 +0900

React, Vue에서의 SCSS 사용법

SCSS는 CSS 전처리기(Preprocesser)라고도 합니다. CSS를 좀 더 프로그래밍 언어스럽게 작성 가능하여, CSS에서 변수, 연산자, 함수, extend, import 등을 사용할 수 있다. 단, 브라우저는 SCSS 문법을 모르기 때문에 SCSS로 작성한 파일을 다시 CSS로 컴파일해야 한다.

Sass 라이브러리 설치

우선 Sass 라이브러리를 설치한다.

Shell

// Sass 라이브러리 설치하기.
$ npm install sass --save
# or
$ yarn add sass

React에서의 SCSS 사용법

Scss 문서 생성하기

이후 App.scss 문서를 생성하면 App.js에 SCSS 스타일링이 적용된 것을 확인할 수 있다.

SCSS

.App {
   background: yellow;
   color: black;
   padding: 1rem;
   
   .header01 {
     background: white;
     color: black;
     font-size: 3rem;
     text-align: center;
     padding: 1rem;
   }
}

React 문서 생성.

SASS 라이브러리 설치가 완료되었다면 App.js 문서에서 SCSS 파일을 import 한다.

JavaScript

import React from 'react';
import './App.scss';

const App = () => {
  return (
    <div className="App">
      <h1 className="Title">Scss Component</h1> 
    </div>
  );
};

export default App;

만약 module.scss 방식으로 사용하고 싶다면 App.scss 문서를 App.module.scss로 이름을 변경한 다음. App.js를 다음과 같이 작성하면 module 방식으로 사용이 가능하다.

JavaScript

import React from 'react';
import styles from './App.module.scss';

const App = () => {
  return (
    <div className={styles.App}>
      <h1 className={styles.Title}>Scss Component</h1> 
    </div>
  );
};

export default App;

Vue에서의 SCSS 사용법

Vue 문서에서 SCSS 사용하기

Vue.js 문서에서 SCSS를 사용하려면 밑의 코드와 같이 사용하면 된다.

Vue

<style lang="scss">
$backgroundColor: red;

.className: {
    background: $backgroundColor;
}
</style>

전역 범위에서의 사용

SCSS를 일반적으로 사용 할 때 variables 또는 mixin, 함수를 별도의 SCSS 파일로 분리하여 사용하므로 모든 파일에서 @import를 반복적으로 실행하는 불편함이 있다.

SCSS

<style lang="scss">
    @import "@/style/variables";
    @import "@/style/mixin";
    @import "@/style/functions";
</style>

이 문제를 해결하려면 밑의 코드와 같이 사용하면 전역 범위로써 SCSS를 사용할 수 있다. 이런 반복적인 작업을 피하기 위해서는 위의 파일들을 전역 범위에서 사용할 수 있도록 바꿔줘야 한다.

수정하기 전에 vue-cli의 2.x에서는 webpack.config.js 파일이 루트 디렉토리에 있었으나, 3.x에서는 vue.config.js 파일을 생성하여 설정해야 한다.

JavaScript

// vue.config.js

module.exports = {
  // options
}

loaderOptions 라는 vue-loader 의 내부 구성을 변경하는데 사용할 수 있는 CSS 옵션이 있다.

Vue

// vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/styles/_variables.scss";
          @import "@/styles/_mixins.scss";
        `
      }
    }
  }
}

위의 설정을 통해서 sass-loader에 추가된 모든 코드는 전역 범위에서 사용할 수 있다.

SCSS

// styles/_variables.scss
$bgColor: red;

Vue

// *.vue

<script lang="scss">
.className {
  background: $bgColor;
}
<script>

vue-cli 2.x 라면

vue-cli 2.x 버전이면 Webpack 구성 파일의 vue-loader 옵션을 수정해야 한다.

Vue

// webpack.config.js
{
  test: \/.scss&/,
  use: [
    "vue-styles-loader",
    "css-loader",
    {
      loader: "scss-loader",
      options: {
        data: `
          @import "@/styles/_variables.scss";
          @import "@/styles/_mixins.scss";
        `
      }
    }
  ]
}

참고 문헌

[WebSite] ️ 웹 개발을 할 때 자주 참고하는 사이트 모음.

Light9639 — Wed, 22 Feb 2023 22:45:51 +0900

제가 웹개발을 할 때 자주 참고하는 사이트를 정리한 포스팅입니다.

@Web's CSS

코드펜의 자료들 중 좋은 자료들을 모아 놓은 티스토리 블로그 사이트. 매우 유용한 자료가 많아서 애용하는 블로그다.

@web's CSS

코드펜 레퍼런스 사이트입니다.

wsss.tistory.com

Inpa Dev

수많은 개발자 블로그들이 있지만 그 중에서 인지도가 매우 높은 사이트이다. 포스팅의 내용이 매우 알차며 프론트, 백엔드 정보들을 많이 얻을 수 있다.

Inpa Dev ‍

성장 욕구가 가파른 초보 개발자로서 공부한 내용을 쉽게 풀어쓴 기술 블로그를 운영하고 있습니다.

inpa.tistory.com

Codepen

코드펜은 사용자가 만든 HTML, CSS, Javascript코드를 테스트하고 시연하기 위한 온라인 커뮤니티이다. 주로 프론트엔드 관련 자료들이 올라오며 매우 다양하고 많은 자료들이 있어 자주 참고하는 사이트이다.

CodePen

An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.

codepen.io

JQuery-Plugins.net

jQuery를 이용한 수많은 라이브러리를 모아 놓은 사이트이다. 만약 jQuery 예제들이나 Javascript 예제를 찾는다면, 이 사이트를 방문해서 필요한 기능이 있는지 찾아보면 매우 좋은 자료들을 얻을 수 있다.

jQuery Plugins, jQuery Tutorials, jQuery Articles, jQuery Examples, jQuery Demos

A tutorial about creating shuffling type animation with various effects for a geeky terminal look.

jquery-plugins.net

인프런

프론트엔드와 백엔드 만이 아니라 인공지능, 데이터, 마케팅, 디자인, 엑셀 실무 등 입문부터 실전에서 쓰이는 기술들을 배울 수 있는 사이트이다. 개인적으로도 여러 강의들을 듣기 때문에 매우 유용한 사이트로 추천한다.

인프런 - 미래의 동료들과 함께 성장하는 곳 | IT 정보 플랫폼

프로그래밍, 인공지능, 데이터, 마케팅, 디자인, 엑셀 실무 등 입문부터 실전까지 업계 최고 선배들에게 배울 수 있는 곳. 우리는 성장 기회의 평등을 추구합니다.

www.inflearn.com

[Node.js] TS-Node, Express 사용법.

Light9639 — Mon, 20 Feb 2023 23:36:30 +0900

Package.json 생성

TS-Node를 사용하기 전에 Package.json을 생성한다.

TypeScript

// 'package.json' 다음 명령어로 생성하고 전부다 enter 처리하면 된다.
$ yarn init

// 'package.json' 생성을 자동으로 하고 싶다면
$ yarn init -y

설치하기

Package.json을 생성하였다면 TS-Node 관련 패키지를 설치한다.

Shell

// 'Express', 'typescript', 'nodemon' 설치하기.
$ npm install express @types/express @types/node nodemon ts-node typescript
# or
$ yarn add express @types/express @types/node nodemon ts-node typescript

Tsconfig.json 파일 생성

이후 Tsconfig.json 파일을 생성한다.

Shell

// 'tsconfig.json' 생성하기.
$ npx tsc --init

Package.json 작성

Package.json에서 script 부분을 다음과 같이 작성한다.

JavaScript

// 'scripts' 수정하기.
"scripts": {
    "start": "node ./build/index.js", // 컴파일된 js파일로 시작
    "build": "tsc -p .",  // typescript를 javascript로 빌드
    "dev": "nodemon ./src/index.ts"
},

Index.ts 작성

Index.ts를 생성한 다음 다음과 같이 작성한다.

TypeScript

import express, { Request, Response, NextFunction } from "express";
const app = express();

app.get("/", (req: Request, res: Response, next: NextFunction): void => {
  res.json({ message: "Please Like the Video!" });
});

app.listen("3001", (): void => {
  console.log("Server Running!");
});

서버 시작

서버를 작동시키려면 작성을 전부 완료한 후 다음 명령어로 시작하면 된다.

Shell

// 시작 명령어.
$ yarn dev

참고 문헌

[Node.js] TS-Node 사용법.

Light9639 — Sun, 19 Feb 2023 23:05:35 +0900

TS-Node는 무엇인가?

JavaScript를 웹이 아닌 콘솔에서 실행하기 위해서는 Node.js를 설치한 후에 node 자바스크립트파일명.js를 통하여 실행할 수 있다. 물론 TypeScript 파일도 자바스크립트 문법으로만 작성을 한다면 node 타입스크립트파일명.ts를 통하여 실행이 가능하긴 하다.

그러나 타입스크립트 문법으로 작성된 .ts 파일은 Node.js에서 실행이 되지 않는다. 왜냐하면 Node.js는 JavaScript 파일만 해석할 수 있지, TypeScript 파일은 해석할 수 없기 때문이다. 그래서 TypeScript 파일을 Node.js에서 실행하기 위해서는 TS-Node를 설치해야 된다. TS-Node는TypeScript 코드를 JavaScript로 컴파일하지 않고 직접 실행시키는 라이브러리이다. 그럼 이번 포스팅에서는TS-Node를 설치하고 사용하는 방법에 대해 간략히 포스팅해보겠다.

TS-Node 설치하기

우선 터미널에 TS-Node를 전역변수로 설치한다.

Shell

npm install -g ts-node

TypeScript 실행

전역변수로 설치가 완료되었다면, 터미널에 아래 명령어를 입력하면 기존 Node.js 처럼 .ts 파일을 사용할 수 있다.

TypeScript

ts-node 타입스크립트파일명.ts

만약 npm start나 yarn dev 명령어를 통해 TS-Node를 사용하고 싶다면 package.json 파일의 scripts 부분을 다음과 같이 설정하면 된다.

JavaScript

"scripts": {
   "start": "ts-node 타입스크립트파일명.ts"
   # or
   "dev": "ts-node 타입스크립트파일명.ts",
},

Nodemon과 ts-node 같이 쓰기

Node.js를 이용하여 서버를 개발하다 보면 일정 작업이 완료된 이후 저장 시 바로바로 반영이 되지 않는 경우가 있다. 이를 위해서는 Nodemon 패키지를 활용하면 해결이 가능하다. Nodemon 패키지는 다음 명령어로 설치한다.

Shell

$ npm install -D nodemon ts-node
# or
$ yarn add nodemon ts-node

설치가 완료되었다면 다음 명령어를 통해 실행이 가능하다.

Shell

nodemon 타입스크립트파일명.ts

물론 package.json을 편집하여, npm start나 yarn dev 명령어를 통해 실행이 가능하다.

JavaScript

"scripts": {
   "start": "nodemon server.ts",
   # or
   "dev": "nodemon server.ts",
},

참고 문헌

[Next.js] ️ SWR 상태관리 라이브러리 사용법.

Light9639 — Sun, 19 Feb 2023 22:40:57 +0900

SWR은 무엇인가?

SWR이란 “Stale-While-Revalidate”라는 HTTP 캐시 무효화 전략에서 유래된 데이터 페칭을 위한 리액트 라이브러리이다.

SWR의 기본적인 작동은 우선 캐시(stale)에서 데이터를 불러오고, 검증을 위한 요청(revalidate)을 보내고, 마침내 최신 데이터로 업데이트하는 과정을 거친다. 또한 SWR을 사용하는 컴포넌트들은 지속적이고 자동적으로 데이터 업데이트가 이루어짐으로써 항상 최신 상태를 유지할 수 있게 된다.

SWR의 대표적인 장점

자동화가 간단하다.
가볍고 빠르기 때문에 데이터의 업데이트 또한 빠르게 이루어져 reactive한 환경을 갖출 수 있다.
SSR(Server-Side-Rendering), SSG(Static-Site-Generation), ISR(Incremental-Static-Generation) 환경에서 모두 사용할 수 있다.
최근에 나온 React 18의 Suspense 등의 기능들과 호환된다.

설치 방법

다른 라이브러리들과 마찬가지로, 사용하고자 하는 프로젝트 폴더 안에서 터미널에 설치 코드를 입력해주면 된다.

Shell

yarn add swr

혹은

Shell

npm install swr

기본적인 사용법

key, fetcher, data, error

JavaScript

const { data, error } = useSWR(key, fetcher);

SWR을 사용할 때에는 기본적으로 4가지만 알면 되는데, 바로 예시에 있는 key, fetcher, data, error 이다.

key

요청을 보낼 주소를 의미한다.

JavaScript

const { data, error } = useSWR("/api/data", fetcher);

에서 '/api/data'에 해당하는 부분이다.

fetcher

SWR의 핵심적인 API로써, key를 받아 데이터를 반환하는 비동기 함수이다. 이 fetcher에는 데이터 페칭에 사용되는 Axios, GraphQL 등 어떠한 라이브러리든지 사용이 가능하다.

JavaScript

const fetcher = (url) => fetch(url).then((res) => res.json());

const { data, error } = useSWR(key, fetcher);

이런 식으로 fetcher 함수를 선언하고 사용할 수도 있고,

JavaScript

const { data, error } = useSWR(key, (url) => {
  fetch(url).then((res) => res.json());
});

이런 식으로 아예 useSWR 함수 내에 적어주어도 된다.

전역으로 fetcher 설정하기

매번 fetcher를 선언해주는 것은 번거로울 수 있다. 이 번거로움을 해소하기 위해 SWR은 SWRconfig 컨텍스트를 통해 전역 fetcher를 설정할 수 있게 해준다.

JavaScript

<SWRConfig value={options}>
  <Component />
</SWRConfig>

이렇게 SWRConfig로 감싸주는 컴포넌트에선 value에 전달하는 options의 내용이 전역 설정으로써 전달된다.

이를 활용하면 다음과 같이 fetcher를 전역으로 설정할 수 있다.

JavaScript

function App() {
  const options = {
    fetcher: (resource, init) =>
      fetch(resource, init).then((res) => res.json()),
  };
  return (
    <SWRConfig value={options}>
      <Home />
    </SWRConfig>
  );
}

이로써 <Home /> 컴포넌트 안에서 사용 되는 모든 useSWR은 제공된 fetcher를 사용하게 된다. 즉,

JavaScript

function Home() {
  const { data: first } = useSWR(firstKey);
  const { data: second } = useSWR(secondKey);
}

이 두 개의 useSWR은 fetcher를 작성하지 않아도 상술한 fetcher를 사용하고 있는 것이다.

data

useSWR에 의해 반환된 데이터를 의미한다.

error

데이터를 패칭하는 과정에서 오류가 발생할 시 반환된다.

사용 예시

서버로부터 사용자의 데이터를 가져와 화면에 출력해 주는 예시이다.

JavaScript

import useSWR from "swr";

const fetcher = (url) => fetch(url).then((res) => res.json());

function Profile() {
  const { data, error } = useSWR("/api/user/123", fetcher);

  if (error) return <div>failed to load</div>;
  if (!data) return <div>loading...</div>;

  return <div>Welcome, {data.name}!</div>;
}

이렇게 fetcher를 선언하고, data와 error를 받아온 후, 에러와 데이터를 활용하여 이름을 출력할 수 있다.

참고 문헌

[VSCode] 자동 저장 설정하기.

Light9639 — Fri, 17 Feb 2023 17:28:00 +0900

VSCode로 코드를 작성할 때 계속 저장하면서 작업을 해야하는 경우가 있다. 왜냐하면 작업 도중 VSCode가 오류를 일으키거나 입력이 잘못되어 작업하던 자료가 없어지는 상황이 일어나기 때문이다. 이 문제를 해결하려면 VSCode에 있는 자동저장 기능을 켜 놓으면 문제를 해결할 수 있다.

파일 자동 저장 설정하기

VSCode 설정하기

우선 VSCode 설정파일에서 자동저장을 변경해야 하는데 설정에 들어가는 3가지 방법이 있다.

맨 위 상단에 파일에서 기본설정 클릭 후 설정 메뉴를 클릭하는 법.
화면 왼쪽 하단의 톱니바퀴 모양을 클릭하는 법
단축키 CTRL+,를 클릭하는 법이 있다.

Auto Save 설정하기

설정에 들어갔다면 사용자 - 텍스트 편집기 - 파일로 들어간다다. 이후 Auto Save 란에서 자동저장 설정을 할 수 있다.

Auto Save에는 총 4가지의 설정값이 있다.

off : 자동저장 안 하기
after delay: Auto Save Delay에서 설정한 시간이 지난 경우 자동저장하기
onFocusChange : 에디터 밖으로 포커스를 이동하면 자동 저장하기
onWindowChange : VSCode 에디터 밖으로 포커스를 이동하면 자동저장하기

Auto Save Delay 설정하기

Auto Save Delay는 Auto Save가 after delay인 경우에 자동저장 설정이 적용 되며, 자동 저장되기까지의 시간을 설정해놓으면 그 시간이 지난 후에 자동 저장이 된다. 기본값은 1000ms로 되어 있으며, 이 설정을 유지하면 1초가 지났음에도 파일에 변경이 없다면 자동으로 저장된다.

자동 저장 확인

자동 저장이 잘 되고 있는지 확인하려면, 왼쪽 탐색기의 하단 내용 중 타임라인을 확인하면 된다.

자동저장 설정을 완료했다면 위의 그림과 같이 자동 저장이 잘 되고 있는 것을 확인할 수 있다.

참고 문헌

[CSS] 밑줄 애니메이션 작성법.

Light9639 — Fri, 17 Feb 2023 15:20:39 +0900

CSS로 밑줄 애니메이션 만들어보자

프론트엔드 작업을 하다보면 강조하고 싶은 글들이 있을 때 형광펜 효과나 애니메이션 효과를 사용해야 할 때가 있다. 왜냐하면 형광펜 효과나 애니메이션 효과가 들어가게 되면 방문자들에게 좀 더 좋은 UI를 제공할 수 있기 때문이다.

저는 첫번째 예제 파일에서는 CSS를 이용한 밑줄 효과를 작성했는데, 이것은 "형광펜으로 밑줄을 그은 듯한 느낌의 CSS 스타일"로, 3가지 종류의 예시를 작성해보았다. 두번째 예제 파일에서는 "마우스 호버시 밑줄이 나타나는 애니메이션 CSS"를 작성해보았다.

형광펜 밑줄 효과

우선 <mark>태그만 사용한 경우

mark 태그를 사용하면 기본적으로 노란색 형광펜이 칠해진 상태가 된다.

HTML

/* HTML */
<p>HTML의 <mark>mark tag만 사용한</mark> 형광펜 효과.</p>

<p>
  HTML의 <mark class="green">mark tag만 사용한</mark> 형광펜 효과(초록색).
</p>

/* CSS */
mark.green {
  background-color: rgba(80, 255, 0, 0.3);
}

CSS의 배경색(background-image)를 사용한 경우

background-color, background-image의 linear-gradient 속성을 활용한 예제.

HTML

/* HTML */
<p>
  <span class="highlight">CSS의 배경색(background-color)</span>을 이용한
  형광펜 효과
</p>

<p>
  <span class="highlight two-highlight">CSS의 배경색(background-color)</span
  >을 이용한 형광펜 효과(두가지색)
</p>

/* CSS */
.highlight {
  background-color: #fff2ac;
  background-image: linear-gradient(to right, #ffe359 0%, #fff2ac 100%);
}

.highlight.two-highlight {
  background-color: #fff2ac;
  background-image: linear-gradient(
    to right,
    rgb(132, 250, 176) 0%,
    rgb(143, 211, 244) 100%
  );
}

형광펜으로 밑의 반만 줄을 그은듯한 효과

형관펜으로 밑의 부분 반만 밑줄을 긋고 싶다면 50%를 중간에 넣어주면 적용된다.

HTML

/* HTML */
<p>
  <span class="half-highlight">CSS의 배경색(background-color)</span>을
  이용한 형광펜으로 반만 밑줄 그은 효과
</p>

/* CSS */
.half-highlight {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, #ffd0ae 50%);
}

예제 파일

위에서 작성한 3가지 예제를 codeSandBox에서 구현한 예제 파일.

마우스를 올려 놓으면 밑줄이 그어지는 애니메이션 효과

왼쪽에서 오른쪽으로 이동하는 애니메이션

밑줄이 Hover 시에 왼쪽에서 오른쪽으로 이동하는 애니메이션 예제.

HTML

/* HTML */
<p>
    <span class="to-right-underline">왼쪽에서 오른쪽으로 이동하는 Animation</span>
</p>

/* CSS */
.to-right-underline {
  position: relative;
}
.to-right-underline:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 0px;
  height: 2px;
  margin: 5px 0 0;
  transition: all 0.2s ease-in-out;
  transition-duration: 0.3s;
  opacity: 0;
  background-color: #8fd3f4;
}
.to-right-underline:hover:after {
  width: 100%;
  opacity: 1;
}

가운데서 좌우로 펼쳐지는 애니메이션

밑줄이 Hover 시에 가운데서 좌우로 펼쳐지는 애니메이션 예제.

HTML

/* HTML */
<p>
    <span class="spread-underline">가운데서 좌우로 펼쳐지는 라인 Animation</span>
</p>

/* CSS */
.spread-underline {
  color: #333;
  text-decoration: none;
  display: inline-block;
  padding: 15px 0;
  position: relative;
}
.spread-underline:after {
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: #ffb000;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}
.spread-underline:hover:after {
  width: 100%;
  left: 0;
}

형광펜 효과가 위로 올라오는 애니메이션

밑줄이 Hover 시에 형광펜 효과가 위로 올라오는 애니메이션 예제.

HTML

/* HTML */
<p>
    <span class="highlight">형광펜 효과가 위로 올라오는 Animation</span>
</p>

/* CSS */
.highlight {
  background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
  background-repeat: no-repeat;
  background-size: 100% 50%;
  background-position: 0 88%;
  transition: background-size 0.25s ease-in;
}
.highlight:hover {
  background-size: 100% 100%;
}

밑줄이 위에서 살짝 떨어지는 애니메이션

밑줄이 Hover 시에 밑줄이 위에서 살짝 떨어지는 애니메이션 예제.

HTML

/* HTML */
<p>
    <span class="drop-in-underline">위에서 살짝 떨어지는 Animation</span>
</p>
    
/* CSS */
.drop-in-underline {
  position: relative;
  padding-bottom: 10px;
}
.drop-in-underline:before {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #b9f;
}
.drop-in-underline:before {
  opacity: 0;
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
  -webkit-transition: opacity 0s,
    -webkit-transform 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: opacity 0s,
    -webkit-transform 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: transform 0s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s;
  transition: transform 0s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s,
    -webkit-transform 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.drop-in-underline:hover:before {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: opacity 0.2s,
    -webkit-transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: opacity 0.2s,
    -webkit-transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    opacity 0.2s;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    opacity 0.2s, -webkit-transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

예제 파일

위에서 작성한 3가지 예제를 codeSandBox에서 구현한 예제 파일이다.

참고 문헌

[JavaScript] Caps Lock 활성화 여부 체크하기

Light9639 — Thu, 16 Feb 2023 11:32:09 +0900

Form 태그 안에서 회원가입 기능이나, 로그인 기능을 만들 때 비밀번호에 Caps Lock이 된 채로 입력되어 문제가 발생하는 경우가 종종 있다. 왜냐하면 <input type="password" />를 사용하여 비밀번호를 입력할 때 화면에 입력글자가 * 로 표시 되기 때문이다.

따라서 Input 태그에 현재 입력하는 문자가 대문자인지 소문자인지 구분하기 위해서는 Javascript를 이용해 Caps Lock 상태에서 입력할 때 경고 메세지가 나오도록 하는 방법에 대해 작성해 보겠다.

Caps Lock 체크 만들기.

HTML 작성하기

우선 Html 부분에 Input과 Caps Lock 경고메세지를 띄울 div를 만든다. 그리고 Input 안에 onkeyup="checkCapsLock(event)"을 넣어서 Input 안에 경고메세지를 띄워준다. 만약 Input내용 작성을 전부 완료한 상태에서 메세지를 띄워주고 싶다면 onchange="checkCapsLock(event)"를 사용하면 된다.

HTML

<input
  id="name"
  // onkeyup는 바로바로 메세지를 출력시킴
  onkeyup="checkCapsLock(event)"
  // onchange를 사용하면 입력이 완료된 이후 경고창이 화면에 출력됨
  // onchange="checkCapsLock(event)"
  placeholder="작성해보세요."
  type="password"
/>
<div id="message"></div>

JavaScript 작성하기

Html을 전부 작성했다면 밑의 Javascript 코드를 작성하면 화면에 경고창이 출력된다.

JavaScript

function checkCapsLock(event)  {
  if (event.getModifierState("CapsLock")) {
    document.getElementById("message").innerText = "Caps Lock이 활성화된 상태입니다."
  } else {
    document.getElementById("message").innerText = ""
  }
}

완성 파일

전체 코드를 보고 싶으시다면 제가 만든 CodesandBox에서 확인하시면 됩니다.

참고 문헌

[JavaScript] For 문을 이용하여 만든 1~100까지 더하기 예제.

Light9639 — Thu, 16 Feb 2023 11:24:09 +0900

JavaScript의 For문 함수를 사용하여 1~100까지 더하기 예제를 작성해보자.

1~100까지 더하기 예제.

"sum + i"를 이용하여 만든 더하기 예제.

JavaScript의 sum + i를 이용하여 만든 더하기 예제.

JavaScript

let sum = 0;
for(let i = 1; i <= 100; i++) {
  sum = sum + i;
}

document.writeln(sum);

"+="를 이용하여 만든 더하기 예제.

JavaScript의 +=를 이용하여 만든 더하기 예제.

JavaScript

let sum = 0;
for(let i = 1; i <= 100; i++) {
  sum += i;
}

document.writeln(sum);

참고 문헌

1[Javascript] 1부터 100까지의 합 계산하기 (for문)

[JavaScript] For 문을 이용하여 만든 구구단 예제.

Light9639 — Thu, 16 Feb 2023 11:23:49 +0900

JavaScript의 For문을 이용하여 구구단 예제를 작성해보자.

For문을 이용한 구구단 예제.

For문을 화면에 출력하는 예제.

For문을 이용하여 2단부터 화면에 출력하는 예제.

JavaScript

for(let i = 2; i <= 9; i++) {
  document.write(i + '단');
  document.write('<br>');
  for(let j = 1; j <= 9; j++) {
    document.write(i + ' * ' + j + ' = ' + (i*j));
    document.write('<br>');
  }
}

For문을 콘솔로 출력하는 예제.

For문을 콘솔로 출력하는 예제 코드.

JavaScript

for(let i = 2; i <= 9; i++) {
  console.log(i + '단');
  for(let j = 1; j <= 9; j++) {
    console.log(i + ' * ' + j + ' = ' + (i*j));
  }
}

For문을 이용하여 만든 구구단 테이블 예제.

위의 방법을 활용하여 For문으로 구구단 테이블을 생성하고 화면에 출력하는 예제.

JavaScript

document.write('<table border="1">');

// header
document.write('<thead>');
document.write('<tr>');
for(let i = 2; i <= 9; i++) {
  document.write('<th>' + i + '단 </th>');
}
document.write('</tr>');
document.write('</thead>');

// body
document.write('<tbody>');
for(let i = 1; i <= 9; i++) {
  document.write('<tr>');
  for(let j = 2; j <= 9; j++) {
    document.write('<td>' + j + ' * ' + i + ' = ' + (j*i) + '</td>');
  }
  document.write('</tr>');
}
document.write('</tbody>');

document.write('</table>');

참고 문헌

[Node.js] dotenv 미들웨어 사용법.

Light9639 — Wed, 15 Feb 2023 23:31:29 +0900

Dotenv는 무엇인가?

웹 개발을 하다보면 특정 값들은 다른 개발환경을 사용할려고 하거나, 다른 컴퓨터로 코드를 옮겨야 할 때 수정이 필요하다. 예를 들면.

다른 컴퓨터에선 3000 포트를 사용해야 할 때.
나중에 DB를 이전하여 DB 접속 문자열이 바뀌는 상황.
내가 만든 코드를 팀원과 공유해야 하는데 내 아이디와 비번이 적혀있어서 보안 문제가 발생할 때.

이러한 환경에 따라 가변적인 변수 데이터들을 환경변수라고 부른다. 영어로는 environment variable이라고 부른다.

그래서 웹 개발자을 할 때는 환경변수를 한곳에 모아서 관리하게 되는데 이를 .env 파일에 모아서 관리하게 된다. .env파일에 모든 중요 환경변수들을 넣은 다음에, server.js로 가서 .env파일에 있는 포트정보와 데이터베이스 URL을 작성하는 방식의 코딩을 하면 된다. 이 경우에는 server.js 파일에 보안 문제가 생길 경우에도 중요한 정보들은 .env 파일에 있기 때문에 보안상 이점도 존재한다. 그럼 사용하는 방법을 포스팅해보겠다.

Dotenv 사용법

dotenv 라이브러리 설치하기

.env 파일을 Node.js 서버에서 사용하려면, 우선 터미널을 킨 다음 Npm이나 Yarn을 사용하여 dotenv 설치해야 한다.

Shell

npm install dotenv
# or
yarn add dotenv

환경변수가 있는 server.js에 dotenv 라이브러리를 등록

server.js 상단에 let, const 변수가 모여있는 곳에 하단의 코드를 작성하면 된다. 그러면 하단에서 환경변수를 자유롭게 사용할 수 있다.

JavaScript

(server.js)

require('dotenv').config()

server.js와 같은 경로에 .env 파일 생성

위의 코드를 작성했다면, 나중에 변경이 될 것 같은 환경변수들을 .env 파일에 전부 다 적고 저장하면 된다.

ENV

(.env 파일)

PORT=8080
DB_URL="mongodb+srv://Light9639@~~~"

형식은 var 문법으로 숫자와 문자 변수를 만드는 것과 같은 방식으로 왼쪽에는 변수명을 넣고, 오른쪽은 값을 넣는다고 보면 된다. 다만 변수 이름들은 보통 대문자로 표기한다. 변수를 server.js에서 사용하는 방법은 다음과 같이 process.env.PORT 라는 방식으로 사용하면 된다.

JavaScript

(server.js)

console.log('PORT:', process.env.PORT);
console.log('DB_URL:', process.env.DB_URL);

이렇게 .env 파일에 모든 환경변수를 모아놓고 사용하게 되면 나중에 .env 파일만 수정하면 되니까 관리도 편해지고, 나중에 작업환경이 바뀌거나 클라우드에 올릴 때도 작성한 부분 변경해주면 쉽게 환경세팅이 가능해진다.

이러면 나중에 환경변수 변경이 필요할 때 직접 server.js 상에 변경해야 할 코드를 찾아서 바꾸는 것이 아니라 .env 파일만 수정하면 되기 때문에 좀 더 편리하게 사용할 수 있다.

참고 문헌

[JavaScript] Day.js 사용법.

Light9639 — Wed, 15 Feb 2023 21:42:11 +0900

JavaScript를 사용하다 보면 가장 불편한 것이 바로 시간을 출력하고 계산할 때이다. 흔히 new Date()를 이용하여 날짜를 출력하는데 원래 자바스크립트 창시자 브랜든 아이크가 Java에서 사용하던 시간 기능을 그대로 가져와 사용하다 보니, 현재 자바에서도 쓰이지 않는 기능을 그대로 사용하고 있어서 이런 문제가 발생한다.

물론 new.Intl 함수나 앞으로 나올 신기능 Temporal을 활용해보는 것도 좋지만 다른 대안은 Day.js를 사용하는 것도 있다. 그래서 가끔식은 new Date() 말고 Day.js를 사용하여 날짜 작업을 하다보면 매우 편리함을 느낄 수 있다. 그럼 이 글에서 Day.js 사용법을 간략히 알아보자.

Day.js 간략한 사용법.

dayjs()에 날짜와 시간을 입력하고 date 변수에 넣은 다음 다음과 같이 사용하면 된다.

JavaScript

import dayjs from 'dayjs';
const date = dayjs('2023-02-24 10:30:21')

console.log(date.year()) // 2023 (연도)
console.log(date.month() + 1) // 2 (월)
console.log(date.date()) // 24 (일)
console.log(date.hour()) // 10 (시)
console.log(date.minute()) // 30 (분)
console.log(date.second()) // 21 (초)
console.log(date.format('YYYY년 MM월 DD일 HH시 mm분')) // '2023년 02월 24일 10시 30분 21초'

format() 사용법

format()를 사용하면 출력 방식을 변경시킬 수 있습니다.

JavaScript

import dayjs from 'dayjs';
const date = dayjs("2023-02-15 20:15:25", "YYYY-MM-DD HH:mm:ss");

console.log(date.format()); // 2023-02-15T20:15:25+09:00
console.log(date.format("YY-MM-DD")); // 23-02-15
console.log(date.format("DD/MM/YY")); // 15/02/23
console.log(date.format("YYYY.MM.DD HH:mm:ss")); // 2023.02.15 20:15:25
console.log(date.format("YYYY년MM월DD일 HH:mm:ss")); // 2023년02월15일 20:15:25

JavaScript

import dayjs from 'dayjs';
const now = dayjs();
now.format();

const date1 = dayjs("2023-02-24 10:30:21");
console.log(date1.format()); // 2023-02-24T10:30:21+09:00

const date2 = dayjs("2023-02-24 10:30:21", "YYYY.MM.DD");
console.log(date2.format()); // 2023-02-24T10:30:21+09:00

const date3 = dayjs("02/24/23", "MM/DD/YY");
console.log(date3.format()); // 2023-02-24T00:00:00+09:00

const date4 = dayjs("2023-02-24 10:30:21", "YYYY-MM-DD HH:mm:ss");
console.log(date4.format()); // 2023-02-24T10:30:21+09:00

get() 사용법.

get() 함수를 이용하여 날짜와 시간 값을 구할 수 있다.

JavaScript

import dayjs from 'dayjs';
const now = dayjs();

now.format(); // 2022-05-24T19:03:02+09:00

console.log(now.get("year")); // 2023 (년)
console.log(now.get("y")); // 2023 (년)

console.log(now.get("month")); // 1 (월 - 0~11) 실제로는 2월임
console.log(now.get("M")); // 1 (월 - 0~11) 실제로는 2월임

console.log(now.get("date")); // 15 (일)
console.log(now.get("D")); // 15 (일)

console.log(now.get("day")); // 수요일 (요일 - 일요일 : 0, 토요일 : 6)
console.log(now.get("d")); // 수요일 (요일 - 일요일 : 0, 토요일 : 6)

console.log(now.get("hour")); // 22 (시)
console.log(now.get("h")); // 22 (시)

console.log(now.get("minute")); // 11 (분)
console.log(now.get("m")); // 11 (분)

console.log(now.get("second")); // 32 (초)
console.log(now.get("s")); // 32 (초)

console.log(now.get("millisecond")); // 696 (밀리초)
console.log(now.get("ms")); // 696 (밀리초)

add() 사용법.

add() 함수를 이용하면 날짜에 시간을 더할 수 있다.

JavaScript

import dayjs from 'dayjs';
const date = dayjs('2023-02-24 10:30:21')

console.log(date.add(1, "year").format()); // 2024년
console.log(date.add(1, "month").format()); // 3월 24일
console.log(date.add(1, "week").format()); // 3월 3일

subtract() 사용법

subtract() 함수를 이용하면 날짜에서 시간을 뺼 수 있다.

JavaScript

import dayjs from 'dayjs';
const date = dayjs('2023-02-24 10:30:21')

console.log(date.subtract(1, "year").format()); // 2022년
console.log(date.subtract(1, "month").format()); // 1월 24일
console.log(date.subtract(1, "week").format()); // 2월 17일

참고 문헌

[WebSite] Tistory(티스토리) 코드블럭 사용법.

Light9639 — Wed, 15 Feb 2023 17:07:06 +0900

Syntax Highlight를 이용한 코드블럭 사용법

코드블럭은 블로그 글을 작성할 때 프로그래밍 소스코드를 삽입하거나 특정 내용을 강조하고 싶을 때 자주 사용된다. 티스토리에서 제공하는 코드블럭을 사용하기 위해서는 새로운 에디터와 Syntax Highlight 플러그인 적용이 필요하다.

새 에디터 적용하기

예전 에디터를 사용 중이시라면 설명에 따라서 새로운 에디터로 변경해야 한다. 새로운 에디터 사용은 관리자 메뉴의 콘텐츠 설정에서 변경할 수 있다. 우선 새로운 글쓰기를 [사용합니다]를 선택 후 변경사항 저장을 누르면 된다.

Syntax Highlight 플러그인 적용하기

그 다음, 티스토리 플러그인 Syntax Highlight를 적용하면 된다. 플러그인은 관리자 메뉴의 하단에 있는 플러그인 탭에서 설정할 수 있다. 플러그인 탭을 클릭하면 티스토리에서 제공하는 다양한 플러그인을 확인할 수 있다.

플러그인을 선택한 후, 전체 플러그인 수가 많기 때문에 검색 기능을 사용해서 Syntax Highlight 플러그인을 찾으면 된다. 이후 플러그인 리스트에서 Highlight를 검색 하여 검색 결과에 나타난 Syntax Highligh(코드 문법 강조)를 클릭한다.

그 다음 아래에 표시되는 테마 중 원하는 테마를 선택 후 적용을 눌러주세요. 저는 Atom One Dark 테마를 사용하고 있습니다.

기본
Atom One Dark
Atom One Light
Github
Monokai
Darcula
Visual Studio
Xcode

코드블럭 삽입하기

적용한 Syntax Highlight를 확인하기 위해서는 우선 새로 글을 작성해야 한다. 티스토리 글쓰기를 시작하면 새로운 에디터가 적용된 모습을 확인할 수 있다. 코드블럭을 사용하기 위해서는 우측 상단에 있는 더보기 메뉴를 누른 다음 코드블럭을 클릭하면 된다.

새로운 에디터 글쓰기에서 코드블럭을 선택하면 소스코드를 삽입할 수 있는 창이 뜬다. 삽입하는 코드의 언어를 선택한 후 소스코드를 입력하시면 된다. 현재 Syntax Highlight에서 삽입 가능한 프로그래밍 언어의 종류는 아래와 같이 12가지가 있다.

HTML
CSS
Javscript
Python
Java
C++
Kotlin
Swift
PHP
Go
C#
SQL

그럼 소스코드 입력을 완료하신 후 아래의 확인 버튼을 눌러주세요.

코드블럭 삽입창에서 입력한 소스코드에 하이라이트가 적용된 모습을 확인할 수 있다. 이전에 코드블럭을 사용하지 않은 상태에서 일반 글쓰기를 했을 때와 비교해보면 좀 더 세련된 것을 확인할 수 있다.

코드블럭 삽입한 후, 코드블럭을 이용하여 실제 소스코드를 삽입한 모습으로. 글쓰기 화면에서 보여지는 모습과는 차이가 있는 것을 확인할 수 있다.

HTML

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

참고 문헌

[JavaScript] For 문으로 만들어보는 별모양 예제.

Light9639 — Wed, 15 Feb 2023 16:59:44 +0900

자바스크립트를 이용하여 별모양 만들기를 포스팅해 보았다.

정사각형 별찍기

JavaScript

for(let i = 0; i < 5; i++)  {
  for(let j = 0; j < 5; j++)  {
    document.write('*');
  }
  document.write('<br>');
}

삼각형 별찍기

왼쪽 정렬

JavaScript

for (let i = 0; i < 5; i++) {
  for (let j = 0; j <= i; j++) {
    document.write('*')
  }
  document.write('<br>');
}

오른쪽 정렬

JavaScript

for(let i = 0; i < 5; i++)  {
  for(let j = 4; j > i; j--)  {
    document.write('&nbsp');
  }
  for(let j = 0; j <= i; j++) {
    document.write('*');
  }
  document.write('<br>');
}

뒤집힌 삼각형 별찍기

왼쪽 정렬

JavaScript

for (let i = 0; i < 5; i++) {
  for (let j = 5; j > i; j--) {
    document.write('*');
  }
  document.write('<br>');
}

오른쪽 정렬

JavaScript

for(let i = 0; i < 5; i++)  {
  for(let j=0; j <= i; j++)  {
    // space
    document.write('&nbsp');
  }
  for(let j=5; j > i; j--)  {
    document.write('*');
  }
  document.write('<br>');
}

정삼각형 별찍기

JavaScript

for(let i = 0; i < 5; i++)  {
  for(let j=4; j > i; j--)  {
    // space
    document.write('&nbsp');
  }
  for(let j=0; j <= i; j++)  {
    document.write('*');
  }
  for(let j=1; j <= i; j++)  {
    document.write('*');
  }
  document.write('<br>');
}

뒤집힌 정삼각형 별찍기

JavaScript

for(let i = 0; i < 5; i++)  {
  for(let j=0; j < i; j++)  {
    document.write('&nbsp');
  }
  for(let j=5; j > i; j--)  {
    // space
    document.write('*');
  }
  for(let j=4; j > i; j--)  {
    document.write('*');
  }
  document.write('<br>');
}

다이아몬드 별찍기

JavaScript

for(let i = 0; i < 5; i++)  {
  for(let j = 4; j > i; j--)  {
    document.write('&nbsp');
  }
  for(let j = 0; j <= i; j++)  {
    document.write('*');
  }
  for(let j = 1; j <= i; j++)  {
    document.write('*');
  }

  document.write('<br>');
}

for(let i = 0; i < 4; i++)  {
  for(let j = 0; j <= i; j++)  {
    document.write('&nbsp');
  }
  for(let j = 4; j > i; j--)  {
    document.write('*');
  }
  for(let j = 3; j > i; j--)  {
    document.write('*');
  }
  document.write('<br>');
}

참고 문헌

[HTML] ️ Video 태그 사용법.

Light9639 — Wed, 15 Feb 2023 16:57:22 +0900

<video>태그는 HTML 상에서 비디오를 정의할 때 사용합니다. <video> 요소 내에 위치하는 텍스트는 사용자의 브라우저가 <video> 요소를 지원하지 않을 경우 화면에 표시됩니다.

비디오를 넣고 싶다면

비디오 파일 HTML 작성법

우선 비디오 파일을 작업 폴더 안에 준비합니다. 그리고 밑의 코드와 같이 작성하면 비디오가 보입니다.

HTML

<video>
  <source src="비디오파일경로">
</video>

비디오 태그에 넣을 수 있는 속성

비디오 태그 속성 작성법

비디오 태그를 사용할 때 여러가지 속성을 넣을 수 있는데, 그 속성은 다음과 같다.

muted : 음소거 상태
autoplay : 자동재생 (muted와 함께 넣어야 동작한다.)
poster : 썸네일 이미지
preload : 영상을 먼저 다운을 받을지 말지를 선택가능합니다 (auto, metadata, none 사용가능)
controls : 재생, 정지 등 조작 메뉴를 보여준다.
loop : 동영상을 반복 재생한다.
poster : 동영상 재생 전에 보여줄 이미지이다.
preload : 페이지를 열 때 무엇을 로드할지 정한다.
auto : 동영상, 메타데이타 모두 로드한다.
metadata : 메타데이타만 로드한다.
none : 로드하지 않는다.
source
- src : 동영상 위치를 입력한다. 웹브라우저가 가장 많이 지원하는 형식은 MP4이다.
- type : 동영상 타입을 알려준다. 만약 MP4 파일이라면 video/mp4라고 적는다.

zzz : 웹브라우저가 video 태그를 지원하지 않을 때 출력될 텍스트이다.

그런데 video 태그를 사용할 때 상충되거나 혼자서는 작동하지 않는 속성이 있다. 예를 들어 autoplay로 정하면 preload는 무시된다. 크롬 등 일부 웹브라우저에서는 muted와 autoplay를 같이 사용해야 자동 시작이 작동한다. 이러한 속성을 넣은 video 태그를 사용하려면 다음과 같이 사용하면 된다.

HTML

<video autoplay muted loop poster="썸네일경로" preload="metadata">
  <source src="비디오파일경로">
</video>

예제 파일

여러개의 영상 넣기

브라우저에 따라 지원하는 코덱이 다르기 때문에 한 가지 형식만 사용했을 경우 일부 오래된 브라우저에서는 작동을 안 할 수 있습니다. 사용자의 브라우저 환경을 모두 고려한다면 최신 브라우저와 이전 브라우저도 모두 비디오를 재생할 수 있도록 ogv 파일도 함께 지정해주어야 합니다

HTML

<video>
  <source src="비디오 파일 경로" type="video/mp4"></source>
  <source src="비디오 파일 경로" type="video/ogg"></source>
  대체 내용
</video>

반복해서 재생되는 영상 예제.

페이지가 로드되면 동영상이 자동 재생되고, 반복하여 재생된다.
controls를 사용하지 않았기 때문에 재생이나 정지 등 조작 메뉴가 보이지 않는다.
video 태그를 지원하지 않는 웹브라우저에서는 'Your browser does not support the video tag.'를 진하게 출력한다.

HTML

<video muted autoplay loop>
  <source src="videos.mp4" type="video/mp4">
  <strong>Your browser does not support the video tag.</strong>
</video>

재생되기 전 이미지를 보여주는 영상 예제.

페이지가 로드되면 image.png라는 이미지와 재생 메뉴를 보여준다.
재생 버튼을 클릭하면 동영상을 재생한다.
video 태그를 지원하지 않는 웹브라우저에서는 'Your browser does not support the video tag.'를 진하게 출력한다.

HTML

<video controls poster="image.png">
    <source src="videos.mp4" type="video/mp4">
    <strong>Your browser does not support the video tag.</strong>
</video>

예제 파일

위의 3가지 예제 파일을 codesandbox로 구현하면 다음과 같다.

참고 문헌

[CSS] ️ 삼각형을 CSS로 만들어보자.

Light9639 — Wed, 15 Feb 2023 12:27:55 +0900

HTML과 CSS 중 border 속성을 이용하여 삼각형을 만들 수 있다. 그럼, 여러가지 형태의 삼각형을 만들고, 그 삼각형을 여러 방향으로 만드는 방법을 알아보자.

HTML 생성하기

삼각형을 만들려면 우선, HTML 파일에 다음과 같이 내용이 없는 요소를 하나 생성한다.

HTML

<div class="triangle"></div>

사각형 만들기

HTML을 생성했다면, 가로와 세로의 크기를 0으로 만든다.

이후 아래쪽과 왼쪽, 오른쪽에 테두리를 추가하면 사각형을 만들 수 있다.

CSS

.triangle {
    width: 0px;
    height: 0px;
    border-bottom: 360px solid #666666;
    border-left: 180px solid #666666;
    border-right: 180px solid #666666;
}

삼각형 만들기

위에서 만든 사각형 CSS를 오른쪽 테두리의 색을 투명으로 하면 삼각형이 만들어집니다.

CSS

.triangle {
    width: 0px;
    height: 0px;
    border-bottom: 360px solid #666666;
    border-left: 180px solid transparent;
    border-right: 180px solid transparent;
}

테두리의 두께를 적절히 변경하면 여러 형태의 삼각형을 만들 수 있습니다.

CSS

.triangle {
  width: 0px;
  height: 0px;
  border-bottom: 360px solid #666666;
  border-left: 180px solid transparent;
  border-right: 180px solid transparent;
}

정삼각형 만들기

정삼각형의 높이는 밑변 길이의 반의 1.732배이다.

이것을 직접 계산하거나, calc 속성으로 적절히 높이를 정해주면 정삼각형을 만들 수 있습니다.

CSS

.triangle {
    width: 0px;
    height: 0px;
    border-bottom: calc( 180px * 1.732 ) solid #666666;
    border-left: 180px solid transparent;
    border-right: 180px solid transparent;
}

왼쪽 테두리의 크기를 0으로 하면 직각삼각형을 만들 수 있다.

CSS

.triangle {
    width: 0px;
    height: 0px;
    border-bottom: 360px solid #666666;
    border-left: 0px solid transparent;
    border-right: 240px solid transparent;
}

참고 문헌

[CSS] ️ Border에 그라데이션 적용하기.

Light9639 — Wed, 15 Feb 2023 12:21:15 +0900

바로 전 포스팅에서 텍스트에 그라데이션을 적용하는 법에 대해 알아보았다. 그렇다면 이번에는 border에 그라데이션을 적용하는 법에 대해서 포스팅해보겠다.

예제 파일 작성하기

Index.html 수정

index.html의 body 부분 안에 밑의 코드를 작성한다.

HTML

<div class="box1"></div>
<div class="box2"></div>

Style.css 작성.

우선 HTML에 CSS를 다음과 같이 추가하여 박스들을 정 중앙에 위치시킨다.

CSS

html {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

이후 .box1 부분에 다음과 같이 CSS를 작성한다.

CSS

.box1 {
    width: 200px;
    height: 200px;
    border: 5px solid;
    border-radius: 20px;
    border-image: linear-gradient(to right, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%);
    border-image-slice: 1;
    margin: 10px;
}

그런데 위에서 작성한 .box1은 border에 Gradient가 들어갔지만, border-radius가 먹히지 않는 문제가 있다. 이를 해결하기 위해서는 border-image속성 대신 background-image 속성을 사용하여 컨텐츠와 테두리를 따로따로 설정을 해주어야 한다고 한다. 간단히 설명하자면, background-origin은 background의 시작점을 설정해주는 속성이며, background-clip은 해당 background가 어느 요소까지를 차지할 것인지 설정하는 속성이라 할 수 있다.

그럼 어떻게 작성해야 하나면,

CSS

.box {
  background-image:linear-gradient(#fff, #fff);
  background-origin: border-box;
  background-clip: content-box;
}

우선 콘텐츠 영역은 #fff가 차지하게 하고

CSS

.box {
  background-image: linear-gradient(to right, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%);
  background-origin: border-box;
  background-clip: border-box;
}

border영역은 그라디언트로 설정하여 나누면 된다. 따라서 다음 코드와 같이 작성하면 border-radius가 적용된 Gradient border를 만들 수 있다.

CSS

.box2 {
    width: 200px;
    height: 200px;
    border: 5px solid transparent;
    border-radius: 20px;
    background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    margin: 50px 10px 10px;
}

완성화면

작성이 완료되었다면 밑에 화면 같이 생성될 것이다. 전체 코드를 보고 싶다면 제가 만든 CodeSandBox를 참고하시면 될 듯 싶다.

참고 문헌

[CSS] ️ 텍스트에 그라데이션 적용하기.

Light9639 — Wed, 15 Feb 2023 12:19:03 +0900

웹 개발을 하다보면 가끔식 사용하는 텍스트에 그라데이션 효과를 넣는 것이 헷갈릴 때가 있어서 지금 작성해보고자 한다.

우선 텍스트에 적용되는 그라디언트 속성을 다음과 같다.

CSS

# 이 속성은 그라데이션을 넣어주는 속성이다.
background: linear-gradient(방향, #색상 코드, #색상 코드, #색상 코드,... , #색상 코드);

# 이 속성은 요소의 배경이 어디까지 색을 채울지 정하는 속성이다.
-webkit-background-clip: text;

# 텍스트 문자의 채우기 색을 지정하는 속성으로, 이 속성이 지정되지 않는다면 color의 색상을 따라간다.
-webkit-text-fill-color: transparent;

그럼, 이 내용을 바탕으로 텍스트에 그라데이션을 적용하는 법을 작성해보자.

예제 파일 작성하기

Index.html

먼저 index.html을 다음과 같이 작성한다.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <div class="Wrapper">
        <h1>Text Gradient!</h1>
        <div class="Circle"></div>
    </div>
</body>

</html>

Style.css

index.html을 작성했다면 style.css를 다음과 같이 작성한다.

CSS

.Wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
}

h1 {
    font-size: 60px;
}

.Circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-image: linear-gradient(to left, #00c6fb 0%, #005bea 100%);
    margin: 0 auto;
}

여기서 텍스트에 그라디언트를 주고 싶다면 h1에 스타일을 다음과 같이 수정한다.

CSS

h1 {
    font-size: 60px;
    background-image: linear-gradient(to left, #00c6fb 0%, #005bea 100%);
    color: transparent;
    -webkit-background-clip: text;
}

완성 화면

작성이 완료되었다면 다음과 같은 화면이 나온다.

참고 문헌

[TypeScript] tsconfig.json 설정하기

Light9639 — Wed, 15 Feb 2023 12:17:51 +0900

tsconfig.json 설정하기

기본적으로 TypeScript 프로젝트에는 tsconfig.json이 존재한다. 이 파일에서는 ts 파일들을 js 파일로 어떻게 변환할 것인지 세부 설정을 할 수 있다.

TypeScript

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
    }
}

target은 타입스크립트 파일을 어떤 버전의 자바스크립트로 바꿀지를 정하는 부분이다. ES5 이외에도 ES2016, ESNEXT 등 원하는 자바스크립트 버전을 설정할 수 있다.

module은 자바스크립트 파일간 import 문법을 구현할 때 어떤 문법을 사용할 지를 정하는 부분이다. Commonjs는 require 문법, ES2015, ESNEXT는 import 문법을 사용한다.

일반적으론 IE 호환성을 위해서 ES5, Commonjs가 보편적으로 사용된다.

추가로 넣을만한 속성

TypeScript

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "noImplicitAny": true,
        "strictNullChecks": true
    }
}

noImplictAny는 any라는 타입이 의도치않게 발생한 경우 에러를 띄워주는 설정이며, strictNullChecks는 null, undefined 타입에 이상한 조작을 할 경우 에러를 띄우는 설정이다.

tsconfig.json에 들어갈 기타 항목들

tsconfig.json에서 가끔식 사용하는 설정들을 모은 코드이다.

TypeScript

{
 "compilerOptions": {

  "target": "es5", // 'es3', 'es5', 'es2015', 'es2016', 'es2017','es2018', 'esnext' 가능
  "module": "commonjs", //무슨 import 문법 쓸건지 'commonjs', 'amd', 'es2015', 'esnext'
  "allowJs": true, // js 파일들 ts에서 import해서 쓸 수 있는지 
  "checkJs": true, // 일반 js 파일에서도 에러체크 여부 
  "jsx": "preserve", // tsx 파일을 jsx로 어떻게 컴파일할 것인지 'preserve', 'react-native', 'react'
  "declaration": true, //컴파일시 .d.ts 파일도 자동으로 함께생성 (현재쓰는 모든 타입이 정의된 파일)
  "outFile": "./", //모든 ts파일을 js파일 하나로 컴파일해줌 (module이 none, amd, system일 때만 가능)
  "outDir": "./", //js파일 아웃풋 경로바꾸기
  "rootDir": "./", //루트경로 바꾸기 (js 파일 아웃풋 경로에 영향줌)
  "removeComments": true, //컴파일시 주석제거 

  "strict": true, //strict 관련, noimplicit 어쩌구 관련 모드 전부 켜기
  "noImplicitAny": true, //any타입 금지 여부
  "strictNullChecks": true, //null, undefined 타입에 이상한 짓 할시 에러내기 
  "strictFunctionTypes": true, //함수파라미터 타입체크 강하게 
  "strictPropertyInitialization": true, //class constructor 작성시 타입체크 강하게
  "noImplicitThis": true, //this 키워드가 any 타입일 경우 에러내기
  "alwaysStrict": true, //자바스크립트 "use strict" 모드 켜기

  "noUnusedLocals": true, //쓰지않는 지역변수 있으면 에러내기
  "noUnusedParameters": true, //쓰지않는 파라미터 있으면 에러내기
  "noImplicitReturns": true, //함수에서 return 빼먹으면 에러내기 
  "noFallthroughCasesInSwitch": true, //switch문 이상하면 에러내기 
 }
}

[SCSS] SCSS를 이용한 반응형 웹 개발하기.

Light9639 — Wed, 15 Feb 2023 12:14:52 +0900

CSS는 HTML 태그를 꾸미거나 효과를 넣어 주는 등, 디자인 요소를 추가할 때 사용하는 전처리 과정을 의미한다. 프로젝트의 규모가 커지고 반응형 웹을 구현할 때 CSS는 가독성이 떨어지고 유지보수가 어렵다는 단점이 있다.

하지만 SCSS는 CSS와 달리 코드의 재활용성을 높이고, 가독성을 올려 주기 때문에 유용하다. 특히 변수를 활용하여 코드를 작성할 수 있도록 지원하기 때문에 코드의 가독성을 높여주고 반응형 웹 작성을 더 수월하게 만들 수 있다. 그럼 SCSS를 이용하여 반응형 웹을 개발하는 방법을 알아보자.

SCSS를 이용한 반응형 웹 개발.

SCSS에서 반응형 사이즈 사용법.

우선 SCSS에서 변수를 설정하고 @mixin을 사용하여 밑과 같이 작성한다.

SCSS

$pc2000: 2000px;
$pc1560: 1560px;
$pc1420: 1420px;
$pc1280: 1280px;
$pc1200: 1200px;
$pc1024: 1024px;
$mobile767: 767px;
$mobile480: 480px;

//respond mixin
@mixin respond($size) {
    @media screen and (max-width:$size) {
        @content;
    }
}

위의 코드를 사용하는 예제는 다음과 같다.

SCSS

body {
    background-color: #f6f5ef;
    @include respond($mobile767) {
        font-size: 12px;
    }
}

SCSS에서 position 사용법.

일반적인 CSS에서 position 함수를 사용하려면 top, right, bottom, left를 지정하여 위치를 지정해야 한다. 그러나 SCSS에서 position 함수를 사용할 때 다음과 같이 @mixin을 이용하면 쉽게 사용이 가능하다.

우선 기본 position을 absolute로 설정하고 top, right, bottom, left를 작성할 파라미터를 만들면 된다.

SCSS

//position mixin
@mixin pos($p:absolute, $top:null, $right:null, $bottom:null, $left:null) {
    position: $p;
    top: $top;
    right: $right;
    bottom: $bottom;
    left: $left;
}

위의 코드를 사용하려면 밑의 식과 같이 원하는 position을 입력하고 top, right, bottom, left를 작성하면 사용할 수 있다.

SCSS

.video-container {
    @include pos($p: relative, $top: 0, $right: 0, $bottom: 0, $left: 0);
    padding: {
        top: 0;
        bottom: 34.1%;
    };
    height: 0;
    z-index: 1;
    overflow: hidden;
    @include respond($pc2000) {
        display: none;
    }
    video {
        @include pos($p:absolute, $top: -18%, $right: 0, $bottom: 0, $left: 0);
        opacity: 1;
        width: 100%;
        height: 46.4vw;
        transform: scale(1.05);
    }
}

예제 파일

더 많은 예제를 보고싶다면, 저의 github 프로젝트에서 확인하실 수 있습니다.

GitHub - light9639/StarBucks: ☕ StarBucks 프로젝트 소개 페이지입니다.

☕ StarBucks 프로젝트 소개 페이지입니다. Contribute to light9639/StarBucks development by creating an account on GitHub.

github.com

[Vuex] ️ Vuex-Persistedstate 사용법.

Light9639 — Wed, 15 Feb 2023 11:33:41 +0900

웹 사이트를 이용하는 유저들은 브라우저를 사용하면서 뒤로가기 버튼을 클릭하여 화면이 새로고침이 되어 버리는 경우, 또는 다른 이유로 화면을 새로고침하는 경우가 있다. 이렇게 되면 Vuex의 store.js에 있거나 상태가 변경된 모든 값들이 초기화 되어버린다.

이러한 상황을 방지하기 위해 JavaScript의 localstoarge 관련 함수를 사용하기도 하지만, Vuex의 자료들을 localstorage로 자동으로 저장시키고 다시 사용할 수 있게끔 도와주는 플러그인이 Vuex-Persistedstate다.

그럼 이번 글에서는 Vuex-Persistedstate의 사용법에 대해 포스팅해보겠다.

Vuex-Persistedstate 설치하기

우선 Vuex-Persistedstate를 설치합니다. 명령어는 다음과 같습니다.

Shell

$ npm install --save vuex-persistedstate
# or
$ yarn add vuex-persistedstate

필요한 데이터만 저장하기

Vue로 만든 프로젝트의 규모가 커져서 모든 state값을 localstorage에 저장할 경우 속도가 느려지는 문제가 발생할 수 있기 때문에, 필요한 모듈만 선택해서 저장하는 것이 좋다.

밑의 코드대로 작성하면 auth와 cart 모듈의 state값만 저장되고 다시 사용할 수 있게 된다.

JavaScript

import createPersistedState from 'vuex-persistedstate';

const store = createStore({
    state() {
        return {
            value: 0,
            more: {},
        }
    },
	plugins: [
        createPersistedState({
            // 여기에 적은 state 값만 저장됨
            paths: ["value"],
        })
    ],
    {...options}
})

export default store

예제 파일

Vuex를 사용하여 만든 Counter 연습 페이지 예제 파일.

GitHub - light9639/Vuex-Counter: ⚗️ Vuex로 만든 Counter 연습 페이지입니다.

⚗️ Vuex로 만든 Counter 연습 페이지입니다. Contribute to light9639/Vuex-Counter development by creating an account on GitHub.

github.com

Vuex-Persistedstate 공식 문서

Vuex-Persistedstate의 공식 Github 문서로 다양한 예제 및 사용법이 적혀있다.

GitHub - robinvdvleuten/vuex-persistedstate: Persist and rehydrate your Vuex state between page reloads.

Persist and rehydrate your Vuex state between page reloads. - GitHub - robinvdvleuten/vuex-persistedstate: Persist and rehydrate your Vuex state between page reloads.

github.com

[CSS] ️ Scroll CSS 작성법.

Light9639 — Tue, 14 Feb 2023 17:51:34 +0900

Tistory 블로그의 CSS를 수정하면서 사용했던 스크롤 CSS 문법을 정리해 보려고 한다. 우선 스크롤바에는 밑의 3가지 CSS 코드를 추가하여 스타일을 적용할 수 있습니다.

CSS

# 스크롤바 영역에 대한 설정
::-webkit-scrollbar

# 스크롤바 막대에 대한 설정
::-webkit-scrollbar-thumb

# 스크롤바 뒷 배경에 대한 설정
::-webkit-scrollbar-track

이처럼 영역::코드 ( ex : body::코드 or .container::코드 )로 스크롤 적용 대상을 제한하여 사용할 수 있다.

위의 내용을 바탕으로 스크롤 CSS를 Tistory의 style.css에 추가해 보았다.

CSS

body::-webkit-scrollbar {
  width: 12px; /* 스크롤바의 너비 */
}
body::-webkit-scrollbar-thumb {
  /* height: 30%; 스크롤바의 길이 */
  background-color: #9bbcf2; /* 스크롤바의 색상 */
  border-radius: 8px; /* 스크롤바 둥글기 */
}
body::-webkit-scrollbar-track {
  background-color: rgba(33, 122, 244, .1); /* 스크롤바 뒷 배경 색상*/
}

참고 문헌

[CSS] Ellipsis를 이용하여 말줄임 처리하기.

Light9639 — Tue, 14 Feb 2023 17:39:36 +0900

웹 개발을 하다보면, 디자인적인 측면에서 말줄임(...)을 사용해야 하는 경우가 많다. 왜냐하면 이렇게 말줄임표를 사용해야 디자인이 더 깔끔해 보이기 때문이다. 말줄임 CSS 문법은 다음과 같다.

CSS

overflow: hidden; : 박스에서 넘쳐난 텍스트 숨기기
white-space: nowrap; : 줄바꿈이 없어짐
text-overflow: ellipsis; : ... 말줄임 효과
-webkit-line-clamp : '글자'; : '글자'의 최대 라인수를 결정
-webkit-box-orient: vertical; : 영역 박스의 내의 정렬을 수직으로 만든다.
word-break: break-all; : 어절이 유지되지 않고 끊어져서 줄바꿈 됨

말줄임 문법

한줄만 나타내기

결과)

Lorem, ipsum dolor sit amet consectetur...

CSS

.ellipsis1 {
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

2줄까지만 나타내기

결과)

Lorem, ipsum dolor sit amet consectetur

adipisicing elit. Molestias vel excepturi...

CSS

.ellipsis2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
}

3줄까지만 나타내기

결과)

Lorem, ipsum dolor sit amet consectetur

adipisicing elit. Molestias vel excepturi,

ullam dignissimos laboriosam, tempore...

CSS

.ellipsis3 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
}

주의사항

-webkit문법은 구글이나 사파리에서만 사용이 가능하기 때문에, -webkit 문법을 사용할 때는 반드시 브라우저의 지원 범위를 확인하고 사용해야 한다.

참고 문헌

[Node.js] ️ (import / export), (require / exports) 문법 사용법.

Light9639 — Tue, 14 Feb 2023 16:59:03 +0900

(import / export), (require / exports) 문법

자바스크립트에서의 대표적인 파일 입출력 방법은 CommonJS 와 ES6 문법이 있습니다. 서로 사용법이 다르며, 특징과 차이점이 있다. 그럼 이 두가지 차이점에 대해 포스팅해 보겠다.

ES6 문법 (import / export)

특징

ES6에서 새롭게 도입된 키워드입니다.
자바와 파이썬 언어 방식과 비슷합니다.
파일 시작 부분에서만 호출 가능
필요한 모듈 부분만 선택하고 로드할 수 있어 더 선호 require() 에 비해 성능이 우수하며 메모리 절약

사용법

JavaScript

import : 가져오기
export : 내보내기
export defaults : 내보내기

Tip

출력할 때 export(ES6) 와 exports(CommonJS)를 헷갈리지 않도록 주의해야 합니다.

JavaScript

/* ES6 */
import name from './module.js'

JavaScript

/* ES6 */
const name = '고양이';

export default name;

CommonJs 문법 (require / exports)

특징

NodeJS 에서 사용하고 있는 CommonJS 모듈 키워드입니다.
루비 언어 방식과 비슷합니다.
파일 어느 지점에서든지 호출 가능

사용법

JavaScript

require : 가져오기
exports : 내보내기
module.exports : 내보내기

require() : module.exports 를 리턴한다. exports는 module.exports 를 refer 한 것이고, shortcut 에 불과하다.

JavaScript

/* CommonJS  */
const name = require('./module.js');

JavaScript

/* CommonJS  */
const name = '고양이';

module.exports = name;

Node.js 에서 import 키워드 사용 방법

비록 정식적으로 노드의 CommonJS를 대체할 수는 없지만, 자바스크립트 노드 프로젝트에서 import 키워드를 사용하도록 지정 설정을 할 수 있는 방법 또한 존재한다.

과거에는 import, export를 인식시키기 위해 따로 .mjs라는 확장자를 사용해 모듈 키워드를 구분하는 방법을 사용했었다.

예를 들어 app.js 대신에 app.mjs 로 소스 파일을 만드는 식으로 말이다. 하지만 이제는 package.json을 통해서 간편하게 설정할 수 있어서 확장자를 바꾸지 않아도 import, export를 쓸 수 있게 되었다.

JavaScript

{
    "type": "module"
}

다음은 express 모듈을 import 키워드로 받아서 서버를 실행하는 샘플 코드이다.

JavaScript

// const express = require('express');
import express from 'express';

const app = express();

app.get('/', (req, res) => {
   res.send('<h1>Hello World!</h1>');
});

app.listen(3000, () => {
   console.log('3000번 포트 서버 시작');
});

참고 문헌

[Git] VSCode Git 연동 오류 해결.

Light9639 — Tue, 14 Feb 2023 16:32:06 +0900

VSCode Git 연동 오류 해결

프론트엔드 웹개발을 하던 초창기에 갑자기 VsCode로 작성하던 텍스트 파일 commit이 에러가 일어났다. 다행히 지금은 해결되었지만 문제를 해결하게 된 사이트의 사진처럼 갑자기 소스제어에 공급자가 없다면서 VsCode 상에 커밋이 불가능하게 되었다.

당시 필자의 VsCode도 상태가 딱 저랬다. 그러나 당시에는 해결방법을 몰랐기에 한동안 방치해 두다가 작년 10월 쯤에 어떤 블로그 글을 보고 문제를 해결헀다. VSC Git 연동 오류

링크의 글을 보고 위의 사진처럼 왼쪽 툴바의 확장에 들어가서 @Builtin Git을 검색한 뒤 Git SCM 통합을 클릭했다. 당시에는 비활성화 상태였었는데 사용 버튼을 클릭했더니, 설정에 들어가니 Git is enabled를 선택할 수 있게 되었다. 이후로는 Git commit을 VsCode 상에서 사용할 수 있게 되어 매우 유용했다.

이 해결방법을 포함하여 링크에서는 7가지 경우의 수가 더 있을 수 있다고 한다.

프로젝트 폴더의 .git 파일이 삭제된 경우.
VsCode에 git 글로벌 연동이 해제된 경우.
로컬 Git이 삭제된 경우.
VsCode가 실행 가능한 git 명령을 찾을 수 없는 경우.
확장을 설치해야하는 경우.
맥의 경우 최근에 Xcode를 업데이트된 경우.
VsCode 소스트리가 해제된 경우.

만약 위의 7가지를 다했는데도 해결되지 않는다면, Git 과 VsCode를 삭제하고 재설치하는 것도 방법일 수 있다고 한다. 위 7가지 경우에 대한 자세한 해결방법은 링크에서 확인하면 된다.

참고 문헌

1VSC Git 연동 오류